TextView+Fragment实现底部导航栏

先放上效果图吧，免得大家发现不是自己想要的。

         

这篇算是一个简单的学习总结，原文博客地址：http://blog.csdn.net/lowprofile_coding/article/details/48298819

以下为学习结果：

1、目录结构：

2、实现过程

1）主页面布局并创建其他Fragment布局文件

2）在MainActivity里面编写主页面的实现代码，同时创建fragment的类文件

3、具体过程

1）主页面的布局主要是由一个fragment、一个view、一个线性布局包含4个带图片的textview组成。

2）view只是一个分隔线，用来区分fragment和linearlayout的区域位置。

3）Textview的宽度用layout_weight定义，将线性框4等份。

4）Textview的插入图片和文字用selector选择器设置选中和未选中状态的区分。

4、布局代码如下：

Activtiy_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" >    <FrameLayout        android:id="@+id/main_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/view_line"/>    <View        android:id="@+id/view_line"        android:layout_height="1dp"        android:layout_width="match_parent"        android:background="#DCDBDB"        android:layout_above="@+id/rl_bottom"/>        <LinearLayout        android:id="@+id/rl_bottom"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:paddingTop="5dp"        android:paddingBottom="5dp"        android:background="#F2F2F2"        android:orientation="horizontal" >        <TextView            android:id="@+id/tv_main"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:drawableTop="@drawable/tab_item_main_img_selector"            android:drawablePadding="@dimen/main_tab_item_image_and_text"            android:focusable="true"            android:gravity="center"            android:text="@string/main"            android:textColor="@drawable/tab_item_txt_selector" />        <TextView            android:id="@+id/tv_mood"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:drawableTop="@drawable/tab_item_mood_img_selector"            android:drawablePadding="@dimen/main_tab_item_image_and_text"            android:focusable="true"            android:gravity="center"            android:text="@string/mood"            android:textColor="@drawable/tab_item_txt_selector" />        <TextView            android:id="@+id/tv_message"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:drawableTop="@drawable/tab_item_message_img_selector"            android:drawablePadding="@dimen/main_tab_item_image_and_text"            android:focusable="true"            android:gravity="center"            android:text="@string/message"            android:textColor="@drawable/tab_item_txt_selector" />        <TextView            android:id="@+id/tv_person"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:drawableTop="@drawable/tab_item_person_img_selector"            android:drawablePadding="@dimen/main_tab_item_image_and_text"            android:focusable="true"            android:gravity="center"            android:text="@string/person"            android:textColor="@drawable/tab_item_txt_selector"/>    </LinearLayout></RelativeLayout>

Tab_item_main_img_selector.xml图片选择器代码（其他3个文件代码相同）：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <!-- Non focused states -->    <item android:drawable="@drawable/icon_tab_main_normal" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>    <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>    <!-- Focused states -->    <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>    <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>    <!-- Pressed -->    <item android:drawable="@drawable/icon_tab_main_select" android:state_pressed="true" android:state_selected="true"/>    <item android:drawable="@drawable/icon_tab_main_select" android:state_pressed="true"/></selector>

Tab_item_txt_selector.xml文字颜色选择器代码：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <!-- Non focused states -->    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_item_text_normal"/>    <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>        <!-- Focused states -->    <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_item_text_select"/>    <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>        <!-- Pressed -->    <item android:state_pressed="true" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>    <item android:state_pressed="true" android:color="@color/main_tab_item_text_select"/></selector>

5、页面涉及活动实现过程：

1）声明textview和fragment

2）默认选中第一个textview，加载mainfragment

3）对textview添加监听事件

4）监听事件实现更改记录当前位置id、切换textview的选中状态、切换fragment。

5）切换fragment主要通过隐藏当前的fragment，然后获取fragmentTransaction的实例，接着add（）方法添加一个新的fragment，最后调用commit（）方法提交事务。

6、页面实现代码如下

Mainactivity代码：

package com.practice.textviewselectdemo;import com.practice.fragment.MainFragment;import com.practice.fragment.MessageFragment;import com.practice.fragment.MoodFragment;import com.practice.fragment.PersonFragment;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;/** * 通过切换选项控制页面更新 * @author * @create */public class MainActivity extends FragmentActivity {private MainFragment mainFragment;private MoodFragment moodFragment;private MessageFragment messageFragment;private PersonFragment personFragment;private int currentId = R.id.tv_main;private TextView tvMain, tvMood, tvMessage, tvPerson;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 首页标签默认选中tvMain = (TextView) findViewById(R.id.tv_main);tvMain.setSelected(true);tvMood = (TextView) findViewById(R.id.tv_mood);tvMessage = (TextView) findViewById(R.id.tv_message);tvPerson = (TextView) findViewById(R.id.tv_person);//App启动的时候加载首页页面mainFragment = new MainFragment();getSupportFragmentManager().beginTransaction().add(R.id.main_container, mainFragment).commit();tvMain.setOnClickListener(tabClickListener);tvMood.setOnClickListener(tabClickListener);tvMessage.setOnClickListener(tabClickListener);tvPerson.setOnClickListener(tabClickListener);}/** * 通过单击事件调用对应方法改变TextView的状态和fragment * 更新当前项的id（主要根据id标记当前项的位置） */private OnClickListener tabClickListener = new OnClickListener() {@Overridepublic void onClick(View v) {if (v.getId() != currentId) {changeSelect(v.getId());changeFragment(v.getId());currentId = v.getId();}}};/** * 切换fragment方法 * @param resId */private void changeFragment(int resId) {FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();//调用方法隐藏fragmenthideFragments(transaction);//声明fragment并且添加到页面if (resId == R.id.tv_main) {if (mainFragment == null) {mainFragment = new MainFragment();transaction.add(R.id.main_container, mainFragment);} else {transaction.show(mainFragment);}} else if (resId == R.id.tv_mood) {if (moodFragment == null) {moodFragment = new MoodFragment();transaction.add(R.id.main_container, moodFragment);} else {transaction.show(moodFragment);}} else if (resId == R.id.tv_message) {if (messageFragment == null) {messageFragment = new MessageFragment();transaction.add(R.id.main_container, messageFragment);} else {transaction.show(messageFragment);}} else if (resId == R.id.tv_person) {if (personFragment == null) {personFragment = new PersonFragment();transaction.add(R.id.main_container, personFragment);} else {transaction.show(personFragment);}}transaction.commit();}/** * 点击事件隐藏所有fragment * @param transaction */private void hideFragments(FragmentTransaction transaction) {if (mainFragment != null)transaction.hide(mainFragment);if (moodFragment != null)transaction.hide(moodFragment);if (messageFragment != null)transaction.hide(messageFragment);if (personFragment != null)transaction.hide(personFragment);}/** * 单击事件改变textview的状态 * @param resId */private void changeSelect(int resId) {//选项全部设置为未选中tvMain.setSelected(false);tvMood.setSelected(false);tvMessage.setSelected(false);tvPerson.setSelected(false);//切换选中项的状态switch (resId) {case R.id.tv_main:tvMain.setSelected(true);break;case R.id.tv_mood:tvMood.setSelected(true);break;case R.id.tv_message:tvMessage.setSelected(true);break;case R.id.tv_person:tvPerson.setSelected(true);break;}}}

Mainfragment代码（其他3个代码相同）：

package com.practice.fragment;import com.practice.textviewselectdemo.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MainFragment extends Fragment {@Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubreturn inflater.inflate(R.layout.fragment_main, container, false);}}

接下来就是运行调试了，整体来讲思路很简单，实现也比较容易，单击实现过程在代码里也注释了。

源码：TextViewSelectDemo.zip