底部导航栏：FragmentTabHost+Fragment

原创出处：http://blog.csdn.net/yangyu20121224/article/details/9016223

1、布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <FrameLayout        android:id="@+id/<span style="color: rgb(255, 0, 0);">realcontent</span>"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"       />    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="0dp"            android:layout_height="0dp"/>        </android.support.v4.app.FragmentTabHost></LinearLayout>

2、导航栏中图片的xml布局文件：（点击图片变色）另外3个类似

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/tabbar_home_selected"/><!--选中状态-->    <item android:state_window_focused="false" android:drawable="@drawable/tabbar_home" /><!--未选中状态--></selector>

3、导航栏中文字的xml布局文件：（点击文字变色）在textview中添加： android:textColor="@drawable/tabhost_text"

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_selected="true" android:color="#0082FF"></item>    <item android:state_selected="false" android:color="#000000"></item></selector>

4、导航栏单个item的布局文件：

<?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"    >    <ImageView        android:id="@+id/ivItem"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_gravity="center"        />    <TextView        android:id="@+id/tvItem"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:textColor="@drawable/tabhost_text"        /></LinearLayout>

5、主Activity：public class MainActivity extends FragmentActivity {    private FragmentTabHost mTabHost;

    //导航栏item对应的Fragment：

    private Class[] mFragemntArrays = {Home.class,Message.class, Find.class,User.class};

    //导航栏item图片对应的背景文件：    private int[] mImageArrays = {R.drawable.tabhost_home,R.drawable.tabhost_message,R.drawable.tabhost_find,R.drawable.tabhost_user}; //    private String[] mTextArrays={"首页","消息","发现","我"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initTabHost();//fragmenttabhost初始化    }    private void initTabHost() {        //实例化        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);        mTabHost.setup(this, getSupportFragmentManager(),<span style="color:#ff0000;">R.id.realcontent</span>);        int count = mFragemntArrays.length;        for (int i=0;i<count;i++){            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextArrays[i]).setIndicator(getTabItemView(i));            mTabHost.addTab(tabSpec,mFragemntArrays[i],null);            //设置没有分割线            mTabHost.getTabWidget().setDividerDrawable(null);        }    }    //导航栏item设置图片和文字    private View getTabItemView(int i) {        View view_item = LayoutInflater.from(this).inflate(R.layout.tabhost_item, null);        ImageView imageView = (ImageView) view_item.findViewById(R.id.ivItem);        TextView textView = (TextView) view_item.findViewById(R.id.tvItem);        imageView.setBackgroundResource(mImageArrays[i]);        textView.setText(mTextArrays[i]);        return view_item;    }}

6、导航栏item对应的Fragment：

public class Message extends Fragment {    private View view;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view = inflater.inflate(R.layout.message,null);        return view;    }}