码迷,mamicode.com
首页 > 移动开发 > 详细

Android(java)学习笔记129:Tab标签的使用

时间:2015-07-27 00:01:40      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

1.案例1---TabProject

(1)首先是main.xml文件:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6      android:background="@drawable/bg2"
 7     > 
 8     <Button  
 9         android:layout_width="fill_parent" 
10         android:layout_height="wrap_content" 
11         android:text="This is Tab1"
12         android:id="@+id/btn"
13         />
14     <EditText
15         android:layout_width="fill_parent" 
16         android:layout_height="wrap_content" 
17         android:text="This is Tab2"
18         android:id="@+id/et"
19         />
20     <LinearLayout 
21         android:orientation="vertical"
22         android:layout_width="fill_parent"
23         android:layout_height="fill_parent"
24         android:id="@+id/mylayout"
25         android:background="@drawable/bg"
26         >   
27         <Button  
28             android:layout_width="fill_parent" 
29             android:layout_height="wrap_content" 
30             android:text="This is Tab3"
31             />
32         <EditText
33             android:layout_width="fill_parent" 
34             android:layout_height="wrap_content" 
35             android:text="This is Tab3"
36             />
37     </LinearLayout>
38 </LinearLayout>

(2)然后是MainActivity.java文件:

 1 package com.tab;
 2 
 3 import android.app.TabActivity;
 4 import android.os.Bundle;
 5 import android.view.LayoutInflater;
 6 import android.widget.TabHost;
 7 import android.widget.Toast;
 8 import android.widget.TabHost.OnTabChangeListener;
 9 import android.widget.TabHost.TabSpec;
10 
11 public class MainActivity extends TabActivity implements OnTabChangeListener {
12     private TabSpec ts1, ts2, ts3;//声明3个分页
13     private TabHost tableHost;//分页菜单(tab的容器)
14     @Override
15     public void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         tableHost = this.getTabHost();//实例(分页)菜单,getTabHost()這是TabActivity方法,获取TabHost实例
18         
19         //利用LayoutInflater将布局与分页菜单一起显示
20         //from是LayoutInflater的静态方法,LayoutInflater.from(this),this表示当前MainActivity
21         //在当前context下获取LayoutInflater的实例,从而可以调用inflate方法
22         //inflate(参数1,参数2):参数1表示需要加载的布局文件id,参数2表示附加在resource资源文件的根控件
23         LayoutInflater.from(this).inflate(R.layout.main, tableHost.getTabContentView());
24         //分别给ts1,ts2,ts3分页进行设置,绑定资源
25         ts1 = tableHost.newTabSpec("tabOne");//实例化一个分页,这里"tabOne"这个标签ID绑定分页1,实现下面的接口实现操作
26         ts1.setIndicator("Tab1")//设置此分页显示的标题,字母会大写显示
27         .setContent(R.id.btn);//设置此分页的资源id
28         
29         ts2 = tableHost.newTabSpec("tabTwo");
30         //设置此分页显示的标题和图标
31         ts2.setIndicator("Tab2", getResources().getDrawable(R.drawable.icon))
32         .setContent(R.id.et);
33         
34         ts3 = tableHost.newTabSpec("tabThree"); 
35         ts3.setIndicator("Tab3")
36         .setContent(R.id.mylayout);//设置此分页的布局id
37         
38         tableHost.addTab(ts1);//菜单中添加ts1分页
39         tableHost.addTab(ts2);//菜单中添加ts2分页
40         tableHost.addTab(ts3);//菜单中添加ts3分页
41         
42         
43         tableHost.setOnTabChangedListener(this);
44     }
45     @Override
46     public void onTabChanged(String tabId) {
47         if (tabId.equals("tabOne")) {//ts1 = tableHost.newTabSpec("tabOne");
48             Toast.makeText(this, "分页1", Toast.LENGTH_LONG).show();
49         }
50         if (tabId.equals("tabTwo")) {
51             Toast.makeText(this, "分页2", Toast.LENGTH_LONG).show();
52         }
53         if (tabId.equals("tabThree")) {
54             Toast.makeText(this, "分页3", Toast.LENGTH_LONG).show();
55         }
56     }
57 }

总结:

(1)这里把main.xml作为一个整体资源进行分配给不同标签分页,当然main.xml中元素的位置不会变化

(2)使用OnTabChangeListener接口,重写OnTabChanged(String tabId)函数

(3)判断OnTabChanged(String tabId)中的tabId参数进行处理事件;这里的tabId对应的是实例中每个分页传入的分页ID,例如ts1的ID为:

tableHost.newTabSpec("tabOne"),而不是TabSpec.setIndicatior()设置的标题。

 

2.案例2---TabTest

(1)首先是activity_main.xml文件:

 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   
 7     <RelativeLayout  
 8         android:layout_width="fill_parent"  
 9         android:layout_height="fill_parent"  
10         android:orientation="vertical" >  
11         
12         <TabWidget  
13             android:id="@android:id/tabs"  
14             android:layout_width="fill_parent"  
15             android:layout_height="wrap_content"  
16             android:layout_alignParentBottom="true" >  
17         </TabWidget>  
18   
19         <FrameLayout  
20             android:id="@android:id/tabcontent"  
21             android:layout_width="fill_parent"  
22             android:layout_height="wrap_content" >  
23   
24             <TextView  
25                 android:id="@+id/textview1"  
26                 android:layout_width="fill_parent"  
27                 android:layout_height="fill_parent"  
28                 android:text="this is a tab" />  
29   
30             <TextView  
31                 android:id="@+id/textview2"  
32                 android:layout_width="fill_parent"  
33                 android:layout_height="fill_parent"  
34                 android:text="this is another tab" />  
35   
36             <TextView  
37                 android:id="@+id/textview3"  
38                 android:layout_width="fill_parent"  
39                 android:layout_height="fill_parent"  
40                 android:text="this is a third tab" />  
41         </FrameLayout>  
42   
43         
44   
45     </RelativeLayout>  
46   
47 </TabHost>  

