GitHub地址:https://github.com/xuerui1993/AutoViewPager
自動(dòng)輪播圖是安卓開發(fā)常用控件,如果在需要開發(fā)時(shí),每個(gè)地方去寫,這樣就比較耗時(shí)、費(fèi)力,不妨可以封裝成一個(gè)自定義控件孽鸡，在需要使用使只去設(shè)置數(shù)據(jù)就可以了，這樣在后續(xù)開發(fā)中不僅省時(shí)窑业，而且可以更好的排錯(cuò)。上面github地址中提供了源碼,需要更詳細(xì)的了解可以去閱讀源碼一下枕屉。
1507193217(1).jpg
一常柄、實(shí)現(xiàn)自定義屬性
雖然這個(gè)并不難,但也是自定義控件常用的特點(diǎn)
- 首先將控件繼承RelativeLayout，并在values文件夾attrs.xml文件中聲明
<declare-styleable name="AutoViewpager">
<attr name="dotSize" format="dimension"/>
<attr name="dotSrc" format="reference"/>
<attr name="duration" format="integer"/>
<attr name="isAuto" format="boolean"/>
<attr name="dotPosition" format="enum">
<enum name="left" value="0"/>
<enum name="center" value="1"/>
<enum name="right" value="2"/>
</attr>
</declare-styleable>
- 讀取屬性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.AutoViewpager);
mDuration = ta.getInteger(R.styleable.AutoViewpager_duration, NORMAL_DURATION);
mDotSize = ta.getDimensionPixelSize(R.styleable.AutoViewpager_dotSize, DOT_NORAML_SIZE);
mIsAuto = ta.getBoolean(R.styleable.AutoViewpager_isAuto, true);
mDrawable = ta.getDrawable(R.styleable.AutoViewpager_dotSrc);
mDotPosition = ta.getInteger(R.styleable.AutoViewpager_dotPosition, 2);
//釋放資源
ta.recycle();
- 在代碼使用讀取出來的屬性
注意：在小圓點(diǎn)使用Drawable圖片時(shí),由于涉及到圖片的selected屬性,所以每一個(gè)小圓點(diǎn)需要使用到一個(gè)新的Drawable,所以需要使用的圖片的克隆,否則一個(gè)Drawable對(duì)象如果使用selected,會(huì)引起所有的圖片selected,無法實(shí)現(xiàn)小圓點(diǎn)的選中狀態(tài)搀擂。
Drawable newDrawable = mDrawable.getConstantState().newDrawable();
imageView.setImageDrawable(newDrawable);
二西潘、設(shè)置Viewpager的適配器
-
為了能無限輪播,將getCount()方法返回Integer的最大值
@Override public int getCount() { if (mList != null) { return Integer.MAX_VALUE; } return 0; } -
做出ImageLoader接口讓外部去實(shí)現(xiàn)這個(gè)接口去加載圖片,減少對(duì)第三方庫的依賴
public interface ImageLoader extends Serializable { void displayImage(Context context, String url, ImageView imageView); void clearMemoryCache(); }
3.在adapter的instantiateItem方法中設(shè)置圖片和圖片的點(diǎn)擊事件，為了無限輪播需要將圖片的position % mList.size();
@Override
public Object instantiateItem(ViewGroup container, final int position) {
final int picPosition = position % mList.size();//為了無限輪播,需要將positon % mList.size();
ImageView imageView = new ImageView(mContext);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
String url = mList.get(picPosition);
if (mImageloader==null){
throw new IllegalArgumentException("圖片加載類為null,需實(shí)現(xiàn)ImageLoader接口并賦值");
}
mImageloader.displayImage(mContext,url,imageView);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mItemClickListener != null) {
mItemClickListener.OnItemClickListener(picPosition);
}
}
});
container.addView(imageView);
return imageView;
}
注意:為了實(shí)現(xiàn)無限輪播效果哨颂，需要新創(chuàng)建ImageView對(duì)象,否則ViewpagerAdapter會(huì)拋出異常
ImageView imageView = new ImageView(mContext);
三喷市、初始化小圓點(diǎn)
private void initDotContaner(List<String> list) {
//設(shè)置小圓點(diǎn)在控件中的位置
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mLlDot.getLayoutParams();
switch (mDotPosition) {
case 0:
layoutParams.addRule(RelativeLayout.ALIGN_LEFT);
break;
case 1:
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
break;
case 2:
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
break;
}
mLlDot.removeAllViews();//將控件清楚干凈
ArrayList<ImageView> imageList = new ArrayList<>();
for (int i = 0; i < list.size(); i++) {
ImageView imageView = new ImageView(getContext());
if (mDotDrawableRes != 0) {
//代碼中設(shè)置了mDotDrawableRes則優(yōu)先設(shè)置
imageView.setImageResource(R.drawable.dot_selector);
} else {
if (mDrawable != null) {
//在布局中設(shè)置了,則顯示布局中的
Drawable newDrawable = mDrawable.getConstantState().newDrawable();
imageView.setImageDrawable(newDrawable);//克隆小圓點(diǎn)并設(shè)置
} else {
//若都沒設(shè)置則,設(shè)置默認(rèn)
imageView.setImageResource(R.drawable.dot_selector);
}
}
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mDotSize, mDotSize);
imageList.add(imageView);
if (i != 0) {
params.leftMargin = mDotSize;
} else {
//默認(rèn)第一個(gè)小圓點(diǎn)被選中
mCurrentDot = imageView;
imageView.setSelected(true);
}
imageView.setLayoutParams(params);
mLlDot.addView(imageView); //添加小圓點(diǎn)
}
}
四、讓圖片開始輪播
-
為了開始就能夠向左滑動(dòng)和向右滑動(dòng)威恼，將圖片選擇為Integer最大值的中間值
//選中中間的第一個(gè) int middle = Integer.MAX_VALUE / 2; int extra = middle % mCount; mViewPager.setCurrentItem(middle-extra); -
做一個(gè)定時(shí)任務(wù),讓圖片開始輪播
class SwitchPagerTask extends Handler implements Runnable { @Override public void run() { int currentItem = mViewPager.getCurrentItem(); if (currentItem == mAdvertAdapter.getCount() - 1) { mViewPager.setCurrentItem(0); } else { mViewPager.setCurrentItem(currentItem + 1); } //在執(zhí)行一次post 品姓， 循環(huán)執(zhí)行 postDelayed(this, mDuration); //使用讀取出來的輪播切換時(shí)間duration } /** * 開始切換 */ public void start() { //停掉以前的任務(wù) removeCallbacks(this); //在執(zhí)行一次post ， 循環(huán)執(zhí)行 postDelayed(this, START_DURATION); } /** * 停止切換 */ public void stop() { //停掉以前的任務(wù) removeCallbacks(this); } }
3.設(shè)置小圓點(diǎn)的被選中狀態(tài),需要設(shè)置監(jiān)聽viewpager的滑動(dòng)狀態(tài),mViewPager.addOnPageChangeListener(this);
@Override
public void onPageSelected(int position) {
position = position % mLabelList.size();
if (mLabelList != null && mLabelList.size() > position) {
mTvLabel.setText(mLabelList.get(position) + "");
}
mCurrentDot.setSelected(false);
ImageView imageView = (ImageView) mLlDot.getChildAt(position);
imageView.setSelected(true);
mCurrentDot = imageView;
}
五沃测、細(xì)節(jié)完善
-
在滑動(dòng)觸摸式重新即時(shí)viewpager的輪播,監(jiān)聽viewpager的觸摸事件,mViewPager.setOnTouchListener(this);
@Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (mSwitchPagerTask != null) { mSwitchPagerTask.stop(); } break; case MotionEvent.ACTION_MOVE: if (mSwitchPagerTask != null) { mSwitchPagerTask.stop(); } break; case MotionEvent.ACTION_UP: if (mSwitchPagerTask != null) { mSwitchPagerTask.start(); } break; } return false; } -
防止內(nèi)存泄漏,添加AutoViewPager的Ondestroy()方法
public void onDestory() { mSwitchPagerTask.stop(); mSwitchPagerTask = null; mViewPager.removeOnPageChangeListener(this); mItemClickListener = null; }
六、如果想可以在AndroidStudio的gradle配置中添加依賴使用
這里有我寫的一篇如何發(fā)布你的GitHub開源庫的文章食茎。
