Как спроектировать интерфейс Twitter для Layout в Android

Question

В моем приложении для Android я хочу создать макет точно так же, как макет в твиттере, с изображением и текстом .

Смотрите следующий скриншот

Пожалуйста, помогите мне с этим. Как я могу разработать этот макет?

Обновление:

Забудьте о фоновых изображениях и верхней панели. Мне требуются 6 изображений и текстовые просмотры. На изображении ниже две птицы с твитами (167), списками, упоминаниями, ретвитами и т. Д.,

Answer 1

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

Для своего приложения я использовал 4 кнопки ImageButton, но принцип заключается вто же самое для 4 или 6 кнопок.

Это мой макет XML:

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

<RelativeLayout 
    android:id="@+id/actionbar_layout" 
    android:layout_width="fill_parent" 
    android:layout_height="45dip"
    android:background="@drawable/actionbar_background"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/tekst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="App name"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        android:layout_marginLeft="5dp"
        android:textStyle="bold"/>

</RelativeLayout>

<RelativeLayout 
    android:id="@+id/button_layout" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_below="@id/actionbar_layout">

    <ImageButton
        android:id="@+id/button_schedule"
        android:src="@drawable/schedule_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#FFFFFF"
        />

    <TextView
        android:id="@+id/text_schedule"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Rooster"
        android:textSize="20dp"
        android:layout_below="@id/button_schedule"
        android:gravity="center" 
        />

    <ImageButton
        android:id="@+id/button_locations"
        android:src="@drawable/locations_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:background="#FFFFFF"        
        android:layout_below="@id/text_schedule"
        />

    <TextView
        android:id="@+id/text_locations"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Links"
        android:textSize="20dp"
        android:layout_below="@id/button_locations"
        android:gravity="center"
        />

    <ImageButton
        android:id="@+id/button_rss"
        android:src="@drawable/rss_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#FFFFFF"
        android:layout_toRightOf="@id/button_schedule"
        android:layout_alignParentRight="true" 
        />

    <TextView
        android:id="@+id/text_rss"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="RSS"
        android:textSize="20dp"
        android:layout_toRightOf="@id/text_schedule"
        android:layout_below="@id/button_rss"
        android:layout_alignParentRight="true"
        android:gravity="center"
        />

    <ImageButton
        android:id="@+id/button_settings"
        android:src="@drawable/settings_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:background="#FFFFFF"
        android:layout_toRightOf="@id/text_locations"
        android:layout_below="@id/text_schedule"
        android:layout_alignParentRight="true" 
        />

    <TextView
        android:id="@+id/text_settings"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Instellingen"
        android:textSize="20dp"
        android:layout_toRightOf="@id/text_locations"
        android:layout_below="@id/button_settings"
        android:layout_alignParentRight="true" 
        android:gravity="center"
        />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/twitter_layout"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/button_layout">

   <Gallery android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:id="@+id/gallery"           
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true">    
   </Gallery>
</RelativeLayout>     

Я вставил весь файл, поэтомуВы можете увидеть, как я реализовал свою панель действий.Но вам нужен второй тег RelativeLayout.

Вы выравниваете свои кнопки / текстовые представления с помощью атрибутов "android: layout_toRightOf" и "android: layout_below".

Ваша первая кнопка простая,второй (тот, что справа) вы выравниваете с помощью "android: layout_toRightOf =" @ id / first_button "

Третья кнопка (ниже первой кнопки) может быть выровнена с помощью" android: layout_below = "@ id/ first_button "

То же самое относится и к текстовым представлениям, просто используйте layout_toRightOf и layout_below для их выравнивания.Атрибуты применяются только к RelativeLayout.

Надеюсь, это немного вам поможет.

Answer 2

То, что вы хотите сделать, называется шаблоном Dashboard.

Вы можете найти реализацию шаблонов ActionBar и Dashboard в источниках приложения Google IO . Панель действий в файле actionbar.xml (и HomeActivity.java , ActivityHelper.java ), панель инструментов в файле фрагмент_dashboard.xml ( и DashBoard.java ).

Answer 3

Я уверен, что это можно создать так:

image and textView mustBe on  layout - so :
    //start "a" code
    LinearLayout oneObject ;
    oneObject= new LinearLayout(this);
    //need set to vertical mode  
    oneObject.setOrientation(LinearLayout.VERTICAL);
    //it's our one object . image+text
    next : TextView text = new TextView(this);
    text.setText("tweets"); // or get from array 
    ///image it's can be what you want - button, layout, textView(-____-) 
    // just need set on background new image . iget button - for normal clicking ;//
    ImageButton image = new ImageButton(this);
    image.setImageResource(r.drawable.blabla)
    oneObject.addView(image);
    oneObject.addView(text);
//also u need create 2 columns and add to this columns our object

//for size of oneObject - use LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(curWidth/2,curHeight/6); curWidth and curHeight - its my resolution of screen.
//end "a" code

для создания 6 объектов вы должны запустить его в цикле: all code = "a";так что

for(int i = 0;i<6;i++)
{
 a/// where a all our code
}

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