Android自定义底部导航栏-Tabbar

一、添加依赖

 //view,事件绑定
    implementation 'com.jakewharton:butterknife:8.8.1'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

二、开始写布局

1、Tabbar布局页面

<?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">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <!-- Tabbar背景色 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#FFFFFFFF"
        android:orientation="horizontal">

        <!-- 拼团-->
        <LinearLayout
            android:id="@+id/tabbar_group_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/tabbar_group"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_marginTop="10dp"

                    android:src="@drawable/tabbar_group_normal"/>
                <TextView
                    android:id="@+id/tabbar_group_text"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="3dp"
                    android:gravity="center_horizontal"
                    android:text="拼团"
                    android:textColor="#FF989CB2"
                    android:textSize="10sp"/>

            </LinearLayout>

        </LinearLayout>

        <!-- 我的-->
        <LinearLayout
            android:id="@+id/tabbar_mine_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center">

                <ImageView
                    android:id="@+id/tabbar_mine"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_marginTop="10dp"

                    android:src="@drawable/tabbar_mine_normal"/>
                <TextView
                    android:id="@+id/tabbar_mine_text"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="3dp"
                    android:gravity="center_horizontal"
                    android:text="我的"
                    android:textColor="#FF989CB2"
                    android:textSize="10sp"/>
                
            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

2、fragment_test.xml布局页面

这个页面就是FrameLayout 中要显示的页面

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment.TestFragment1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TestFragment1页面"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

三、开始写代码

1、ShowTabbarActivity.Activity

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.bh.pql.Fragment.TestFragment1;
import com.bh.pql.Fragment.TestFragment2;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class ShowtabbarActivity extends AppCompatActivity {

    @BindView(R.id.content)
    FrameLayout flayout;
    @BindView(R.id.tabbar_group)
    ImageView tabbarGroup;
    @BindView(R.id.tabbar_group_text)
    TextView tabbarGroupText;
    @BindView(R.id.tabbar_mine)
    ImageView tabbarMine;
    @BindView(R.id.tabbar_mine_text)
    TextView tabbarMineText;
    @BindView(R.id.tabbar_group_layout)
    LinearLayout tabbarGroupLayout;
    @BindView(R.id.tabbar_mine_layout)
    LinearLayout tabbarMineLayout;

    private TestFragment1 testFragment1;
    private TestFragment2 testFragment2;

    FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_showtabbar);
        ButterKnife.bind(this);

        fragmentManager = getSupportFragmentManager();          // 开启一个事物
        // 默认加载某一个tabbarItem（第一个按钮）
        testFragment1 = new TestFragment1();
        // 启动Activity时使第一个按钮的图标为选中状态（投机取巧）
        tabbarGroup.setImageResource(R.drawable.tabbar_group_select);
        tabbarGroupText.setTextColor(getResources().getColor(R.color.colorAccent));
        getSupportFragmentManager().beginTransaction().add(R.id.content, testFragment1).commit();
    }

    @OnClick({R.id.tabbar_group_layout, R.id.tabbar_mine_layout})
    public void onViewClicked(View view) {
        clearChioce();
        // 重置选项+隐藏所有的Fragment
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragments(transaction);
        switch (view.getId()) {
            case R.id.tabbar_group_layout:
                hideFragments(transaction);
                tabbarGroup.setImageResource(R.drawable.tabbar_group_select);
                tabbarGroupText.setTextColor(getResources().getColor(R.color.colorAccent));
                if (testFragment1 == null) {
                    testFragment1 = new TestFragment1();
                    transaction.add(R.id.content, testFragment1);
                } else {
                    transaction.show(testFragment1);
                }
                break;
            case R.id.tabbar_mine_layout:
                hideFragments(transaction);
                tabbarMine.setImageResource(R.drawable.tabbar_mine_select);
                tabbarMineText.setTextColor(getResources().getColor(R.color.colorAccent));
                if (testFragment2 == null) {
                    testFragment2 = new TestFragment2();
                    transaction.add(R.id.content, testFragment2);
                } else {
                    transaction.show(testFragment2);
                }
                break;
        }
        transaction.commit();
    }

    /**
     * 将所有的Fragment都设置为隐藏状态
     *
     * @param transaction 事物
     */
    private void hideFragments(FragmentTransaction transaction) {
        if (testFragment1 != null) {
            transaction.hide(testFragment1);
        }
        if (testFragment2 != null) {
            transaction.hide(testFragment2);
        }

    }

    /**
     * 定义一个重置所有选项的方法
     */
    public void clearChioce() {
        tabbarGroup.setImageResource(R.drawable.tabbar_group_normal);
        tabbarGroupText.setTextColor(getResources().getColor(R.color.colorTextGray));

        tabbarMine.setImageResource(R.drawable.tabbar_mine_normal);
        tabbarMineText.setTextColor(getResources().getColor(R.color.colorTextGray));

    }
}

2、TestFragment1

必须是继承Fragment的类

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