初次使用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);
}
}