Tab Layout每个切换页面放在各自的文件里

 

为了创建一个选项卡的UI，你需要使用一个TabHost和一个TabWidget，TabHost必须是布局文件的根节点，它包含了为了显示选项卡的TabWidget和一个用于显示选项内容的FrameLayout

你可以用一或两种方法实现你的选项卡内容：在用一个Activity中用选项卡来在视图之间切换，或者用用选项卡来改变所有的分离的Activity。你根据你的需求来使用你想在程序中的方法，但是如果每个选项卡提供一个独特的用户Activity，那么为每个选项卡实现独立的Activity是有意义的，所有你最好在你的离散群里管理应用程序，要好过使用大量的应用程序和布局文件。

在这个例子中，你可以创建一个为每个单独的Activity创建选项卡来创建一个选项卡UI

 

1、开始一个新的工程，叫做HelloTabWidget

 

2、第一，创建三个独立的Activity程序在你的工程中：ArtistsActivity,AlbumsActivity,和SongsActivity，他们每个代表一个单独的选项卡，现在用TextView来没每个程序显示一个简单的信息，比如：

Java代码  

1. package org.hualang.tabwidget;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. public class AlbumsActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState)  
9.     {  
10.         super.onCreate(savedInstanceState);  
11.          TextView textview = new TextView(this);  
12.          textview.setText("This is the Albums tab");          
13.         setContentView(textview);  
14.     }  
15. }  

 

Java代码  

1. package org.hualang.tabwidget;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. public class SongsActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState)  
9.     {  
10.         super.onCreate(savedInstanceState);  
11.          TextView textview = new TextView(this);  
12.          textview.setText("This is the Songs tab");   
13.         setContentView(textview);  
14.     }  
15.   
16. }  

 

Java代码  

1. package org.hualang.tabwidget;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. public class ArtistsActivity extends Activity {  
8.     /** Called when the activity is first created. */  
9.     @Override  
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.          TextView textview = new TextView(this);  
13.          textview.setText("This is the Artists tab");   
14.         setContentView(textview);  
15.     }  
16. }  

 注意这个例子中不需要布局文件，只需要创建一个TextView，并且为文本赋值即可。重复创建三个类似的Activity，并且要在AndroidManifest.xml文件中注册，否则报错

3、你需要为每个选项卡设置一个icon，每个icon，你可以有两个版本，一个是当选项卡被选中的时候，另一个是当选项卡未被选中的时候。一般设计来说，建议当被选中的时候用灰色，的那个未被选中的时候用白色，比如

 
 你可以拷贝这两张图片来做实验用
现在创建一个状态图片列表来制定每个选项卡不同状态的时候所指定的图片
 ①把图排尿保存在res/drawable/目录下
 ②在res/drawable/目录下创建一个名为ic_tab_artists.xml文件，并且插入如下信息

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3. <!-- When selected,use grey -->  
4.     <item android:drawable="@drawable/ic_tab_artists_grey"  
5.         android:state_selected="true"/>  
6.     <!-- When not selected ,use white -->  
7.     <item android:drawable="@drawable/ic_tab_artists_white"/>  
8. </selector>  

 

上面这个文件，当选项卡的状态改变的时候，选项卡就会自动的在两种已经定义的图片之间切换

 

4、打开res/layout/main.xml文件并且插入如下信息

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/tabhost"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent">  
6.     <LinearLayout  
7.         android:orientation="vertical"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:padding="5dp">  
11.         <TabWidget  
12.             android:id="@android:id/tabs"  
13.             android:layout_width="fill_parent"  
14.             android:layout_height="wrap_content" />  
15.         <FrameLayout  
16.             android:id="@android:id/tabcontent"  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="fill_parent"  
19.             android:padding="5dp" />  
20.     </LinearLayout>  
21. </TabHost>  

 

这个布局文件将显示选项卡兵器提供每个Activity之间的导航
TabHost要求一个TabWidget和一个FrameLayout布局，为了使TabWidget和FrameLayout的位置处于垂直方向，需要一个LinearLayout,FrameLayout是每个选项卡内容的地方，之所以那里的内容是空的是因为在TahHost中将自动为每个Activity嵌入

注意，TabWidget和FrameLayout元素的ID标签和tabcontent元素，这些名称必须使用，因为TahHost检索他们的引用，它恰好期望的是这些名字

 

6、编写HelloTabWidget。继承TabWidget

Java代码  

