Как выровнять изображения в определенных положениях экрана, сохраняя согласованность при разных разрешениях экрана? - PullRequest
2 голосов
/ 12 декабря 2011

У меня возникли проблемы с выравниванием кнопок. Я хочу получить их (примерно) на 1/3 и 2/3 моего экрана (я предоставил скриншот ниже, чтобы прояснить ситуацию) Мой код следующий:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">

    <Button 
        android:text="@string/topbutton"
        android:background="@drawable/silvertablesbuttonbgkort"
        android:id="@+id/topbutton"
        android:layout_alignParentRight="true" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical">
    </Button>

    <Button 
        android:text="@string/midbutton"
        android:background="@drawable/silvertablesbuttonbglang"
        android:id="@+id/midbutton"
        android:layout_alignParentRight="true" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical">
   </Button>


<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

Я пытаюсь сделать так, чтобы это выглядело так: (Извините, если здесь публикуются макеты скриншотов, я просто не могу придумать лучшего способа прояснить, что я пытаюсь делаем)

Кажется, я не могу публиковать изображения, потому что я здесь слишком новичок ... Так что вот ссылка на скриншот: http://i.imgur.com/l3b3z.png

Моя первоначальная идея заключалась в том, чтобы просто обернуть вертикальную линейную компоновку вокруг двух кнопок и поместить пустые текстовые изображения над ними и между ними, что на самом деле сработало бы, если бы это приложение предназначалось для работы на одном экране, но я довольно уверен, что это испортит все телефоны с другим разрешением экрана. Я решил эту проблему для панели внизу, используя относительное расположение с android: layout_alignParentBottom = "true", но я не могу придумать способ привязки к 1/3 или 2/3. Есть ли способ сделать это, который будет работать с различными разрешениями экрана?

Изменить: Я решил свою проблему! Я попытался опубликовать это как ответ, но не могу пока через 8 часов. Будет делать тогда, но сейчас я просто выложу это как правку здесь:

Я поместил TextView размером 0x0 в середине экрана и поместил RelativeLayouts сверху и снизу, заполняя экран. Затем я поместил два TextView размером 0x0 в середину этих макетов, а внутри этих макетов два новых RelativeLayouts. Один ниже самого высокого TextView, один выше самого низкого. Я разместил свои кнопки в центре этих макетов. Он работает как шарм и не полагается ни на что, кроме самого кода. Это мой код сейчас:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">


    <TextView 
        android:text=" "
        android:id="@+id/ankermidden"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

    <RelativeLayout
        android:id="@+id/ankerveldboven"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ankermidden">

                <TextView 
                    android:text=" "
                    android:id="@+id/ankerboven"
                    android:layout_centerVertical="true"
                    android:layout_width="0dp"
                    android:layout_height="0dp">
                </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidboven"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/ankerboven">

                 <Button 
                    android:text="@string/topbutton"
                    android:background="@drawable/silvertablesbuttonbgkort"
                    android:id="@+id/topbutton"
                    android:layout_alignParentRight="true"
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>

</RelativeLayout>


<RelativeLayout
        android:id="@+id/ankerveldonder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ankermidden">

    <TextView 
        android:text=" "
        android:id="@+id/ankeronder"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidonder"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/ankeronder">      

                <Button 
                    android:text="@string/midbutton"
                    android:background="@drawable/silvertablesbuttonbglang"
                    android:id="@+id/midbutton"
                    android:layout_alignParentRight="true" 
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>       

 </RelativeLayout>

<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

Так что да, это было проще, чем я думал.

Ответы [ 2 ]

1 голос
/ 12 декабря 2011

Я нашел решение!Тот, который полностью относителен к самому себе и совсем не зависит от пикселей или пикселей плотности.

Я поместил TextView размером 0x0 в середине экрана и поместил RelativeLayouts поверх него и под ним., заполняя экран.

Затем я поместил два TextView размером 0x0 в середину этих макетов, а внутри этих макетов - два новых RelativeLayouts.Один ниже самого высокого TextView, один выше самого низкого.Я поместил свои кнопки в центр этих макетов.

Он работает как шарм и не полагается ни на что, кроме самого кода.

Теперь это мой код:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">


    <TextView 
        android:text=" "
        android:id="@+id/ankermidden"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

    <RelativeLayout
        android:id="@+id/ankerveldboven"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ankermidden">

                <TextView 
                    android:text=" "
                    android:id="@+id/ankerboven"
                    android:layout_centerVertical="true"
                    android:layout_width="0dp"
                    android:layout_height="0dp">
                </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidboven"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/ankerboven">

                 <Button 
                    android:text="@string/topbutton"
                    android:background="@drawable/silvertablesbuttonbgkort"
                    android:id="@+id/topbutton"
                    android:layout_alignParentRight="true"
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>

</RelativeLayout>


<RelativeLayout
        android:id="@+id/ankerveldonder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ankermidden">

    <TextView 
        android:text=" "
        android:id="@+id/ankeronder"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidonder"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/ankeronder">      

                <Button 
                    android:text="@string/midbutton"
                    android:background="@drawable/silvertablesbuttonbglang"
                    android:id="@+id/midbutton"
                    android:layout_alignParentRight="true" 
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>       

 </RelativeLayout>

<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

Так что да, это было проще, чем я думал.

Билл Гэри предложил использовать поле в dp, которое сохраняло бы одинаковые пропорции на экранах разных размеров, но через многоэкспериментируя, вещи снова выглядят странно для меня на разных экранах снова.

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

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

0 голосов
/ 12 декабря 2011

попробуйте это, возможно, вам придется настроить dp android: layout_marginTop = "150dp"

<Button 
    android:text="@string/topbutton"
    android:background="@drawable/silvertablesbuttonbgkort"
    android:id="@+id/topbutton"
    android:layout_alignParentRight="true" 
    android:layout_marginTop="150dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center|center_vertical">
</Button>
...