Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android實現自定義輪播圖片控件示例

Android實現自定義輪播圖片控件示例

編輯：關於Android編程

要完成一個輪播圖片，首先想到的應該是使用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);
  }
}

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);
    }
  };

每隔三秒去更新一下頁面。這樣就能起到一個自己滾動的效果。

設置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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android實戰教程第一篇之最簡單的計算器 Android 中實現分享和第三方登陸---以新浪微博為例 android手把手教你開發launcher（一） android常見錯誤 Android OpenGLES2.0（一）——了解OpenGLES2.0 局部加權回歸、欠擬合、過擬合 - Andrew Ng機器學習公開課筆記1.3
Android 自定義圓形帶刻度漸變色的進度條樣式實例代碼

效果圖一、繪制圓環圓環故名思意，第一個首先繪制是圓環1：圓環繪制函數圓環
安卓藍牙實現即時通訊功能

本demo是《Android智能穿戴設備開發指南》書中的一塊內容，實現了
Android 動畫系列之補間（Tween）動畫詳解

前言上一篇博客中寫了逐幀動畫（Frame）的使用，Android中除了支
android圖像圖像處理——自定義組件的屬性

自定義組件的屬性步驟如下【1】在Values資源文件下新建myview.
閱讀排行版
Copyright © Android教程網 All Rights Reserved