摘要:實(shí)現(xiàn)原理要完成一個(gè)輪播圖片,首先想到的應(yīng)該是使用來(lái)實(shí)現(xiàn)。所以我們本次的自定義控件就是由和疊加起來(lái)組成的。需要準(zhǔn)備兩張圖片,這里用進(jìn)行繪制的使用可以查看使用初始化小圓點(diǎn)更新小圓點(diǎn)帶小圓點(diǎn)的使用以下控件以上就是主要的代碼了。
效果圖直接先上效果圖。
實(shí)現(xiàn)原理要完成一個(gè)輪播圖片,首先想到的應(yīng)該是使用ViewPager來(lái)實(shí)現(xiàn)。ViewPager已經(jīng)有了滑動(dòng)的功能,我們只要讓它自己滾動(dòng)。再加上下方的小圓點(diǎn)就行了。所以我們本次的自定義控件就是由ViewPager和LinearLayout疊加起來(lái)組成的。
創(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,我們通過(guò)Timer來(lái)啟動(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)無(wú)限循環(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 BaseViewPagerAdapterextends PagerAdapter implements ViewPager.OnPageChangeListener{ private List data = new ArrayList<>(); private Context mContext; private AutoViewPager mView; private OnAutoViewPagerItemClickListener listener; public BaseViewPagerAdapter(List 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 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 { void onItemClick(int position,T t); } }
這里我們使用了泛型,因?yàn)橛袝r(shí)候我們可能只傳一個(gè)url集合進(jìn)來(lái),也可能是對(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,然后重寫(xiě)loadImage(ImageView view,int position,T t)方法,在這里進(jìn)行圖片的加載就行了。
如果你需不要底部的小圓點(diǎn)標(biāo)示的話,這里就已經(jīng)完成了。使用的時(shí)候,直接使用
代替
就可以了。需要底部的小圓點(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(用來(lái)放小圓點(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); }
再通過(guò)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)的使用以下控件
以上就是主要的代碼了。
使用具體使用請(qǐng)查看源碼。。。
源碼地址:AutoViewPager 歡迎大家start。還在更新中,目前可能還不是很完善。
我的簡(jiǎn)書(shū):http://www.jianshu.com/users/...
喜歡的可以關(guān)注一下。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/65208.html
閱讀 3489·2023-04-25 20:41
閱讀 2660·2023-04-25 16:40
閱讀 1433·2021-09-23 11:44
閱讀 1252·2021-09-10 10:51
閱讀 1681·2021-09-07 09:59
閱讀 1642·2019-12-27 12:08
閱讀 551·2019-08-30 15:44
閱讀 3334·2019-08-30 11:08