it-swarm.dev

Android pozadí + text + ikona tlačítka

Chtěl bych, aby byl obrázek nastaven na pozadí na text a ikona na levé straně textu. Velmi snadné v iPhone, ale nemůžu přijít na to, jak to udělat na Androidu, být změnit velikost tlačítka a udržet ikonu + pozici textu a vzdálenost správně.

iPhone:

iPhone

Android:

Android

Kód xml je:

<Button
    Android:id="@+id/btSettings"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_above="@id/tvWhatever"
    Android:layout_centerHorizontal="true"
    Android:layout_marginBottom="20dp"
    Android:background="@drawable/bt_general"
    Android:drawableTop="@drawable/settings_selected"
    Android:text="@string/settings"
    Android:textColor="#000000" />

Vzal kód z zde .

Pokud používám Android:drawableLeft, ikona přejde do nejvíce levé části. 

enter image description here

Pokud začnu hrát s semi-hardcoded výplněmi, pak budu mít odlišný pohled na diff devives: (telefon a stůl)

Pokud přidám kód Android:gravity="left|center_vertical", bude vypadat takto:

enter image description here

Text je variabilní: změní se, když uživatel změní jazyk.

Jak to udělat správně?

Nechci odpovědět na nikoho, ale přečtěte si otázku a nenavrhujte, co jsem už vyzkoušel. Také řekl, že hardcoded opravy nefungují dobře.

Toto není domácí úkol, ale komerční softwarová část.

Zde je doporučený kód z odpovědí:

<RelativeLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:background="@drawable/bt_general"
        Android:padding="20dip" >

        <ImageView
            Android:id="@+id/xIcon"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentLeft="true"
            Android:layout_centerVertical="true"
            Android:layout_marginLeft="10dip"
            Android:src="@drawable/settings_selected" />

        <TextView
            Android:id="@+id/xSettingsTxt"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_centerInParent="true"
            Android:text="@string/settings"
            Android:textColor="#000000" />
    </RelativeLayout>

Co si myslíte, jak to bude vypadat jako Android:layout_marginLeft="10dip" na Galaxy s4? Zde je náhled:

enter image description here

To není, co jsem požádal. "dip" nebo "dp" nebo "px" by neměly být používány kdekoli jako vzdálenost zleva, nahoru, protože telefony mají HPDI, menší obrazovku a tablety mají MDPI a široká rozlišení. Jednoduché nefunguje na mdpi a xxhdpi.

Nizam odpověď je velmi blízko k dobrému řešení:

enter image description here

10
user529543

Možná byste měli použít RelativeLayout se zaoblenými rohy, než dát TextView a ImageView uvnitř. 

11
subasa