(2)其次是MainAcitivity.java文件:

  1 package com.dream.tabtest;
  2 import java.util.ArrayList;  
  3 import java.util.List;  
  4   
  5 import android.app.TabActivity;  
  6 import android.graphics.Color;  
  7 import android.os.Bundle;  
  8 import android.view.Gravity;  
  9 import android.view.View;  
 10 import android.widget.ImageView;  
 11 import android.widget.LinearLayout;  
 12 import android.widget.TabHost;  
 13 import android.widget.TabHost.OnTabChangeListener;  
 14 import android.widget.TextView;  
 15   
 16 @SuppressWarnings("deprecation") //deprecation:过期的,@SuppressWarnings("deprecation"):表示不检测过期的方法
 17 public class MainActivity extends TabActivity {  
 18   
 19     //声明TabHost对象      
 20         TabHost mTabHost;     
 21         public List<ImageView> imageList = new ArrayList<ImageView>();   
 22         /** Called when the activity is first created. */    
 23         @Override    
 24         public void onCreate(Bundle savedInstanceState)     
 25         {     
 26             super.onCreate(savedInstanceState);     
 27             setContentView(R.layout.activity_main);     
 28                    
 29             //取得TabHost对象      
 30             mTabHost = getTabHost();     
 31                   
 32             /* 为TabHost添加标签 */    
 33             //新建一个newTabSpec(newTabSpec)      
 34             //设置其标签和图标(setIndicator)      
 35             //设置内容(setContent)      
 36             mTabHost.addTab(mTabHost.newTabSpec("tab_test1")     
 37                     .setIndicator(composeLayout("TAB_1", R.drawable.img1))//给tab1一个标签 指示  
 38                     .setContent(R.id.textview1));     
 39             mTabHost.addTab(mTabHost.newTabSpec("tab_test2")     
 40                     .setIndicator(composeLayout("TAB_2", R.drawable.img2))//给tab2一个标签 指示          
 41                     .setContent(R.id.textview2));     
 42             mTabHost.addTab(mTabHost.newTabSpec("tab_test3")     
 43                     .setIndicator(composeLayout("TAB_3", R.drawable.img3))//给tab3一个标签 指示       
 44                     .setContent(R.id.textview3));     
 45                    
 46             //设置TabHost的背景颜色      
 47             //mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));     
 48             //设置TabHost的背景图片资源      
 49             //mTabHost.setBackgroundResource(R.drawable.image1);      
 50                    
 51             //设置当前显示哪一个标签      
 52             mTabHost.setCurrentTab(0);   
 53             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));  
 54                    
 55             //标签切换事件处理,setOnTabChangedListener 
 56             //onTabChanged(String str)的监听,该监听是只有当你切换tab时才会发生动作事件
 57             mTabHost.setOnTabChangedListener(new OnTabChangeListener()     
 58             {     
 59                 // TODO Auto-generated method stub      
 60                 public void onTabChanged(String tabId)     
 61                 {     
 62                             // 设置所有选项卡的图片为未选中图片     
 63                             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img1));    
 64                             imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img2));    
 65                             imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img3));    
 66                                 
 67                             if (tabId.equalsIgnoreCase("tab_test1")) {    
 68                                 imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));    
 69                                 // 移动底部背景图片     
 70                                 //moveTopSelect(0);    
 71                             } else if (tabId.equalsIgnoreCase("tab_test2")) {    
 72                                 imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img02));    
 73                                 // 移动底部背景图片     
 74                                 //moveTopSelect(1);    
 75                             } else if (tabId.equalsIgnoreCase("tab_test3")) {    
 76                                 imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img03));    
 77                                 // 移动底部背景图片     
 78                                 //moveTopSelect(2);    
 79                             }    
 80   
 81                 }                
 82             });     
 83         }     
 84         /**  
 85          * 这个设置Tab标签本身的布局,需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置  
 86          */  
 87         public View composeLayout(String s, int i) {    
 88                     // 定义一个LinearLayout布局     
 89                     LinearLayout layout = new LinearLayout(this);    
 90                     // 设置布局垂直显示     
 91                     layout.setOrientation(LinearLayout.VERTICAL);    
 92                     ImageView iv = new ImageView(this);    
 93                     imageList.add(iv);    
 94                     iv.setImageResource(i);    
 95                     //设置图片布局  
 96                     LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 50);    
 97                     lp.setMargins(0, 0, 0, 0);    
 98                     layout.addView(iv, lp);    
 99                     // 定义TextView     
100                     TextView tv = new TextView(this);    
101                     tv.setGravity(Gravity.CENTER);    
102                     tv.setSingleLine(true);    
103                     tv.setText(s);    
104                     tv.setTextColor(Color.BLACK);    
105                     tv.setTextSize(10);    
106                     //设置Text布局  
107                     layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));    
108                     return layout;    
109                 }  
110 }  

总结:

所谓的TabHost是提供选项卡(Tab页)的窗口视图容器.

此对象包含两个子对象:一个是使用户可以选择指定标签页的标签的集合TabWidge;TabWidget类似于Android 中查看电话薄的界面,通过多个标签切换显示不同内容。另一个是用于显示标签页内容的 FrameLayout. 选项卡中的个别元素一般通过其容器对象来控制,而不是直接设置子元素本身的值。

Android(java)学习笔记129:Tab标签的使用

标签:

原文地址:http://www.cnblogs.com/hebao0514/p/4678875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!