Android手机UI设计---”知乎“界面外观模仿篇（一）---使用Fragment实现底部导航以及嵌套

这是一个简单的Android手机UI设计—“知乎”模仿的界面设计。

任务目标：较为完善的模仿“知乎”的通知界面。

PS：这个我是用Android Studio2.3做的。由于自己初学Android，想模仿一个页面来练手。于是，这个是模仿的“知乎”手机APP外观的界面。

要实现的功能：
（1）“知乎”底部导航栏的实现。

这个是使用Fragment的方式来实现的，主要用到的布局方式有LinearLayout和FrameLayout以及RelativeLayout。

（2）Fragment嵌套Fragment实现多tab页面的效果。

这个是嵌套多个子Fragment的方式来实现的，主要用到的布局方式有LinearLayout。

参照地址：https://my.oschina.net/u/2008084/blog/500678

界面运行效果图

源码：
MainActivity.Java的代码：入口类，即完成底部导航栏的实现。

package com.example.lenovo.design;

import android.graphics.Color;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

//项目的主Activity，所有的Fragment都嵌入在这里。
public class MainActivity extends FragmentActivity implements View.OnClickListener {
   
    /**
     * 用于展示动态的Fragment
     */
    private DynamicFragment dynamicFragment;

    /**
     * 用于展示发现的Fragment
     */
    private FindFragment findFragment;

    /**
     * 用于展示通知的Fragment
     */
    private NewsFragment newsFragment;

    /**
     * 用于展示私信的Fragment
     */
    private LetterFragment letterFragment;

    /**
     * 用于展示更多的Fragment
     */
    private MoreFragment moreFragment;
    /**
     * 界面布局
     */
    private View dynamicLayout;

    private View findLayout;

    private View newsLayout;

    private View letterLayout;

    private View moreLayout;

    /**
     * 在Tab布局上显示图标的控件
     */
    private ImageView dynamicImage;

    private ImageView findImage;

    private ImageView newsImage;

    private ImageView letterImage;

    private ImageView moreImage;

    /**
     * 在Tab布局上显示标题的控件
     */
    private TextView dynamicText;

    private TextView findText;

    private TextView newsText;

    private TextView letterText;

    private TextView moreText;

    /**
     * 用于对Fragment进行管理，定义FragmentManager对象管理器
     */
    private android.support.v4.app.FragmentManager fragmentManager;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        // 初始化布局元素  
        initViews();
        fragmentManager = getSupportFragmentManager();
        //在FragmentManager里面根据Tag去找相应的fragment. 用户屏幕发生旋转，重新调用onCreate方法。否则会发生重叠
        dynamicFragment = (DynamicFragment) fragmentManager.findFragmentByTag("dynamic");
        findFragment = (FindFragment) fragmentManager.findFragmentByTag("find");
        newsFragment = (NewsFragment) fragmentManager.findFragmentByTag("news");
        letterFragment = (LetterFragment) fragmentManager.findFragmentByTag("letter");
        moreFragment = (MoreFragment) fragmentManager.findFragmentByTag("more");
        // 第一次启动时选中第0个tab
        setTabSelection(0);

    }

    /**
     * 在这里获取到每个需要用到的控件的实例，并给它们设置好必要的点击事件。
     */
    private void initViews() {

        // 初始化底部导航栏的控件

        //布局
        dynamicLayout = findViewById(R.id.dynamic_layout);
        findLayout = findViewById(R.id.find_layout);
        newsLayout = findViewById(R.id.news_layout);
        letterLayout = findViewById(R.id.letter_layout);
        moreLayout = findViewById(R.id.more_layout);
        //图片
        dynamicImage = (ImageView) findViewById(R.id.dynamic_image);
        findImage = (ImageView) findViewById(R.id.find_image);
        newsImage = (ImageView) findViewById(R.id.news_image);
        letterImage = (ImageView) findViewById(R.id.letter_image);
        moreImage = (ImageView) findViewById(R.id.more_image);
        //文本
        dynamicText = (TextView) findViewById(R.id.dynamic_text);
        findText = (TextView) findViewById(R.id.find_text);
        newsText = (TextView) findViewById(R.id.news_text);
        letterText = (TextView) findViewById(R.id.letter_text);
        moreText = (TextView) findViewById(R.id.more_text);
        //添加监听事件
        dynamicLayout.setOnClickListener(this);
        findLayout.setOnClickListener(this);
        newsLayout.setOnClickListener(this);
        letterLayout.setOnClickListener(this);
        moreLayout.setOnClickListener(this);
    }

    //对不同的Tab点击事件进行判断
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dynamic_layout:
                // 当点击了消息tab时，选中第1个tab
                setTabSelection(0);
                break;
            case R.id.find_layout:
                setTabSelection(1);
                break;
            case R.id.news_layout:
                setTabSelection(2);
                break;
            case R.id.letter_layout:
                setTabSelection(3);
                break;
            case R.id.more_layout:
                setTabSelection(4);
                break;
            default:
                break;
        }
    }


    /**
     * 根据传入的index参数来设置选中的tab页。
     *
     * @param index
     * 每个tab页对应的下标。0表示动态，1表示发现，2表示通知，3表示私信，4表示更多。
     */
    private void setTabSelection(int index) {
        // 每次选中之前先清楚掉上次的选中状态
        clearSelection();// 清空, 重置选项, 隐藏所有Fragment
        // 开启一个Fragment事务
        android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction();
        //FragmentTransaction transaction = getFragmentManager().beginTransaction();
        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
        hideFragments(transaction);
        switch (index) {
            case 0:
                // 当点击了消息tab时，改变控件的图片和文字颜色
                dynamicImage.setImageResource(R.drawable.zgg2);
                //dynamicText.setTextColor(Color.WHITE);
                if (dynamicFragment == null) {
                    // 如果DynamicFragment为空，则创建一个并添加到界面上
                    dynamicFragment = new DynamicFragment();
                    transaction.add(R.id.content, dynamicFragment);
                } else {
                    // 如果DynamicFragment不为空，则直接将它显示出来
                    transaction.show(dynamicFragment);
                }
                break;
            case 1:
                findImage.setImageResource(R.drawable.zznz3);
               // findText.setTextColor(Color.WHITE);
                if (findFragment == null) {
                    findFragment = new FindFragment();
                    transaction.add(R.id.content, findFragment);
                } else {
                    transaction.show(findFragment);
                }
                break;
            case 2:
                newsImage.setImageResource(R.drawable.zld4);
                //newsText.setTextColor(Color.WHITE);
                if (newsFragment ==