android之TabWidget选项卡

转载 2016年08月29日 13:38:48

概览

l  TabWidgetTabHosttab组件一般包括TabHostTabWidgetFrameLayout,且TabWidgetFrameLayout属于TabHost

l  是否继承TabActivity的问题

l  实现步骤。两种实现方式,一种是将每个Tab的布局嵌在TabHost中的FrameLayout中,每个Tab的内容布局与显示都在FrameLayout中进行,缺点是布局会显得很臃肿;一种是每个TabFrameLayout中独立出来,以Activity呈现,这样使得每个Tab有单独的布局。

 

效果图

 

 

Widget在顶部的情形:

 

主要布局

3.1 TabMain布局

 

方式一:

 

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/tabhost"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <RelativeLayout  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent"  
  11.         android:orientation="vertical" >  
  12.   
  13.         <TabWidget  
  14.             android:id="@android:id/tabs"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="60dip"  
  17.             android:layout_alignParentBottom="true"  
  18.             android:background="#424242" >  
  19.         </TabWidget>  
  20.   
  21.         <FrameLayout  
  22.             android:id="@android:id/tabcontent"  
  23.             android:layout_width="fill_parent"  
  24.             android:layout_height="fill_parent" >  
  25.   
  26.             <LinearLayout  
  27.                 android:id="@+id/theme"  
  28.                 android:layout_width="fill_parent"  
  29.                 android:layout_height="fill_parent"  
  30.                 android:orientation="vertical" >  
  31.   
  32.                 <TextView  
  33.                     android:id="@+id/theme_title"  
  34.                     android:layout_width="wrap_content"  
  35.                     android:layout_height="wrap_content"  
  36.                     android:text="Tab1" />  
  37.             </LinearLayout>  
  38.   
  39.             <LinearLayout  
  40.                 android:id="@+id/wallpaper"  
  41.                 android:layout_width="fill_parent"  
  42.                 android:layout_height="fill_parent"  
  43.                 android:orientation="vertical" >  
  44.   
  45.                 <TextView  
  46.                     android:id="@+id/wallpaper_title"  
  47.                     android:layout_width="wrap_content"  
  48.                     android:layout_height="wrap_content"  
  49.                     android:text="Tab2" />  
  50.             </LinearLayout>  
  51.   
  52.             <LinearLayout  
  53.                 android:id="@+id/iconbg"  
  54.                 android:layout_width="fill_parent"  
  55.                 android:layout_height="fill_parent"  
  56.                 android:orientation="vertical" >  
  57.   
  58.                 <TextView  
  59.                     android:id="@+id/iconbg_title"  
  60.                     android:layout_width="wrap_content"  
  61.                     android:layout_height="wrap_content"  
  62.                     android:text="Tab3" />  
  63.             </LinearLayout>  
  64.   
  65.             <LinearLayout  
  66.                 android:id="@+id/screenlock"  
  67.                 android:layout_width="fill_parent"  
  68.                 android:layout_height="fill_parent"  
  69.                 android:orientation="vertical" >  
  70.   
  71.                 <TextView  
  72.                     android:id="@+id/screenlock_title"  
  73.                     android:layout_width="wrap_content"  
  74.                     android:layout_height="wrap_content"  
  75.                     android:text="Tab4" />  
  76.             </LinearLayout>  
  77.   
  78.             <LinearLayout  
  79.                 android:id="@+id/effect"  
  80.                 android:layout_width="fill_parent"  
  81.                 android:layout_height="fill_parent"  
  82.                 android:orientation="vertical" >  
  83.   
  84.                 <TextView  
  85.                     android:id="@+id/effect_title"  
  86.                     android:layout_width="wrap_content"  
  87.                     android:layout_height="wrap_content"  
  88.                     android:text="Tab5" />  
  89.             </LinearLayout>  
  90.         </FrameLayout>  
  91.     </RelativeLayout>  
  92.   
  93. </TabHost>  


 

