Макет Android для кнопок с изображениями

Я пытаюсь создать макет Android, который использует около 1/3 экрана для названия приложения. А затем для других 2/3 у него есть 6 равномерно расположенных кнопок в рядах по 2, в 3 столбцах. В каждой кнопке будет содержаться текст и изображение, которое потенциально может различаться по размеру. Я много читал и еще не придумал идеальный способ для этого. У меня есть пример, который в основном работает, за исключением того, что некоторые из моих кнопок имеют разные размеры, поэтому это не работает (кнопки разных размеров). Кроме того, я понятия не имею, будет ли он работать с телефонами разных размеров. В любом случае, если бы кто-нибудь мог взглянуть на этот макет xml и, возможно, предложить лучший способ. Спасибо.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget30"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/green6"
android:orientation="vertical"
android:padding="5dp" >

<RelativeLayout
    android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/border"
    android:padding="5dp" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/widget31"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:text="Title Will Go Here"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="@color/green6"
                android:textSize="35sp"
                android:textStyle="bold" 
                android:shadowColor="@color/black"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="1"
                />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="4dp" >

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="10dp"
                android:paddingRight="5dp" >

                <Button
                    android:id="@+id/button1"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/search"
                    android:text="Search by Food"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="5dp"
                android:paddingRight="10dp" >

                <Button
                    android:id="@+id/button2"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/search2"
                    android:text="Search by Substitute"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="4dp" >

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="10dp"
                android:paddingRight="5dp" >

                <Button
                    android:id="@+id/button3"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/browse"
                    android:text="Browse by Category"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="5dp"
                android:paddingRight="10dp" >

                <Button
                    android:id="@+id/button4"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/award"
                    android:text="Most Popular"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="10dp"
                android:paddingRight="5dp" >

                <Button
                    android:id="@+id/button5"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/share"
                    android:text="Sync with Online Database"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:paddingLeft="5dp"
                android:paddingRight="10dp" >

                <Button
                    android:id="@+id/button6"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/custom_button"
                    android:drawableTop="@drawable/plus"
                    android:text="Submit New Food Substitute"
                    android:textColor="@color/green6"
                    android:textStyle="bold" />

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>


person S.A.Jay    schedule 10.03.2012    source источник
comment
Китайская пословица: одна картинка стоит десяти тысяч слов.   -  person Adil Soomro    schedule 10.03.2012


Ответы (1)


Я бы использовал LinearLayout верхнего уровня и указал layout_weight равным 1 для заголовка приложения. Затем я бы использовал DashboardLayout со значением layout_weight 2 для сетки 2x3 кнопок изображений.

DashboardLayout использовался в приложении Google I/O 2011, также известном как IOSched, доступном по адресу http://code.google.com/p/iosched/ . Я бы порекомендовал загрузить и просмотреть этот код для некоторых примеров того, как работает этот макет. Обратите внимание, что вам придется скопировать этот файл DashboardLayout.java в свой проект.

Вы можете сделать это еще проще, если используете ActionBar — просто укажите заголовок для своей активности в AndroidManifest.xml, а затем установите DashboardLayout в корне вашего макета. Название приложения не будет близко к 1/3, но оно, вероятно, лучше подойдет для приложений Honeycomb/ICS.

person louielouie    schedule 10.03.2012
comment
Это выглядит очень интересно. Почему я до сих пор не слышал о компоновке приборной панели? Я попробую это позже сегодня или завтра, и я вернусь к этой теме и расскажу вам все, если это сработало. - person S.A.Jay; 10.03.2012
comment
Спасибо, я думаю, это сделает то, что мне нужно. Ценю вашу помощь. Есть ли место, где перечислены все новые макеты Android, такие как этот макет приборной панели? - person S.A.Jay; 12.03.2012
comment
Возможно, вы захотите взглянуть на шаблоны пользовательского интерфейса Android. Коллекция Шаблоны пользовательского интерфейса для смартфонов — это, вероятно, то, что вы ищете. за. - person louielouie; 14.03.2012