使用TextView XML对齐图像按钮

Question

如何将箭头对齐数字正上方/下方？每个箭头都需要拥有自己的线性布局吗？有没有办法设置它而不设置静态填充量？我希望它足够通用，可以在不同的设备上正确显示......

我对Android开发相对较新 - 特别是它的UI部分......所以任何帮助都会受到赞赏！

我看到的（上图）

我想看到的内容（上图）

Answer 1

您可以在LinearLayout内嵌入另一个LinearLayout（方向：垂直）（方向：水平）。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
        <ImageButton
            android:id="@+id/number_picker_up_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/up"
            android:background="@drawable/up" />

        <TextView
            android:id="@+id/one"
            android:text="100"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/OffWhite"
            android:textSize="40sp"
            />
        <ImageButton
            android:id="@+id/number_picker_down_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/down"
            android:background="@drawable/down" />
    </LinearLayout>

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/number_picker_up_two" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/up"
            android:background="@drawable/up" />

        <TextView
            android:id="@+id/two"
            android:text="100"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/OffWhite"
            android:textSize="40sp"
            />
        <ImageButton
            android:id="@+id/number_picker_down_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/down"
            android:background="@drawable/down" />
    </LinearLayout>
 </LinearLayout>

请注意，不鼓励在布局中嵌套太多布局。参考： http://developer.android.com/training/improving-layouts/optimizing-layout.html 但是有2个布局层次结构是完全正常的。

Answer 2

您需要在水平LinearLayout内嵌套两个垂直LinearLayout s。这是我做同样事情的地方，但我每边都有空View，中间有一个空id。如果您不想要它们，可以将它们删除，并且显然会更改background， <LinearLayout android:id="@+id/mpImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_margin="10dp"> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".5"/> <LinearLayout android:id="@+id/mpLL" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="4" android:layout_gravity="left" android:orientation="vertical"> <ImageButton android:id="@+id/mpUpBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" style="@style/UpArrow" android:onClick="cycleUp"/> <TextView android:id="@+id/mpTV" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="breakfast" android:gravity="center" android:layout_gravity="center" android:textSize="40sp" android:textColor="@drawable/black"/> <ImageButton android:id="@+id/mpDownBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:onClick="cycleDown" style="@style/DownArrow"/> </LinearLayout> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".5"/> <LinearLayout android:id="@+id/catLL" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="4" android:layout_gravity="left" android:orientation="vertical"> <ImageButton android:id="@+id/catUpBtn" style="@style/UpArrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:onClick="cycleUp" /> <TextView android:id="@+id/catTV" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Beef" android:gravity="center" android:layout_gravity="center" android:textSize="40sp" android:textColor="@drawable/black" /> <ImageButton android:id="@+id/catDownBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:onClick="cycleDown" style="@style/DownArrow" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".5"/> </LinearLayout> 等等

weight

您会注意到我还使用了0dp和width来嵌套LinearLayout的{​​{1}}和View给他们分离我想要并在不同的屏幕尺寸上看起来正确。您可以根据需要更改这些内容。

Answer 3

您可以拥有嵌套布局。小心不要太多，但两个应该没问题。这是我认为你正在寻找的一个例子。由于RelativeLayout，箭头和文本应该对齐。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/number_picker_up_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/up"
            android:src="@drawable/up" />

        <TextView
            android:id="@+id/one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/number_picker_up_one"
            android:text="100"
            android:textColor="@color/OffWhite"
            android:textSize="40sp" />

        <ImageButton
            android:id="@+id/number_picker_down_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/one"
            android:layout_centerHorizontal="true"
            android:background="@drawable/down"
            android:src="@drawable/down" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/number_picker_up_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/up"
            android:src="@drawable/up" />

        <TextView
            android:id="@+id/two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/number_picker_up_two"
            android:text="100"
            android:textColor="@color/OffWhite"
            android:textSize="40sp" />

        <ImageButton
            android:id="@+id/number_picker_down_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/two"
            android:layout_centerHorizontal="true"
            android:background="@drawable/down"
            android:src="@drawable/down" />
    </RelativeLayout>

</LinearLayout>