开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android开发学习笔记:浅谈Tab选项卡

简介:
+关注继续查看

Tab选项卡是一个非常方便的组件。

一.使用Tab组件的步骤:

1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件

2.Activity要继承TabActivity

3.调用TabActivity的getTabHost( )方法来获得TabHost对象

4.通过TabHost创建Tab选项

二.实现不同Tab里面的内容有两种方式:

1.切换不同的Tab时候,不同Tab里面的内容在同一个Activity显示,主要是通过修改布局文件里面的id来实现的。下面是一个具体的例子:

MainActivity.java


  1. package com.android.tab.activity;  
  2.  
  3. import android.app.TabActivity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.widget.TabHost;  
  7.  
  8. public class MainActivity extends TabActivity {  
  9.     @Override 
  10.     public void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.          //获得TabHost对象       
  13.         TabHost tah = getTabHost();  
  14.           
  15.         // from(this)从TabActivity获取LayoutInflater  
  16.         // R.layout.main 存放Tab布局  
  17.         // 通过TabHost获得存放Tab标签页内容的FrameLayout  
  18.         // 是否将inflate 加到根布局元素上  
  19.         LayoutInflater.from(this).inflate(R.layout.main, tah.getTabContentView(), true);  
  20.           
  21.         //设置Tab标签的内容和显示内容  
  22.         tah.addTab(tah.newTabSpec("tab1").setIndicator("图片1").setContent(R.id.TextView01));  
  23.         tah.addTab(tah.newTabSpec("tab2").setIndicator("图片2").setContent(R.id.TextView02));  
  24.         tah.addTab(tah.newTabSpec("tab3").setIndicator("图片3").setContent(R.id.TextView03));                        
  25.     }  

main.xml


  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:id="@+id/FrameLayout01"   
  4.     android:layout_width="wrap_content"   
  5.     android:layout_height="wrap_content" 
  6.     >     
  7.     <TabHost   
  8.         android:id="@+id/TabHost01" 
  9.         android:layout_width="wrap_content"   
  10.         android:layout_height="wrap_content"   
  11.         /> 
  12.     <TextView   
  13.         android:id="@+id/TextView01"   
  14.         android:background="@drawable/pic1" 
  15.         android:layout_width="wrap_content"   
  16.         android:layout_height="wrap_content"   
  17.         />    
  18.     <TextView   
  19.         android:id="@+id/TextView02"   
  20.         android:background="@drawable/pic2" 
  21.         android:layout_width="wrap_content"   
  22.         android:layout_height="wrap_content"   
  23.         />    
  24.     <TextView   
  25.         android:id="@+id/TextView03"   
  26.         android:background="@drawable/pic3" 
  27.         android:layout_width="wrap_content"   
  28.         android:layout_height="wrap_content"   
  29.         />    
  30. </FrameLayout> 
  31.  
  32.  

效果图:

 1.切换不同的Tab时候,不同Tab里面的内容在不同的Activity显示

 先创建三个类FirstActivity.java,SecondActivity.java,ThirdActivity.java,都是继承Activity

FirstActivity.java


  1. package com.android.tabtest.activity;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.widget.TextView;  
  6.  
  7. public class FirstActivity extends Activity {  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.        super.onCreate(savedInstanceState);  
  10.        TextView textview = new TextView(this);  
  11.        textview.setText("这是Tab1");  
  12.        setContentView(textview);  
  13.     }  
  14. }  

SecondActivity.java


  1. package com.android.tabtest.activity;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.widget.TextView;  
  6.  
  7. public class SecondActivity extends Activity {  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         TextView textview = new TextView(this);  
  11.         textview.setText("这是Tab2");  
  12.         setContentView(textview);  
  13.     }  
  14.  
  15. }  

ThirdActivity.java


  1. package com.android.tabtest.activity;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.widget.TextView;  
  6.  
  7. public class ThirdActivity extends Activity {  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.            super.onCreate(savedInstanceState);  
  10.            TextView textview = new TextView(this);  
  11.            textview.setText("这是Tab3");  
  12.            setContentView(textview);  
  13.         }  
  14.  
  15. }  

