TextView+Fragment实现底部导航栏

最新推荐文章于 2022-05-20 02:14:04 发布

Vincent徐

最新推荐文章于 2022-05-20 02:14:04 发布

阅读量500

点赞数 1

文章标签： TextView Fragment 导航栏选项栏 Tabhost

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

这篇算是一个简单的学习总结，原文博客地址：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;

	@Override
	protected 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() {
		@Override
		public 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();

		//调用方法隐藏fragment
		hideFragments(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 {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.fragment_main, container, false);
	}

}

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

源码：TextViewSelectDemo.zip