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;
} 
 }