android - この種のUIを作成する方法

Question

この種のUIを作成する方法を教えてください。下に投稿されている写真を参照してください。

いくつかの異なるサイズのボタン、または異なる画像コントロールを備えた単純な線形レイアウトですか、それともこれは正確には何ですか？この種のUIを作成するにはどうすればよいですか？

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

アクションバーです。ActionBarSherlockまたは Google ActionBarCompat - Action Bar Compatibilityの例を使用して、このルック アンド フィールを実現できます。

Answer 3

<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 4

私はそれを作成しようとしました。背景色を変更し、画像ボタンに画像を設定するだけです。テキストとそのスタイルを変更すると、うまくいくと思います。

<?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>