android开发 - TabHost使用

使用TabHost实现标签页


使用场景，如：通讯录，QQ，等通讯软件都有使用


TabHost是一个标签页的集合




主布局如下：


<!-- 外部一个TabHost集合 -->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabhost">


    <!-- TabHost中集合布局是使用线性布局 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <!-- 布局中的标签切换卡，使用TabWidget来切换 ,这里的id是系统给定的名称，所以使用系统给定的tabs为id -->
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"/>
        
        <!-- 布局中的每个标签内容使用桢布局 ，然后每个切换卡的内容使用LinearLayout布局 ，那么显示的内容就在LinearLayout中显示 -->
        <!-- 它的id是系统给定的tabcontent为id，调用如下，也可以查看源代码 -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@android:id/tabcontent"> 
            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                android:id="@+id/page1">
                
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="这是第一个标签页内容"/> 
            </LinearLayout>
            
             <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                android:id="@+id/page2">
                
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="这是第二个标签页内容"/> 
            </LinearLayout>
            
              <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                android:id="@+id/page3">
                
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="这是第三个标签页内容"/> 
            </LinearLayout>
            
        </FrameLayout> 
    </LinearLayout> 
</TabHost>




自定义页面布局
<?xml version="1.0" encoding="utf-8"?>
<!-- 这里是自定义的标签页 ,只是给TabWidget自定义--> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <TextView 
        android:background="@drawable/tab_bj"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="18sp"
        android:id="@+id/name"/> 
</LinearLayout>


自定义布局的标签页的事件
<?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/a1" />
    <!-- 选中时 -->
    <item android:state_selected="true" android:drawable="@drawable/a2" />
    <!-- 默认 -->
    <item android:drawable="@drawable/ic_launcher" />
</selector>






java代码


public class MainActivity extends Activity {
private TabHost tabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //找到TabHost对象
        tabHost = (TabHost)this.findViewById(R.id.tabhost);
        //设置TabWidget，和TabContent的
        tabHost.setup();
        
        //以下的标签页都是系统默认的，但是我们可以自定义标签页，也就是我们写一个View
        //设置标签页1
        TabSpec tabSpec = tabHost.newTabSpec("page1");
        //这是自定义
        tabSpec.setIndicator(createTabView("首页"));
        //这是系统默认的
        //tabSpec.setIndicator("首页",getResources().getDrawable(R.drawable.ic_launcher));
        tabSpec.setContent(R.id.page1);
        tabHost.addTab(tabSpec);
        
        //设置标签页1
        tabSpec = tabHost.newTabSpec("page1");
        //这是自定义
        tabSpec.setIndicator(createTabView("第二页"));
        //这是系统默认的
        //tabSpec.setIndicator("第二页",getResources().getDrawable(R.drawable.ic_launcher));
        tabSpec.setContent(R.id.page2);
        tabHost.addTab(tabSpec);
        
        //设置标签页1
        tabSpec = tabHost.newTabSpec("page1");
        //这是自定义
        tabSpec.setIndicator(createTabView("第三页"));
        //这是系统默认的
        //tabSpec.setIndicator("第三页",getResources().getDrawable(R.drawable.ic_launcher));
        tabSpec.setContent(R.id.page3);
        tabHost.addTab(tabSpec);
     
        //默认载入时，是在第一页
        tabHost.setCurrentTab(0);
    }




    private View createTabView(String name) {
View tabView = getLayoutInflater().inflate(R.layout.tab, null);
TextView tv = (TextView)tabView.findViewById(R.id.name);
tv.setText(name);
return tabView;
} 
}