Справка по макету Android (аналогично Venmo)

Question

Я новичок в Android и пытаюсь понять, как правильно выбрать конкретный макет?Может ли кто-нибудь объяснить, какой макет использует Venmo для своего первого экрана приложения Android (большая часть левого изображения находится по следующей ссылке: http://30.media.tumblr.com/tumblr_lak5yachMv1qcl8xuo1_500.png)

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

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http``://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:id="@+id/tableLayout1" 
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#fff"
android:scrollbars="none">
<TableRow 
    android:layout_height="wrap_content" 
    android:id="@+id/tableRow1">
    <ImageButton 
        android:layout_height="wrap_content" 
        android:id="@+id/imageButton5" 
        android:background="@drawable/icon" 
        android:layout_width="wrap_content"
        android:layout_weight="1">
    </ImageButton>
</TableRow>    
<TableRow 
    android:layout_height="wrap_content" 
    android:id="@+id/tableRow2">
        <TextView 
            android:text="TextView" 
            android:id="@+id/textView1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:layout_weight="1">
        </TextView>
</TableRow>
<TableRow 
    android:id="@+id/tableRow3" 
    android:layout_height="wrap_content"
    android:layout_margin="0dip"
    android:padding="0px"
    android:background="#ff6600">
        <ImageButton 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton1" 
            android:background="@drawable/icon"
            android:gravity="left"
            android:layout_weight="1">
        </ImageButton>
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton2" 
            android:background="@drawable/icon"
            android:gravity="right"
            android:layout_weight="1">
        </ImageButton>
</TableRow>
<TableRow 
    android:id="@+id/tableRow4" 
    android:layout_height="wrap_content">
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton3" 
            android:background="@drawable/icon"
            android:gravity="left"
            android:layout_weight="1">
        </ImageButton>
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton4" 
            android:background="@drawable/icon"
            android:gravity="right"
            android:layout_weight="1">
        </ImageButton>
</TableRow>
</TableLayout>

Что я пытаюсь выяснить:

1. Как масштабировать ImageButton до 50% ширины экранаи высота
2. как иметь гибкую высоту ImageButton
3. Как избавиться от полей или отступов по краям так, чтобы ImageButton прилипал к стене и друг к другу.
4. Является ли TableLayout хорошим подходом для этого макета?
5. Существуют ли рекомендации по созданию изображений для ImageButton?

Спасибо за помощь.

Answer 1

Я разработчик приложения Venmo для Android.

Другой ответ предлагает использовать GridLayout, который может работать лучше, но приложение Venmo на самом деле использует макет таблицы.

Здесьответы на каждый отдельный вопрос ...

1. Чтобы ваши изображения масштабировались до равной ширины, вам нужно задать для layout_width 0dp, а затем установить для android: layout_weight значение 1.
2. Чтобы получить одинаковую высоту, задайте layout_height в ImageButton для заполнения родительского элемента, а затем установите вес каждой строки таблицы равным 1.
3. Я не совсем уверен, с каким полем или отступом вы столкнетесь.Если вы масштабируете ImageButtons и TableRows, как я уже упоминал выше, это не должно быть проблемой.
4. Я не уверен в этом.GridLayout может работать лучше, но я не сталкивался с какими-либо проблемами с использованием TableLayout.
5. Официальных рекомендаций не существует, но я предлагаю создавать состояния для ваших элементов рисования, чтобы пользователь мог сказать, когда они нажимаюткнопка.

Вот пример кода того, как приложение Venmo создает сетку:

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

<TableRow android:layout_weight="1">

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/top_left"
        android:layout_marginRight="2sp"
        android:layout_marginBottom="2sp"
        android:background="@drawable/button"/>             

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent"
        android:src="@drawable/top_right"
        android:layout_marginBottom="2sp"
        android:background="@drawable/button"/> 

</TableRow>

<TableRow android:layout_weight="1">

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/bottom_left"
        android:layout_marginRight="2sp"
        android:background="@drawable/button"/>

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/bottom_right"
        android:background="@drawable/button"/>

</TableRow></TableLayout>

Имейте в виду, что если экран когда-либо будет физически меньше, чем нарисованный вами ImageButton, вы ''собирается столкнуться с проблемами.Кроме того, если вы сделаете это, вы определенно захотите создать отдельный макет для альбомной ориентации.

Answer 2

Вместо этого используйте gridLayout, а для поля есть атрибут, который управляет им. Если у вас есть только 4 изображения, они будут отображаться соответствующим образом (те 50%, которые вам нужны), если вы используете макет сетки ... урок gridView довольно хорош на самом деле ... посмотрите http://developer.android.com/resources/tutorials/views/hello-gridview.html