Android 自定義輪播圖片控件

shanxin 8年前發布 | 6K 次閱讀安卓開發 Android開發移動開發

效果圖

直接先上效果圖。

輪播圖.gif

實現原理

要完成一個輪播圖片，首先想到的應該是使用ViewPager來實現。ViewPager已經有了滑動的功能，我們只要讓它自己滾動。再加上下方的小圓點就行了。所以我們本次的自定義控件就是由ViewPager和LinearLayout疊加起來組成的。

創建一個自定義的ViewPager

先上完整的代碼

package com.kcode.autoscrollviewpager.view;
import android.content.Context;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import java.util.Timer;
import java.util.TimerTask;
/**

Created by caik on 2016/10/10.
*/

public class AutoViewPager extends ViewPager {

private static final String TAG = "AutoViewPager";

private int currentItem;

private Timer mTimer;
private AutoTask mTask;

private boolean isFirst = true;

public AutoViewPager(Context context) {
    super(context);
}

public AutoViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}


public void start(){
    if (mTimer == null) {
        mTimer = new Timer();
    }
    mTimer.schedule(new AutoTask(),3000,3000);

}

private Runnable runnable = new Runnable() {
    @Override
    public void run() {
        currentItem = getCurrentItem();
        if(currentItem == getAdapter().getCount() - 1){
            currentItem = 0 ;
        }else {
            currentItem++ ;
        }
        setCurrentItem(currentItem);
    }
};

private AutoHandler mHandler = new AutoHandler();

public void updatePointView(int size) {
    if (getParent() instanceof AutoScrollViewPager){
        AutoScrollViewPager pager = (AutoScrollViewPager) getParent();
        pager.initPointView(size);
    }else {
        Log.e(TAG,"parent view not be AutoScrollViewPager");
    }
}

public void onPageSelected(int position) {
    AutoScrollViewPager pager = (AutoScrollViewPager) getParent();
    pager.updatePointView(position);
}

private class AutoTask extends TimerTask{

    @Override
    public void run() {
        mHandler.post(runnable);
    }
}

private final static class AutoHandler extends android.os.Handler{
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);

    }
}

public void onStop(){
    //先取消定時器
    if (mTimer != null) {
        mTimer.cancel();
        mTimer = null;
    }
}

public void onDestroy(){
    onStop();
}

public void onResume(){
    start();
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()){
        case MotionEvent.ACTION_DOWN:
            Log.i(TAG,"down");
            onStop();
            break;
        case MotionEvent.ACTION_MOVE:
            Log.i(TAG,"move");
            break;
        case MotionEvent.ACTION_UP:
            Log.i(TAG,"up");
            onResume();
            break;
    }
    return super.onTouchEvent(ev);
}

}</code></pre> 
  
AutoViewPager 繼承至ViewPager，我們通過Timer來啟動一個定時器。 
  public void start(){
        if (mTimer == null) {
            mTimer = new Timer();
        }
        mTimer.schedule(new AutoTask(),3000,3000);

}

private Runnable runnable = new Runnable() {
    @Override
    public void run() {
        currentItem = getCurrentItem();
        if(currentItem == getAdapter().getCount() - 1){
            currentItem = 0 ;
        }else {
            currentItem++ ;
        }
        setCurrentItem(currentItem);
    }
};</code></pre> 

每隔三秒去更新一下頁面。這樣就能起到一個自己滾動的效果。 
  設置Adapter 
  要實現無限循環，只要把Adapter中的 getCount() 方法返回無限大，直接返回 Integer.MAX_VALUE 就可以了。 
  完整的Adapter代碼： 
  package com.kcode.autoscrollviewpager.view;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.kcode.autoscrollviewpager.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by caik on 2016/10/11.
 */

public abstract class BaseViewPagerAdapter<T> extends PagerAdapter implements ViewPager.OnPageChangeListener{

    private List<T> data = new ArrayList<>();

    private Context mContext;
    private AutoViewPager mView;

    private OnAutoViewPagerItemClickListener listener;

    public BaseViewPagerAdapter(List<T> t) {
        this.data = t;
    }

    public BaseViewPagerAdapter(Context context, AutoViewPager viewPager) {
        this.mContext = context;
        mView = viewPager;
        mView.setAdapter(this);
        mView.addOnPageChangeListener(this);
        mView.setCurrentItem(0);
    }


    public BaseViewPagerAdapter(Context context, AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {
        this.mContext = context;
        mView = viewPager;
        this.listener = listener;
        mView.setAdapter(this);
        mView.addOnPageChangeListener(this);
        mView.setCurrentItem(0);
    }

    public BaseViewPagerAdapter(Context context, List<T> data,AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {
        this.mContext = context;
        mView = viewPager;
        this.data = data;
        this.listener = listener;
        mView.setAdapter(this);
        mView.addOnPageChangeListener(this);
        mView.setCurrentItem(0);

        mView.start();
        mView.updatePointView(getRealCount());
    }

    public void add(T t){
        data.add(t);
        notifyDataSetChanged();
        mView.updatePointView(getRealCount());
    }

    @Override
    public int getCount() {
        return data == null ? 0 : Integer.MAX_VALUE;
    }

    public int getRealCount(){
        return data == null ? 0 : data.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((ImageView) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        ImageView view = (ImageView) LayoutInflater.from(mContext)
                .inflate(R.layout.imageview,container,false);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (listener != null) {
                    listener.onItemClick(position % getRealCount(),data.get(position % getRealCount()));
                }
            }
        });

        loadImage(view,position, data.get(position % getRealCount()));
        container.addView(view);

        return view;
    }