在layout文件夹中对main.xml进行修改


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

新建一个测试Tab的类TabDemo.java,继承于TabActivity类


  1. package com.android.tabtest.activity;  
  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. import android.widget.TabHost.TabSpec;  
  9.    
  10. public class TabDemo extends TabActivity {  
  11.     /** Called when the activity is first created. */ 
  12.     @Override 
  13.     public void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.main);//这里使用了上面创建的xml文件(Tab页面的布局)  
  16.         Resources res = getResources(); // Resource object to get Drawables  
  17.         TabHost tabHost = getTabHost();  // The activity TabHost  
  18.         TabSpec spec;  
  19.         Intent intent;  // Reusable Intent for each tab  
  20.    
  21.       //第一个Tab  
  22.         intent = new Intent(this,FirstActivity.class);//新建一个Intent用作Tab1显示的内容  
  23.         spec = tabHost.newTabSpec("tab1")//新建一个 Tab  
  24.         .setIndicator("Tab1", res.getDrawable(android.R.drawable.ic_media_play))//设置名称以及图标  
  25.         .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx  
  26.         tabHost.addTab(spec);//添加进tabHost  
  27.    
  28.         //第二个Tab  
  29.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
  30.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
  31.         .setIndicator("Tab2", res.getDrawable(android.R.drawable.ic_menu_edit))//设置名称以及图标  
  32.         .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx  
  33.         tabHost.addTab(spec);//添加进tabHost  
  34.           
  35.        //第三个Tab  
  36.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
  37.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
  38.         .setIndicator("Tab3", res.getDrawable(android.R.drawable.ic_menu_help))//设置名称以及图标  
  39.         .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx  
  40.         tabHost.addTab(spec);//添加进tabHost  
  41.    
  42.         tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1  
  43.     }   

在AndroidManifest.xml里加入9~29行的声明代码


  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  3.       package="com.android.tabtest.activity" 
  4.       android:versionCode="1" 
  5.       android:versionName="1.0"> 
  6.     <uses-sdk android:minSdkVersion="10" /> 
  7.  
  8.     <application android:icon="@drawable/icon" android:label="@string/app_name"> 
  9.     <activity android:name=".TabDemo" 
  10.                   android:label="@string/app_name"> 
  11.             <intent-filter> 
  12.                 <action android:name="android.intent.action.MAIN" /> 
  13.                 <category android:name="android.intent.category.LAUNCHER" /> 
  14.             </intent-filter> 
  15.     </activity> 
  16.     <activity android:name=".FirstActivity" 
  17.                   android:label="@string/app_name"> 
  18.             <intent-filter> 
  19.                 <action android:name="android.intent.action.MAIN" /> 
  20.                 <category android:name="android.intent.category.LAUNCHER" /> 
  21.             </intent-filter> 
  22.     </activity> 
  23.     <activity android:name=".SecondActivity" 
  24.                   android:label="@string/app_name"> 
  25.             <intent-filter> 
  26.                 <action android:name="android.intent.action.MAIN" /> 
  27.                 <category android:name="android.intent.category.LAUNCHER" /> 
  28.             </intent-filter> 
  29.     </activity> 
  30.     </application> 
  31. </manifest> 

效果图:

 


本文转自 lingdududu 51CTO博客,原文链接: 

http://blog.51cto.com/liangruijun/643043

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Android开发】 ListView使用实战详解,你get到了嘛?
【Android开发】 ListView使用实战详解,你get到了嘛?
53 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
87 0
Android开发之ListView使用经验分享
在Android开发中,ListView是使用最广泛的组件之一,虽然谷歌推出了RecycleView,但是很多项目中依旧在使用ListView,本文将总结一下使用过程中遇到的一些问题,与大家共勉~~~ 一、ListView 与 Adapter List...
760 0
Android开发重要参考资料
=======================博客============================= 秋百万 有心课堂 郭霖 源码 安装ffmpeg 胡凯 官方培训课程 litesuitsway 爱哥 trinea robinRobin Hu...
824 0
23703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载