Fragment实现底部菜单栏功能——仿微信

Fragment实现底部菜单栏，相比微信少了侧滑功能。

1. 实现效果

点击页面底部的选项，能够进行Fragment的切换。

2. 项目目录

1> 一个MainActivity.java，对应布局文件activity_main.xml。activity_main.xml中分为两个部分，FrameLayout与底部菜单栏（layout_bottom.xml）。

2> 四个Fragment以及它们各自对应的布局文件

3> drawable中存放有底部菜单栏中的4个图标，以及点击后变绿的4个图标。通过ImageAsset制作。

3.具体实现

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <include layout="@layout/layout_bottom"/>
</LinearLayout>

其中，引用了layout_bottom.xml

layout_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="8dp"
    android:paddingTop="8dp"
    android:background="#f7f7f7">

    <LinearLayout
        android:id="@+id/linear_layout_chat"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/image_view_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/chat"/>
        <TextView
            android:id="@+id/text_view_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_layout_friends"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/image_view_friends"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/friends"/>
        <TextView
            android:id="@+id/text_view_friends"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_layout_find"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/image_view_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/find"/>
        <TextView
            android:id="@+id/text_view_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_layout_me"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/image_view_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/me"/>
        <TextView
            android:id="@+id/text_view_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"/>
    </LinearLayout>
</LinearLayout>

MainActivity.java

