Android實(shí)現(xiàn)自定義輪播圖片控件示例
要完成一個(gè)輪播圖片,首先想到的應(yīng)該是使用ViewPager來實(shí)現(xiàn)。ViewPager已經(jīng)有了滑動(dòng)的功能,我們只要讓它自己滾動(dòng)。再加上下方的小圓點(diǎn)就行了。所以我們本次的自定義控件就是由ViewPager和LinearLayout疊加起來組成的。
直接先上效果圖:
創(chuàng)建一個(gè)自定義的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(){ //先取消定時(shí)器 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來啟動(dòng)一個(gè)定時(shí)器。
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); } };
每隔三秒去更新一下頁(yè)面。這樣就能起到一個(gè)自己滾動(dòng)的效果。
設(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(shí)候我們可能只傳一個(gè)url集合進(jìn)來,也可能是對(duì)象集合,方便拓展。加載圖片的方法也是一個(gè)抽象方法
public abstract void loadImage(ImageView view,int position,T t);
因?yàn)槊總€(gè)App使用的圖片加載框架都不一樣,所以這里的加載就留個(gè)App自己實(shí)現(xiàn)。使用的時(shí)候創(chuàng)建Adapter只要繼承這里的BaseViewPagerAdapter,然后重寫loadImage(ImageView view,int position,T t)方法,在這里進(jìn)行圖片的加載就行了。
如果你需不要底部的小圓點(diǎn)標(biāo)示的話,這里就已經(jīng)完成了。使用的時(shí)候,直接使用
<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上再加一層。我們新建一個(gè)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); } } } }
初始化的時(shí)候創(chuàng)建一個(gè)ViewPager,一個(gè)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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(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)手動(dòng)滑動(dòng)循環(huán))
- Android使用ViewPager加載圖片和輪播視頻
- Android實(shí)現(xiàn)圖片自動(dòng)輪播并且支持手勢(shì)左右無限滑動(dòng)
- 詳解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超簡(jiǎn)單實(shí)現(xiàn)Android自定義Toast示例(附源碼)
本篇文章主要介紹了超簡(jiǎn)單實(shí)現(xiàn)Android自定義Toast示例(附源碼),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-02-02Android中實(shí)現(xiàn)EditText圓角的方法
Android中實(shí)現(xiàn)EditText圓角的方法,需要的朋友可以參考一下2013-03-03Android一個(gè)類實(shí)現(xiàn)錄音與播放實(shí)例
大家好,本篇文章主要講的是Android一個(gè)類實(shí)現(xiàn)錄音與播放實(shí)例,感興趣的同學(xué)趕快來看一看吧,對(duì)你有幫助的話記得收藏一下2022-02-02Android?WebView開發(fā)之自定義WebView工具框
在WebView頁(yè)面長(zhǎng)按時(shí)會(huì)彈出一個(gè)復(fù)制框,有的時(shí)候里面的item不是我們想要,這個(gè)時(shí)候我們就可以自定義一個(gè)工具框。本文就將介紹如何通過WebView自定義工具框,需要的朋友可以參考一下2021-12-12解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題
這篇文章主要介紹了解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Android使用DocumentFile讀寫外置存儲(chǔ)的問題
大家好,本篇文章主要講的是Android使用DocumentFile讀寫外置存儲(chǔ)的問題,感興趣的同學(xué)趕快來看一看吧,對(duì)你有幫助的話記得收藏一下2021-12-12android中okhttp實(shí)現(xiàn)斷點(diǎn)上傳示例
本篇文章主要介紹了android中okhttp實(shí)現(xiàn)斷點(diǎn)上傳示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02Flutter 移動(dòng)程序安全性提高的八個(gè)建議
這篇文章主要為大家介紹了Flutter 移動(dòng)程序安全性提高建議詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11