TabActivity实现底部菜单栏（六）

时间：2015-03-31 09:21:13 阅读：192 评论：0 收藏：0 [点我收藏+]

标签：

滴水穿石不是靠力，而是因为不舍昼夜。

本讲内容：TabActivity实现底部菜单栏

TabActivity这个类已经在Android4.0的系统中被弃用了，新的应用程序应该使用Fragment来代替该类的开发

示例效果图

技术分享

（一）第一种实现方式：隐藏TabWidget，通过RadioGroup和RadioButton实现底部菜单栏。这种方式更漂亮，也更灵活，大部分的应用程序基本都是使用这种方式，通过setCurrentTabByTag()方法来切换不同的选项卡。

下面是res/layout/tab_layout.xml 布局文件：

<?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="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

        <RadioGroup
            android:id="@+id/main_radiogroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/tab_widget_background"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="2dip" >

            <RadioButton
                android:id="@+id/RadioButton0"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon1"
                android:text="主页" />

            <RadioButton
                android:id="@+id/RadioButton1"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon2"
                android:text="搜索" />

            <RadioButton
                android:id="@+id/RadioButton2"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon3"
                android:text="设置" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

下面是res/values/activity01_layout.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian01" />

</LinearLayout>

下面是res/values/activity02_layout.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian02" />

</LinearLayout>

下面是res/values/activity03_layout.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian03" />

</LinearLayout>

下面是res/drawable/seletor_tab_background.xml 文件:(自定义Tab按钮资源文件)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_item_d" android:state_selected="true"/>
</selector>

下面是Constant.java界面文件：(定义一个常量工具类)

public class Constant {
	
	public static final class ConstantValue{
		//Tab选项卡的图标
		public static int mImageViewArray[]={R.drawable.tab_icon1,R.drawable.tab_icon2,R.drawable.tab_icon3};
	
		//Tab选项卡的文字
		public static String mTextviewArray[] = {"主页", "搜索", "设置"};
		
		//每一个Tab界面
		public static Class mTabClassArray[]= {Activity01.class,Activity02.class,Activity03.class,};
	}
}

下面是Activity01.java界面文件：(定义Tab选项卡内容的Activity)

public class Activity01 extends Activity{
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity01_layout);
	}
}

下面是Activity02.java界面文件：(定义Tab选项卡内容的Activity)

public class Activity02 extends Activity{
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity02_layout);
	}
}

下面是Activity03.java界面文件：(定义Tab选项卡内容的Activity)

public class Activity03 extends Activity {
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity03_layout);
	}
}

下面是CustomTabActivity.java界面文件：

自定义Tab选项卡Activity类，在这个类中我们可以采用两种方法编写标签页：

1、第一种是继承TabActivity ,然后使用getTabHost()获取TabHost对象；

2、第二种方法是使用自定的TabHost在布局文件上<TabHost>的自定义其ID，然后通过findViewById()，方法获得TabHost对象。

//第一种实现方式，自定义RadioGroup
public class CustomTabActivity extends TabActivity {
	// 定义TabHost对象
	private TabHost tabHost;
	// 定义RadioGroup对象
	private RadioGroup radioGroup;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab_layout1);

		initView();
		initData();
	}

	// 初始化组件
	private void initView() {
		// 实例化TabHost，得到TabHost对象
		tabHost = getTabHost();

		// 得到Activity的个数
		int count = ConstantValue.mTabClassArray.length;

		for (int i = 0; i < count; i++) {
			// 为每一个Tab按钮设置图标、文字和内容
			TabSpec tabSpec = tabHost
					.newTabSpec(ConstantValue.mTextviewArray[i])
					.setIndicator(ConstantValue.mTextviewArray[i])
					.setContent(getTabItemIntent(i));
			// 将Tab按钮添加进Tab选项卡中
			tabHost.addTab(tabSpec);
		}

		// 实例化RadioGroup
		radioGroup = (RadioGroup) findViewById(R.id.main_radiogroup);
	}

	// 初始化组件
	private void initData() {
		// 给radioGroup设置监听事件
		radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch (checkedId) {
				case R.id.RadioButton0:
					tabHost.setCurrentTabByTag(ConstantValue.mTextviewArray[0]);
					break;
				case R.id.RadioButton1:
					tabHost.setCurrentTabByTag(ConstantValue.mTextviewArray[1]);
					break;
				case R.id.RadioButton2:
					tabHost.setCurrentTabByTag(ConstantValue.mTextviewArray[2]);
					break;
				}
			}
		});
		((RadioButton) radioGroup.getChildAt(0)).toggle();
	}

	// 给Tab选项卡设置内容（每个内容都是一个Activity）
	private Intent getTabItemIntent(int index) {
		Intent intent = new Intent(this, ConstantValue.mTabClassArray[index]);
		return intent;
	}

}

第二种方法：自定义TabWidget

下面是res/layout/tab_layout.xml 布局文件：(首先创建一个TabWidget的布局文件)

<?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="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.0" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_widget_background"
            android:padding="2dp" />
    </LinearLayout>

</TabHost>

注意：

1、不管你是使用TabActivity 还是自定义TabHost，都要求以TabHost作为XML布局文件的根；