1. package org.hualang.tabwidget;  
2.   
3. import android.app.TabActivity;  
4. import android.content.Intent;  
5. import android.content.res.Resources;  
6. import android.os.Bundle;  
7. import android.widget.TabHost;  
8.   
9. public class HelloTabWidget extends TabActivity  {  
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.main);  
13.   
14.         Resources res = getResources(); // Resource object to get Drawables  
15.         TabHost tabHost = getTabHost();  // The activity TabHost  
16.         TabHost.TabSpec spec;  // Resusable TabSpec for each tab  
17.         Intent intent;  // Reusable Intent for each tab  
18.   
19.         // Create an Intent to launch an Activity for the tab (to be reused)  
20.         intent = new Intent().setClass(this, ArtistsActivity.class);  
21.   
22.         // Initialize a TabSpec for each tab and add it to the TabHost  
23.         spec = tabHost.newTabSpec("artists").setIndicator("Artists",  
24.                           res.getDrawable(R.drawable.ic_tab_drawable))  
25.                       .setContent(intent);  
26.         tabHost.addTab(spec);  
27.   
28.         // Do the same for the other tabs  
29.         intent = new Intent().setClass(this, AlbumsActivity.class);  
30.         spec = tabHost.newTabSpec("albums").setIndicator("Albums",  
31.                           res.getDrawable(R.drawable.ic_tab_drawable))  
32.                       .setContent(intent);  
33.         tabHost.addTab(spec);  
34.   
35.         intent = new Intent().setClass(this, SongsActivity.class);  
36.         spec = tabHost.newTabSpec("songs").setIndicator("Songs",  
37.                           res.getDrawable(R.drawable.ic_tab_drawable))  
38.                       .setContent(intent);  
39.         tabHost.addTab(spec);  
40.   
41.         tabHost.setCurrentTab(2);  
42.     }  
43.   
44.   
45. }  

 

运行结果：

 

 

tab 使用的是decalview

很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架。读者也许会马上想到使用TabHost 与 TabActivity的组合，其实最常用的不是它们，而是由GridView与ActivityGroup的组合。每当用户在GridView选中一项，ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中。

接下来贴出本例运行的效果图：

 

 

ImageAdapter是本实例的关键之一，它继承于BaseAdapter，并加入一些自定义的方法。ImageAdapter的源码如下：

 

源码 打印 ？

1. package com.ActivityGroupDemo;  
2.   
3. import android.content.Context;  
4. import android.graphics.drawable.ColorDrawable;  
5. import android.view.View;  
6. import android.view.ViewGroup;  
7. import android.widget.BaseAdapter;  
8. import android.widget.GridView;  
9. import android.widget.ImageView;  
10. /** 
11.  *  
12.  * @author GV 
13.  * 
14.  */  
15. public class ImageAdapter extends BaseAdapter {  
16.     private Context mContext;   
17.     private ImageView[] imgItems;  
18.     private int selResId;  
19.     public ImageAdapter(Context c,int[] picIds,int width,int height,int selResId) {   
20.         mContext = c;   
21.         this.selResId=selResId;  
22.         imgItems=new ImageView[picIds.length];  
23.         for(int i=0;i<picIds.length;i++)  
24.         {  
25.             imgItems[i] = new ImageView(mContext);   
26.             imgItems[i].setLayoutParams(new GridView.LayoutParams(width, height));//设置ImageView宽高   
27.             imgItems[i].setAdjustViewBounds(false);   
28.             //imgItems[i].setScaleType(ImageView.ScaleType.CENTER_CROP);   
29.             imgItems[i].setPadding(2, 2, 2, 2);   
30.             imgItems[i].setImageResource(picIds[i]);   
31.         }  
32.     }   
33.    
34.     public int getCount() {   
35.         return imgItems.length;   
36.     }   
37.    
38.     public Object getItem(int position) {   
39.         return position;   
40.     }   
41.    
42.     public long getItemId(int position) {   
43.         return position;   
44.     }   
45.    
46.     /**  
47.      * 设置选中的效果  
48.      */    
49.     public void SetFocus(int index)    
50.     {    
51.         for(int i=0;i<imgItems.length;i++)    
52.         {    
53.             if(i!=index)    
54.             {    
55.                 imgItems[i].setBackgroundResource(0);//恢复未选中的样式  
56.             }    
57.         }    
58.         imgItems[index].setBackgroundResource(selResId);//设置选中的样式  
59.     }    
60.       
61.     public View getView(int position, View convertView, ViewGroup parent) {   
62.         ImageView imageView;   
63.         if (convertView == null) {   
64.             imageView=imgItems[position];  
65.         } else {   
66.             imageView = (ImageView) convertView;   
67.         }   
68.         return imageView;   
69.     }   
70. }   

 

 SetFocus(int)这个方法是个关键点，即实现选中的效果。例如有ABCD4个Item，其中C被选中了，那么除C以外的Item都被设置为未被选中的样式，而C则设置为选中的样式。

 

接下来就开始写主Activity，主Activity包含GridView控件，名为gvTopBar，有2点是需要注意一下的。

• SetNumColumns()：必须要使用setNumColumns来设置列数，因为这个GridView只有一行，即所有的Item都在同一行，Item数量即为列数。
• setSelector(new ColorDrawable(Color.TRANSPARENT))：把系统默认选中的背景色透明化，因为我们已经在BaseAdapter中加入了SetFocus()来改变选中的样式。 

 

