Android自己定义控件之轮播图控件 _android

仰天大笑出门去，我辈岂是蓬蒿人。这篇文章主要讲述Android自己定义控件之轮播图控件相关的知识，希望能为你提供帮助。
背景
近期要做一个轮播图的效果。网上看了几篇文章。基本上都能找到实现，效果还挺不错，可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码。于是自己封装了一下。这里仅仅是做了下封装成一个控件，不必每次反复写代码了。
效果图

文章图片

实现分析
轮播图的功能就是实现左右滑动的广告、图片信息展示，那我们就用ViewPager来实现，由于考虑到用户体验，我们还须要在以下加一个指示器来标示滑动到了第几张轮播图。指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没有什么特殊的效果，事实上就是两个控件的组合，仅仅是我们要在内部处理好它们之间的交互关系（事实上就是ViewPager滚动的时候，以下指示器的展示），所以我们就用自己定义控件其中的组合方式来实现。
以下開始
1、定义一个控件继承FrameLayout,写一个xml文件

public class CarouselView extends FrameLayout implements ViewPager.OnPageChangeListener {private Context context; private int totalCount =100; //总数。这是为实现无限滑动设置的private int showCount; //要显示的轮播图数量private int currentPosition =0; //当前ViewPager的位置private ViewPager viewPager; private LinearLayout carouselLayout; //展示指示器的布局private Adapter adapter; private int pageItemWidth; //每一个指示器的宽度 private boolean isUserTouched = false; public CarouselView(Context context) { super(context); this.context = context; }public CarouselView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; }public CarouselView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context; }

< ?xml version="1.0" encoding="utf-8"?> < FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> < android.support.v4.view.ViewPager android:id="@+id/gallery" android:layout_width="match_parent" android:layout_height="match_parent" android:unselectedAlpha="1"> < /android.support.v4.view.ViewPager> < LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:gravity="center" android:layout_gravity="center|bottom" android:id="@+id/CarouselLayoutPage" android:padding="10dip"> < /LinearLayout> < /FrameLayout>

上面的代码把两个要用到的控件ViewPager和carouselLayout都包括在定义的CarouselView里面了。以下就是要获取
2、onFinishInflate()中获取我们须要的控件

@Override protected void onFinishInflate() { super.onFinishInflate(); View view = LayoutInflater.from(context).inflate(R.layout.carousel_layout,null); this.viewPager = (ViewPager) view.findViewById(R.id.gallery); this.carouselLayout = (LinearLayout)view.findViewById(R.id.CarouselLayoutPage); pageItemWidth = ConvertUtils.dip2px(context,5); this.viewPager.addOnPageChangeListener(this); addView(view); }

onFinishInflate()方法是自己定义控件中经常使用的一个方法，它表示从XML载入组件完毕了。在该方法中我们通过LayoutInflater.from(context).inflate 获取到个ViewPager对象和carouselLayout对象，并对pageItemWidth进行了赋值。
同一时候为viewPager设置addOnPageChangeListener。这里别忘记调用addView(); 否则控件就展示不了啦！
【Android自己定义控件之轮播图控件】
3、通过设置set方法来获取数据。同一时候初始化界面效果
到这一步我们已经获取到了展示轮播图的ViewPager对象。那接下来要让它展示你肯定想到了写个类继承PagerAdapter。然后重写getCount，isViewFromObject，isViewFromObject，destroyItem等方法来让ViewPager展示轮播图。可是我们又不能写得太固定。由于可能每一个人想要展示的数据不一样，所以我们定义一个接口来给外部使用的人写自己的逻辑。上代码：

//定义一个接口让外部设置展示的View public interface Adapter{ boolean isEmpty(); View getView(int position); int getCount(); }

//ViewPager的适配器 class ViewPagerAdapter extends PagerAdapter {@Override public int getCount() { return totalCount; }@Override public boolean isViewFromObject(View view, Object object) { return view==object; }@Override public Object isViewFromObject(ViewGroup container, int position) { position %= showCount; //调用接口的getView()获取使用者要展示的View; View view = adapter.getView(position); container.addView(view); return view; }@Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); }@Override public int getItemPosition(Object object) { return super.getItemPosition(object); }@Override public void finishUpdate(ViewGroup container) { super.finishUpdate(container); int position = viewPager.getCurrentItem(); //实现Viewpager到第一页的实现能向左滑动 if (position==0){ position=showCount; viewPager.setCurrentItem(position,false); }else if (position==totalCount-1){//ViewPager到最后一页的实现向又滑动 position = showCount - 1; viewPager.setCurrentItem(position,false); } } }

//为外部提供设置数据源的方法,同一时候为ViewPager做展示 public void setAdapter(Adapter adapter){ this.adapter = adapter; if (adapter!=null){ init(); } }

上面的代码就是定义了一个接口让外部来设置数据，提供setAdapter来为adapter赋值，同一时候初始化界面效果，init()方法中就是数据的初始化，代码例如以下：

private void init() { viewPager.setAdapter(null); carouselLayout.removeAllViews(); //清空之前的数据 if (adapter.isEmpty()){ return; } int count = adapter.getCount(); showCount = adapter.getCount(); for (int i=0; i< count; i++){ View view = new View(context); //用来做指示器的View,通过state来做展示效果 if (currentPosition==i){ view.setPressed(true); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth + ConvertUtils.dip2px(context,3),pageItemWidth + ConvertUtils.dip2px(context,3)); params.setMargins(pageItemWidth, 0, 0, 0); view.setLayoutParams(params); }else { LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth,pageItemWidth); params.setMargins(pageItemWidth,0,0,0); view.setLayoutParams(params); } view.setBackgroundResource(R.drawable.carousel_layout_page); carouselLayout.addView(view); } viewPager.setAdapter(new ViewPagerAdapter()); viewPager.setCurrentItem(0); //让手指触碰到的时候自己主动轮播不起效 this.viewPager.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: isUserTouched = true; break; case MotionEvent.ACTION_UP: isUserTouched = false; break; } return false; } }); mTimer.schedule(mTimerTask, 3000, 3000); }

基本的逻辑代码就是这样啦。一个轮播图的控件就做好了。
以下来看一下使用：
4、使用
xml中写我们的轮播图控件:

< com.yangqiangyu.test.carouselview.CarouselView android:layout_width="match_parent" android:layout_height="220dp"> < /com.yangqiangyu.test.carouselview.CarouselView>

java代码中获取控件。同一时候设置接口

CarouselView carouselView = (CarouselView) findViewById(R.id.CarouselView); carouselView.setAdapter(new CarouselView.Adapter() { @Override public boolean isEmpty() { return false; }@Override public View getView(int position) { View view = mInflater.inflate(R.layout.item,null); ImageView imageView = (ImageView) view.findViewById(R.id.image); imageView.setImageResource(mImagesSrc[position]); return view; }@Override public int getCount() { return mImagesSrc.length; } });

返回是否为空。在getView(int position)中return我们想返回的View，就是这么简单了啦。
对你有帮助的话。记得给赞给评论哟！

源代码下载请戳－－》图片轮播