APP 底部导航栏实现方法

现在多数App的首页都是四个Tab或者五个Tab.想实现这种导航栏该怎么做呢？

用过几种方法TabHost+Fragment、RadioGroup+Fragment、

今天写一下另一种方法 Tablayout+Fragment 实现导航栏效果

MainActivity.class

代码如下↓↓ 

package zhang.guo.qiang.fragmenttabhost.tablayout_fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import zhang.guo.qiang.R;

/**
 * Created by ylwx on 2018/7/28.
 */

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private Fragment mFragmensts[];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout_shixian_mainactivity);
        mFragmensts = FragmntInflater.getFragments("TabLayout Tab");
        initView();
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                onTabItemSelected(tab.getPosition());
                for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                    View view = mTabLayout.getTabAt(i).getCustomView();
                    ImageView icon = (ImageView) view.findViewById(R.id.tab_photo);
                    TextView text = (TextView) view.findViewById(R.id.tab_title);
                    if (i == tab.getPosition()) { // 选中状态
                        icon.setImageResource(FragmntInflater.mTabRes[i]);
                        text.setTextColor(getResources().getColor(android.R.color.black));
                    } else {
                        icon.setImageResource(FragmntInflater.mTabResPressed[i]);
                        text.setTextColor(getResources().getColor(android.R.color.darker_gray));
                    }
                }


            }

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

            }

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

            }
        });
        // 提供自定义的布局添加Tab
        for (int i = 0; i < 4; i++) {
            mTabLayout.addTab(mTabLayout.newTab().setCustomView(FragmntInflater.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;
        }
        if (fragment != null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.home_container, fragment).commit();
        }
    }
}

tablayout_shixian_mainactivity.xml

布局文件如下↓↓

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <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="@color/gainsboro"></View>

    <android.support.design.widget.TabLayout
        android:id="@+id/bottom_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/main_tab_text"
        android:layout_marginBottom="5dp"/>
</LinearLayout>

代码如下↓↓

package zhang.guo.qiang.fragmenttabhost.tablayout_fragment;

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 zhang.guo.qiang.R;
import zhang.guo.qiang.fragmenttabhost.HomeFragment;
import zhang.guo.qiang.fragmenttabhost.PersonFragment;
import zhang.guo.qiang.fragmenttabhost.ProductTypeFragment;
import zhang.guo.qiang.fragmenttabhost.ShopCarFragment;

/**
 * Created by ylwx on 2018/7/28.
 */

public class FragmntInflater {
    public static final int []mTabRes = new int[]{R.mipmap.tab_home_image, R.mipmap.tab_classify_image, R.mipmap.tab_shoppingbike_image, R.mipmap.tab_user_image};
    public static final int []mTabResPressed = new int[]{R.mipmap.tab_home_dark,R.mipmap.tab_classify_dark,R.mipmap.tab_shoppingbike_dark,R.mipmap.tab_user_dark};
    public static final String []mTabTitle = new String[]{"首页","分类","购物车","我的"};

    public static Fragment[] getFragments(String from){
        Fragment fragments[] = new Fragment[4];
        fragments[0] = HomeFragment.newInstance(from);
        fragments[1] = ProductTypeFragment.newInstance(from);
        fragments[2] = ShopCarFragment.newInstance(from);
        fragments[3] = PersonFragment.newInstance(from);
        return fragments;
    }

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

tab_zu.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:orientation="vertical">

    <ImageView
        android:id="@+id/tab_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:layout_marginTop="3dp"
        android:text="甜蜜蜜"/>
</LinearLayout>

代码中用到的资源文件是图片和颜色，自己用自己的就行，如果没有可以到这下载

链接：https://pan.baidu.com/s/172NT6bR1MmeoY2CjEy7zEA 密码：rmcy

//手敲操作 欢迎指正