需要按钮根据屏幕宽度动态展开

时间:2013-07-17 15:22:30

标签: android android-layout tablelayout android-button android-tablelayout

我正在开发一款最初具有静态配置按钮布局的应用。现在发生的事情是,在更宽的屏幕上(SIII,Note,Tablets等),表格布局在所有这些屏幕上保持相同的大小,并且不会动态地“扩展”。如何调整此代码以实现此目的?

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0dp"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/stoolRelative"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/stoolmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menustool" >
            </ImageButton>

            <TextView
                android:id="@+id/stoolText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/stoolmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/stoolmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/foodRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/foodmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menufood" >
            </ImageButton>

            <TextView
                android:id="@+id/foodText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/foodmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/foodmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/PainRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/painmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menupain" >
            </ImageButton>

            <TextView
                android:id="@+id/painText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/painmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/painmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15px"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/moodRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/moodmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menumood" >
            </ImageButton>

            <TextView
                android:id="@+id/moodText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/moodmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/moodmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/medsTakeRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/medstakemenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menumeds" >
            </ImageButton>

            <TextView
                android:id="@+id/medsTakeText"
                android:layout_width="70px"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/medstakemenu"
                android:layout_alignRight="@+id/medstakemenu"
                android:layout_below="@+id/medstakemenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/medstakenmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/otherIssuesRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/othermenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuother" >
            </ImageButton>

            <TextView
                android:id="@+id/otherIssuesText"
                android:layout_width="100px"
                android:layout_height="wrap_content"
                android:layout_below="@+id/othermenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/otherissuesmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15px"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/historyRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/historymenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuhistory" >
            </ImageButton>

            <TextView
                android:id="@+id/historyText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/historymenu"
                android:layout_centerHorizontal="true"
                android:gravity="center_horizontal"
                android:layout_marginTop="5px"
                android:text="@string/historymenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/historyRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/academymenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuacademy" >
            </ImageButton>

            <TextView
                android:id="@+id/academyText"
                android:layout_width="120px"
                android:layout_height="wrap_content"
                android:layout_below="@+id/academymenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/ibdacademymenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/myPassPortRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/mypassportmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menupassport" >
            </ImageButton>

            <TextView
                android:id="@+id/myPassportTextUp"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/mypassportmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/myibdpassportmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
            <!--
        <TextView 
        android:layout_below="@+id/myPassportTextUp"
        android:text="Passport" android:layout_height="wrap_content" 
        android:layout_width="wrap_content" android:id="@+id/myPassportTextDown" 
        ></TextView>
            -->
        </RelativeLayout>
    </TableRow>
</TableLayout>

编辑:这是当前布局的屏幕截图

http://imgur.com/fHEFn1H

随着屏幕变宽,表格保持这个精确的尺寸,两边的边距都会增加。想法?

2 个答案:

答案 0 :(得分:1)

每次TableRow更改/添加

android:layout_weight="1"
android:gravity="center_vertical"

每次RelativeLayout更改/添加

android:layout_weight="1"

答案 1 :(得分:0)

您需要动态(以编程方式)调整布局元素的位置。例如,如果我们在TextViews中有2 LinearLayout,我们可以向OnGlobalLayoutListener添加LinearLayout

myLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(ViewTreeObserver.OnGlobalLayoutListener)

在这个监听器中,我们可以访问布局元素的宽度和高度。因此,如果我们需要定位TextViews(在屏幕宽度上均匀分布),我们将执行以下操作:

int width = myLinearLayout.getWidth();
int lMarginTextView = (width - myTextView1.getWidth() - myTextView2.getWidth()) / 3;
LinearLayout.LayoutParams paramsTV = new LinearLayout.LayoutParams(     
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
paramsTV.leftMargin = lMarginTextView;

myTextView1.setLayoutParams(paramsTV);
myTextView2.setLayoutParams(paramsTV);