将按钮+图像+文本对齐成一行 (android)

Question

我正在尝试将 3 个按钮排列在屏幕中央的一行中。每个按钮都有背景颜色、图像和图像下方的一些文本。我试过使用 LinearLayout 但我无法将图像放在按钮上。我试过 RelativeLayout，我设法让它们排成一排，但它们不在屏幕中央。有什么建议吗？

    <Button
    android:id="@+id/start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="85dp"
    android:paddingBottom="10dp"
    android:paddingLeft="25dp"
    android:paddingRight="25dp"
    android:background="@drawable/light"
    android:text="@string/start"
    android:textColor="@color/text"
    android:textSize="8pt"
    android:textStyle="bold"
    android:layout_marginTop="0dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_alignParentTop="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/image"
    android:src="@drawable/hstart"
    android:layout_alignLeft="@+id/start"
    android:layout_alignStart="@+id/start"
    android:layout_alignRight="@+id/start"
    android:layout_alignEnd="@+id/start"
    android:layout_marginRight="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="0dp" />

Answer 1

使用 LinearLayout 为每个 button/image 组合保存一个 RelativeLayout。 "Nested" 布局很常见，可以获得这种视觉效果。

Answer 2

这是您的按钮视图（your_btn_view.xml 在布局文件夹中）：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:clickable="true"
    android:background="@android:drawable/btn_default"
    android:gravity="center" >

    <ImageView
        android:id="@+id/btn_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add" />

    <TextView
        android:id="@+id/btn_tv"
        android:text="text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

这是包含三个按钮的布局视图：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <include
        android:id="@+id/btn1"
        layout="@layout/your_btn_view" />

    <include
        android:id="@+id/btn2"
        layout="@layout/your_btn_view" />

    <include
        android:id="@+id/btn3"
        layout="@layout/your_btn_view" />

</LinearLayout>

然后，在您的 onCreate() 中访问并填写适当的 TextView 和 ImageView，如下所示：

@Override
public void onCreate(Bundle sIS){
    super.onCreate(sIS);
    setContentView(R.layout.that_layout_above, this, false);

    LinearLayout btn1 = (LinearLayout)findViewById(R.id.btn1);

    ((TextView)btn1.findViewById(R.id.btn_tv)).setText("my text");
    ...

将按钮+图像+文本对齐成一行 (android)

Aligning buttons+images+text in a row (android)

android

image

button

alignment