記錄ViewPager+TabLayout實現頂部左對齊導航欄
阿新 • • 發佈：2022-05-30
前言：我這裡是在fragment中實現左對齊的TabLayout，ViewPager中填充的是5個view
效果圖如下：
1.首先，要在xml檔案中新增控制元件
點選檢視程式碼
<androidx.viewpager.widget.ViewPager android:id="@+id/car_view_pager" android:layout_below="@+id/car_tab_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorGrey" />
點選檢視程式碼
<com.google.android.material.tabs.TabLayout android:id="@+id/car_tab_layout" android:layout_width="match_parent" android:layout_height="100px" android:layout_marginLeft="20px" android:background="@color/colorWhite" app:tabGravity="start" app:tabIndicator="@drawable/tab_indicator_shape" app:tabIndicatorColor="#4687EC" app:tabIndicatorFullWidth="false" app:tabIndicatorHeight="4px" app:tabMode="scrollable" app:tabPaddingEnd="50px" app:tabPaddingStart="50px" app:tabPaddingTop="50px" app:tabSelectedTextColor="#4687EC" app:tabTextAppearance="@style/TabTextStyle" app:tabTextColor="@color/colorGrey" />
其中TabLayout中
Indicator 是下劃線的意思
（1）app:tabIndicatorFullWidth="false" 即下劃線的寬度與item文字的寬度一致，若設為 true，則Indicator 充滿 item 的寬度。
（2）app:tabMode="scrollable" tabMode有兩種屬性：fixed和 scrollable；fixed：指的是固定tab；scrollable指的是tab可滑動。
（3）app:tabIndicator="@drawable/tab_indicator_shape" 設定下劃線的樣式，下劃線可以設定為圓角
例如：tab_indicator_shape.xml
點選檢視程式碼
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--圓角-->
<corners android:radius="2px" />
</shape>
（4）app:tabSelectedTextColor 選中字型顏色
（5）app:tabTextAppearance="@style/TabTextStyle" 字型樣式，大小、粗體等
例如：
點選檢視程式碼
<resources>
<style name="TabTextStyle">
<item name="android:textSize">36px</item>
</style>
</resources>
2.在.java檔案中宣告控制元件
點選檢視程式碼
private ViewPager car_pager;
private TabLayout car_tabLayout;
//每一個頁面
private List<View> views;
//標題
private String[] titles = {"頁面一","頁面二","頁面三","頁面四","頁面五"};
3.在合適的地方新增view，介面卡等
點選檢視程式碼
//我這裡是自定義的initView，是在onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState)中呼叫
@Override
public void initViews(View view) {
//繫結控制元件
car_pager = view.findViewById(R.id.car_view_pager);
car_tabLayout = view.findViewById(R.id.car_tab_layout);
//新增到views列表中
views = new ArrayList<View>();
LayoutInflater li = getLayoutInflater();
views.add(li.inflate(R.layout.layout_cc_car_common_settings,null));
views.add(li.inflate(R.layout.layout_cc_car_light_settings,null));
views.add(li.inflate(R.layout.layout_cc_car_assisted_driving,null));
views.add(li.inflate(R.layout.layout_cc_car_vehicle_settings,null));
views.add(li.inflate(R.layout.layout_cc_car_vehicle_condition,null));
//設定資料介面卡
PagerAdapter adapter = new PagerAdapter() {
//有多少個切換頁
@Override
public int getCount() {
return views.size();
}
//對顯示的資源進行初始化
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
//對超出範圍的資源進行銷燬
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(views.get(position));
}
//判斷是否view和object關聯
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
//獲取標題
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
};
//設定介面卡
car_pager.setAdapter(adapter);
//讓tablayout與viewpager建立關聯關係
car_tabLayout.setupWithViewPager(car_pager);
}