TabActivity实现底部菜单栏（六）

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

本讲内容：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 要原码的、路过的、学习过的请留个言，顶个呗～～

时间： 2024-10-13 17:07:12

TabActivity实现底部菜单栏（六）的相关文章

【Android UI设计与开发】第06期：底部菜单栏（一）使用TabActivity实现底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8989063       从这一篇文章开始,我们将进入到一个应用程序主界面UI的开发和设计中了,底部菜单栏在Android的应用开发当中占有非常重要的地位.几乎所有的手机应用程序都有底部菜单栏这样的控件,主要是因为手机的屏幕大小有限,这样一种底部菜单栏实现起来的效果可以很方便的为用户切换自己所需要的界面,具有更强的交互性.底部菜单栏的样式和效果也是五花八门,多的数不胜数,但是

关于安卓开发实现底部菜单栏

将TabHost的标签放在底部 直接上代码 主代码: 1 package sdut; 2 3 import com.example.sdutfriends.R; 4 5 import android.app.AlertDialog; 6 import android.app.TabActivity; 7 import android.content.DialogInterface; 8 import android.content.Intent; 9 import android.os.Bund

底部菜单栏（二） TabHost &amp; RadioGroup 实现

需求:使用TabHost & RadioGroup实现底部菜单栏: 效果图: 实现分析: 1.目录结构: 代码实现: 1. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android

底部菜单栏（一） TabHost实现

需求:使用TabHost实现底部菜单栏: 效果图: 实现分析: 1.目录结构: 代码实现: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"

【转】【Android UI设计与开发】第07期：底部菜单栏（二）Fragment的详细介绍和使用方法

原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃用,那么我就不再浪费口水继续讲解它了,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Activity十分的相似,这一篇我花大量的篇幅来详细的讲解Fragment的介绍和使用方法. 一.Fragment的基础知识介绍  

Android底部菜单栏（用TabHost一次性加载耗内存）

上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

Android仿微信底部菜单栏+顶部菜单栏（附源码）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度. 最终效果:源码免费下载 一.布局 1.顶部菜单布局,命名为top_layout.xml

炫酷的底部菜单栏BottomBar

开源项目分析BottomBar 今天分析一个炫酷的底部菜单栏开源项目,先说明下用法,再分析一下源码的实现. GitHub地址 https://github.com/roughike/BottomBar 先上个效果图 使用 添加依赖 compile 'com.roughike:bottom-bar:1.3.3' 创建menu资源文件 res/menu/bottombar_menu.xml: <menu xmlns:android="http://schemas.android.com/apk

我的Android之路——底部菜单栏的实现

底部菜单栏的实现 底部菜单栏两种实现方法:ViewPager:可滑动的界面:Fragment:固定的界面. 首先,页面布局,在除去顶部toolbar之后,将主界面分为两部分,一部分为界面显示区,另一部分作为底部菜单栏. xml布局文件:content_main.xml(主页面除去toolbar后剩余部分) <LinearLayout android:layout_width="match_parent" android:layout_height="match_pare