TabActivity实现多页显示效果

• 
  

Android 音乐 XML QQ 

TabActivity实现多页显示效果

TabActivity可以显示实现多页显示效果，在xml布局文件中需要有一些特殊的配置属性

1、布局文件中必须有TabHost,LinearLayout,TabWidget和FrameLayout四个组件,
  

2、四个组件的布局如下
   
   
      
        
        
      
   
   
   是显示标题的组件；
   是显示每个内容的组件；
   这两个组件可以互换把页项的标题放置在顶部或者底部；
 
3、TabHost必须定义id,android:id="@android:id/tabhost"
   TabWidget 必须定义id,android:id="@android:id/tabs"
   FrameLayout必须定义id,android:id="@android:id/tabcontent"

由于手机屏幕有限，所以我们要尽量充分利用屏幕资源。在我们的应用程序中通常有多个Activity，而且会经常切换显示，这样我们就可以用TabActivity来显示。其效果如图1所示。

 

图1 tabActivity显示效果

本文就来研究TabActivity。根据帮助文档的解释，该控件用于包含并且运行多可内嵌的Activity或者View。首先讲解TabActivity的使用。

TabActivity的使用

如图1所示，远程音乐列表和本地音乐列表为两个不同的按钮，在TabActivity中他是一个TabWidget而下面的两个列表都是在各自的Activity中设置，然后在将每一个Activity添加到TabActivity的FrameLayout中。也就是说在TabActivity的布局文件中必须包含TabWidget和FrameLayout两种控件。

这里值得一提的是，必须为TabActivity的布局文件的根节点设置为:TabHost。可以参考main.xml代码

main.xml

Java代码  

1. "1.0" encoding="utf-8"?>  
2.   
3.    
4.   
5. "http://schemas.android.com/apk/res/android"  
6.   
7.          android:id="@android:id/tabhost" android:layout_width="fill_parent"  
8.   
9.          android:layout_height="fill_parent">  
10.   
11.          "vertical"  
12.   
13.                    android:layout_width="fill_parent" android:layout_height="fill_parent"  
14.   
15.                    android:padding="5dp">  
16.   
17.                    "@android:id/tabs"  
18.   
19.                             android:layout_width="fill_parent" android:layout_height="wrap_content" />  
20.   
21.                    "@android:id/tabcontent"  
22.   
23.                             android:layout_width="fill_parent" android:layout_height="fill_parent"  
24.   
25.                             android:padding="5dp" />  
26.   
27.            
28.   
29.    

 

 

 

这里要说明一下，TabWidget为图一中的按钮控件，FrameLayout为要显示的内容。内容可以是如下两种方式来填充：

q      使用一个Activity中的两个不同的View。

q      使用完全不相关的两个Activity。

在图1中，我使用的是后者，两个完全不同的Activity。下面就来一起编写一个TabActivity的例子。

1.首先创建TabActivityDemo项目。

2.然后依次创建ArtistsActivity, AlbumsActivity, 和 SongsActivity。然后为每一例子添加一个TextView用于区分不同的Activity，如下面代码所示：

Java代码  

1. public class ArtistsActivity extends Activity {  
2.   
3.     public void onCreate(Bundle savedInstanceState) {  
4.   
5.         super.onCreate(savedInstanceState);  
6.   
7.    
8.   
9.         TextView textview = new TextView(this);  
10.   
11.         textview.setText("This is the Artists tab");  
12.   
13.         setContentView(textview);  
14.   
15.     }  
16.   
17. }  

 

 

 

 

3.我们有了不同的显示内容，就要为每一个按钮设置不同的图标。每一组都需要两张图片用于区分是否是被选中状态。通常的设计原则是使用灰色的图片作为选中图片，白色的作为未选中的图片。可以使用图2中两幅图片。

图2 示例图片

将要使用的图片保存到res/drawable目录中，然后创建一个名为ic_tab_artists.xml的文件在drawable文件夹中。文件代码如下：

Java代码  

1. "1.0" encoding="utf-8"?>  
2.   
3. "http://schemas.android.com/apk/res/android">  
4.   
5.       
6.   
7.     "@drawable/ic_tab_artists_grey"  
8.   
9.           android:state_selected="true" />  
10.   
11.       
12.   
13.     "@drawable/ic_tab_artists_white" />  
14.   
15.   

 

 

 

 