方式二:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.    
  3.  <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  4.      android:id="@android:id/tabhost"  
  5.      android:layout_width="fill_parent"  
  6.      android:layout_height="fill_parent"  
  7.      android:background="@color/wcity_normal_bg" >  
  8.   
  9.     <LinearLayout  
  10.          android:layout_width="fill_parent"  
  11.          android:layout_height="fill_parent"  
  12.          android:orientation="vertical" >  
  13.   
  14.       
  15.     <FrameLayout  
  16.          android:id="@android:id/tabcontent"  
  17.          android:layout_width="fill_parent"  
  18.          android:layout_height="fill_parent"  
  19.          android:layout_weight="1" >  
  20.     </FrameLayout>  
  21.           
  22.       
  23.     <TabWidget  
  24.          android:id="@android:id/tabs"  
  25.          android:layout_width="fill_parent"  
  26.          android:layout_height="wrap_content"  
  27.          android:background="@drawable/tab"   
  28.          />  
  29.   
  30.      </LinearLayout>  
  31.   
  32. </TabHost>  


 

3.2 TabItem布局

这一部分中方式一与方式二没有什么区别,只有表示形式的区别。比如,根据需求,Tab可以

只以文字呈现,

可以只以图片呈现,

可以同时有图片和文字

其中有文字和图片的布局如下:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:gravity="center_horizontal|center_vertical"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <LinearLayout  
  9.         android:id="@+id/tabItem  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:background="@drawable/bg_ispressed"  
  13.         android:gravity="center_horizontal|center_vertical"  
  14.         android:orientation="vertical" >  
  15.   
  16.         <ImageView  
  17.             android:id="@+id/icon"  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content" />  
  20.   
  21.         <TextView  
  22.             android:id="@+id/name"  
  23.             android:layout_width="wrap_content"  
  24.             android:layout_height="wrap_content" />  
  25.     </LinearLayout>  
  26.   
  27. </LinearLayout>  


 

3.3点击状态

Tab键点击后状态的问题,如果点击后,没有状态提示对用户是不友好的。点击状态的实现就是对TabItem布局的android:background进行设置。例如:

上述TabItemLinearLayoutandroidbackground设置的属性:@drawable/bg_ispressed

 

其中bg_ispressed文件如下:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/>  
  5.   
  6. </selector>  


 

tab_selected_bg即是点击后变换的图片效果。

3.4 关于Tab位置的问题

Tab标签显示在顶部还是底部也是经常会遇到的问题。

 

通常TabMain布局中TabWidgetFrameLayout上面默认就是显示在顶部了,如果改成在底部显示,首先会想到的是直接调换顺序,将TabWidget放在FrameLayout后面。

 

情形一:

问题来了,Tab栏直接消失掉(我试过),后来解决方法是:FrameLayout中添加属性:android:layout_weight="1"。这种情形可以解决的条件是,TabWidgetFrameLayout被嵌套在LinearLayout布局中,如果是其他则行不通。

 

情形二:

TabWidgetFrameLayout顺序任意,在TabWidget中添加属性

android:layout_alignParentBottom="true"

当然,这种情形适合TabWidgetFrameLayout被嵌套在RelativeLayout布局中,同样的,如果是其他则行不通。

 

注:以上两种情形也不是绝对的,只实践过以上两种情形,至于其他布局就不清楚了,具体问题具体分析吧。

 

继承TabActivity?

 

4.1 继承TabActivity与不继承的问题

继承不继承TabActivity,看自己习惯了,都能正确实现,没什么区别,至于在代码方面唯一的区别在于:

不继承TabActivity而继承Activity的需要在代码中加入:

mTabHost.setup();

4.2 主要代码

 

直接继承自Activity的代码

