Android|ViewPaper2+Fragment+RecyclerView+TabLayout实现页面的切换

文章目录

实现成果
一、ViewPaper2控件的使用
二、Fragment实现两个页面
三、RecyclerView实现歌单列表
四、TabLayout实现按钮的切换
五、MainActivity中为ViewPaper2添加适配器

实现成果本地音乐和在线音乐页面的切换
一、ViewPaper2控件的使用 1.该控件可以滑动的格式显示视图或Fragment
在MainActivity对应的布局文件中使用ViewPaper2控件
2.创建ViewPaper2对应的适配器
在该适配器中，ArrayList指的是两个页面对应的fragment 。createFragment方法用于创建fragment，getItemCount方法，用于返回fragment的个数。

import androidx.annotation.NonNull;import androidx.fragment.app.Fragment;import androidx.fragment.app.FragmentActivity;import androidx.viewpager2.adapter.FragmentStateAdapter;import java.util.ArrayList;public class ViewPaperAdapter2 extends FragmentStateAdapter {private ArrayList mfragments;public ViewPaperAdapter2(@NonNull FragmentActivity fragmentActivity,ArrayList fragments){super(fragmentActivity);this.mfragments=fragments;}@NonNull@Overridepublic Fragment createFragment(int position) {return mfragments.get(position);}@Overridepublic int getItemCount() {return mfragments.size();}}

二、Fragment实现两个页面可以将fragment理解为两个页面的容器，即Fragment装载着在线音乐和本地音乐两个页面.以本地音乐为例子。
1.创建实体类，本地音乐中的音乐歌单list主要有三个数据：歌曲图片，歌曲名称，歌手。

public class LocalMusic {private String songName,songAuthor;private int imageId;public LocalMusic(String songName, String songAuthor, int imageId) {this.songName = songName;this.songAuthor = songAuthor;this.imageId = imageId;}public String getSongName() {return songName;}public String getSongAuthor() {return songAuthor;}public int getImageId() {return imageId;}}

创建本地音乐的fragment 。
在fragment中oncreateView方法创建view视图，并获取RecyclerView控件，为RecyclerView设置适配器（作用是传入歌曲的数据，适配器在第三步实现），并设置其布局管理器。（垂直布局），如果歌单是水平排列可以修改布局管理器。

public class LocalMusicFragment extends Fragment {private Context context;private RecyclerView recyclerView;private LocalMusicAdapter adapter;private List localMusics=new ArrayList<>();@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.activity_local_music_fragment,container,false);context=view.getContext();recyclerView=view.findViewById(R.id.recycler_view);initData();LinearLayoutManager manager=new LinearLayoutManager(context);manager.setOrientation(LinearLayoutManager.VERTICAL);adapter=new LocalMusicAdapter(context,localMusics);recyclerView.setAdapter(adapter);recyclerView.setLayoutManager(manager);return view;}//初始化本地音乐页面private void initData(){LocalMusic localMusic1 =new LocalMusic("晴天","周杰伦",R.drawable.zhou_1);localMusics.add(localMusic1);}}

本地音乐的fragment对应的布局文件
三、RecyclerView实现歌单列表 1.创建一个item布局文件，展示本地音乐的排列布局

创建RecyclerView适配器，用于初始化RecyclerView的视图。
其中复用三个方法的意义如下：

onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
用于加载RecylerView子项的布局，将第3步骤创建的布局文件传入该方法中，然后返回一个ViewHolder对象。
onBindViewHolder(@NonNull ViewHolder holder, int position)
为子项绑定数据，在该实验中主要是绑定专辑图片，歌曲名和歌手三个数据。
getItemCount()
用于获取RecylerView一共有多少个数据。

public class LocalMusicAdapter extends RecyclerView.Adapter {private List localMusics;private Context context;static class ViewHolder extends RecyclerView.ViewHolder{ImageView iv_song;TextView tv_name,tv_author;public ViewHolder(View v){super(v);iv_song=v.findViewById(R.id.song_image);tv_name=v.findViewById(R.id.song_name);tv_author=v.findViewById(R.id.song_author);}}public LocalMusicAdapter(Context context,List list){this.context=context;this.localMusics =list;}@NonNull@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.localmusic_item,parent,false);ViewHolder viewHolder=new ViewHolder(view);return viewHolder;}@Overridepublic void onBindViewHolder(@NonNull ViewHolder holder, int position) {LocalMusic localMusic = localMusics.get(position);holder.iv_song.setImageResource(localMusic.getImageId());holder.tv_author.setText(localMusic.getSongAuthor());holder.tv_name.setText(localMusic.getSongName());}@Overridepublic int getItemCount() {return localMusics.size();}}

以上已经实现了两个页面布局以及切换
四、TabLayout实现按钮的切换使用TabLayout控件再给两个页面加上对应的按钮
1.布局文件中添加控件
2.联合TabLayout和ViewPaper2
其中tabLayout和viewPager即布局文件中对应的TabLayout和ViewPaper2控件，在加载MainActivity的时候获取着两个控件即可。

 //关联TabLayout 添加attach()new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {@Overridepublic void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {//设置tab的文字tab.setText(titles.get(position));}}).attach();

五、MainActivity中为ViewPaper2添加适配器

//创建适配器，并传入fragmentViewPaperAdapter viewPaperAdapter = new ViewPaperAdapter(MainActivity.this,pageFragments);//添加适配器viewPager.setAdapter(viewPaperAdapter);viewPager.setCurrentItem(0);//ViewPager2提供的滑动监听viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position,positionOffset,positionOffsetPixels);}});

【Android|ViewPaper2+Fragment+RecyclerView+TabLayout实现页面的切换】以上，就简单地实现了两个页面之间的滑动切换。其中只展示了本地音乐的实现，在线音乐页面同理。