源码 打印 ？

1. package com.ActivityGroupDemo;  
2.   
3. import android.app.Activity;  
4. import android.app.ActivityGroup;  
5. import android.content.BroadcastReceiver;  
6. import android.content.Context;  
7. import android.content.Intent;  
8. import android.content.IntentFilter;  
9. import android.graphics.Color;  
10. import android.graphics.drawable.ColorDrawable;  
11. import android.os.Bundle;  
12. import android.util.Log;  
13. import android.view.Gravity;  
14. import android.view.View;  
15. import android.view.Window;  
16. import android.view.ViewGroup.LayoutParams;  
17. import android.widget.AdapterView;  
18. import android.widget.GridView;  
19. import android.widget.LinearLayout;  
20. import android.widget.Toast;  
21. import android.widget.AdapterView.OnItemClickListener;  
22. /** 
23.  *  
24.  * @author GV 
25.  * 
26.  */  
27. public class ActivityGroupDemo extends ActivityGroup {  
28.   
29.     private GridView gvTopBar;  
30.     private ImageAdapter topImgAdapter;  
31.     public LinearLayout container;// 装载sub Activity的容器  
32.   
33.     /** 顶部按钮图片 **/  
34.     int[] topbar_image_array = { R.drawable.topbar_home,  
35.             R.drawable.topbar_user, R.drawable.topbar_shoppingcart,  
36.             R.drawable.topbar_note };  
37.   
38.     @Override  
39.     public void onCreate(Bundle savedInstanceState) {  
40.         super.onCreate(savedInstanceState);  
41.         setContentView(R.layout.main);  
42.         gvTopBar = (GridView) this.findViewById(R.id.gvTopBar);  
43.         gvTopBar.setNumColumns(topbar_image_array.length);// 设置每行列数  
44.         gvTopBar.setSelector(new ColorDrawable(Color.TRANSPARENT));// 选中的时候为透明色  
45.         gvTopBar.setGravity(Gravity.CENTER);// 位置居中  
46.         gvTopBar.setVerticalSpacing(0);// 垂直间隔  
47.         int width = this.getWindowManager().getDefaultDisplay().getWidth()  
48.                 / topbar_image_array.length;  
49.         topImgAdapter = new ImageAdapter(this, topbar_image_array, width, 48,  
50.                 R.drawable.topbar_itemselector);  
51.         gvTopBar.setAdapter(topImgAdapter);// 设置菜单Adapter  
52.         gvTopBar.setOnItemClickListener(new ItemClickEvent());// 项目点击事件  
53.         container = (LinearLayout) findViewById(R.id.Container);  
54.         SwitchActivity(0);//默认打开第0页  
55.     }  
56.   
57.     class ItemClickEvent implements OnItemClickListener {  
58.   
59.         public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
60.                 long arg3) {  
61.             SwitchActivity(arg2);  
62.         }  
63.     }  
64.     /** 
65.      * 根据ID打开指定的Activity 
66.      * @param id GridView选中项的序号 
67.      */  
68.     void SwitchActivity(int id)  
69.     {  
70.         topImgAdapter.SetFocus(id);//选中项获得高亮  
71.         container.removeAllViews();//必须先清除容器中所有的View  
72.         Intent intent =null;  
73.         if (id == 0 || id == 2) {  
74.             intent = new Intent(ActivityGroupDemo.this, ActivityA.class);  
75.         } else if (id == 1 || id == 3) {  
76.             intent = new Intent(ActivityGroupDemo.this, ActivityB.class);  
77.         }   
78.         intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
79.         //Activity 转为 View  
80.         Window subActivity = getLocalActivityManager().startActivity(  
81.                 "subActivity", intent);  
82.         //容器添加View  
83.         container.addView(subActivity.getDecorView(),  
84.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
85.     }  
86.   
87. }  

 

主Activity的布局XML文件源码如下：

 

源码 打印 ？

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent">  
5.     <RelativeLayout android:layout_height="fill_parent"  
6.         android:layout_width="fill_parent">  
7.         <GridView android:layout_height="wrap_content" android:id="@+id/gvTopBar"  
8.             android:layout_alignParentTop="true" android:layout_width="fill_parent"  
9.             android:fadingEdgeLength="5dip" android:fadingEdge="vertical">  
10.         </GridView>  
11.         <LinearLayout android:id="@+id/Container"  
12.             android:layout_below="@+id/gvTopBar" android:layout_width="fill_parent"  
13.             android:layout_height="fill_parent">  
14.         </LinearLayout>  
15.     </RelativeLayout>  
16. </LinearLayout>  

转载于:https://www.cnblogs.com/zxsr20/archive/2012/10/02/2710417.html