TabHostは下部ナビゲーションバーを実現

ソースコードおよび実行可能ファイルダウンロードアドレス:http://files.cnblogs.com/rainboy2010/tabnavigation.zip

     
       
 
現在、多くのAndroidアプリケーションインタフェースでは、下部のナビゲーションバーの設計方式が採用されており、ユーザーが異なるページを柔軟に切り替えることができます.TabHostコントロールを使用すると、下部ナビゲーションバーの機能を簡単に実現できます.以下、魯大師クライアントの下部ナビゲーションバーを模倣することを例に、牛刀を試します.
1.メインインタフェースの設計、レイアウトファイルtab_ludashi.xmlは次のとおりです.

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/container"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >



    <TabHost

        android:id="@android:id/tabhost"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" 

        android:background="@drawable/bg"

     >



        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical" >



             <FrameLayout

                android:id="@android:id/tabcontent"

                android:layout_width="fill_parent"

                android:layout_height="0.0dp"

                android:layout_weight="1"

              >

             </FrameLayout>

             <TabWidget

                android:id="@android:id/tabs"

                android:layout_width="fill_parent"

                android:layout_height="@dimen/tabwidget_height" 

                android:gravity="center"

                android:showDividers="none"

             >

             </TabWidget>



        </LinearLayout>

        

    </TabHost>



</FrameLayout>

各タブに対応するレイアウトファイルtab_ludashi_item.xmlは以下の通り、画像は上部、文字は下部

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/tabwidget_item_layout"

    android:layout_width="fill_parent"

    android:layout_height="@dimen/tabwidget_height"

    android:orientation="vertical" 

    android:gravity="center" 

    android:background="@drawable/selector_ludashi_tabitem_bg"

   >

    <RelativeLayout 

      android:layout_width="fill_parent" 

      android:layout_height="wrap_content"

    >

      <ImageView 

          android:id="@+id/tabwidget_item_image"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:layout_centerInParent="true"

          android:contentDescription="@null"

          android:scaleType="fitCenter"

       />  

       <ImageView 

          android:id="@+id/tabwidget_item_dot"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:layout_alignParentTop="true"

          android:layout_toRightOf="@id/tabwidget_item_image"

          android:contentDescription="@null"

          android:scaleType="fitCenter"

          android:visibility="invisible"

          android:src="@drawable/red_dot"

       />  

    </RelativeLayout>

    

    <TextView 

       android:id="@+id/tabwidget_item_text"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:gravity="center_vertical"

       android:layout_marginTop="3dp"

       android:textSize="12sp"

       android:textColor="@drawable/selector_ludashi_tabitem_text"

    />



</LinearLayout>

選択された状態と選択されていない状態の背景に対応するxmlファイルselector_ludashi_tabitem_bg.xmlは次のとおりです.

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

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/ludashi_tabitem_selected" />

    <item android:state_selected="true" android:drawable="@drawable/ludashi_tabitem_selected" />

    <item android:drawable="@android:color/transparent" />

</selector>

選択された状態と選択されていない状態の文字色に対応するxmlファイルselector_ludashi_tabitem_text.xmlは次のとおりです.

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="#ff00a5df" />

    <item android:state_selected="true" android:color="#ff00a5df" />

    <item android:color="#ff797979" />

</selector>

2.各TabItemの選択状態と選択されていない状態に対応するピクチャを設計し、最初のItemを例に、対応するxmlファイルselector_ludashi_tabitem_image_myphone.xmlは次のとおりです.

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

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/ludashi_tabitem_myphone_pressed" />

    <item android:state_selected="true" android:drawable="@drawable/ludashi_tabitem_myphone_pressed" />

    <item android:drawable="@drawable/ludashi_tabitem_myphone_normal" />

</selector>

3.Javaコードを次のように記述します.

@SuppressWarnings("deprecation")

public class LudashiActivity extends TabActivity 

{



    private TabHost mTabHost;

    private int []mTabImage=new int[]{R.drawable.selector_ludashi_tabitem_image_myphone,R.drawable.selector_ludashi_tabitem_image_bench,
    R.drawable.selector_ludashi_tabitem_image_optimize,R.drawable.selector_ludashi_tabitem_image_find};

    private int []mTabText=new int[]{R.string.ludashi_tab1,R.string.ludashi_tab2,R.string.ludashi_tab3,R.string.ludashi_tab4};

    private String[]mTabTag=new String[]{"tab1","tab2","tab3","tab4"};

    private Class<?>[] mTabClass=new Class<?>[]{Tab1.class,Tab2.class,Tab3.class,Tab4.class};

    

    @Override

    protected void onCreate(Bundle savedInstanceState) 

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.tab_ludashi);

        

        initUI();

        

    }



    private void initUI()

    {

        this.setTitle(R.string.button2);

        

        this.mTabHost=this.getTabHost();

        this.mTabHost.setup();

        

        //          

        for(int i=0;i<mTabClass.length;i++)

        {

           View view=LayoutInflater.from(this).inflate(R.layout.tab_ludashi_item, null);

       

          ((ImageView)view.findViewById(R.id.tabwidget_item_image)).setImageResource(mTabImage[i]);

          ((TextView)view.findViewById(R.id.tabwidget_item_text)).setText(mTabText[i]);

          

           this.mTabHost.addTab(this.mTabHost.newTabSpec(mTabTag[i]).setIndicator(view).setContent(new Intent(this,mTabClass[i]))); 

        }

       

        //       

        this.mTabHost.setCurrentTab(0);

    }

}