12

テキストの背景に画像を設定し、テキストの左側にアイコンを設定したいと思います。iPhone では非常に簡単ですが、Android ではボタンのサイズを変更し、アイコン + テキストの位置と距離を適切に維持する方法がわかりません。

iPhone:

iPhone

アンドロイド私はこれを持っています:

アンドロイド

xml コードは次のとおりです。

<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" />

ここからコードを取得しました。

を使用するandroid:drawableLeftと、アイコンが一番左に移動します。

ここに画像の説明を入力

セミハードコーディングされたパディングで遊んでみると、差分デバイスの外観が異なります: ( phone と table )

を追加すると、次のandroid:gravity="left|center_vertical"ようになります。

ここに画像の説明を入力

テキストは可変です。ユーザーが言語を変更すると、テキストが変更されます。

適切に行う方法は?

誰の答えにも反対票を投じたくはありませんが、質問を読んで、私がすでに試したことを提案しないでください。また、ハードコーディングされた修正がうまく機能しないことも伝えました。

これは宿題ではなく、商用ソフトウェアの一部です。

回答からの推奨コードは次のとおりです。

<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>

android:layout_marginLeft="10dip"Galaxy s4ではどのように見えると思いますか? プレビューは次のとおりです。

ここに画像の説明を入力

これは、私が尋ねたものではありません。「dip」、「dp」、または「px」は、左、上からの距離として使用しないでください。電話には HPDI があり、画面が小さく、タブレットには MDPI と広い解像度があるためです。Simple は mdpi と xxhdpi では動作しません。

Nizamの回答は、良い解決策に非常に近いです:

ここに画像の説明を入力

4

14 に答える 14

11

TextView と ImageView を内部に配置するよりも、角を丸くした RelativeLayout を使用する必要があるかもしれません。

于 2013-10-02T09:17:59.900 に答える
3

これを試してください: これに従ってください: 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>
于 2014-08-20T06:23:13.930 に答える
3

これを試して:

    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);
于 2013-10-02T10:20:57.427 に答える
1

このリンクで Button を拡張する CenteredIconButton というクラスが見つかりました。魔法のように働きました。Button 内に Image と Text Center を配置する方法。@atomicode に感謝

于 2015-04-20T14:55:06.617 に答える
1

以下のレイアウトを試してください

<?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>

drawable/round_corner_drawable は次のとおりです。

<?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>

また、画像を背景として使用する場合は、android:layout_height="wrap_content"相対レイアウトの背景として指定して設定します。

startColorps 、 、centerColorおよびに異なる色の値を設定するとendColor、背景のドローアブルにグラデーション効果が得られます。したがって、それに応じて色の値を変更します。

編集:

以下のレイアウトを試してみてください。角の丸いドローアブルを使用して、さまざまな画面サイズに収まるように編集しました。

<?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>
于 2013-10-02T09:33:24.957 に答える
1
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button Text"
    android:background="@drawable/round_background"
    android:drawableLeft="@drawable/icon"/>

xml以下のコードを名前を付けて保存し、round_background.xmldrawable フォルダーに配置します。必要に応じてこれを使用しますが、drawable フォルダーの画像を使用することもできます。

<?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>
于 2013-11-06T06:24:46.167 に答える
1

これが私が物事を行う方法です:

レイヤー

<?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>

セレクタ

<?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>

角丸

<?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>

これを相対レイアウトで使用し、その中にイメージビューとボタンを配置します

于 2013-10-02T09:48:38.190 に答える
0

この種のボタンを実装しただけです (大規模なアプリにデプロイされています)。それほど複雑ではありません: large_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>

次に、それを使用するには、 include タグを使用するだけです:

<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 は、ボタンの状態ごとに使用するさまざまなドローアブルを指すセレクターです

私は LinearLayout を使用しました。これにより、テキストとアイコンの両方をボタンの中央に配置できます。GridLayout でも実行できるはずです。テキストだけを中央に配置したい場合 (見栄えは良くないと思いますが、それはあなたの選択です)、RelativeLayout を使用します。

于 2014-03-14T17:20:17.280 に答える
0

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" />

Javaで

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

描画可能な画像は、

Bitmap bitmap= BitmapFactory.decodeResource(context.getResources(), 
    R.drawable.settings_selected);
BitmapDrawable drawable=new BitmapDrawable(getResources(), bitmap);
于 2013-10-02T09:34:27.620 に答える
0
<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" />

paddingLeft と paddingRight を使用して、iPhone のボタンとしてボタンを取得できます。

于 2013-10-02T09:46:12.627 に答える