[java] view plain copy
  1. import java.util.ArrayList;  
  2. import java.util.List;  
  3.   
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.os.Bundle;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.widget.ImageView;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.TabHost;  
  12. import android.widget.TextView;  
  13.   
  14. public class TabDesignActivity extends Activity{  
  15.     private Context mContex = this;  
  16.     private TabHost mTabHost;  
  17.       
  18.     private String TAB1 = "tab1";  
  19.     private String TAB2 = "tab2";  
  20.     private String TAB3 = "tab3";  
  21.     private String TAB4 = "tab4";  
  22.     private String TAB5 = "tab5";  
  23.       
  24.     private List<LinearLayout> menuItemList;  
  25.       
  26.       
  27.     @Override  
  28.     protected void onCreate(Bundle savedInstanceState) {  
  29.         // TODO Auto-generated method stub  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.tab_main);  
  32.         menuItemList = new ArrayList<LinearLayout>();  
  33.           
  34.         mTabHost = (TabHost) findViewById(R.id.tabhost);  
  35.         mTabHost.setup();  
  36.           
  37.         mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.tab1_ispressed, TAB1)).setContent(R.id.tab1));  
  38.         mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.tab2_ispressed, TAB2)).setContent(R.id.tab2));  
  39.         mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.tab3_ispressed, TAB3)).setContent(R.id.tab3));  
  40.         mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.tab4_ispressed, TAB4)).setContent(R.id.tab4));  
  41.         mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.tab5_ispressed, TAB5)).setContent(R.id.tab5));  
  42.     }  
  43.       
  44.     public View getMenuItem(int imgID, String textID){  
  45.         LinearLayout ll = (LinearLayout) LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);  
  46.         ImageView imgView = (ImageView)ll.findViewById(R.id.icon);  
  47.         imgView.setBackgroundResource(imgID);  
  48.         TextView textView = (TextView)ll.findViewById(R.id.name);  
  49.         textView.setText(textID);  
  50.         menuItemList.add(ll);  
  51.         return ll;  
  52.     }     
  53. }  


 

继承自TabActivity的实现

[java] view plain copy
  1. /** 
  2.  * @author aaron 
  3.  */  
  4. package com.aaron.activity;  
  5.   
  6. import java.util.ArrayList;  
  7. import java.util.List;  
  8.   
  9. import android.annotation.SuppressLint;  
  10. import android.app.TabActivity;  
  11. import android.content.Context;  
  12. import android.content.Intent;  
  13. import android.os.Bundle;  
  14. import android.view.LayoutInflater;  
  15. import android.widget.ImageView;  
  16. import android.widget.LinearLayout;  
  17. import android.widget.TabHost;  
  18. import android.widget.TextView;  
  19. import android.widget.TabHost.TabSpec;  
  20.   
  21. import com.aaron.util.R;  
  22.   
  23. /** 
  24.  * @author aaron 
  25.  *  
  26.  */  
  27. public class TabWidget extends TabActivity {// 声明TabHost对象  
  28.     private TabHost mTabhost;  
  29.     private LayoutInflater mInflater;  
  30.     private List<TextView> mtext;  
  31.     private List<ImageView> mimage;  
  32.     private List<TabSpec> mTabSpec;  
  33.     private List<LinearLayout> linearLayout;  
  34.     private List<Intent> intent;  
  35.     private Context mContext;  
  36.     private static final String[] tabTitle = { "Tab1""Tab2""Tab3""Tab4","Tab5"};  
  37.     private static final int[] tabImage = { R.drawable.main1  
  38.         , R.drawable.main2, R.drawable.main3, R.drawable.main4,R.drawable.main5};  
  39.   
  40.     /** Called when the activity is first created. */  
  41.     @Override  
  42.     public void onCreate(Bundle savedInstanceState) {  
  43.         super.onCreate(savedInstanceState);  
  44.         setContentView(R.layout.tab_main);  
  45.         mContext = this;  
  46.         mInflater = LayoutInflater.from(this);  
  47.         mTabhost = (TabHost) findViewById(android.R.id.tabhost);  
  48.         mTabSpec = new ArrayList<TabSpec>();  
  49.         linearLayout = new ArrayList<LinearLayout>();  
  50.         mtext = new ArrayList<TextView>();  
  51.         intent = new ArrayList<Intent>();  
  52.           
  53.         //****************************************************************  
  54.         //若是引用有图片的布局  
  55.         mimage = new ArrayList<ImageView>();  
  56.         //****************************************************************  
  57.           
  58.         creatTab();  
  59.   
  60.     }  
  61.   
  62.     @SuppressLint("NewApi")  
  63.     public void creatTab() {  
  64.         for (int i = 0; i < tabTitle.length; i++) {  
  65.             mTabSpec.add(mTabhost.newTabSpec(tabTitle[i]));  
  66.               
  67.             //****************************************************************  
  68.             //选择使用哪种布局  
  69.             //****************************************************************  
  70.             linearLayout.add((LinearLayout) mInflater.inflate(  
  71.                     R.layout.tabwidget2, null));  
  72.               
  73.             mtext.add((TextView) linearLayout.get(i)  
  74.                     .findViewById(R.id.tab_Text_name));  
  75.             mtext.get(i).setText(tabTitle[i]);  
  76.               
  77.             //****************************************************************  
  78.             //若是引用有图片的布局依次添加进图片  
  79.             mimage.add((ImageView) linearLayout.get(i)  
  80.                     .findViewById(R.id.tab_Image_name));  
  81.             mimage.get(i).setImageResource(tabImage[i]);  
  82.             //****************************************************************  
  83.   
  84.             // 依次加入每个Tab的Activity  
  85.             switch (i) {  
  86.             case 0:  
  87.                 intent.add(new Intent().setClass(TabWidget.this,  
  88.                         UdoActivity.class));  
  89.                 break;  
  90.             case 1:  
  91.                 intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));  
  92.                 break;  
  93.             case 2:  
  94.                 intent.add(new Intent().setClass(TabWidget.this,  
  95.                         UdoActivity.class));  
  96.                 break;  
  97.             case 3:  
  98.                 intent.add(new Intent().setClass(TabWidget.this,  
  99.                         UdoActivity.class));  
  100.                 break;  
  101.             case 4:  
  102.                 intent.add(new Intent().setClass(TabWidget.this,  
  103.                         UdoActivity.class));  
  104.                 break;  
  105.             }  
  106.             mTabSpec.get(i).setIndicator(linearLayout.get(i));  
  107.   
  108.             mTabSpec.get(i).setContent(intent.get(i));  
  109.   
  110.             mTabhost.addTab(mTabSpec.get(i));  
  111.   
  112.         }  
  113.     }  


 

