安卓ViewPager詳解——基礎使用

今天,我通過博客來給你們拓展一下ViewPager的使用,本博客先介紹ViewPager最基本的使用,下一篇我會講一下ViewPager+Fragement+TabLayout三大組合,搭載一個我們平時比較常見的界面結構
下面是本節課ViewPager的效果圖:

在這裏插入圖片描述
1.首先,依舊是現在我們的項目中導入ViewPager的包

implementation 'com.android.support:viewpager:28.0.0'

2.在佈局中添加我們的ViewPager控件

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context=".MainActivity">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:clipChildren="false"
            >

        </androidx.viewpager.widget.ViewPager>



</LinearLayout>

這裏特別注意的是:

android:clipChildren=“false”

這個屬性默認是true,作用就是限制子view在父View範圍內顯示。 加了這個屬性意思是ViewPager中間圖片的兩邊可以顯示部分左右兩邊的圖片。同時要在邏輯代碼中加viewPager.setPageMargin()設置間距
注意LinearLayout和ViewPager都要設置,否則沒有效果。

下面是主函數邏輯代碼:


public class MainActivity extends AppCompatActivity {
     ViewPager viewPager ;
     int []images = {R.drawable.one ,R.drawable.two,R.drawable.three,
                    R.drawable.four,R.drawable.five,R.drawable.six,
                    R.drawable.seven};



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.viewpager);
        viewPager.setPageMargin(10);             //兩個page間距,要配合佈局中 android:clipChildren="false"使用
        viewPager.setOffscreenPageLimit(3);      //ViewPager預加載多少張圖片

        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View)object);
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(images[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);    //使圖片從中心放大鋪滿整個視圖
                container.addView(imageView);
                return imageView;
            }

            @Override
            public int getCount() {
                return images.length;
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }
        });

    }
}

我們一點點解析上面的代碼
首先要爲viewpager綁定這點
接着我們需要爲viewpager設置Adapter適配器,我們直接在setAdapter()裏面new 一個PagerAdapter
並重寫其四個方法

1.int getCount() 
2.void destroyItem(ViewGroup container, int position,Object object)
3.Object instantiateItem(ViewGroup container, int position)
4.boolean isViewFromObject(View view, Object object)

    @Override
    public int getCount() {
       return images.length;
     }		

我們先看第一個,這裏是返回你滑動的view視圖的個數

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View)object);
            }

這裏是從當前的container中刪除指定position的view

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(images[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);    //使圖片從中心放大鋪滿整個視圖
                container.addView(imageView);
                return imageView;
            }

這裏是初始化我們的View,把我們的Imageview要顯示的圖片設置,然後讓改圖片鋪滿,接着把我們的圖片添加到container中,並將其返回

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }

這個函數是將傳過來的key與當前視圖比較,一般是返回view==object就行

好,viewpager的基本應用就先講到這裏,下一篇博客我會寫viewpager+tablayout+fragment。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章