Android實現(xiàn)自動變換大小的組件ViewPager2

更新時間：2023年03月20日 10:04:43 作者：Dormiveglia-flx

這篇文章主要介紹了Android實現(xiàn)自動變換大小的組件ViewPager2，ViewPager2最顯著的特點是基于RecyclerView實現(xiàn)，RecyclerView是目前Android端最成熟的AdapterView解決方案

ViewPager2的概念

ViewPager2是一個翻頁視圖組件

ViewPager2能做什么

支持垂直方向的滑動且實現(xiàn)極其簡單。
完全支持RecyclerView的相關配置功能。
支持多個PageTransformer。
支持DiffUtil，局部數(shù)據(jù)刷新和Item動畫。
支持模擬用戶滑動與禁止用戶操作。

ViewPager2的用法

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

ViewPager2常用的API

1. setAdapter() 為viewpager2設置是配置
2. setOrientation() 設置視圖翻頁的方向，可以設置垂直方向，也可以設置水平方向。
3. setPageTransformer() 設置翻頁的動畫

舉個簡單的例子，adapter部分的代碼省略了

第一步： activity_main.xml

// 第一步： 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">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"/>
</LinearLayout>

第二步：創(chuàng)建適配器的視圖

// 第二步：創(chuàng)建適配器的視圖
<!-- ViewPager2要求每頁的寬高都必須是match_parent -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:scaleType="fitCenter" />
    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

第三步：創(chuàng)建適配器adapter

// 第三步：創(chuàng)建適配器adapter
public class viewpagerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    // 聲明一個上下文對象
    private Context mContext; 
    // 聲明一個商品列表，用于渲染adapter
    private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>(); 
    // 函數(shù)構(gòu)造
    public viewpagerAdapter(Context context, List<GoodsInfo> goodsList) {
        mContext = context;
        mGoodsList = goodsList;
    }
    // 創(chuàng)建列表項的視圖持有者
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup vg, int viewType) {
        // 根據(jù)布局文件item_mobile.xml生成視圖對象
        View v = LayoutInflater.from(mContext).inflate(R.layout.item_mobile, vg, false);
        return new ItemHolder(v);
    }
    // 綁定列表項的視圖持有者
    public void onBindViewHolder(RecyclerView.ViewHolder vh, final int position) {
        ItemHolder holder = (ItemHolder) vh;
        holder.iv_pic.setImageResource(mGoodsList.get(position).pic);
        holder.tv_desc.setText(mGoodsList.get(position).desc);
    }
    // 定義列表項的視圖持有者
    public class ItemHolder extends RecyclerView.ViewHolder {
        public ImageView iv_pic; // 聲明列表項圖標的圖像視圖
        public TextView tv_desc; // 聲明列表項描述的文本視圖
        public ItemHolder(View v) {
            super(v);
            iv_pic = v.findViewById(R.id.iv_pic);
            tv_desc = v.findViewById(R.id.tv_desc);
        }
    }
}

第四步：書寫MainAcvitivity.java，調(diào)用ViewPager的API

//第四步：書寫MainAcvitivity.java，調(diào)用ViewPager的API
public class MainActivity extends AppCompatActivity {
    private List<GoodsInfo> viewPagerList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        // 從布局文件中獲取翻頁視圖
        ViewPager2 viewPager2 = findViewById(R.id.view_pager);
        // 構(gòu)建適配器
        viewpagerAdapter vpa = new viewpagerAdapter(viewPagerList);
        // 設置翻頁視圖的排列方向為水平方向
        viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        // 為翻頁視圖添加適配器
        viewPager2.setAdapter(vpa);
    }
    private void initData(){
            GoodsInfo g1 = new GoodsInfo("123", R.drawable.cloudy);
            viewPagerList.add(g1);
            GoodsInfo g2 = new GoodsInfo("456", R.drawable.moon);
            viewPagerList.add(g2);
            GoodsInfo g3 = new GoodsInfo("789", R.drawable.sunny);
            viewPagerList.add(g3);
    }
}

有沒有發(fā)現(xiàn)，這個和recycleView的寫法一摸一樣。

ViewPager2與fragment結(jié)合使用

第一步：activity_main.xml視圖

// 第一步：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">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"/>
</LinearLayout>

第二步：創(chuàng)建fragment所需要的視圖fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".BlankFragment">
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/mTextView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment"
        android:textSize="36sp"
        android:gravity="center"/>
</FrameLayout>

第三步：fragment所需的代碼

