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();否則控制項就展示不了啦！

3、通過設定set方法來擷取資料，同時初始化介面效果

到這一步我們已經擷取到了展示輪播圖的ViewPager對象，那接下來要讓它展示你肯定想到了寫個類繼承PagerAdapter，然後重寫getCount，isViewFromObject，isViewFromObject，destroyItem等方法來讓ViewPager展示輪播圖。但是我們又不能寫得太固定，因為可能每個人想要展示的資料不一樣，所以我們定義一個介面來給外部使用的人寫自己的邏輯。上代碼：

//定義一個介面讓外部設定展示的Viewpublic 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，就是這麼簡單了啦。

對你有協助的話，記得給贊給評論喲！

源碼下載請戳－－》圖片輪播

Android自訂控制項之輪播圖控制項