滴水穿石不是靠力,而是因为不舍昼夜。
本讲内容: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,};
}
}
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界面文件:
//第一种实现方式,自定义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>
下面是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;
}
}
- public TabHost.TabSpec setIndicatior(CharSwquence label,Drawable icon).指定tab的标题和图标。
- public TabHost.TabSpec (View view)通过View来自定义tab
- public TabHost.TabSpec(CharSequence label) 指定tab的标题,此时无图标。
- public TabHost.TabSpec setContent(TabHost.TabContentFactory )
- public TabHost.TabSpec setContent(int ViewId)
- public TabHost.TabSpec setContent(Intent intent)