开源项目AndroidUtil-采用Fragment实现TabHost
浏览数：18 /
时间：2015年06月11日
原文出自：方杰|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();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
