导语
主要是为了分析一些我用过的第三方控件，学习一下一些酷炫的特效是怎么实现的。ConvenientBanner是我之前在github上翻到的一款轮播图控件，项目催的比较急就开始用了，现在让我这个砖战士来分析一下。
脑补原理
先随便脑补一下这玩意大概是怎么做的，一个viewpager，加个定时器，开始滑啊滑，大概就这样了吧。
傻狗.
ConvenientBanner继承的是LinearLayout???LinearLayout???LinearLayout???
分析
直接构造方法
public ConvenientBanner(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ConvenientBanner);
canLoop = a.getBoolean(R.styleable.ConvenientBanner_canLoop,true);
a.recycle();
init(context);
}
不多说，直接init(context);
private void init(Context context) {
View hView = LayoutInflater.from(context).inflate(
R.layout.include_viewpager, this, true);
viewPager = (CBLoopViewPager) hView.findViewById(R.id.cbLoopViewPager);
loPageTurningPoint = (ViewGroup) hView
.findViewById(R.id.loPageTurningPoint);
initViewPagerScroll();
adSwitchTask = new AdSwitchTask(this);
}
原来是viewpager+ LinearLayout，LinearLayout里面放的是小圆点指示器，都忘记有小圆点这东西， = = 。所以用LinearLayout包起来了。让我looklook布局文件，CBLoopViewPager？看来这就是关键所在咯。
CBLoopViewPager
让我们看看，有一些必要的方法在里面。
- CBPageAdapter
继承PagerAdapter，重写了几个方法一个一个看。
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = toRealPosition(position);
View view = getView(realPosition, null, container);
// if(onItemClickListener != null) view.setOnClickListener(onItemClickListener);
container.addView(view);
return view;
}
展示pager用的，返回一个自己想要的view，第一行判断当前position，第二行根据position获取view添加点击事件。getView里面有一个holder抽出来可以自己构造想要展示的view。这个用的时候有印象，可以直接构造，用着还挺方便的。
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
移除item时候调用移除掉之前的view
@Override
public void finishUpdate(ViewGroup container) {
int position = viewPager.getCurrentItem();
if (position == 0) {
position = viewPager.getFristItem();
} else if (position == getCount() - 1) {
position = viewPager.getLastItem();
}
try {
viewPager.setCurrentItem(position, false);
}catch (IllegalStateException e){}
}
更新后期调用的方法，在这里面调用显示到指定位置的view，获取了当前显示的view的position，判断了一下第一个和最后一个....然后卡住了。丫喽，啥东西，为啥position==0的时候获取的是positon == datas.size?然后还移动了过去?待老夫冥想一下.....
@Override
public int getCount() {
return canLoop ? getRealCount()*MULTIPLE_COUNT : getRealCount();
}
原来漏掉了这一段...MULTIPLE_COUNT是300.我说咋又fristItem又lastItem,又RealCount的，原来是他给乘了300啊。这样就差不多了，因为需要循环所以需要处理循环的item。
Adpater差不多就这样了，感觉还蛮容易的。
- onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (isCanScroll) {
if (onItemClickListener != null) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
oldX = ev.getX();
break;
case MotionEvent.ACTION_UP:
newX = ev.getX();
if (Math.abs(oldX - newX) < sens) {
onItemClickListener.onItemClick((getRealItem()));
}
oldX = 0;
newX = 0;
break;
}
}
return super.onTouchEvent(ev);
} else
return false;
}
点击事件，原来是判断了UP和DOWN，我说有时候咋点着费劲呢，看上去是判断左右滑动和单击事件的，恩，一定是这样。
- 其他
别的都是些常规的属性设置，没啥可看的。
醒醒，醒醒，你丫倒是转啊~~~~
- AdSwitchTask 转转转
static class AdSwitchTask implements Runnable {
private final WeakReference<ConvenientBanner> reference;
AdSwitchTask(ConvenientBanner convenientBanner) {
this.reference = new WeakReference<ConvenientBanner>(convenientBanner);
}
@Override
public void run() {
ConvenientBanner convenientBanner = reference.get();
if(convenientBanner != null){
if (convenientBanner.viewPager != null && convenientBanner.turning) {
int page = convenientBanner.viewPager.getCurrentItem() + 1;
convenientBanner.viewPager.setCurrentItem(page);
convenientBanner.postDelayed(convenientBanner.adSwitchTask, convenientBanner.autoTurningTime);
}
}
}
}
开线程，这是viewpager切换，convenientBanner.autoTurningTime，还专门动态搞了个时间。好的，你终于可以轮播了，啪啪啪。
赠品：圆点指示器
- 圆点基础属性
public ConvenientBanner setPageIndicator(int[] page_indicatorId) {
loPageTurningPoint.removeAllViews();
mPointViews.clear();
this.page_indicatorId = page_indicatorId;
if(mDatas==null)return this;
for (int count = 0; count < mDatas.size(); count++) {
// 翻页指示的点
ImageView pointView = new ImageView(getContext());
pointView.setPadding(5, 0, 5, 0);
if (mPointViews.isEmpty())
pointView.setImageResource(page_indicatorId[1]);
else
pointView.setImageResource(page_indicatorId[0]);
mPointViews.add(pointView);
loPageTurningPoint.addView(pointView);
}
pageChangeListener = new CBPageChangeListener(mPointViews,
page_indicatorId);
viewPager.setOnPageChangeListener(pageChangeListener);
pageChangeListener.onPageSelected(viewPager.getRealItem());
if(onPageChangeListener != null)pageChangeListener.setOnPageChangeListener(onPageChangeListener);
return this;
}
配置圆点，往LinearLayout强行插♂入图片，这是监听回调不拉不拉，那样吧，虽然看上去懂了，但是估计自己写的时候够呛，默念三遍，啦啦啦啦啦啦啦，OK
- 圆点的位置
public ConvenientBanner setPageIndicatorAlign(PageIndicatorAlign align) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) loPageTurningPoint.getLayoutParams();
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, align == PageIndicatorAlign.ALIGN_PARENT_LEFT ? RelativeLayout.TRUE : 0);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, align == PageIndicatorAlign.ALIGN_PARENT_RIGHT ? RelativeLayout.TRUE : 0);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, align == PageIndicatorAlign.CENTER_HORIZONTAL ? RelativeLayout.TRUE : 0);
loPageTurningPoint.setLayoutParams(layoutParams);
return this;
}
作者可以的，够人性的，RelativeLayout设置圆点的位置，左，中，右满足你的所有体位，666
总结
- 就这样，和我想的差不多，关键是里面的一些细节自己想不到，比如点击事件，按下的时候别滑动等等，自己写肯定就是各种大坑，学习一个思路吧。另外，这篇文章从早上稀稀拉拉写，写到现在，感觉周期有些长了，和自己想的不太一样.....期间还玩了一会SourceTree,git,github和Markdown嘿嘿嘿。
OVER El psy congroo。
啊哈哈哈哈哈哈
网友评论