开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 其他教程 >  Android如何实现自动变换大小的组件ViewPager2

Android如何实现自动变换大小的组件ViewPager2

其他教程   发布日期：2023年09月15日   浏览次数：429次

本篇内容介绍了“Android如何实现自动变换大小的组件ViewPager2”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

ViewPager2的概念

ViewPager2是一个翻页视图组件

ViewPager2能做什么

  • 支持垂直方向的滑动且实现极其简单。

  • 完全支持RecyclerView的相关配置功能。

  • 支持多个PageTransformer。

  • 支持DiffUtil，局部数据刷新和Item动画。

  • 支持模拟用户滑动与禁止用户操作。

ViewPager2的用法

因为ViewPager2是基于RecyclerView的，所以在使用上与RecyclerView的使用基本一致

ViewPager2常用的API

1. setAdapter() 为viewpager2设置是配置
2. setOrientation() 设置视图翻页的方向，可以设置垂直方向，也可以设置水平方向。
3. setPageTransformer() 设置翻页的动画

举个简单的例子，adapter部分的代码省略了

第一步： activity_main.xml

  1. // 第一步： activity_main.xml
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     tools:context=".MainActivity"
  9.     android:orientation="vertical">
  10.     <TextView
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="Hello World!"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintStart_toStartOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.     <androidx.viewpager2.widget.ViewPager2
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent"
  21.         android:id="@+id/view_pager"/>
  22. </LinearLayout>

第二步：创建适配器的视图

  1. // 第二步：创建适配器的视图
  2. <!-- ViewPager2要求每页的宽高都必须是match_parent -->
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  7.     <ImageView
  8.         android:id="@+id/iv_pic"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="360dp"
  11.         android:scaleType="fitCenter" />
  12.     <TextView
  13.         android:id="@+id/tv_desc"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content" />
  16. </LinearLayout>

第三步： 创建适配器adapter

  1. // 第三步：创建适配器adapter
  2. public class viewpagerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
  3.     // 声明一个上下文对象
  4.     private Context mContext; 
  5.     // 声明一个商品列表，用于渲染adapter
  6.     private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>(); 
  7.     // 函数构造
  8.     public viewpagerAdapter(Context context, List<GoodsInfo> goodsList) {
  9.         mContext = context;
  10.         mGoodsList = goodsList;
  11.     }
  12.     // 创建列表项的视图持有者
  13.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup vg, int viewType) {
  14.         // 根据布局文件item_mobile.xml生成视图对象
  15.         View v = LayoutInflater.from(mContext).inflate(R.layout.item_mobile, vg, false);
  16.         return new ItemHolder(v);
  17.     }
  18.     // 绑定列表项的视图持有者
  19.     public void onBindViewHolder(RecyclerView.ViewHolder vh, final int position) {
  20.         ItemHolder holder = (ItemHolder) vh;
  21.         holder.iv_pic.setImageResource(mGoodsList.get(position).pic);
  22.         holder.tv_desc.setText(mGoodsList.get(position).desc);
  23.     }
  24.     // 定义列表项的视图持有者
  25.     public class ItemHolder extends RecyclerView.ViewHolder {
  26.         public ImageView iv_pic; // 声明列表项图标的图像视图
  27.         public TextView tv_desc; // 声明列表项描述的文本视图
  28.         public ItemHolder(View v) {
  29.             super(v);
  30.             iv_pic = v.findViewById(R.id.iv_pic);
  31.             tv_desc = v.findViewById(R.id.tv_desc);
  32.         }
  33.     }
  34. }

第四步：书写MainAcvitivity.java，调用ViewPager的API

  1. //第四步：书写MainAcvitivity.java，调用ViewPager的API
  2. public class MainActivity extends AppCompatActivity {
  3.     private List<GoodsInfo> viewPagerList = new ArrayList<>();
  4.     @Override
  5.     protected void onCreate(Bundle savedInstanceState) {
  6.         super.onCreate(savedInstanceState);
  7.         setContentView(R.layout.activity_main);
  8.         initData();
  9.         // 从布局文件中获取翻页视图
  10.         ViewPager2 viewPager2 = findViewById(R.id.view_pager);
  11.         // 构建适配器
  12.         viewpagerAdapter vpa = new viewpagerAdapter(viewPagerList);
  13.         // 设置翻页视图的排列方向为水平方向
  14.         viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
  15.         // 为翻页视图添加适配器
  16.         viewPager2.setAdapter(vpa);
  17.     }
  18.     private void initData(){
  19.             GoodsInfo g1 = new GoodsInfo("123", R.drawable.cloudy);
  20.             viewPagerList.add(g1);
  21.             GoodsInfo g2 = new GoodsInfo("456", R.drawable.moon);
  22.             viewPagerList.add(g2);
  23.             GoodsInfo g3 = new GoodsInfo("789", R.drawable.sunny);
  24.             viewPagerList.add(g3);
  25.     }
  26. }

有没有发现，这个和recycleView的写法一摸一样。

ViewPager2与fragment结合使用

第一步：activity_main.xml视图

  1. // 第一步：activity_main.xml视图  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     tools:context=".MainActivity"
  9.     android:orientation="vertical">
  10.     <TextView
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="Hello World!"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintStart_toStartOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.     <androidx.viewpager2.widget.ViewPager2
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent"
  21.         android:id="@+id/view_pager"/>
  22. </LinearLayout>

