底部导航栏

1、新建activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.willkong.p2pclient.activity.MainActivity">

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

    </FrameLayout>

    <include layout="@layout/main_bottom"></include>

</LinearLayout>

编写底部导航条main_bottom.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="55dp"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/title_text"></View>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/ll_main_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:id="@+id/iv_main_home"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/bottom01"
                android:layout_marginTop="2dp"/>
            <TextView
                android:id="@+id/tv_main_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                android:layout_marginTop="3dp"
                android:textColor="@color/home_back_unselected"
                android:textSize="16dp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_main_invest"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:id="@+id/iv_main_invest"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/bottom03"
                android:layout_marginTop="2dp"/>
            <TextView
                android:id="@+id/tv_main_invest"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="投资"
                android:layout_marginTop="3dp"
                android:textColor="@color/home_back_unselected"
                android:textSize="16dp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_main_me"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:id="@+id/iv_main_me"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/bottom05"
                android:layout_marginTop="2dp"/>
            <TextView
                android:id="@+id/tv_main_me"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的"
                android:layout_marginTop="3dp"
                android:textColor="@color/home_back_unselected"
                android:textSize="16dp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_main_more"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:id="@+id/iv_main_more"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/bottom07"
                android:layout_marginTop="2dp"/>
            <TextView
                android:id="@+id/tv_main_more"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="更多"
                android:layout_marginTop="3dp"
                android:textColor="@color/home_back_unselected"
                android:textSize="16dp"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

2、创建MainActivity.class类

package com.willkong.p2pclient.activity;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.willkong.p2pclient.R;
import com.willkong.p2pclient.fragment.HomeFragment;
import com.willkong.p2pclient.fragment.InvestFragment;
import com.willkong.p2pclient.fragment.MeFragment;
import com.willkong.p2pclient.fragment.MoreFragment;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends FragmentActivity {

    @Bind(R.id.fl_main)
    FrameLayout flMain;
    @Bind(R.id.iv_main_home)
    ImageView ivMainHome;
    @Bind(R.id.tv_main_home)
    TextView tvMainHome;
    @Bind(R.id.ll_main_home)
    LinearLayout llMainHome;
    @Bind(R.id.iv_main_invest)
    ImageView ivMainInvest;
    @Bind(R.id.tv_main_invest)
    TextView tvMainInvest;
    @Bind(R.id.ll_main_invest)
    LinearLayout llMainInvest;
    @Bind(R.id.iv_main_me)
    ImageView ivMainMe;
    @Bind(R.id.tv_main_me)
    TextView tvMainMe;
    @Bind(R.id.ll_main_me)
    LinearLayout llMainMe;
    @Bind(R.id.iv_main_more)
    ImageView ivMainMore;
    @Bind(R.id.tv_main_more)
    TextView tvMainMore;
    @Bind(R.id.ll_main_more)
    LinearLayout llMainMore;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //默认显示首页
        setSelect(0);
    }

    @OnClick({R.id.ll_main_home,R.id.ll_main_invest,R.id.ll_main_me,R.id.ll_main_more})
    public void showTab(View view){
//        Toast.makeText(MainActivity.this,"选择了具体的tab",Toast.LENGTH_SHORT).show();
        switch (view.getId()){
            case R.id.ll_main_home://首页
                setSelect(0);
                break;
            case R.id.ll_main_invest://投资
                setSelect(1);
                break;
            case R.id.ll_main_me://我的资产
                setSelect(2);
                break;
            case R.id.ll_main_more://更多
                setSelect(3);
                break;
        }
    }

    private HomeFragment homeFragment;
    private InvestFragment investFragment;
    private MeFragment meFragment;
    private MoreFragment moreFragment;
    private FragmentTransaction transaction;
    /**
     * 提供相应fragment的显示
     * @param i
     */
    private void setSelect(int i) {
        FragmentManager fragmentManager = this.getSupportFragmentManager();
        transaction = fragmentManager.beginTransaction();
        //隐藏所有Fragment的显示
        hideFragments();
        //重置ImageView和TextView的显示状态
        resetTab();
        switch (i){
            case 0:
                if (homeFragment==null){
                    homeFragment = new HomeFragment();
                    transaction.add(R.id.fl_main,homeFragment);
                }
                //显示当前的fragment
                transaction.show(homeFragment);

                //改变选中项的图片和文字颜色的变化
                ivMainHome.setImageResource(R.mipmap.bottom02);
                tvMainHome.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_selected));
                break;
            case 1:
                if (investFragment==null){
                    investFragment = new InvestFragment();
                    transaction.add(R.id.fl_main,investFragment);
                }
                transaction.show(investFragment);

                //改变选中项的图片和文字颜色的变化
                ivMainInvest.setImageResource(R.mipmap.bottom04);
                tvMainInvest.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_selected));
                break;
            case 2:
                if (meFragment==null){
                    meFragment = new MeFragment();
                    transaction.add(R.id.fl_main,meFragment);
                }
                transaction.show(meFragment);

                //改变选中项的图片和文字颜色的变化
                ivMainMe.setImageResource(R.mipmap.bottom06);
                tvMainMe.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_selected01));
                break;
            case 3:
                if (moreFragment==null){
                    moreFragment = new MoreFragment();
                    transaction.add(R.id.fl_main,moreFragment);
                }
                transaction.show(moreFragment);

                //改变选中项的图片和文字颜色的变化
                ivMainMore.setImageResource(R.mipmap.bottom08);
                tvMainMore.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_selected));
                break;
        }
        transaction.commit();//提交事务
    }

    private void resetTab() {
        ivMainHome.setImageResource(R.mipmap.bottom01);
        ivMainInvest.setImageResource(R.mipmap.bottom03);
        ivMainMe.setImageResource(R.mipmap.bottom05);
        ivMainMore.setImageResource(R.mipmap.bottom07);
        tvMainHome.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_unselected));
        tvMainInvest.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_unselected));
        tvMainMe.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_unselected));
        tvMainMore.setTextColor(ContextCompat.getColor(MainActivity.this,R.color.home_back_unselected));
    }

    /**
     * 隐藏所有Fragments的显示
     */
    private void hideFragments() {
        if (homeFragment!=null){
            transaction.hide(homeFragment);
        }
        if (investFragment!=null){
            transaction.hide(investFragment);
        }
        if (meFragment!=null){
            transaction.hide(meFragment);
        }
        if (moreFragment!=null){
            transaction.hide(moreFragment);
        }
    }
}

各个Fragement类如下：

package com.willkong.p2pclient.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.willkong.p2pclient.R;

import butterknife.Bind;
import butterknife.ButterKnife;
public class HomeFragment extends Fragment {
    @Bind(R.id.iv_title_back)
    ImageView ivTitleBack;
    @Bind(R.id.tv_title)
    TextView tvTitle;
    @Bind(R.id.iv_title_setting)
    ImageView ivTitleSetting;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.fragment_home, null);
        ButterKnife.bind(this, view);
        //初始化title
        initTitle();
        return view;
    }

    private void initTitle() {
        ivTitleBack.setVisibility(View.GONE);
        tvTitle.setText("首页");
        ivTitleSetting.setVisibility(View.GONE);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}