自動輪播本地圖片觸摸暫停輪播
阿新 • • 發佈:2017-12-01
listen linear down raw post callback android color let
第一步自己創建自動輪播視圖:
1 public class AutoShowView extends FrameLayout { 2 private View view; 3 private ViewPager vp_lunbo; 4 private TextView tv_desc; 5 private LinearLayout ll_points; 6 private List<ImageView> datas; 7 private PicturePagerAdapter adapter; 8 privateHandler handler; 9 10 final AutoScrollTask autoScrollTask = new AutoScrollTask(); 11 protected int selectIndex; 12 13 public AutoShowView(Context context) { 14 15 this(context, null); 16 } 17 18 public AutoShowView(Context context, AttributeSet attrs) { 19this(context, attrs, 0); 20 } 21 22 public AutoShowView(Context context, AttributeSet attrs, int defStyleAttr) { 23 super(context, attrs, defStyleAttr); 24 initView(context); 25 initData(); 26 initListener(); 27 } 28 29 private void initView(Context context) {30 view = LayoutInflater.from(context).inflate(R.layout.view_autoshow, 31 this); 32 33 vp_lunbo = (ViewPager) view.findViewById(R.id.vp_lunbo); 34 tv_desc = (TextView) view.findViewById(R.id.tv_desc); 35 ll_points = (LinearLayout) view.findViewById(R.id.ll_points); 36 37 datas = new ArrayList<ImageView>(); 38 adapter = new PicturePagerAdapter(datas); 39 if (handler == null) { 40 handler = new Handler(); 41 } 42 } 43 44 private void initData() { 45 // 初始化圖片數據 46 initImageView(); 47 // 初始化點數據 48 initPoints(); 49 50 vp_lunbo.setAdapter(adapter); 51 // 設置ViewPager當前選中的位置,會調用instantiateItem,最終會選中item0 52 // 原理:一個數減去其余數後肯定能被除數整除 53 vp_lunbo.setCurrentItem(10000 - 10000 % datas.size()); 54 55 autoScrollTask.start(); 56 } 57 58 private void initImageView() { 59 for (int i = R.drawable.icon1; i < R.drawable.icon1 + 4; i++) { 60 // 創建ImageView容器 61 ImageView imageView = new ImageView(getContext()); 62 63 // 設置圖片 64 imageView.setImageResource(i); 65 imageView.setScaleType(ImageView.ScaleType.FIT_XY);// 圖片填充容器 66 datas.add(imageView);// 添加到集合中 67 } 68 } 69 70 private void initPoints() { 71 // 因為每次頁面改變都會調用該方法,所以進入該方法時先清空集合。 72 ll_points.removeAllViews(); 73 74 for (int i = 0; i < datas.size(); i++) { 75 View view = new View(getContext()); 76 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( 77 10, 10); 78 if (i == selectIndex) { 79 tv_desc.setText("圖片" + i + "的描述"); 80 view.setBackgroundResource(R.drawable.point_red); 81 } else { 82 view.setBackgroundResource(R.drawable.point_white); 83 } 84 params.leftMargin = 10; 85 view.setLayoutParams(params);// 設置布局參數 86 ll_points.addView(view);// 添加到點的容器中 87 } 88 } 89 90 private void initListener() { 91 // viewpager註冊頁面改變監聽器 92 vp_lunbo.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 93 @Override 94 public void onPageSelected(int position) { 95 // 頁面選中調用 96 selectIndex = position % datas.size(); 97 initPoints();// 紅點跟著頁面改變而移動 98 } 99 100 @Override 101 public void onPageScrolled(int position, float positionOffset, 102 int positionOffsetPixels) { // 頁面滑動就調用 103 } 104 105 @Override 106 public void onPageScrollStateChanged(int state) { 107 // 頁面狀態改變調用 108 109 } 110 }); 111 112 // viewpager 註冊觸摸事件監聽器,實現自動輪播 113 vp_lunbo.setOnTouchListener(new OnTouchListener() { 114 115 @Override 116 public boolean onTouch(View v, MotionEvent event) { 117 switch (event.getAction()) { 118 case MotionEvent.ACTION_DOWN:// 按下停止輪播 119 autoScrollTask.stop(); 120 break; 121 case MotionEvent.ACTION_MOVE: 122 123 break; 124 case MotionEvent.ACTION_UP:// 松開,取消 開始輪播 125 case MotionEvent.ACTION_CANCEL: 126 autoScrollTask.start(); 127 break; 128 129 default: 130 break; 131 } 132 return false;// 不會影響其他view的事件分發 133 } 134 }); 135 } 136 137 /** 實現輪播圖自動輪播 */ 138 139 class AutoScrollTask implements Runnable { 140 141 @Override 142 public void run() { 143 int currentItem = vp_lunbo.getCurrentItem(); 144 currentItem++; 145 vp_lunbo.setCurrentItem(currentItem); 146 start(); 147 } 148 149 /** 150 * 開始輪播 151 */ 152 public void start() { 153 handler.postDelayed(this, 2000); 154 } 155 156 /** 157 * 停止輪播 158 */ 159 public void stop() { 160 handler.removeCallbacks(this); 161 } 162 } 163 164 }
第二步寫自動輪播的適配器:
1 public class PicturePagerAdapter extends PagerAdapter { 2 private static final String tag = "PicturePagerAdapter"; 3 List<ImageView> list; 4 5 public PicturePagerAdapter(List<ImageView> imageViews) { 6 this.list = imageViews; 7 } 8 9 @Override 10 public int getCount() { 11 // 確定要顯示的數據量 12 return Integer.MAX_VALUE;// 無限輪播 13 } 14 15 @Override 16 public boolean isViewFromObject(View view, Object object) { 17 // 判斷當前要顯示的view是否等於標記object,true則顯示 18 return view == object; 19 } 20 21 @Override 22 public Object instantiateItem(ViewGroup container, int position) { 23 position = position % list.size(); 24 Log.d(tag, "instantiateItem==" + position); 25 // 無限輪播-因為position的值從0~Integer.MAX_VALUE 26 View view = list.get(position); 27 // 添加view到VIewPager中 28 container.addView(view); 29 return view; 30 } 31 32 @Override 33 public void destroyItem(ViewGroup container, int position, Object object) { 34 // 從容器中移除view 35 Log.d(tag, "destroyItem==" + position); 36 container.removeView((View) object); 37 } 38 }
第三步自定義輪播視圖布局:
1 <android.support.v4.view.ViewPager 2 android:id="@+id/vp_lunbo" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 </android.support.v4.view.ViewPager> 6 <!-- 文字描述和點的容器點和容器 --> 7 8 <LinearLayout 9 android:layout_width="match_parent" 10 android:layout_height="wrap_content" 11 android:layout_alignParentBottom="true" 12 android:background="#22000000" 13 android:gravity="center" 14 android:orientation="vertical" 15 android:paddingBottom="5dp" 16 android:paddingTop="5dp" > 17 18 <TextView 19 android:id="@+id/tv_desc" 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 23 android:textColor="#ffffff" /> 24 25 <LinearLayout 26 android:id="@+id/ll_points" 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:orientation="horizontal" > 30 </LinearLayout> 31 </LinearLayout>
第四步在主頁面布局將自動輪播視圖插入:
1 <com.example.lenovo.lianxi.view.AutoShowView 2 android:id="@+id/asv" 3 android:layout_width="match_parent" 4 android:layout_height="200dp"> 5 6 </com.example.lenovo.lianxi.view.AutoShowView>
第五步自己寫跟隨輪播的紅白點(可自己更改顏色):
1 <shape xmlns:android="http://schemas.android.com/apk/res/android" 2 android:shape="oval"> 3 4 <corners android:radius="5dp" /> 5 6 <solid android:color="#ff0000" /> 7 8 </shape> 9 10 11 12 <shape xmlns:android="http://schemas.android.com/apk/res/android" 13 android:shape="oval"> 14 15 <corners android:radius="5dp" /> 16 17 <solid android:color="#ffffff" /> 18 19 </shape>
最後在放入自動輪播的Activity插入
1 protected static final String tag = "MainActivity";
自動輪播本地圖片觸摸暫停輪播