第二步：创建fragment所需要的视图fragment_blank.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@color/white"
  7.     tools:context=".BlankFragment">
  8.     <!-- TODO: Update blank fragment layout -->
  9.     <TextView
  10.         android:id="@+id/mTextView"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:text="@string/hello_blank_fragment"
  14.         android:textSize="36sp"
  15.         android:gravity="center"/>
  16. </FrameLayout>

第三步：fragment所需的代码

  1. public class BlankFragment extends Fragment {
  2.     private static final String ARG_PARAM1 = "param1";
  3.     String mTextString = "xxx";
  4.     View rootView;
  5.     public static BlankFragment newInstance(String param1) {
  6.         BlankFragment fragment = new BlankFragment();
  7.         Bundle args = new Bundle();
  8.         args.putString(ARG_PARAM1, param1);
  9.         fragment.setArguments(args);
  10.         return fragment;
  11.     }
  12.     @Override
  13.     public void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         if (getArguments() != null) {
  16.             mTextString = getArguments().getString(ARG_PARAM1);
  17.         }
  18.     }
  19.     @Override
  20.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  21.                              Bundle savedInstanceState) {
  22.         if(rootView == null) {
  23.             rootView = inflater.inflate(R.layout.fragment_blank, container, false);
  24.         }
  25.         initView();
  26.         return rootView;
  27.     }
  28.     private void initView() {
  29.         TextView textView = rootView.findViewById(R.id.mTextView);
  30.         textView.setText(mTextString);
  31.     }
  32. }

第四步：创建承载fragment所需要的适配器

  1. public class MyFragmentAdapter extends FragmentStateAdapter {
  2.     List<Fragment> fragments = new ArrayList<>();
  3.     public MyFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {
  4.         super(fragmentManager, lifecycle);
  5.         this.fragments = fragments;
  6.     }
  7.     @NonNull
  8.     @Override
  9.     public Fragment createFragment(int position) {
  10.         return fragments.get(position);
  11.     }
  12.     @Override
  13.     public int getItemCount() {
  14.         return fragments.size();
  15.     }
  16. }

第五步：书写MainAcvitivity.java，调用ViewPager的API

  1. public class MainActivity extends AppCompatActivity {
  2.     ViewPager2 viewPager2;
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  8.         initPage();
  9.     }
  10.     private void initPage() {
  11.         List<Fragment> fragments = new ArrayList<>();
  12.         fragments.add(BlankFragment.newInstance("fragment1"));
  13.         fragments.add(BlankFragment.newInstance("fragment2"));
  14.         fragments.add(BlankFragment.newInstance("fragment3"));
  15.         fragments.add(BlankFragment.newInstance("fragment4"));
  16.         viewPager2 = findViewById(R.id.myViewPager);
  17.         viewPager2.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),
  18.                 getLifecycle(),fragments));
  19.     }
  20. }

ViewPager2与导航栏配合使用

代码简写，只写相关的部分

  1. // activity_main.xml 写上用到的两个组件TabLayout与ViewPager2
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:orientation="vertical"
  9.     tools:context=".MainActivity">
  10.     <com.google.android.material.tabs.TabLayout
  11.         android:id="@+id/mTabLayout"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         android:layout_weight="0.1">
  15.         <com.google.android.material.tabs.TabItem
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="wrap_content"
  18.             android:text="Monday" />
  19.         <com.google.android.material.tabs.TabItem
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.             android:text="Tuesday" />
  23.         <com.google.android.material.tabs.TabItem
  24.             android:layout_width="wrap_content"
  25.             android:layout_height="wrap_content"
  26.             android:text="Wednesday" />
  27.     </com.google.android.material.tabs.TabLayout>
  28.     <androidx.viewpager2.widget.ViewPager2
  29.         android:layout_width="match_parent"
  30.         android:layout_height="0dp"
  31.         android:layout_weight="1"
  32.         android:id="@+id/myViewPager"
  33.         android:background="@color/purple_500"
  34.         >
  35.     </androidx.viewpager2.widget.ViewPager2>
  36. </LinearLayout>
  1. public class MainActivity extends AppCompatActivity {
  2.     ViewPager2 viewPager2;
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  7.         initPage();
  8.     }
  9.     private void initPage() {
  10.         List<Fragment> fragments = new ArrayList<>();
  11.         fragments.add(BlankFragment.newInstance("fragment1"));
  12.         fragments.add(BlankFragment.newInstance("fragment2"));
  13.         fragments.add(BlankFragment.newInstance("fragment3"));
  14.         fragments.add(BlankFragment.newInstance("fragment4"));
  15.         viewPager2 = findViewById(R.id.myViewPager);
  16.         viewPager2.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),
  17.                 getLifecycle(),fragments));
  18. 		//绑定使用
  19. 		new TabLayoutMediator(findViewById(R.id.mTabLayout),viewPager2,new TabLayoutMediator.TabConfigurationStrategy(){
  20.             @Override
  21.             public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
  22.                 switch (position){
  23.                     case 0:
  24.                         tab.setText("1");
  25.                         break;
  26.                     case 1:
  27.                         tab.setText("2");
  28.                         break;
  29.                     case 2:
  30.                         tab.setText("3");
  31.                         break;
  32.                 }
  33.             }
  34.         }).attach();
  35.     }
  36. }

以上就是Android如何实现自动变换大小的组件ViewPager2的详细内容，更多关于Android如何实现自动变换大小的组件ViewPager2的资料请关注九品源码其它相关文章！

相关热词： Android实现自动变换小的组件ViewPager2
上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：Go语言时间处理必备技巧有哪些

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1