2、将FrameLayout的属性值layout_weight设置为了1.0，这样就可以把TabWidget的组件从顶部挤了下来变成了底部菜单栏。

3、<TabWidger> 和<FrameLayout>的Id 必须使用系统id，分别为android:id/tabs 和 android：id/tabcontent 。因为系统会使用者两个id来初始化TabHost的两个实例变量（mTabWidget 和 mTabContent）。

下面是res/layout/tab_item_view.xml 布局文件：(初始化Tab按钮)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:padding="3dp" />

    <TextView
        android:id="@+id/textview"
        style="@style/tab_item_text_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

下面是res/values/styles.xml 布局文件：(方便Tab按钮字体和背景格式的统一)

<style name="tab_item_text_style">  
    <item name="android:textSize">10.0dip</item>  
    <item name="android:textColor">#ffffffff</item>  
    <item name="android:ellipsize">marquee</item>         
    <item name="android:singleLine">true</item>  
</style>  
  
<style name="tab_item_background">  
    <item name="android:textAppearance">@style/tab_item_text_style</item>         
    <item name="android:gravity">center_horizontal</item>    
    <item name="android:background">@drawable/selector_tab_background2</item>  
    <item name="android:layout_width">fill_parent</item>  
    <item name="android:layout_height">wrap_content</item>  
    <item name="android:button">@null</item>           
    <item name="android:drawablePadding">3.0dip</item>  
    <item name="android:layout_weight">1.0</item>  
</style>

和上面一样：

下面是res/drawable/seletor_tab_background.xml 文件:(自定义Tab按钮资源文件)

下面是res/values/activity01_layout.xml 布局文件：

下面是res/values/activity02_layout.xml 布局文件：

下面是res/values/activity03_layout.xml 布局文件：

下面是Constant.java界面文件：(定义一个常量工具类)

下面是Activity01.java界面文件：

下面是Activity02.java界面文件：

下面是Activity03.java界面文件：

下面是CustomTabActivity.java界面文件：

//第一种实现方法,自定义TabHost
public class CustomTabActivity extends TabActivity{
	//定义TabHost对象
	private TabHost tabHost;
	//定义一个布局
	private LayoutInflater layoutInflater;
	
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab_layout1);
		
		initView();
	}
	
	//初始化组件
	private void initView() {
		//实例化TabHost对象，得到TabHost
		tabHost=getTabHost();
		
		//实例化布局对象
		layoutInflater=LayoutInflater.from(this);
		
		//得到Activity的个数
		int count=ConstantValue.mTabClassArray.length;
		for(int i=0;i<count;i++){
			//为每一个Tab按钮设置图标、文字和内容
			TabSpec tabSpec = tabHost.newTabSpec(ConstantValue.mTextviewArray[i]).setIndicator(getTabItemView(i)).setContent(getTabItemIntent(i));
			//将Tab按钮添加进Tab选项卡中
			tabHost.addTab(tabSpec);
			//设置Tab按钮的背景
			tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
		}
				
	}
	
	//给Tab按钮设置图标和文字
	private View getTabItemView(int index){
		View view=layoutInflater.inflate(R.layout.tab_item_view, null);
		
		//注意要写view.否则会报错
		ImageView imageView=(ImageView) view.findViewById(R.id.imageview);
		if(imageView !=null){
			imageView.setImageResource(ConstantValue.mImageViewArray[index]);
		}
		
		TextView textView=(TextView) view.findViewById(R.id.textview);
		textView.setText(ConstantValue.mTextviewArray[index]);
		
		return view;
	}
	
	//给Tab选项卡设置内容（每个内容都是一个Activity）
	private Intent getTabItemIntent(int index){
		Intent intent=new Intent(this,ConstantValue.mTabClassArray[index]);
		return intent;
	}

}

1、首先需要做的是获取TabHost对象，可以通过TabActivtiy里的getTabHsot()方法；

2、接着向TabHost添加tabs.即调用tabHost.addTab(TabSpec) 方法。TabSpec主要包含了setIndicator 和 setContent 方法，通过这两个方法来指定Tab 和 TanContent；

3、 TabSpec 通过 .newTabSpec(String tag)来创建实例。实例化后对其属性进行设置。setIndicator()设置tab,它有3个重载的函数：

public TabHost.TabSpec setIndicatior(CharSwquence label,Drawable icon).指定tab的标题和图标。
public TabHost.TabSpec (View view)通过View来自定义tab
public TabHost.TabSpec(CharSequence label) 指定tab的标题，此时无图标。

4、setContent 指定tab的展示内容，它也有3种重载：

public TabHost.TabSpec setContent(TabHost.TabContentFactory )
public TabHost.TabSpec setContent(int ViewId)
public TabHost.TabSpec setContent(Intent intent)

　　后两种方法比较后理解一个是通过 ViewId指定显示的内容，如.setContent(R.id.Team_EditText)，第三种则是直接通过Intent加载一个新的Activity页。如.setContent(new Intent(this, MeetingActivity.class)));

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～

TabActivity实现底部菜单栏（六）

标签：

原文地址：http://blog.csdn.net/liguojin1230/article/details/44754679

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行