    public abstract void loadImage(ImageView view,int position,T t);

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        mView.onPageSelected(position % getRealCount());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public interface OnAutoViewPagerItemClickListener<T> {
        void onItemClick(int position,T t);
    }
} 
  這里我們使用了泛型，因為有時候我們可能只傳一個url集合進來，也可能是對象集合，方便拓展。加載圖片的方法也是一個抽象方法 
  public abstract void loadImage(ImageView view,int position,T t); 
  因為每個App使用的圖片加載框架都不一樣，所以這里的加載就留個App自己實現。使用的時候創建Adapter只要繼承這里的BaseViewPagerAdapter，然后重寫 loadImage(ImageView view,int position,T t) 方法，在這里進行圖片的加載就行了。 
  如果你需不要底部的小圓點標示的話，這里就已經完成了。使用的時候，直接使用 
  <com.kcode.autoscrollviewpager.view.AutoViewPager
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </com.kcode.autoscrollviewpager.view.AutoViewPager> 
  代替 
  <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager> 
  就可以了。需要底部的小圓點標示的話，繼續往下 
  添加小圓點標示 
  需要添加小圓點標示的話。其實就是在ViewPager上再加一層。我們新建一個View，繼承至 RelativeLayout 
  完整代碼如下： 
  package com.kcode.autoscrollviewpager.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.kcode.autoscrollviewpager.R;

import static android.view.Gravity.CENTER;

/**
 * Created by caik on 2016/10/17.
 */

public class AutoScrollViewPager extends RelativeLayout{

    private AutoViewPager mViewPager;

    private Context mContext;

    private LinearLayout layout;

    public AutoScrollViewPager(Context context) {
        super(context);
        init(context);
    }

    public AutoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        mContext = context;
        mViewPager = new AutoViewPager(context);
        layout = new LinearLayout(mContext);
        addView(mViewPager);
    }

    public AutoViewPager getViewPager() {
        return mViewPager;
    }

    public void initPointView(int size){

        layout = new LinearLayout(mContext);
        for (int i = 0; i < size; i++) {
            ImageView imageView = new ImageView(mContext);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            params.leftMargin = 8;
            params.gravity = CENTER;
            imageView.setLayoutParams(params);
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.point_checked);
            }else {
                imageView.setBackgroundResource(R.drawable.point_normal);
            }

            layout.addView(imageView);
        }

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM);
        layoutParams.addRule(ALIGN_PARENT_RIGHT);
        layoutParams.setMargins(12,20,12,20);
        layout.setLayoutParams(layoutParams);
        addView(layout);
    }

    public void updatePointView(int position) {
        int size = layout.getChildCount();
        for (int i = 0; i < size; i++) {
            ImageView imageView = (ImageView) layout.getChildAt(i);
            if (i == position){
                imageView.setBackgroundResource(R.drawable.point_checked);
            }else {
                imageView.setBackgroundResource(R.drawable.point_normal);
            }

        }
    }

} 
  初始化的時候創建一個ViewPager,一個LinearLayout（用來放小圓點） 
  public AutoScrollViewPager(Context context) {
        super(context);
        init(context);
    }

    public AutoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        mContext = context;
        mViewPager = new AutoViewPager(context);
        layout = new LinearLayout(mContext);
        addView(mViewPager);
    } 
  再通過 addView(mViewPager); 添加。 
  需要準備兩張圖片，這里用Shape進行繪制,Shape的使用可以查看Android Shape使用. 
  初始化小圓點： 
  public void initPointView(int size){

        layout = new LinearLayout(mContext);
        for (int i = 0; i < size; i++) {
            ImageView imageView = new ImageView(mContext);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            params.leftMargin = 8;
            params.gravity = CENTER;
            imageView.setLayoutParams(params);
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.point_checked);
            }else {
                imageView.setBackgroundResource(R.drawable.point_normal);
            }

            layout.addView(imageView);
        }

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM);
        layoutParams.addRule(ALIGN_PARENT_RIGHT);
        layoutParams.setMargins(12,20,12,20);
        layout.setLayoutParams(layoutParams);
        addView(layout);
    } 
  更新小圓點： 
  public void updatePointView(int position) {
        int size = layout.getChildCount();
        for (int i = 0; i < size; i++) {
            ImageView imageView = (ImageView) layout.getChildAt(i);
            if (i == position){
                imageView.setBackgroundResource(R.drawable.point_checked);
            }else {
                imageView.setBackgroundResource(R.drawable.point_normal);
            }

        }
    } 
  帶小圓點的使用以下控件 
  <com.kcode.autoscrollviewpager.view.AutoScrollViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="220dp">

    </com.kcode.autoscrollviewpager.view.AutoScrollViewPager> 
  以上就是主要的代碼了。 
    
    
  來自：http://www.jianshu.com/p/5c47cb6afe0f


                    
                         本文由用戶 shanxin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1477015285497.html
                         安卓開發 Android開發 移動開發

Android 自定義輪播圖片控件

效果圖

實現原理

創建一個自定義的ViewPager

設置Adapter

添加小圓點標示

相關經驗

相關資訊

相關文檔

目錄