Android特效——————底部/顶部导航条（Fragment+ViewPaper+XTabLayout）

初次使用xtablayout和viewpaper2.所以就弄了最基础的导航条

一、效果

二、代码

• 配置环境【在bulid.gradle中添加以下代码】

    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha02'
    implementation 'com.androidkun:XTabLayout:1.1.4'

• 按钮点击切换图片【几个点击按钮图片，几个这样的布局】

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/bookkeep_select" android:state_selected="true" />
    <item android:drawable="@mipmap/bookkeep_unselect" android:state_selected="false" />
</selector>

• 主页布局代码

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


<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/pagers"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"/>

<com.androidkun.xtablayout.XTabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    app:xTabMode="fixed"
    app:xTabTextSize="15sp"
    app:xTabTextColor="@color/colorThemeText"
    app:xTabSelectedTextColor="@color/colorTheme"
    app:xTabSelectedTextSize="20sp" />
</LinearLayout>


xtablyout属性说明：

字体

xTabTextSize：默认按钮字体大小【未点击时】
xTabTextColor：默认字体颜色【未点击时】
xTabSelectedTextColor：选中时字体的大小
xTabSelectedTextSize：选中时的字体颜色
xTabTextSelectedBold="true"：设置选中Tab的文本是否粗体显示
app:xTabTextBold="true"：设置未选中Tab的文本是否粗体显示

指示器设置
xTabDisplayNum：设置屏幕内显示Tab个数
xTabDividerWidthWidthText="true"：设置指示器长度随文本改变
xTabMode：设置按钮是否可以滑动【注意是按钮，不是页面】

背景色
xTabBackgroundColor：默认按钮背景色
xTabSelectedBackgroundColor：选中按钮背景色

分割线
xTabDividerWidth：宽度
xTabDividerHeight：高度
xTabDividerColor：颜色
xTabDividerGravity：是否居中

• Fragement【都是这样，这里就显示一个】

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

    <TextView
        android:text="第一页"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

• 主页Java代码

package com.example.mslinbill.main;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.widget.Toast;

import com.androidkun.xtablayout.XTabLayout;
import com.example.mslinbill.R;
import com.example.mslinbill.fragment.SubPage_BookKeeping_Fragment;
import com.example.mslinbill.fragment.SubPage_Wages_Fragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    //XTabLayout
    XTabLayout tab;
    ViewPager2 pagers;
    List<Fragment> list = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        /**
         * XTabLayout的操作
         */
        //1.找到XTablayout
        tab = findViewById(R.id.tab);
        pagers =findViewById(R.id.pagers);

        //2.动态添加内容，后面的图片，根据前面的图片选中设置
        tab.addTab(tab.newTab().setText("第一页").setIcon(R.drawable.tab_bookkeep));
        tab.addTab(tab.newTab().setText("第二页").setIcon(R.drawable.tab_wages));


        //3.设置切换效果
        tab.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
            //当前选中的Tab
            @Override
            public void onTabSelected(XTabLayout.Tab tab) {
                //获取当前导航卡的位置及文本
                int position = tab.getPosition();
                pagers.setCurrentItem(position);
                //提示词
                Toast.makeText(MainActivity.this,position+"---"+tab.getText().toString(), Toast.LENGTH_SHORT).show();
            }

            //Tab没被选中的方法
            @Override
            public void onTabUnselected(XTabLayout.Tab tab) {
            }

            //Tab被重新选中的方法
            @Override
            public void onTabReselected(XTabLayout.Tab tab) {
            }
        });

        //添加Fragement
        addFragement();

        pagers.setAdapter(new FragmentStateAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }


            //设置长度
            @Override
            public int getItemCount() {
                return list.size();
            }
        });

        //禁止滑动
//        pagers.setUserInputEnabled(false);

        /**
         * 官方说法：添加回调
         * 自我理解：连动按钮和页面
         */
        pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                //设置指定位置上的导航块被选中
                tab.getTabAt(position).select();
            }
        });


    }

    //添加Fragement
    private void addFragement(){
        //添加Fragment
        list.add(new Fragment1());
        list.add(new Fragment2());
    }
}

• Fragement代码

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.subpapge1 container, false);
    }
}