4.3 关键代码详解

1mTabHost.newTabSpec("tab1")用来new一个tab,同时标记这个tabtag

 

2setContent()用来处理点击这个tab后的动作,可以是这个Activity下的一个组件,如setContent(R.id.tab1),也可以是一个intent,比如:setContent(newIntent(this, SubTab.class))

3setIndicator()用来标记这个tab的名字,可以是setIndicator("tab1"),也可以包含其他的属性,如图片:setIndicator( "名称",getResources().getDrawable(android.R.tab1))

4tabs.addTab(spec)将这个tab添加进TabHost

5getMenuItem(R.drawable.tab_ispressed,TAB1)设置其中一Tab被按下的状态改变,R.drawable.tab_ispressed布局如下:

转载自 http://blog.csdn.net/cappuccinolau/article/details/7909549

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/>  
  5.     <item android:drawable="@drawable/tab1_menu_effect"/>  
  6.   
  7. </selector>  




相关文章推荐

Android练习-----选项卡(TabHost)、(TabWidget)、(FrameLayout)

Android练习-----选项卡(TabHost)、(TabWidget)、(FrameLayout)

android之TabWidget选项卡

1 概览 l  TabWidget与TabHost。tab组件一般包括TabHost和TabWidget、FrameLayout,且TabWidget、FrameLayout属于TabHos...

QT实现拖拽TabWidget选项卡形成单独的窗口,双击标题栏可还原的功能【dock功能】

近期做QT,我也是新手,这个主要是用重构父类事件实现的,即子类化。此文章是在http://blog.csdn.net/zmm19861210/article/details/9036779上看到的,但...

使用选项卡TabWidget与TabHost实现底部或者顶部四个分类按钮 点击切换对应的fragment

首先作为一名菜鸟,尤其是记忆不好菜鸟,主动手写笔记记忆一些东西还是很有必要的,至少对于我而言。 言归正传,首先当大家看到这个需求,会想到布局中的选项卡控件,TabHost与TabWidget,其中这两...

选项卡(TabWidget) 使用例子

1.action 必须继承tabActivity, 2.配置xml 文件,TabHost ,TabWidget ,FrameLayout的ID必须分别为@android:id/tabhost,@an...

【Android UI设计与开发】第11期:顶部标题栏(二)ActionBar实现Tab选项卡和下拉导航列表

在上一篇文章中,我们只是大概的了解了一下关于ActionBar这个类的简单用法,今天我会继续以实例进行更加深入的讲解。   一、实现Tab选项标签          当你想要在一个Activity中提...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)