Android編程之TabWidget選項(xiàng)卡用法實(shí)例分析
更新時(shí)間：2015年12月22日 15:51:55 作者：cappuccinoLau
這篇文章主要介紹了Android編程之TabWidget選項(xiàng)卡用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了TabWidget選項(xiàng)卡的具體實(shí)現(xiàn)技巧與使用注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了Android編程之TabWidget選項(xiàng)卡用法。分享給大家供大家參考，具體如下：
1 概覽
TabWidget與TabHost。tab組件一般包括TabHost和TabWidget、FrameLayout，且TabWidget、FrameLayout屬于TabHost。
是否繼承TabActivity的問(wèn)題
實(shí)現(xiàn)步驟。兩種實(shí)現(xiàn)方式，一種是將每個(gè)Tab的布局嵌在TabHost中的FrameLayout中，每個(gè)Tab的內(nèi)容布局與顯示都在FrameLayout中進(jìn)行，缺點(diǎn)是布局會(huì)顯得很臃腫；一種是每個(gè)Tab從FrameLayout中獨(dú)立出來(lái)，以Activity呈現(xiàn)，這樣使得每個(gè)Tab有單獨(dú)的布局。
2 效果圖
Widget在頂部的情形：
3 主要布局
3.1 TabMain布局
方式一：
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true"
android:background="#424242" >
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="@+id/theme"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/theme_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1" />
</LinearLayout>
<LinearLayout
android:id="@+id/wallpaper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/wallpaper_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab2" />
</LinearLayout>
<LinearLayout
android:id="@+id/iconbg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/iconbg_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab3" />
</LinearLayout>
<LinearLayout
android:id="@+id/screenlock"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/screenlock_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab4" />
</LinearLayout>
<LinearLayout
android:id="@+id/effect"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/effect_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab5" />
</LinearLayout>
</FrameLayout>
</RelativeLayout>
</TabHost>
方式二：
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/wcity_normal_bg" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/tab"
/>
</LinearLayout>
</TabHost>
3.2 TabItem布局
這一部分中方式一與方式二沒(méi)有什么區(qū)別，只有表示形式的區(qū)別。比如，根據(jù)需求，Tab可以
只以文字呈現(xiàn)，
可以只以圖片呈現(xiàn)，
可以同時(shí)有圖片和文字
其中有文字和圖片的布局如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/tabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_ispressed"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical" >
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
3.3點(diǎn)擊狀態(tài)
Tab鍵點(diǎn)擊后狀態(tài)的問(wèn)題，如果點(diǎn)擊后，沒(méi)有狀態(tài)提示對(duì)用戶是不友好的。點(diǎn)擊狀態(tài)的實(shí)現(xiàn)就是對(duì)TabItem布局的android:background進(jìn)行設(shè)置。例如：
上述TabItem中LinearLayout的android：background設(shè)置的屬性：@drawable/bg_ispressed
其中bg_ispressed文件如下：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/> </selector>
tab_selected_bg即是點(diǎn)擊后變換的圖片效果。
3.4 關(guān)于Tab位置的問(wèn)題
Tab標(biāo)簽顯示在頂部還是底部也是經(jīng)常會(huì)遇到的問(wèn)題。
通常TabMain布局中TabWidget在FrameLayout上面默認(rèn)就是顯示在頂部了，如果改成在底部顯示，首先會(huì)想到的是直接調(diào)換順序，將TabWidget放在FrameLayout后面。
情形一：
問(wèn)題來(lái)了，Tab欄直接消失掉（我試過(guò)），后來(lái)解決方法是：FrameLayout中添加屬性：android:layout_weight="1"。這種情形可以解決的條件是，TabWidget和FrameLayout被嵌套在LinearLayout布局中，如果是其他則行不通。
情形二：
TabWidget與FrameLayout順序任意，在TabWidget中添加屬性
復(fù)制代碼 代碼如下:
android:layout_alignParentBottom="true"
當(dāng)然，這種情形適合TabWidget和FrameLayout被嵌套在RelativeLayout布局中，同樣的，如果是其他則行不通。
注：以上兩種情形也不是絕對(duì)的，只實(shí)踐過(guò)以上兩種情形，至于其他布局就不清楚了，具體問(wèn)題具體分析吧。
4 繼承TabActivity?
4.1 繼承TabActivity與不繼承的問(wèn)題
繼承不繼承TabActivity，看自己習(xí)慣了，都能正確實(shí)現(xiàn)，沒(méi)什么區(qū)別，至于在代碼方面唯一的區(qū)別在于：
不繼承TabActivity而繼承Activity的需要在代碼中加入：
復(fù)制代碼 代碼如下:
mTabHost.setup();
4.2 主要代碼
直接繼承自Activity的代碼
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
public class TabDesignActivity extends Activity{
private Context mContex = this;
private TabHost mTabHost;
private String TAB1 = "tab1";
private String TAB2 = "tab2";
private String TAB3 = "tab3";
private String TAB4 = "tab4";
private String TAB5 = "tab5";
private List<LinearLayout> menuItemList;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_main);
menuItemList = new ArrayList<LinearLayout>();
mTabHost = (TabHost) findViewById(R.id.tabhost);
mTabHost.setup();
mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.tab1_ispressed, TAB1)).setContent(R.id.tab1));
mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.tab2_ispressed, TAB2)).setContent(R.id.tab2));
mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.tab3_ispressed, TAB3)).setContent(R.id.tab3));
mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.tab4_ispressed, TAB4)).setContent(R.id.tab4));
mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.tab5_ispressed, TAB5)).setContent(R.id.tab5));
}
public View getMenuItem(int imgID, String textID){
LinearLayout ll = (LinearLayout)LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);
ImageView imgView = (ImageView)ll.findViewById(R.id.icon);
imgView.setBackgroundResource(imgID);
TextView textView = (TextView)ll.findViewById(R.id.name);
textView.setText(textID);
menuItemList.add(ll);
return ll;
}
}
繼承自TabActivity的實(shí)現(xiàn)
/**
* @author aaron
*/
package com.aaron.activity;
import java.util.ArrayList;
import java.util.List;
import android.annotation.SuppressLint;
import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.TabSpec;
import com.aaron.util.R;
/**
* @author aaron
*
*/
public class TabWidget extends TabActivity {// 聲明TabHost對(duì)象
private TabHost mTabhost;
private LayoutInflater mInflater;
private List<TextView> mtext;
private List<ImageView> mimage;
private List<TabSpec> mTabSpec;
private List<LinearLayout> linearLayout;
private List<Intent> intent;
private Context mContext;
private static final String[] tabTitle = { "Tab1", "Tab2", "Tab3", "Tab4","Tab5"};
private static final int[] tabImage = { R.drawable.main1, R.drawable.main2, R.drawable.main3, R.drawable.main4,R.drawable.main5};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_main);
mContext = this;
mInflater = LayoutInflater.from(this);
mTabhost = (TabHost) findViewById(android.R.id.tabhost);
mTabSpec = new ArrayList<TabSpec>();
linearLayout = new ArrayList<LinearLayout>();
mtext = new ArrayList<TextView>();
intent = new ArrayList<Intent>();
//****************************************************************
//若是引用有圖片的布局
mimage = new ArrayList<ImageView>();
//****************************************************************
creatTab();
}
@SuppressLint("NewApi")
public void creatTab() {
for (int i = 0; i < tabTitle.length; i++) {
mTabSpec.add(mTabhost.newTabSpec(tabTitle[i]));
//****************************************************************
//選擇使用哪種布局
//****************************************************************
linearLayout.add((LinearLayout) mInflater.inflate(R.layout.tabwidget2, null));
mtext.add((TextView) linearLayout.get(i).findViewById(R.id.tab_Text_name));
mtext.get(i).setText(tabTitle[i]);
//****************************************************************
//若是引用有圖片的布局依次添加進(jìn)圖片
mimage.add((ImageView) linearLayout.get(i).findViewById(R.id.tab_Image_name));
mimage.get(i).setImageResource(tabImage[i]);
//****************************************************************
// 依次加入每個(gè)Tab的Activity
switch (i) {
case 0:
intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
break;
case 1:
intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
break;
case 2:
intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
break;
case 3:
intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
break;
case 4:
intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
break;
}
mTabSpec.get(i).setIndicator(linearLayout.get(i));
mTabSpec.get(i).setContent(intent.get(i));
mTabhost.addTab(mTabSpec.get(i));
}
}
4.3 關(guān)鍵代碼詳解
1）mTabHost.newTabSpec("tab1")用來(lái)new一個(gè)tab，同時(shí)標(biāo)記這個(gè)tab的tag。
2）setContent()用來(lái)處理點(diǎn)擊這個(gè)tab后的動(dòng)作，可以是這個(gè)Activity下的一個(gè)組件，如setContent(R.id.tab1)，也可以是一個(gè)intent，比如：setContent(newIntent(this, SubTab.class))。
3）setIndicator()用來(lái)標(biāo)記這個(gè)tab的名字，可以是setIndicator("tab1")，也可以包含其他的屬性，如圖片：setIndicator( "名稱",getResources().getDrawable(android.R.tab1))。
4）tabs.addTab(spec)將這個(gè)tab添加進(jìn)TabHost。
5）getMenuItem(R.drawable.tab_ispressed,TAB1)設(shè)置其中一Tab被按下的狀態(tài)改變，R.drawable.tab_ispressed布局如下：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/> <item android:drawable="@drawable/tab1_menu_effect"/> </selector>
希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- android TabHost(選項(xiàng)卡)的使用方法
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能（選項(xiàng)卡）
- Android多個(gè)TAB選項(xiàng)卡切換效果
- Android仿微信底部實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- Android利用Fragment實(shí)現(xiàn)Tab選項(xiàng)卡效果
- Android仿支付寶支付從底部彈窗效果
- Android仿支付寶微信支付密碼界面彈窗封裝dialog
- Android程序開發(fā)仿新版QQ鎖屏下彈窗功能
- Android控件PopupWindow模仿ios底部彈窗
- Android開發(fā)實(shí)現(xiàn)仿京東商品搜索選項(xiàng)卡彈窗功能
相關(guān)文章
Android開發(fā)實(shí)現(xiàn)TextView顯示豐富的文本
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)TextView顯示豐富的文本,涉及Android中TextView的使用技巧,需要的朋友可以參考下2015-12-12
Android之線程池ThreadPoolExecutor的簡(jiǎn)介
今天小編就為大家分享一篇關(guān)于Android之線程池ThreadPoolExecutor的簡(jiǎn)介，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
Android實(shí)現(xiàn)Bitmap位圖旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)Bitmap位圖旋轉(zhuǎn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
詳解Android沉浸式實(shí)現(xiàn)兼容解決辦法
本篇文章主要介紹了詳解Android沉浸式實(shí)現(xiàn)兼容解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Flutter實(shí)現(xiàn)Android滾動(dòng)懸浮效果過(guò)程
這篇文章主要介紹了Flutter實(shí)現(xiàn)Android滾動(dòng)懸浮效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
Android studio實(shí)現(xiàn)菜單效果
這篇文章主要為大家詳細(xì)介紹了Android studio實(shí)現(xiàn)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要給大家介紹了Android中設(shè)置組件半透明和透明效果的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
OpenGL Shader實(shí)例分析（8）彩色光圈效果
這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第8篇，彩色光圈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了android打開本地圖像的方法,涉及Android操作圖像的相關(guān)技巧,需要的朋友可以參考下2015-04-04
解決Android啟動(dòng)APP的一瞬間系統(tǒng)欄會(huì)變成藍(lán)色問(wèn)題
這篇文章主要介紹了解決Android啟動(dòng)APP的一瞬間系統(tǒng)欄會(huì)變成藍(lán)色問(wèn)題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06