Android實(shí)現(xiàn)自定義輪播圖片控件示例
要完成一個輪播圖片,首先想到的應(yīng)該是使用ViewPager來實(shí)現(xiàn)。ViewPager已經(jīng)有了滑動的功能,我們只要讓它自己滾動。再加上下方的小圓點(diǎn)就行了。所以我們本次的自定義控件就是由ViewPager和LinearLayout疊加起來組成的。
直接先上效果圖:

創(chuàng)建一個自定義的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);
}
};
每隔三秒去更新一下頁面。這樣就能起到一個自己滾動的效果。
設(shè)置Adapter
要實(shí)現(xiàn)無限循環(huán),只要把Adapter中的getCount()方法返回?zé)o限大,直接返回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);
}
}
這里我們使用了泛型,因?yàn)橛袝r候我們可能只傳一個url集合進(jìn)來,也可能是對象集合,方便拓展。加載圖片的方法也是一個抽象方法
public abstract void loadImage(ImageView view,int position,T t);
因?yàn)槊總€App使用的圖片加載框架都不一樣,所以這里的加載就留個App自己實(shí)現(xiàn)。使用的時候創(chuàng)建Adapter只要繼承這里的BaseViewPagerAdapter,然后重寫loadImage(ImageView view,int position,T t)方法,在這里進(jìn)行圖片的加載就行了。
如果你需不要底部的小圓點(diǎn)標(biāo)示的話,這里就已經(jīng)完成了。使用的時候,直接使用
<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>
就可以了。需要底部的小圓點(diǎn)標(biāo)示的話,繼續(xù)往下
添加小圓點(diǎn)標(biāo)示
需要添加小圓點(diǎn)標(biāo)示的話。其實(shí)就是在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);
}
}
}
}
初始化的時候創(chuàng)建一個ViewPager,一個LinearLayout(用來放小圓點(diǎn))
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);添加。
需要準(zhǔn)備兩張圖片,這里用Shape進(jìn)行繪制,Shape的使用可以查看Android Shape使用.
初始化小圓點(diǎn):
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);
}
更新小圓點(diǎn):
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);
}
}
}
帶小圓點(diǎn)的使用以下控件
<com.kcode.autoscrollviewpager.view.AutoScrollViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="220dp">
</com.kcode.autoscrollviewpager.view.AutoScrollViewPager>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)輪播圖片展示效果
- Android開發(fā)在輪播圖片上加入點(diǎn)擊事件的方法
- Android實(shí)現(xiàn)自定義輪播圖片控件詳解
- Android實(shí)現(xiàn)圖片輪播效果的兩種方法
- Android實(shí)現(xiàn)圖片輪播效果
- Android實(shí)現(xiàn)Banner界面廣告圖片循環(huán)輪播(包括實(shí)現(xiàn)手動滑動循環(huán))
- Android使用ViewPager加載圖片和輪播視頻
- Android實(shí)現(xiàn)圖片自動輪播并且支持手勢左右無限滑動
- 詳解android 視頻圖片混合輪播實(shí)現(xiàn)
- Android實(shí)現(xiàn)輪播圖片效果
相關(guān)文章
Android AsyncTask實(shí)現(xiàn)異步處理任務(wù)的方法詳解
這篇文章主要介紹了Android AsyncTask實(shí)現(xiàn)異步處理任務(wù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
超簡單實(shí)現(xiàn)Android自定義Toast示例(附源碼)
本篇文章主要介紹了超簡單實(shí)現(xiàn)Android自定義Toast示例(附源碼),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-02-02
Android中實(shí)現(xiàn)EditText圓角的方法
Android中實(shí)現(xiàn)EditText圓角的方法,需要的朋友可以參考一下2013-03-03
Android一個類實(shí)現(xiàn)錄音與播放實(shí)例
大家好,本篇文章主要講的是Android一個類實(shí)現(xiàn)錄音與播放實(shí)例,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下2022-02-02
Android?WebView開發(fā)之自定義WebView工具框
在WebView頁面長按時會彈出一個復(fù)制框,有的時候里面的item不是我們想要,這個時候我們就可以自定義一個工具框。本文就將介紹如何通過WebView自定義工具框,需要的朋友可以參考一下2021-12-12
解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題
這篇文章主要介紹了解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Android使用DocumentFile讀寫外置存儲的問題
大家好,本篇文章主要講的是Android使用DocumentFile讀寫外置存儲的問題,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下2021-12-12
android中okhttp實(shí)現(xiàn)斷點(diǎn)上傳示例
本篇文章主要介紹了android中okhttp實(shí)現(xiàn)斷點(diǎn)上傳示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02