Zkuste to:

    Button button = (Button) findViewById(R.id.button1);
    Spannable buttonLabel = new SpannableString(" Settings");
    buttonLabel.setSpan(new ImageSpan(getApplicationContext(), R.drawable.settings_selected,      
        ImageSpan.ALIGN_BOTTOM), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    button.setText(buttonLabel);
3
Nizam

Zkuste to takto: Postupujte takto: http://porcupineprogrammer.blogspot.in/2013/03/Android-ui-struggles-making-button-with.html

<FrameLayout
    style="?android:attr/buttonStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:drawableLeft="@Android:drawable/ic_delete"
        Android:gravity="center"
        Android:text="Button Challenge" />
</FrameLayout>
3
Amit Prajapati

Byla nalezena třída s názvem CenteredIconButton, která rozšiřuje tlačítko na tomto odkazu. Pracoval jako kouzlo. Jak mít Image a Text Center v tlačítku . Díky @atomicode

1
Visionwriter
<Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Button Text"
    Android:background="@drawable/round_background"
    Android:drawableLeft="@drawable/icon"/>

uložte níže uvedený xml kód jako round_background.xml a vložte jej do složky, kde se bude kreslit. použít, pokud chcete, ale můžete také použít obrázek z kreslicí složky.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <solid Android:color="#f5f5f5" />

    <corners Android:radius="10px" />

    <padding
        Android:bottom="0dp"
        Android:left="0dp"
        Android:right="0dp"
        Android:top="0dp" />

    <stroke
        Android:width="1dp"
        Android:color="#ccc" />

</shape>
1
CENT1PEDE

Toho jsem dosáhl následujícím kódem. Lze použít jako jednodušší alternativu k výše uvedeným řešením.

<Button Android:id="@+id/btnUserProfile"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="8dp"
    Android:layout_marginRight="8dp"
    Android:drawableLeft="@drawable/ic_user_profile"
    Android:background="#6C6C6C"
    Android:drawablePadding="8dp"
    Android:gravity="left|center_vertical"          
    Android:text="@string/my_profile"
    Android:textStyle="bold|italic" />   

zobrazení tlačítka je označeno červeně (nejde o položku seznamu, ale o tlačítko s kódem výše):

enter image description here

1
Dexter

Zde je, jak dělám věci: 

VRSTVY

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item Android:drawable="@drawable/rounded_border"/>
    <item Android:drawable="@drawable/selector_button"/>

</layer-list>

SELECTOR

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:drawable="@color/clr_grey_1" Android:state_selected="true" Android:state_window_focused="false"/>
    <item Android:drawable="@color/clr_grey_1" Android:state_selected="true"/>
    <item Android:drawable="@color/clr_grey_1" Android:state_pressed="true" Android:state_selected="false"/>
    <item Android:drawable="@color/clr_main_green" Android:state_selected="false"/>

</selector>

ROUNDED CORNER

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <solid Android:color="@color/clr_grey_2" />

    <stroke
        Android:width="1dp"
        Android:color="@Android:color/white" />

    <corners
        Android:bottomLeftRadius="8dp"
        Android:bottomRightRadius="8dp"
        Android:topLeftRadius="8dp"
        Android:topRightRadius="8dp" />

    <padding
        Android:bottom="0dp"
        Android:left="4dp"
        Android:right="0dp"
        Android:top="4dp" />

</shape>

Použijte toto pro relativní rozvržení s obrázkem a obrázkem uvnitř

1
An-droid

Pokud je šířka tlačítka: Android:layout_width="wrap_content", pak bude tento kód vypadat takto:

 <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:drawableLeft="@drawable/img name"
        Android:gravity="left|center"
        Android:text="Button" />

Jinak pokud vaše tlačítko šířka: Android:layout_width="match_parent" pak bude váš kód vypadat takto:

<Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:drawableLeft="@drawable/img name"
        Android:gravity="left|center"
        Android:text="Button"
        Android:paddingLeft="100dp" 
        />

Mimochodem, Android:paddingLeft="100dp", změňte 100 s vaší vhodnou hodnotou.

1

Zkuste níže rozložení

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="100dip"
Android:orientation="horizontal"
Android:background="@drawable/round_corners_drawable" >

<ImageView 
    Android:id="@+id/xIcon"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignParentLeft="true"
    Android:layout_marginLeft="10dip"
    Android:layout_centerVertical="true"
    Android:src="@drawable/ic_launcher"/>

<TextView
    Android:id="@+id/xSettingsTxt"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Settings"
    Android:layout_centerInParent="true" />

</RelativeLayout>

a drawable/round_corner_drawable je následující:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle" >

<solid Android:color="#310704"/>

<corners
    Android:bottomRightRadius="20sp"
    Android:bottomLeftRadius="20sp"
    Android:topLeftRadius="20sp"
    Android:topRightRadius="20sp"/>

<gradient
    Android:startColor="#99310704"
    Android:centerColor="#99310704"
    Android:endColor="#99310704"
    Android:angle="270" />

</shape>

Pokud chcete použít obrázek jako pozadí, zadejte Android:layout_height="wrap_content" a nastavte jej jako pozadí pro relativní rozvržení.

p.s. Pokud vložíte různé hodnoty barev pro startColor, centerColor a endColor, získáte efekt přechodu pro vaše pozadí. Změňte odpovídajícím způsobem hodnoty barev.

UPRAVIT:  

Vyzkoušejte níže rozložení, upravil jsem ho tak, aby se vešel do různých velikostí obrazovky se zaobleným rohovým tahem.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:padding="20dip"
Android:background="@drawable/dialog_round_corners" >

<ImageView 
    Android:id="@+id/xIcon"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_toLeftOf="@+id/xSettingsTxt"
    Android:layout_centerVertical="true"
    Android:src="@drawable/ic_launcher"/>

<TextView
    Android:id="@+id/xSettingsTxt"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Settings"
    Android:layout_centerInParent="true" />

</RelativeLayout>
1
user1952459
<Button
    Android:id="@+id/btSettings"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/back_button"
    Android:drawablePadding="5dp"
    Android:drawableLeft="@drawable/ic_launcher"
    Android:text="Settings"
    Android:padding="20dp"
    Android:textColor="#000000" />

Můžete použít paddingLeft a paddingRight dostat tlačítko jako ten v iphone

0
Piyush

Právě jsem implementoval tento druh tlačítka (a to bylo nasazeno ve velkém měřítku aplikace), není to opravdu složité: Obsah big_button.xml: 

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@drawable/large_button_background"
    Android:clickable="true"
    Android:gravity="center_horizontal"
    Android:orientation="horizontal" >

    <ImageView
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="center_vertical"
        Android:layout_marginRight="16dp"
        Android:src="@drawable/some_icon" />

    <com.my.app.widget.RobotoTextView
        Android:id="@+id/large_button_text"
        style="@style/AppName_RobotoBold"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:ellipsize="end"
        Android:focusable="false"
        Android:gravity="center_vertical"
        Android:maxLines="1"
        Android:singleLine="true"
        Android:textColor="@color/text_main"
        />

</LinearLayout>

Chcete-li jej použít, musím použít značku zahrnout: 

<include
    Android:id="@+id/large_button"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/large_button_height"
    Android:layout_marginBottom="@dimen/large_button_vertical_margin"
    Android:layout_marginLeft="@dimen/large_button_horizontal_margin"
    Android:layout_marginRight="@dimen/large_button_horizontal_margin"
    Android:layout_marginTop="@dimen/large_button_vertical_margin"
    layout="@layout/large_button" />

large_button_background je selektor, který ukazuje na různé zásuvné moduly pro každý stav tlačítka

Použil jsem LinearLayout, umožňuje jednoduše centrovat jak text, tak ikony v tlačítku. Mělo by být také proveditelné s GridLayout. Pokud se chcete soustředit jen na text (nemyslím si, že vypadá skvěle, ale to je vaše volba), použijte RelativeLayout.

0
Teovald

Můžete použít Android: paddingLeft, Android: paddingRight a layout_width na pevnou šířku k vyřešení problému.

<Button
Android:id="@+id/btSettings"
Android:layout_width="148dp"
Android:layout_height="wrap_content"
Android:paddingLeft="32dp"
Android:paddingRight="32dp"
Android:background="@drawable/bt_general"
Android:drawableLeft="@drawable/settings_selected"
Android:text="@string/settings"
Android:textColor="#000000"/>  
0
Jason Huh

Zkuste použít TextView,

<TextView
    Android:id="@+id/txtSettings"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_above="@id/tvWhatever"
    Android:layout_centerHorizontal="true"
    Android:text="@string/settings"
    Android:textColor="#000000" />

V Javě

txtView.setBackgroundResources(R.drawable.bt_general);
txtView.setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top,Drawable right,Drawable bottom);

kde je obrázek,

Bitmap bitmap= BitmapFactory.decodeResource(context.getResources(), 
    R.drawable.settings_selected);
BitmapDrawable drawable=new BitmapDrawable(getResources(), bitmap);
0
No_Rulz