今天,我通過博客來給你們拓展一下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。
,