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

1

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

См. следующий снимок экрана

Изображение 174551

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

Update:

Забудьте о фоновых изображениях и верхнем баре. Мне требуются 6 изображений и текстовых просмотров. В нижнем изображении twobirds с Tweets (167), Lists, Mentions, Retweets и т.д.,

  • 0
    чувак, что такое textView и изображение? например - где две птицы и текст (Tweets (167)) или внизу экрана? где текст = # сейчас играет?
  • 0
    @Peter: Извините, чтобы упомянуть. Забудьте про фоновое изображение и все. Я хочу эти 6 изображений и текстовых обзоров. Спасибо
Теги:
android-layout
design

3 ответа

1
Лучший ответ

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

Вы можете найти варианты ActionBar и Dashboard в источниках приложения Google IO. ActionBar в файле actionbar.xml (и HomeActivity.java, ActivityHelper.java), Личный кабинет в файле fragment_dashboard.xml (и DashBoard.java).

Поделиться
2

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

Для моего приложения я использовал 4 ImageButtons, но принцип одинаковый для 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.

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

Поделиться
0

im уверен, он может быть создан следующим образом:

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 our one object . image+text
    next : TextView text = new TextView(this);
    text.setText("tweets"); // or get from array 
    ///image it 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 объектов u должен запустить его в цикле: весь код = "a"; поэтому

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню