屏幕快照 2019-12-02 下午9.22.43.png
屏幕快照 2019-12-02 下午9.24.02.png
第一步：定義布局
這里的viewpage可以是輪播的布局，而LinearLayout是小白點的容器、外層采用相對布局來包裹，
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_food_guide"
android:layout_width="match_parent"
android:layout_height="200dp">
</androidx.viewpager.widget.ViewPager>
<LinearLayout
android:id="@+id/ll_food_carousel"
android:layout_width="match_parent"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignBottom="@id/vp_food_guide"
>
</LinearLayout>
第二步：實現輪播的手動
1.初始化輪播圖的數據
//這個集合用于裝輪播圖（Imageview）
mImageViewList = new ArrayList<>();
ImageView point;
//用于確定小圓點的格式 位置
LinearLayout.LayoutParams layoutParams;
// images是圖片數組，圖片數組的大小決定存儲imageview集合的大小
for(int i = 0;i < images.length; i++){
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(images[i]);
mImageViewList.add(imageView);
point = new ImageView(getContext());
//圓點的背景為一個指示器，根據可不可以點擊顯示不一樣
point.setBackgroundResource(R.drawable.selector_food_carousel);
layoutParams = new LinearLayout.LayoutParams(35,35);
//leftMargin是小圓點之間的間距
if(i != 0){
layoutParams.leftMargin = 15;
//使小圓點不能接收觸摸事件或點擊
point.setEnabled(false);
}
ll_food_carousel.addView(point,layoutParams);
}
圓點指示器：selector_food_carousel：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/shape_point_gray"/>
<item android:state_enabled="true" android:drawable="@drawable/shape_bg_enable"/>
</selector>
2.定義一個pagerAdapter的子類，實現里面的四個方法
// 輪播適配器
class FoodCarouselAdapter extends PagerAdapter{
// 輪播的數量 ，為啥取這么大的數值呢，主要是因為自動輪播時會用到
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
//復用的條件
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return view == o;
}
// 得到item布局
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
//主要這里的item采用取余的方式來得到，因為我們的getCount（）數值很大，但是輪播的圖片就幾張，不采用取余的方式的話就會下標越界，其中mImageViewList是存儲輪播圖片的集合
ImageView imageView = mImageViewList.get(position%mImageViewList.size());
container.addView(imageView);
return imageView;
}
//銷毀布局
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
3.為viewpager設置適配器 、為輪播圖設置監聽，使小圓點跟隨輪播圖變化
vp_food_guide.setAdapter(new FoodCarouselAdapter());
//設置監聽
vp_food_guide.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
//其中beforepoint初始值為0或我們實現自動輪播時設置的值，這里主要通過改變圓點的狀態來實現圓點變化的效果
@Override
public void onPageSelected(int i) {
int newPosition = i % mImageViewList.size();
ll_food_carousel.getChildAt(beforepoint).setEnabled(false);
ll_food_carousel.getChildAt(newPosition).setEnabled(true);
beforepoint = newPosition;
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
這時候輪播已經可以手動輪播了
第三步：實現自動輪播,
思想：主要通過handler發送延遲消息來實現每隔幾秒輪播一次
1.定義一個Handler的子類，實現handMessage方法
class myHandler extends Handler{
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
vp_food_guide.setCurrentItem(vp_food_guide.getCurrentItem() + 1);
mMyHandler.sendEmptyMessageDelayed(0,2000);
}
}
2.設置viewpage的位置，生成handler對象，發送延時消息
vp_food_guide.setCurrentItem(5000000);
mMyHandler = new myHandler();
vp_food_guide.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
return false;
}
});
//這里的設置監聽在前面寫小圓點變化時已經寫過了，
vp_food_guide.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
int newPosition = i % mImageViewList.size();
ll_food_carousel.getChildAt(beforepoint).setEnabled(false);
ll_food_carousel.getChildAt(newPosition).setEnabled(true);
beforepoint = newPosition;
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
mMyHandler.sendEmptyMessageDelayed(0,2000);
3.當界面銷毀是移除消息，因為我是在fragment里，所以就在onDestroyView里銷毀了
@Override
public void onDestroyView() {
if(mMyHandler != null){
mMyHandler.removeMessages(0);
mMyHandler = null;
// ll_food_carousel.getChildAt(beforepoint).setEnabled(false);
Log.i("TAG","handler銷毀");
}
super.onDestroyView();
}
