Как сделать пользовательский интерфейс в ландшафтном режиме

У меня есть макет, который идеально выглядит в портретном режиме, но хуже всего в ландшафтном режиме. Я также создал другую папку для альбомной ориентации. Тем не менее, теперь можно сделать его идеальным для всех экранов в альбомной ориентации.

Вот 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>

For portrait

введите здесь описание изображения

Для альбомной ориентации введите здесь описание изображения

Мне нужно убрать вес с этих четырех значков, помогите мне :(


android xml layout landscape screen-orientation
person Maveňツ    schedule 21.07.2014    source источник
comment
Да, я бы предпочел не использовать веса. Используйте пиксели плотности и соответствующим образом настройте вид.   -  person Bijay Koirala    schedule 21.07.2014
comment
Вы можете увидеть ответ здесь: stackoverflow.com/a/4858052/3098590   -  person ihsanbal    schedule 21.07.2014

Ответы (2)


arrow_upward
3
arrow_downward

Основная проблема, которую я вижу, это ImageView. Во-первых, никогда не используйте значения «fill_parent», поскольку они устарели, вместо этого используйте «match_parent».

Затем вам также необходимо удалить из них свойство веса. Вот почему они пытаются заполнить экран растягиванием, что делает их непропорциональными.

Используйте фиксированный размер dp (пиксель плотности) (ширину/высоту) для изображений, чтобы они сохраняли пропорции, независимо от размера или качества отображения. Затем вы можете использовать разные размеры и отображение элементов как для альбомной, так и для книжной ориентации, используя папки layout и layout-land, обе из которых хранят разные композиции макетов с одинаковыми именами, чтобы они вызывается платформой Android в зависимости от ориентации.

У вас есть официальная документация о поддержке нескольких размеров экрана/ориентации (точнее) здесь.

person SuppressWarnings    schedule 21.07.2014

arrow_upward
3
arrow_downward

на изображении последних 4 кнопок добавьте эти атрибуты -

android:adjustViewBounds="true" 
android:scaleType="fitCenter"
person Ratul Ghosh    schedule 21.07.2014