android底部导航栏小结

android自带的有TabHost，但好像无法满足要求，

本文只记录使用 TabLayout + Fragment  和 android 自带的 BottomNavigationView + Fragment 来实现

由于测试的时候使用的是一个工程，所以看起来可能有点乱，但是里面的工程目录没有变化，变化的只是代码部分

需要新建的部分如下：

新建一个工程，如果是在做项目，不要在原项目中进行操作，以免损坏原项目，

通用部分，Fragment部分，（xml和对应的java代码），Androidstudio中会自带代码，不需要改动里面的代码

添加对应的包依赖

menu是 BottomNavigationView + Fragment需要的，如果工程中不使用自带的新建的话，可以不需要建立这一部分，

接下来先介绍 TabLayout + Fragment ：

主页面的布局代码，

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

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

    <View android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:alpha="0.6"
        android:background="@android:color/darker_gray"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/bottom_tab_layout"   
        android:layout_width="match_parent"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@android:color/black"
        app:tabTextColor="@android:color/darker_gray"
        android:layout_height="48dp">
        <!--app:menu="@menu/tab_menu" 如果需要使用 BottomNavigationView + Fragment 布局的话取消注释，更改id即可-->

    </android.support.design.widget.TabLayout>

</LinearLayout>

import android.content.Context;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.tabhostcostom.AttentionFragment;
import com.example.tabhostcostom.DiscoveryFragment;
import com.example.tabhostcostom.HomeFragment;
import com.example.tabhostcostom.ProfileFragment;
import com.example.tabhostcostom.R;

public class DataGenerator {

    public static final int []mTabRes = new int[]{R.mipmap.index_blue_icon, R.mipmap.index_message, R.mipmap.index_publish, R.mipmap.index_ying, R.mipmap.index_me};
    //public static final int []mTabResPressed = new int[]{R.drawable.ic_tab_strip_icon_feed_selected,R.drawable.ic_tab_strip_icon_category_selected,R.drawable.ic_tab_strip_icon_pgc_selected,R.drawable.ic_tab_strip_icon_profile_selected};
    public static final String []mTabTitle = new String[]{"首页","发现","", "关注","我的"};

    public static Fragment[] getFragments(String from){
        Fragment fragments[] = new Fragment[4];
        fragments[0] = HomeFragment.newInstance(from, "a");
        fragments[1] = DiscoveryFragment.newInstance(from, "b");
        fragments[2] = AttentionFragment.newInstance(from, "c");
        fragments[3] = ProfileFragment.newInstance(from, "d");
        return fragments;
    }

    /**
     * 获取Tab 显示的内容
     * @param context
     * @param position
     * @return
     */
    public static View getTabView(Context context, int position){
        View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null);
        ImageView tabIcon =  view.findViewById(R.id.tab_content_image);
        tabIcon.setImageResource(DataGenerator.mTabRes[position]);
        TextView tabText = view.findViewById(R.id.tab_content_text);
        tabText.setText(mTabTitle[position]);
        return view;
    }
}

以上是一个工具类将所有的数据全部封装在一块，

我也没搞明白为什么需要传两个参数，应该是可以改的吧，自己没有尝试，随便传一个字符串即可，

主函数中也就是主页面的代码

import android.net.Uri;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.tabhostcostom.Utils.DataGenerator;

public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
        AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
{

    private BottomNavigationView mBottomNavigationView;
    //private Fragment []mFragments;
    private TabLayout mTabLayout;
    private Fragment []mFragmensts;

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

        mFragmensts = DataGenerator.getFragments("TabLayout Tab");

        initView();
    }

    private void initView() {
            mTabLayout = findViewById(R.id.bottom_tab_layout);

            mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    onTabItemSelected(tab.getPosition());
                    // Tab 选中之后，改变各个Tab的状态，如果点击下面的导航栏，需要改变颜色的话取消注释，同时取消掉工具类中的注释即可
                    /*
                    for (int i=0;i<mTabLayout.getTabCount();i++){
                        View view = mTabLayout.getTabAt(i).getCustomView();
                        ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
                        TextView text = (TextView) view.findViewById(R.id.tab_content_text);

                        if(i == tab.getPosition()){ // 选中状态
                            icon.setImageResource(DataGenerator.mTabResPressed[i]);
                            text.setTextColor(getResources().getColor(android.R.color.black));
                        }else{// 未选中状态
                            icon.setImageResource(DataGenerator.mTabRes[i]);
                            text.setTextColor(getResources().getColor(android.R.color.darker_gray));
                        }
                    }*/


                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {

                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {

                }
            });

        for(int i=0;i<5;i++){
            mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
        }

        }

    private void onTabItemSelected(int position){
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = mFragmensts[0];
                break;
            case 1:
                fragment = mFragmensts[1];
                break;
            case 2:
                fragment = mFragmensts[2];
                break;
            case 3:
                fragment = mFragmensts[3];
                break;
            case 4:
                fragment = mFragmensts[3];
                break;
        }
        if(fragment!=null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
        }
    }

    @Override
    public void onFragmentInteraction(Uri uri) {
        Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
    }
}

这是 TabLayout + Fragment 全部代码

下面介绍 BottomNavigationView + Fragment 实现，带有动画效果，点击的那个会自动将其他的挤出去，所以建议使用上面的布局方式，当然，需要动画效果的布局也可以

需要 menu 菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_menu_home"
        android:icon="@mipmap/index_blue_icon"
        android:title="首页"
        />
    <item
        android:id="@+id/tab_menu_discovery"
        android:icon="@mipmap/index_message"
        android:title="发现"
        />
    <item
        android:id="@+id/tab_menu_attention1"
        android:icon="@mipmap/index_publish"
        android:title=""
        />
    <item
        android:id="@+id/tab_menu_profile"
        android:icon="@mipmap/index_ying"
        android:title="Ying"
        />
    <item
        android:id="@+id/tab_menu_attention"
        android:icon="@mipmap/index_me"
        android:title="我"
        />

</menu>

主函数中代码：

package com.example.tabhostcostom;

import android.net.Uri;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.tabhostcostom.Utils.DataGenerator;

public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
        AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
{

    private BottomNavigationView mBottomNavigationView;
    private Fragment []mFragments;
    private TabLayout mTabLayout;
    private Fragment []mFragmensts;

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

        mFragments = DataGenerator.getFragments("TabLayout Tab");

        initView();
    }


    private void initView() {
        mBottomNavigationView = findViewById(R.id.bottom_navigation_view);
        //mBottomNavigationView.getMaxItemCount()

        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                onTabItemSelected(item.getItemId());
                return true;
            }
        });

        // 由于第一次进来没有回调onNavigationItemSelected，因此需要手动调用一下切换状态的方法
        onTabItemSelected(R.id.tab_menu_home);
    }

    private void onTabItemSelected(int id){
        Fragment fragment = null;
        switch (id){
            case R.id.tab_menu_home:
                fragment = mFragments[0];
                break;
            case R.id.tab_menu_discovery:
                fragment = mFragments[1];
                break;

            case R.id.tab_menu_attention:
                fragment = mFragments[2];
                break;
            case R.id.tab_menu_profile:
                fragment = mFragments[3];
                break;
        }
        if(fragment!=null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
        }
    } 

    @Override
    public void onFragmentInteraction(Uri uri) {
        Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
    }
}

 大致就这么多，因为是将两个布局杂糅在一块，如果有问题可以在博客后面进行留言，