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);
    }
}