如何在横向模式下制作UI

时间:2014-07-21 08:06:11

标签: android xml layout landscape screen-orientation

我有一个在纵向模式下看起来很完美但在横向模式下看起来最差的布局,我还为横向创建了不同的文件夹。现在仍然能够完美地适应所有风景画面。

这是xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center"
android:orientation="vertical"
android:padding="5dp" >

<RelativeLayout
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray"
    android:gravity="center" >

    <TextView
        android:id="@+id/head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Choose Mode"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#ffffff" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/question_image" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/menu_image" />

</RelativeLayout>

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center" >

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

                <Button
                    android:id="@+id/button1"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="1" />

                <Button
                    android:id="@+id/button2"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="2" />

                <Button
                    android:id="@+id/button3"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="3" />

                <Button
                    android:id="@+id/button4"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="4" />

                <Button
                    android:id="@+id/button5"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="5" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button6"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="6" />

                <Button
                    android:id="@+id/button7"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button8"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />

                <Button
                    android:id="@+id/button9"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="9" />

                <Button
                    android:id="@+id/button10"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button11"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />

                <Button
                    android:id="@+id/button12"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button13"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="9" />

                <Button
                    android:id="@+id/button14"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button15"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button16"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button17"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button18"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button19"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button20"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button21"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button22"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button23"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button24"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button25"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>
        </TableLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:gravity="center" >

            <ImageView
                android:id="@+id/imageButton1"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_weight="0.25"
                android:background="@drawable/reset" />

            <ImageView
                android:id="@+id/imageButton2"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/check_solution" />

            <ImageView
                android:id="@+id/imageButton3"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/hint" />

            <ImageView
                android:id="@+id/imageButton4"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/next" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

肖像

enter image description here

对于风景 enter image description here

我是否需要从这四个图标中移除重量,帮助我:(

2 个答案:

答案 0 :(得分:3)

我看到的主要问题是ImageView&#39。 首先,永远不要使用&#34; fill_parent&#34;值,因为它们已被弃用,而是使用&#34; match_parent&#34;。

然后,你需要从它们中移除重量属性。这就是为什么他们试图通过拉伸来填充屏幕,这使得它们看起来不成比例。

对图像使用固定的dp(密度像素)大小(宽度/高度),以便它们保持一定比例,无论大小或显示质量如何。 然后,您可以使用布局 layout-land 文件夹为横向和纵向使用不同的大小和元素显示,两者都存储具有相同名称的不同布局组合,以便它们获得由android框架根据方向调用。

您有关于支持多种屏幕尺寸/方向(更具体地说)here的官方文档。

答案 1 :(得分:3)

在最后4个按钮的imageview上添加此属性 -

android:adjustViewBounds="true" 
android:scaleType="fitCenter"