开源项目AndroidUtil-採用Fragment实现TabHost
原文出自：方杰|http://fangjie.sinaapp.com/?p=141 转载请注明出处
学习Android也有一段时间了。感觉大部分的Android应用都有非常多类似的组件，所以就打算做了这样一个开源项目，目的是整合一些Android开发经常使用的组件Demo，方便以后项目中直接拿来用。git地址：https://github.com/JayFang1993/AndroidUtil
废话不多说，首先讲第一个经常使用的组件TabHost的实现。之前我们能够通过继承TabActivity来实现，后来的API中已经不建议用这样的方式了，所以今天我们主要讲的是用Fragment来实现Tabhost。
在新浪微博等非常多APP中都有底部选项卡TabHost。
首先看下实现后的效果。
一、TabHost的实现
Tabhost的每个选项卡是通过RadioGroup实现的，每个Tab就是一个RadioButton。
页面除TabHost以外的内容区域是Fragment。
以下是详细的布局文件main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:id="@+id/title"
android:text="昌大软院"
android:textSize="18dp"
android:textColor="#a8aeb5"
android:typeface="monospace"
android:background="@drawable/title_bg" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Done"
android:textColor="#a8aeb5"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
android:background="@drawable/done" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/back"
android:textColor="#a8aeb5"
android:text="Back"
android:layout_alignParentLeft="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="8dp"
/>
<FrameLayout
android:id="@+id/content"
android:layout_below="@id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:background="@drawable/tabhost_bg" >
<RadioButton
android:id="@+id/rb_home"
android:drawableTop="@drawable/tab1"
style="@style/tab"
android:text="主页" />
<RadioButton
android:id="@+id/rb_at"
style="@style/tab"
android:drawableTop="@drawable/tab2"
android:text="收藏夹" />
<RadioButton
android:id="@+id/rb_mess"
style="@style/tab"
android:drawableTop="@drawable/tab3"
android:text="我" />
<RadioButton
android:id="@+id/rb_more"
style="@style/tab"
android:drawableTop="@drawable/tab4"
android:text="很多其它" />
</RadioGroup>
</RelativeLayout>
每个Tab的样式：宽度、高度、背景图片这些都是同样的。所以写在了一个style文件里。styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="tab">
<item name="android:layout_height">48dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
<item name="android:textSize">10dp</item>
<item name="android:paddingTop">8dp</item>
<item name="android:background">@drawable/tabhost_bg_selector</item>
<item name="android:textColor">#a8aeb5</item>
<item name="android:button">@null</item>
</style>
</resources>
为了可以制造出Tab按下选中的效果，所以为Tab的背景设计了一个selector。tabhost_bg_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tabhost_press" android:state_pressed="true" />
<item android:drawable="@drawable/tabhost_press" android:state_checked="true" />
<item android:drawable="@drawable/tabhost_bg"/>
</selector>
至此，关于TabHost的全部布局文件都写完了。
以下看看Activity中的Java代码。
MainActivity.java
public class MainActivity extends FragmentActivity {
private FragmentManager fragmentManager;
private RadioGroup radioGroup;
private RadioButton rb1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragmentManager = getSupportFragmentManager();
radioGroup = (RadioGroup) findViewById(R.id.main_radio);
rb1=(RadioButton) findViewById(R.id.rb_home);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@SuppressLint("NewApi")
public void onCheckedChanged(RadioGroup group, int checkedId) {
rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_bg_selector));
FragmentTransaction transaction = fragmentManager.beginTransaction();
ContentFrame fragment = null;
switch(checkedId)
{
case 0:
fragment= new ContentFrame();
break;
case 1:
fragment= new ContentFrame();
break;
case 2:
fragment= new ContentFrame();
break;
case 3:
fragment= new ContentFrame();
break;
default:
fragment= new ContentFrame();
break;
}
transaction.replace(R.id.content, (Fragment)fragment);
transaction.commit();
}
});
//设置默认选中第一项
radioGroup.check(1);
radioGroup.check(0);
//设置按下的背景效果
rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_press));
}
}
针对每个选项卡的内容界面代码，随便写一个布局文件content.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/content"
/>
</LinearLayout>
内容部分的Java代码，实现和Activity几乎相同。只是这里须要继承Fragment而不是Activity。
从content.xml中得到一个View。然后将这个View替换Main中的Fragment部分。
public class ContentFrame extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.content, null);
TextView textView = (TextView) view.findViewById(R.id.content);
textView.setText("Hello world");
return view;
}
}
补充：以上代码是考虑到Android 3.0曾经API中没有Fragment。导入android-support-v4.jar后的代码，有几点差别：
- 3.0之前的应该导入 import android.support.v4.app.*; 这个包中Fragment相关类；3.o之后的能够直接导入android.app.*;
- 3.0之前的MainAcitivity要继承自FragmentActivity。3.0之后的直接继承自Activity;
- 3.0之前 fragmentManager = getSupportFragmentManager();3.0之后 fragmentManager = getFragmentManager();
欢迎各位关注我的个人网站：http://fangjie.sinaapp.com/
