Как создать этот тип пользовательского интерфейса

Question

Могу ли я узнать, как я могу создать этот пользовательский интерфейс, см. Рис.

Это простая линейная компоновка имеет некоторые кнопки различных размеров, или различные элементы управления изображения или что именно является это ?. Как я могу создать пользовательский интерфейс такого типа?

Answer 1

Попробуйте это. Обратите внимание, что это копия паста из моего собственного кода, и есть определенные атрибуты, которые размещены ниже этот код:

<LinearLayout 
    android:background="@drawable/nav_bar" 
    style="@style/TitleBar" > 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="4dp" 
     android:gravity="center" > 
     <ImageButton 
      style="@style/TitleBarAction" 
      android:layout_margin="2dp" 
      android:id="@+id/btnStatusUpdate" 
      android:src="@drawable/ic_tab_compose_selected" > 
     </ImageButton> 
    </LinearLayout> 
    <ImageView style="@style/TitleBarSeparator" /> 
    <TextView 
     android:id="@+id/actionbarTitle" 
     android:text="ACTIVITY" 
     android:textColor="#FFFFFF" 
     android:textSize="16sp" 
     android:textStyle="bold" 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:layout_weight="1" 
     android:gravity="left|center_horizontal|center" 
     android:padding="5dp" > 
    </TextView> 
    <ImageView style="@style/TitleBarSeparator" /> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="4dp" 
     android:gravity="center" > 
     <ImageButton 
      style="@style/TitleBarAction" 
      android:layout_margin="2dp" 
      android:id="@+id/btnStatusUpdate" 
      android:src="@drawable/ic_tab_compose_selected" > 
     </ImageButton> 
    </LinearLayout> 
    <ImageView style="@style/TitleBarSeparator" /> 
    <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="4dp" 
      android:gravity="center" > 
      <ImageButton 
       style="@style/TitleBarAction" 
       android:layout_margin="2dp" 
       android:id="@+id/btnUploadPhoto" 
       android:src="@drawable/ic_tab_camera_selected" > 
     </ImageButton> 
    </LinearLayout> 
</LinearLayout> 

элементы стиля для кода выше. Это относится к вашим styles.xml:

<style name="TitleBar"> 
     <item name="android:id">@id/title_container</item> 
     <item name="android:layout_width">fill_parent</item> 
     <item name="android:layout_height">45dp</item> 
     <item name="android:gravity">center</item> 
     <item name="android:orientation">horizontal</item> 
    </style> 

    <style name="TitleBarSeparator"> 
     <item name="android:layout_width">1px</item> 
     <item name="android:layout_height">fill_parent</item> 
     <item name="android:background">USE A COLOR OF YOUR CHOICE HERE</item> 
    </style> 

Answer 2

<LinearLayout android:orientation="horizontal" ... > 
    <ImageView ... android:layout_weight="0.1" .../> 
    <TextView ... android:layout_weight="0.7" .../> 
    <ImageView ... android:layout_weight="0.1" .../> 
    <ImageView ... android:layout_weight="0.1" .../> 
</LinearLayout> 

Answer 3

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

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/RelativeLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 


    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:gravity="center_vertical" android:background="#0000ff"> 

     <ImageButton 
      android:id="@+id/imageButton1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_launcher" android:background="#0000ff"/> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:text="xxx" 
      android:textAppearance="?android:attr/textAppearanceLarge" 
      android:layout_weight="1"/> 

     <ImageButton 
      android:id="@+id/imageButton2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_launcher" android:background="#0000ff"/> 

     <ImageButton 
      android:id="@+id/imageButton3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_launcher" android:background="#0000ff"/> 

    </LinearLayout> 

</RelativeLayout> 

Answer 4

Это действующий бар. Вы можете использовать ActionBarSherlock или Google ActionBarCompat - Action Bar Compatibility пример для достижения этого взгляда