package com.example.rex.fragmentdemo;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //底部选项卡四个布局
    private LinearLayout chatLinearLayout;
    private LinearLayout friendsLinearLayout;
    private LinearLayout findLinearLayout;
    private LinearLayout meLinearLayout;

    //底部选项卡四个布局中的图片
    private ImageView chatImageView;
    private ImageView friendsImageView;
    private ImageView findImageView;
    private ImageView meImageView;

    //底部选项卡四个布局中的文本
    private TextView chatTextView;
    private TextView friendsTextView;
    private TextView findTextView;
    private TextView meTextView;

    //四个Fragment
    private ChatFragment chatFragment;
    private FriendsFragment friendsFragment;
    private FindFragment findFragment;
    private MeFragment meFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initClick();
        addFragment(0);
        initChatColor();
    }

    /**
     * 启动时候调用，初始化chatTextView与chatImageView为绿色
     * 因为启动，默认显示的是ChatFragment
     */
    private void initChatColor()
    {
        chatImageView.setImageResource(R.drawable.chat_green);
        chatTextView.setTextColor(Color.rgb(5, 192, 96));
    }

    private void initView()
    {
        chatLinearLayout = (LinearLayout) findViewById(R.id.linear_layout_chat);
        friendsLinearLayout = (LinearLayout) findViewById(R.id.linear_layout_friends);
        findLinearLayout = (LinearLayout) findViewById(R.id.linear_layout_find);
        meLinearLayout = (LinearLayout) findViewById(R.id.linear_layout_me);

        chatImageView = (ImageView) findViewById(R.id.image_view_chat);
        friendsImageView = (ImageView) findViewById(R.id.image_view_friends);
        findImageView = (ImageView) findViewById(R.id.image_view_find);
        meImageView = (ImageView) findViewById(R.id.image_view_me);

        chatTextView = (TextView) findViewById(R.id.text_view_chat);
        friendsTextView = (TextView) findViewById(R.id.text_view_friends);
        findTextView = (TextView) findViewById(R.id.text_view_find);
        meTextView = (TextView) findViewById(R.id.text_view_me);
    }

    private void initClick()
    {
        chatLinearLayout.setOnClickListener(this);
        friendsLinearLayout.setOnClickListener(this);
        findLinearLayout.setOnClickListener(this);
        meLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {

        initClickState();//初始化点击状态，图片字体都未变绿的颜色
        switch (view.getId())
        {
            case R.id.linear_layout_chat:
                addFragment(0);
                chatImageView.setImageResource(R.drawable.chat_green);
                chatTextView.setTextColor(Color.rgb(5, 192, 96));
                break;
            case R.id.linear_layout_friends:
                addFragment(1);
                friendsImageView.setImageResource(R.drawable.friends_green);
                friendsTextView.setTextColor(Color.rgb(5, 192, 96));
                break;
            case R.id.linear_layout_find:
                addFragment(2);
                findImageView.setImageResource(R.drawable.find_green);
                findTextView.setTextColor(Color.rgb(5, 192, 96));
                break;
            case R.id.linear_layout_me:
                addFragment(3);
                meImageView.setImageResource(R.drawable.me_green);
                meTextView.setTextColor(Color.rgb(5, 192, 96));
                break;
            default:
                break;
        }
    }

    /**
     * 向容器中添加Fragment
     * @param index 0, 1, 2, 3分别对应chatFragment, friendsFragment, findFragment与 meFragment
     */
    private void addFragment(int index)
    {
        FragmentManager fragmentManager= getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        //每次替换Fragment之前，隐藏所有的Fragment
        hideFragment(transaction);

        switch (index)
        {
            case 0:
                if(chatFragment == null)
                {
                    chatFragment = new ChatFragment();
                    transaction.add(R.id.frame_layout, chatFragment);
                }
                else transaction.show(chatFragment);
                break;
            case 1:
                if(friendsFragment == null)
                {
                    friendsFragment = new FriendsFragment();
                    transaction.add(R.id.frame_layout, friendsFragment);
                }
                else transaction.show(friendsFragment);
                break;
            case 2:
                if(findFragment == null)
                {
                    findFragment = new FindFragment();
                    transaction.add(R.id.frame_layout, findFragment);
                }
                else transaction.show(findFragment);
                break;
            case 3:
                if(meFragment == null)
                {
                    meFragment = new MeFragment();
                    transaction.add(R.id.frame_layout, meFragment);
                }
                else transaction.show(meFragment);
                break;
            default:
                break;
        }

        transaction.commit();
    }

    /**
     * 初始化点击状态，每次点击图片与文本均是未上色状态
     */
    private void initClickState()
    {
        chatImageView.setImageResource(R.drawable.chat);
        friendsImageView.setImageResource(R.drawable.friends);
        findImageView.setImageResource(R.drawable.find);
        meImageView.setImageResource(R.drawable.me);

        chatTextView.setTextColor(Color.rgb(0, 0, 0));
        friendsTextView.setTextColor(Color.rgb(0, 0, 0));
        findTextView.setTextColor(Color.rgb(0, 0, 0));
        meTextView.setTextColor(Color.rgb(0, 0, 0));
    }

    /**
     * 隐藏所有Fragment
     * @param transaction FragmentTransaction对象
     */
    private void hideFragment(FragmentTransaction transaction)
    {
        if(chatFragment != null)  transaction.hide(chatFragment);
        if(friendsFragment != null) transaction.hide(friendsFragment);
        if(findFragment != null) transaction.hide(findFragment);
        if(meFragment != null) transaction.hide(meFragment);
    }
}

值得注意的是，Fragment add与replace的区别。replace每次都是清空容器再添加fragment，对于这种fragment切换的情况，比较浪费。add常与hide配合使用，这样每次显示时，如果容器中存在，直接show出来即可。

两个方法：

transaction.add(int containerViewId, Fragment fragment)
transaction.replace(int containerViewId, Fragment fragment)

transaction为FragmentTransaction的实例。一般通过：

FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();

获得。

 

由于4个Fragment代码基本相同，现只列出ChatFragment.java的。

package com.example.rex.fragmentdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ChatFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_chat, container, false);
        return view;
    }
}

其对应布局，layout_chat.xml：

<?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:gravity="center">
    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is ChatFragment"
        android:textSize="18sp"/>
</LinearLayout>

4.参考

https://www.cnblogs.com/lichenwei/p/4444750.html，博主写得很详细，方法用得也比较多，很赞。

5.源码链接

1> 百度网盘：https://pan.baidu.com/s/11eWVI-c1aQdRQW8VJj6-wQ