Android：如何構建類似於Android UI上顯示的標籤頁面

Question

因此，android會竭盡全力構建這個漂亮的UI指南，供大家使用。但是我沒有看到它展示如何構建這些元素的代碼示例。

標籤的UI準則可以在這裏找到。 http://developer.android.com/design/building-blocks/tabs.html。

有誰知道如何創建標籤喜歡這個？

任何幫助，將不勝感激，謝謝。

解決方案POSTED
好的，所以這裏是我在結束後可能會浪費大約10個小時試圖做出一些好看的選項卡。

首先我放棄了使用android的標籤實現的想法。出於一個原因，標籤主控件被認爲是不推薦用於操作欄，但操作欄只能在android 3上運行。

我終於明白，如​​果使用線性佈局和線性佈局的背景，我把我想要使用的圖像（使用9補丁圖像）。然後創建另一個線性佈局和文本視圖，以便將文本置於該線性佈局之上。然後讓您的線性佈局可點擊。然後，當你更先進的時候，你可以讓你的線性佈局背景成爲一個XML選擇器，你很好。 Incase你沒有得到所有這些是我的代碼。

的LinearLayout

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:background="@color/main_screen_bg_color" 
    android:orientation="horizontal" 
    android:padding="2dp" > 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_not_current" 
     android:clickable="true" 
     android:onClick="onClickSub" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 1" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_current" 
     android:clickable="true" 
     android:onClick="onClickFoodDetails" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 2" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

例選擇

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- pressed --> 
<item android:state_focused="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- focused --> 
<item android:drawable="@drawable/selected_tab" /> <!-- default --> 

希望這有助於大家。 Android標籤太麻煩了，因爲只需要從頭開始創建自己的應用程序就更容易。祝你好運！

Answer 1

做這樣的事情。

這是一個完整的工作代碼。享受

某處延伸Tabactivity

tabHost = getTabHost(); 
    Intent intent; 
    intent = new Intent().setClass(this, FirstActvity.class); 
    setupTab("NearBy", intent, R.drawable.firsttabdrawable); 
    intent = new Intent().setClass(this, SecondActivity.class); 
    setupTab("History", intent, R.drawable.secondtabdrawable); 
    intent = new Intent().setClass(this, ThirdActivity.class); 
    setupTab("Setting", intent, R.drawable.thirdtabdrawable); 

活性onCreate方法限定setupTab方法如

private void setupTab(String tag, Intent intent, int selectorId) { 
    View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null); 
    tabView.setBackgroundResource(selectorId); 
    TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent); 
    tabHost.addTab(setContent); 
    } 

view.xml用作爲

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
> 
</LinearLayout> 

和可拉伸夾firsttabdrawable.xml如

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- When selected, use grey --> 
    <item android:drawable="@drawable/selectedfirsttabimage" 
     android:state_selected="true" /> 
    <!-- When not selected, use white--> 
    <item android:drawable="@drawable/notselectedfirsttabimage" /> 
</selector> 

以同樣的方式定義secondtabdrawable.xml和thirddrawable.xml

Answer 2

您需要的選項卡是ActionBar的一部分。具體而言，它們在ActionBar處於導航選項卡模式時顯示。

http://developer.android.com/guide/topics/ui/actionbar.html （請參閱「添加導航選項卡」下）

您可能需要使用www.ActionbarSherlock.com這是會給你幾乎所有的Android版本的動作條庫。它和官方的一樣，包括標籤。

不要再使用TabActivity，它已經過時並且已被棄用。 ActionBar是未來。