public class BlankFragment extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    String mTextString = "xxx";
    View rootView;
    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTextString = getArguments().getString(ARG_PARAM1);
        }
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if(rootView == null) {
            rootView = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initView();
        return rootView;
    }
    private void initView() {
        TextView textView = rootView.findViewById(R.id.mTextView);
        textView.setText(mTextString);
    }
}

第四步：創(chuàng)建承載fragment所需要的適配器

public class MyFragmentAdapter extends FragmentStateAdapter {
    List<Fragment> fragments = new ArrayList<>();
    public MyFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {
        super(fragmentManager, lifecycle);
        this.fragments = fragments;
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }
    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

第五步：書寫MainAcvitivity.java，調(diào)用ViewPager的API

public class MainActivity extends AppCompatActivity {
    ViewPager2 viewPager2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initPage();
    }
    private void initPage() {
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("fragment1"));
        fragments.add(BlankFragment.newInstance("fragment2"));
        fragments.add(BlankFragment.newInstance("fragment3"));
        fragments.add(BlankFragment.newInstance("fragment4"));
        viewPager2 = findViewById(R.id.myViewPager);
        viewPager2.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),
                getLifecycle(),fragments));
    }
}

ViewPager2與導航欄配合使用

代碼簡寫，只寫相關的部分

// activity_main.xml 寫上用到的兩個組件TabLayout與ViewPager2
<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mTabLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/myViewPager"
        android:background="@color/purple_500"
        >
    </androidx.viewpager2.widget.ViewPager2>
</LinearLayout>

public class MainActivity extends AppCompatActivity {
    ViewPager2 viewPager2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPage();
    }
    private void initPage() {
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("fragment1"));
        fragments.add(BlankFragment.newInstance("fragment2"));
        fragments.add(BlankFragment.newInstance("fragment3"));
        fragments.add(BlankFragment.newInstance("fragment4"));
        viewPager2 = findViewById(R.id.myViewPager);
        viewPager2.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),
                getLifecycle(),fragments));
		//綁定使用
		new TabLayoutMediator(findViewById(R.id.mTabLayout),viewPager2,new TabLayoutMediator.TabConfigurationStrategy(){
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                switch (position){
                    case 0:
                        tab.setText("1");
                        break;
                    case 1:
                        tab.setText("2");
                        break;
                    case 2:
                        tab.setText("3");
                        break;
                }
            }
        }).attach();
    }
}

到此這篇關于Android實現(xiàn)自動變換大小的組件ViewPager2的文章就介紹到這了,更多相關Android ViewPager2內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android中通知欄跳動問題解決方法
這篇文章主要介紹了Android中通知欄跳動問題解決方法,導致這個問題的原因是when這個屬性值,默認它是使用的系統(tǒng)當前時間,這就是導致跳動問題的原因,指定一個固定時間即可解決這個問題,需要的朋友可以參考下
2015-01-01
Android二維碼的生成與掃碼-zxing示例代碼
本篇文章主要介紹了Android二維碼的生成與掃碼-zxing示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
android編程實現(xiàn)系統(tǒng)圖片剪裁的方法
這篇文章主要介紹了android編程實現(xiàn)系統(tǒng)圖片剪裁的方法,涉及Android針對圖片的獲取、修改、保存等操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
ListView下拉列表控件使用方法詳解
這篇文章主要為大家詳細介紹了ListView下拉列表控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
Compose自定義View實現(xiàn)宇智波斑寫輪眼
這篇文章主要為大家介紹了Compose自定義View實現(xiàn)宇智波斑寫輪眼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
Android WebView上實現(xiàn)JavaScript與Java交互
這篇文章主要介紹了Android WebView上實現(xiàn)JavaScript與Java交互的相關資料,需要的朋友可以參考下
2016-03-03
淺析Android中強大的Dialog
下面將通過一個小實例,來像大家展示Android功能強大的Dialog,代碼都寫了詳細的注釋,讀者不妨試著手動去敲
2013-10-10
android ViewPager實現(xiàn)滑動翻頁效果實例代碼
本篇文章主要介紹了android ViewPager實現(xiàn)滑動翻頁效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
android使用mysql的方法總結(jié)
在本篇文章中小編給大家整理了關于android使用mysql的具體方法和實例代碼步驟，需要的朋友們學習下。
2019-05-05
Android變形(Transform)之Matrix用法
Android的2D變形（包括縮放，扭曲，平移，旋轉(zhuǎn)等）可以通過Matrix來實現(xiàn),本文研究了一下;接下來就將我這倆天研究的東西和大家分享下，先來看看Matrix的用法感興趣的你可不要錯過了哈
2013-02-02