前言
ViewPager和RecyclerView大概是開發者最常用到的兩個元件了。最近會圍繞著這兩個主題講一下Adapter的設計。
其實之前講過一篇，其實以前的網誌提過。
看看以前的網誌，才能深刻的感受到原來成長就是這麼一回事XD
今天來講一下ViewPager實現。
你塞給他多少圖片，他會自行擴充的ViewPager
 |
| 今日實作ViewPager |
重點程式碼
ViewPager和RecyclerView的共同點，重點都是Adapter
//製作Adapter
class BannerAdapter extends PagerAdapter {
private LayoutInflater mInflater;
private List<String> mUrlList;
//建構子
public BannerAdapter(Context context, List<String> mUrlList) {
//如果把這個寫在instantiateItem的話，每一個Item都會呼叫一次，很吃資源
mInflater = LayoutInflater.from(context);
this.mUrlList = mUrlList;
}
//看你這ViewPager要有幾頁，靠著List的大小擴充
@Override
public int getCount() {
//如果陣列為空，返回0 防呆機制
return mUrlList == null ? 0 : mUrlList.size();
}
//用來判斷目前的畫面是否和instantiateItem創建的為同一個
@Override
public boolean isViewFromObject(View view, Object o) {
return o == view;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//每一個Item都創建View
View view = mInflater.inflate(R.layout.main_viewpager, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
//用Glide下載圖片
Glide.with(mContext)
.load(mUrlList.get(position))
.error(R.drawable.image_loading)
.placeholder(R.drawable.image_loading)
.centerCrop()
.fitCenter()
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.into(imageView);
container.addView(view);
return view;
}
//移除ViewPager內所對應的視圖
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
這邊是我所寫的Adapter其中下載圖片的方式請參考 Glide
重點複寫override四個方法
getCount 要顯示的頁數數量
isViewFromObject 判斷目前的畫面是否和instantiateItem創建的為同一個
instantiateItem Item畫面的製作 有點像RecyclerView內的 onCreateViewHolder + onBindViewHolder
destroyItem 移除ViewPager內所對應的視圖
全部程式碼
 |
| 今日會碰觸到的地方 |
drawable內的 image_loading 請自行去找一張你愛的loading圖，網路上很多可自己google或是看下方demo從那邊下載
先在AndroidManifest.xml內配置網路權限
<uses-permission android:name="android.permission.INTERNET">
然後再build.gradle內配置好下載圖片的Glide
compile 'com.github.bumptech.glide:glide:3.7.0'設定好了讓我們做正事吧！
先來畫
activity_main.xml
 |
| activity_main.xml |
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.hello.kaiser.viewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="@android:color/darker_gray" />
</RelativeLayout>
簡單的塞了一個ViewPager
再來我們的每一個頁面ViewPager需要顯示一張圖片
main_viewpager.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private Context mContext;
//參數
private ViewPager mViewPager;
//假資料
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = this;
mViewPager = (ViewPager) findViewById(R.id.view_pager);
//假資料
List<String> mUrlList = new ArrayList<>();
mUrlList.add("http://android.suvenconsultants.com/newimage/android-developer2.png");
mUrlList.add("http://cdn.makeuseof.com/wp-content/uploads/2017/05/android-apps-eat-battery-670x335.jpg");
mUrlList.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpSWJ32XK7TcLUT2XpXTrzwHMOiKHJkzD7QodGrhRzfvRn35Z4mg");
mUrlList.add("http://android.suvenconsultants.com/newimage/android-developer2.png");
//呼叫Adapter
BannerAdapter bannerAdapter = new BannerAdapter(this, mUrlList);
mViewPager.setAdapter(bannerAdapter);
}
//製作Adapter
class BannerAdapter extends PagerAdapter {
private LayoutInflater mInflater;
private List<String> mUrlList;
//建構子
public BannerAdapter(Context context, List<String> mUrlList) {
//如果把這個寫在instantiateItem的話，每一個Item都會呼叫一次，很吃資源
mInflater = LayoutInflater.from(context);
this.mUrlList = mUrlList;
}
//看你這ViewPager要有幾頁，靠著List的大小擴充
@Override
public int getCount() {
//如果陣列為空，返回0 防呆機制
return mUrlList == null ? 0 : mUrlList.size();
}
//用來判斷目前的畫面是否和instantiateItem創建的為同一個
@Override
public boolean isViewFromObject(View view, Object o) {
return o == view;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//每一個Item都創建View
View view = mInflater.inflate(R.layout.main_viewpager, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
//用Glide下載圖片
Glide.with(mContext)
.load(mUrlList.get(position))
.error(R.drawable.image_loading)
.placeholder(R.drawable.image_loading)
.centerCrop()
.fitCenter()
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.into(imageView);
container.addView(view);
return view;
}
//移除ViewPager內所對應的視圖
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
需要注意的幾個地方
 |
| 飄移 |
檢查了一下發現我犯了幾個錯誤， 在main_viewpager.xml內的ImageView的圖片必須是固定大小。
在做專案時，必須先和美工溝通好，出圖必須一樣大小
或是在這邊把圖片的大小（width 和 height）先行寫死
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
android:layout_centerInParent="true" 必須有這個固定住ImageView在中間
ViewPager通常都是固定高度的，如果你需要隨著app的大小做高度伸展，可以使用code自行修改，這邊不再贅述
DEMO
https://github.com/nikeru8/ViewPagerDemo/tree/master
沒有留言:
張貼留言