TabLayout+ViewPage2+Fragment
效果图:
布局代码:activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/purple_200"
app:tabIndicatorColor="@color/black"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="@color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="@+id/tab_layout" />
</LinearLayout>
TabLayout常用属性:
app:tabBackground="@color/purple_200"//设置整个tab栏的颜色
app:tabIndicatorColor="@color/black"//下方指示器的颜色
app:tabIndicatorHeight="2dp"//指示器的高度
app:tabSelectedTextColor="@color/black"//tab文字选中时的颜色
app:tabTextColor="@color/white"//未选中时的颜色
fragment的布局代码:fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FragmentOne"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_two.xml代码也是一样的
java代码:MainActivity.java
package com.example.tablayoutviewpage2;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import androidx.viewpager2.widget.ViewPager2.OnPageChangeCallback;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager2 mViewPage;
private String[] tabTitles;//tab的标题
private List<Fragment> mDatas = new ArrayList<>();//ViewPage2的Fragment容器
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
//找到控件
mTabLayout = findViewById(R.id.tab_layout);
mViewPage = findViewById(R.id.view_page);
//创建适配器
MyViewPageAdapter mAdapter = new MyViewPageAdapter(this,mDatas);
mViewPage.setAdapter(mAdapter);
//TabLayout与ViewPage2联动关键代码
new TabLayoutMediator(mTabLayout, mViewPage, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
tab.setText(tabTitles[position]);
}
}).attach();
//ViewPage2选中改变监听
mViewPage.registerOnPageChangeCallback(new OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
}
});
//TabLayout的选中改变监听
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
//初始化数据
private void initData() {
tabTitles = new String[]{"导航一", "导航二"};
FragmentOne frgOne = new FragmentOne();
FragmentTwo frgTwo = new FragmentTwo();
mDatas.add(frgOne);
mDatas.add(frgTwo);
}
}
ViewPage2的适配器代码:MyViewPageAdapter.java
继承FragmentStateAdapter
package com.example.tablayoutviewpage2;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import java.util.ArrayList;
import java.util.List;
public class MyViewPageAdapter extends FragmentStateAdapter {
List<Fragment> mDatas = new ArrayList<>();
public MyViewPageAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> mDatas) {
super(fragmentActivity);
this.mDatas = mDatas;
}
@NonNull
@Override
public Fragment createFragment(int position) {
return mDatas.get(position);
}
@Override
public int getItemCount() {
return mDatas.size();
}
}
FragmentOne.java代码:
package com.example.tablayoutviewpage2;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class FragmentOne extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one,container);
return view;
}
}
FragmentTwo.java的代码和FragmentOne.java相似