初次使用xtablayout和viewpaper2.所以就弄了最基础的导航条
一、效果
二、代码
配置环境【在bulid.gradle中添加以下代码】
implementation ‘androidx.viewpager2:viewpager2:1.0.0-alpha02‘implementation‘com.androidkun:XTabLayout:1.1.4‘
按钮点击切换图片【几个点击按钮图片，几个这样的布局】
主页布局代码
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属性说明：
字体
xTabTextSize：默认按钮字体大小【未点击时】
xTabTextColor：默认字体颜色【未点击时】
xTabSelectedTextColor：选中时字体的大小
xTabSelectedTextSize：选中时的字体颜色
xTabTextSelectedBold="true"：设置选中Tab的文本是否粗体显示app:xTabTextBold="true"：设置未选中Tab的文本是否粗体显示
指示器设置xTabDisplayNum：设置屏幕内显示Tab个数xTabDividerWidthWidthText="true"：设置指示器长度随文本改变xTabMode：设置按钮是否可以滑动【注意是按钮，不是页面】
背景色xTabBackgroundColor：默认按钮背景色xTabSelectedBackgroundColor：选中按钮背景色
分割线xTabDividerWidth：宽度xTabDividerHeight：高度xTabDividerColor：颜色xTabDividerGravity：是否居中
Fragement【都是这样，这里就显示一个】
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
android:text="第一页"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
主页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.动态添加内容，后面的图片，根据前面的图片选中设置
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);
}
}
原文：https://www.cnblogs.com/hahayixiao/p/13725960.html
