編輯:關於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>
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
Android中的設計模式-單例模式單例模式算是比較常用的模式,在Java中如果想要一個JVM中只存在某個類的一個實例,就需要使用到單例模式,而只存在一個實例的需求一般是
RatingBar簡單介紹RatingBar是基於SeekBar(拖動條)和ProgressBar(狀態條)的擴展,用星形來顯示等級評定,在使用默認RatingBar時,
BluetoothAdapter 用法藍牙運行原理:通過BluetoothAdapter 藍牙適配器處理任務,如果藍牙被啟動之後,系統會自動去搜索其它
引:一直想寫View,GroupView控件的事件派發流程.終於現在一口氣都寫出來.一鼓作氣!當然考慮了很久應該用怎麼樣的方式寫這些流程性的東西,應該用什麼用的語言來描述