上图是一个左右滑动切换的页面 两个页面都是列表形式 那么如何实现左右滑动呢?
实现方式如下:
我们运用
SlidingTabLayout
实现 首先导入依赖
//在build.gradle中导入依赖
implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
在xml中引用
// xmlns:tl="http://schemas.android.com/apk/res-auto" 这个是t1的依赖
<?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:tl="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="44dp"
android:layout_marginRight="8dp"
app:tl_indicator_corner_radius="4dp"
tl:tl_indicator_color="@color/normalPrimary"
tl:tl_indicator_gravity="BOTTOM"
tl:tl_indicator_height="4dp"
tl:tl_indicator_style="NORMAL"
tl:tl_indicator_width="@dimen/dp_16"
tl:tl_indicator_width_equal_title="false"
tl:tl_tab_padding="12dp"
tl:tl_tab_space_equal="true"
tl:tl_textSelectColor="#333333"
tl:tl_textUnselectColor="@color/color_black4"
tl:tl_textsize="14sp" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:background="@color/bg_color" />
</LinearLayout>
切换工具类
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import java.util.List;
/**
* desc : TabPagerAdapter
*/
public class TabPagerAdapter extends FragmentPagerAdapter {
public List<Fragment> fragments;
public List<String> titles;
public TabPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm);
this.fragments=fragments;
this.titles=titles;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
if (titles!=null&&titles.size()>position){
return titles.get(position);
}else {
return "";
}
}
}
接下来我们看Activity代码的实现
//一些绑定布局 查找id步骤省略
private ArrayList<Fragment> aaaFrg;//整个页面定义
private ArrayList<String> fireTitles;//标题
private FirstFragment firstFrg;//第一个frag
private SecondFragment secondFrg;//第二个frag
private TabPagerAdapter tabPagerAdapter;//工具类
/**
* 初始化布局
*/
private void initView() {
tvTitle.setText("我是整个标题名称");
aaaFrg= new ArrayList<>();
fireTitles = new ArrayList<>();
fireTitles.add("第一个frag");
//第一个fragment
firstFrg= FirstFragment.newInstance();
aaaFrg.add(firstFrg);
//第二个fragment
fireTitles.add("第二个frag");
secondFrg= SecondFragment.newInstance();
aaaFrg.add(secondFrg);
tabPagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), aaaFrg, fireTitles);
viewPager.setAdapter(tabPagerAdapter);
tabLayout.setViewPager(viewPager);
tabPagerAdapter.notifyDataSetChanged();
}
在分别创建两个frag
frag对应的列表xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
第一个frag
private LinearLayoutManager linearLayoutManager;
private FirstAdapter firstAdapter;
@Override
public View getRootView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.rv_fire_fragment, container, false);
}
public static FirstFragment newInstance() {
FirstFragment bindInputFragment = new FirstFragment ();
Bundle args = new Bundle();
bindInputFragment.setArguments(args);
return bindInputFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void prepareView() {
dataList = new ArrayList<>();
linearLayoutManager = new LinearLayoutManager(mContext);
recyclerView.setLayoutManager(linearLayoutManager);
firstAdapter = new FirstAdapter(mContext);
recyclerView.setAdapter(firstAdapter );
}
第一个frag对应的adapter(第二个frag通用)
public class xxxAdapter extends RecyclerView.Adapter<xxxHolder> {
private Context mContext;
public xxxAdapter(Context contextt){
this.mContext = context;
}
@NonNull
@Override
public xxxHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.xxxx, parent, false);
return new xxxHolder(view);
}
@Override
public void onBindViewHolder(@NonNull xxxHolder holder, int position) {
// final xxxBean.ListBean listBean = listBeans.get(position);
holder.tvName.setText(“第一个列表”);
}
@Override
public int getItemCount() {
return 10;
}
}
第二个frag
private LinearLayoutManager linearLayoutManager;
private XxxAdapter xxxAdapter;
@Override
public View getRootView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.rv_fire_fragment, container, false);
}
public static StudyFragment newInstance() {
StudyFragment bindInputFragment = new StudyFragment();
Bundle args = new Bundle();
bindInputFragment.setArguments(args);
return bindInputFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void prepareView() {
linearLayoutManager = new LinearLayoutManager(mContext);
recyclerView.setLayoutManager(linearLayoutManager);
xxxAdapter = new XxxAdapter(mContext,dataList);
recyclerView.setAdapter(xxxAdapter);
}
其他同上 adapter都通用
这样就通过SlidingTabLayout实现了左右切换的页面