4.修改我们的main.xml文件如下所示：

Java代码  

1. "1.0" encoding="utf-8"?>  
2.   
3. "http://schemas.android.com/apk/res/android"  
4.   
5.     android:id="@android:id/tabhost"  
6.   
7.     android:layout_width="fill_parent"  
8.   
9.     android:layout_height="fill_parent">  
10.   
11.     
12.   
13.         android:orientation="vertical"  
14.   
15.         android:layout_width="fill_parent"  
16.   
17.         android:layout_height="fill_parent"  
18.   
19.         android:padding="5dp">  
20.   
21.         
22.   
23.             android:id="@android:id/tabs"  
24.   
25.             android:layout_width="fill_parent"  
26.   
27.             android:layout_height="wrap_content" />  
28.   
29.         
30.   
31.             android:id="@android:id/tabcontent"  
32.   
33.             android:layout_width="fill_parent"  
34.   
35.             android:layout_height="fill_parent"  
36.   
37.             android:padding="5dp" />  
38.   
39.       
40.   
41.   

 

 

 

 

TabHost将根据用户的选择，自动的切换FramLayout与TabWidget的显示内容。

5.接下来修改我们的主Activity，让其继承TabActivity。

6.然后使用为我们的主Activity添加OnCreate()方法如下所示：

Java代码  

1. public void onCreate(Bundle savedInstanceState) {  
2.   
3.     super.onCreate(savedInstanceState);  
4.   
5.     setContentView(R.layout.main);  
6.   
7.    
8.   
9.     Resources res = getResources(); // Resource object to get Drawables  
10.   
11.     TabHost tabHost = getTabHost();  // The activity TabHost  
12.   
13.     TabHost.TabSpec spec;  // Resusable TabSpec for each tab  
14.   
15.     Intent intent;  // Reusable Intent for each tab  
16.   
17.    
18.   
19.     // Create an Intent to launch an Activity for the tab (to be reused)  
20.   
21.     intent = new Intent().setClass(this, ArtistsActivity.class);  
22.   
23.    
24.   
25.     // Initialize a TabSpec for each tab and add it to the TabHost  
26.   
27.     spec = tabHost.newTabSpec("artists").setIndicator("Artists",  
28.   
29.                       res.getDrawable(R.drawable.ic_tab_artists))  
30.   
31.                   .setContent(intent);  
32.   
33.     tabHost.addTab(spec);  
34.   
35.    
36.   
37.     // Do the same for the other tabs  
38.   
39.     intent = new Intent().setClass(this, AlbumsActivity.class);  
40.   
41.     spec = tabHost.newTabSpec("albums").setIndicator("Albums",  
42.   
43.                       res.getDrawable(R.drawable.ic_tab_albums))  
44.   
45.                   .setContent(intent);  
46.   
47.     tabHost.addTab(spec);  
48.   
49.    
50.   
51.     intent = new Intent().setClass(this, SongsActivity.class);  
52.   
53.     spec = tabHost.newTabSpec("songs").setIndicator("Songs",  
54.   
55.                       res.getDrawable(R.drawable.ic_tab_songs))  
56.   
57.                   .setContent(intent);  
58.   
59.     tabHost.addTab(spec);  
60.   
61.    
62.   
63.     tabHost.setCurrentTab(2);  
64.   
65. }  

 

 

 

通常我们需要先得到TabHost，可以使用方法getTabHost()得到。

为TabActivity每添加一项内容，都要通过TabHost对象得到一个TabHost.TabSpec对象，该类可以定义每一个tab的内容的属性，比如tabTidget的标题或者显示图标等。通过TabHost的newTabSpec()可以得到该对象。

可以使用setIndicator(CharSequence, Drawable)方法设置图标。使用setContent(Intent)设置内容。最后一定要将使用setContent(Intent)将这个TabHost.TabSpec对象添加到TabHost中。

在最后，可以使用setCurrentTab(int)来设置默认的显示页。

值得一提的是，TabWidget总是TabActivity的孩子结点。用于与用户交互。

7.看看我们的成果吧