初次使用xtablayout和viewpaper2.所以就弄了最基礎(chǔ)的導(dǎo)航條

一、效果

二、代碼

配置環(huán)境【在bulid.gradle中添加以下代碼】

implementation ‘a(chǎn)ndroidx.viewpager2:viewpager2:1.0.0-alpha02‘implementation‘com.androidkun:XTabLayout:1.1.4‘

按鈕點(diǎn)擊切換圖片【幾個(gè)點(diǎn)擊按鈕圖片，幾個(gè)這樣的布局】

主頁(yè)布局代碼

android:id="@+id/pagers"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:orientation="horizontal"/>

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

xtablyout屬性說(shuō)明：

字體

xTabTextSize：默認(rèn)按鈕字體大小【未點(diǎn)擊時(shí)】

xTabTextColor：默認(rèn)字體顏色【未點(diǎn)擊時(shí)】

xTabSelectedTextColor：選中時(shí)字體的大小

xTabSelectedTextSize：選中時(shí)的字體顏色

xTabTextSelectedBold="true"：設(shè)置選中Tab的文本是否粗體顯示app:xTabTextBold="true"：設(shè)置未選中Tab的文本是否粗體顯示

指示器設(shè)置xTabDisplayNum：設(shè)置屏幕內(nèi)顯示Tab個(gè)數(shù)xTabDividerWidthWidthText="true"：設(shè)置指示器長(zhǎng)度隨文本改變xTabMode：設(shè)置按鈕是否可以滑動(dòng)【注意是按鈕，不是頁(yè)面】

背景色xTabBackgroundColor：默認(rèn)按鈕背景色xTabSelectedBackgroundColor：選中按鈕背景色

分割線xTabDividerWidth：寬度xTabDividerHeight：高度xTabDividerColor：顏色xTabDividerGravity：是否居中

Fragement【都是這樣，這里就顯示一個(gè)】

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

android:text="第一頁(yè)"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

主頁(yè)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 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.動(dòng)態(tài)添加內(nèi)容，后面的圖片，根據(jù)前面的圖片選中設(shè)置

tab.addTab(tab.newTab().setText("第一頁(yè)").setIcon(R.drawable.tab_bookkeep));

tab.addTab(tab.newTab().setText("第二頁(yè)").setIcon(R.drawable.tab_wages));

//3.設(shè)置切換效果

tab.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {

//當(dāng)前選中的Tab

@Override

public void onTabSelected(XTabLayout.Tab tab) {

//獲取當(dāng)前導(dǎo)航卡的位置及文本

int position = tab.getPosition();

pagers.setCurrentItem(position);

//提示詞

Toast.makeText(MainActivity.this,position+"---"+tab.getText().toString(), Toast.LENGTH_SHORT).show();

}

//Tab沒(méi)被選中的方法

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

}

//設(shè)置長(zhǎng)度

@Override

public int getItemCount() {

return list.size();

}

});

//禁止滑動(dòng)

// pagers.setUserInputEnabled(false);

/**

* 官方說(shuō)法：添加回調(diào)

* 自我理解：連動(dòng)按鈕和頁(yè)面

*/

pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {

@Override

public void onPageSelected(int position) {

super.onPageSelected(position);

//設(shè)置指定位置上的導(dǎo)航塊被選中

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

}

}

原文：https://www.cnblogs.com/hahayixiao/p/13725960.html

總結(jié)

以上是生活随笔為你收集整理的android顶部导航高度,Android特效——————底部/顶部导航条（Fragment+ViewPaper+XTabLayout）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。