如何在横向模式下制作 UI

Posted 2023-03-10

【中文标题】如何在横向模式下制作 UI

【英文标题】：How to make UI in landscape mode

【发布时间】：2014-07-21 08:06:10

【问题描述】：

我的布局在纵向模式下看起来很完美，但在横向模式下看起来最差，我还为横向创建了不同的文件夹。现在仍然能够使其完美适用于横向的所有屏幕。

这里是xml

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

<RelativeLayout
    android:id="@+id/RelativeLayout1"
    android:layout_
    android:layout_
    android:background="@color/gray"
    android:gravity="center" >

    <TextView
        android:id="@+id/head"
        android:layout_
        android:layout_
        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_
        android:layout_
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/question_image" />

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

</RelativeLayout>

<ScrollView
    android:layout_
    android:layout_ >

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical" >

        <TableLayout
            android:layout_
            android:layout_
            android:gravity="center" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_
                android:layout_
                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_
                android:layout_
                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_
                android:layout_
                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_
                android:layout_
                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_
                android:layout_
                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_
            android:layout_
            android:gravity="center" >

            <ImageView
                android:id="@+id/imageButton1"
                android:layout_
                android:layout_
                android:layout_weight="0.25"
                android:background="@drawable/reset" />

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

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

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

纵向

横向

我需要从这四个图标中删除weight吗，帮帮我:(

【问题讨论】：

是的，我宁愿不使用权重。使用密度像素，并相应地调整您的视图。

你可以在这里看到答案：***.com/a/4858052/3098590

【参考方案1】：

我看到的主要问题是 ImageView 的。 首先，永远不要使用“fill_parent”值，因为它们已被弃用，而是使用“match_parent”。

然后，您还需要从它们中删除 weight 属性。这就是为什么他们试图通过拉伸来填充屏幕，这使他们看起来不成比例。

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

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

【参考方案2】：

在最后 4 个按钮的图像视图上添加此属性 -

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