先上效果圖:

image.png

實現(xiàn)思路:

利用LinearLayout 動態(tài)添加ImageView ,然后在頁面初始化的生活,畫出來,在viewpager 的current item 的生活,更換相關(guān)的點的樣式,完成指示點的效果

代碼實現(xiàn):

點配置

綠點

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval"
  >
  <solid android:color="@color/colorAccent"/>
  <size
      android:height="10dp"
      android:width="10dp"
      />


</shape>

白點

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval"
  >
  <solid android:color="#fff"/>
  <size
      android:height="8dp"
      android:width="8dp"
      />


</shape>

View 實現(xiàn)

package com.jimdear.espresssiondemo.view;

import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
import androidx.viewpager.widget.ViewPager;
import com.jimdear.espresssiondemo.R;
import java.util.ArrayList;
import java.util.Objects;

 
public class PointIndicatorView extends LinearLayout {
    public ViewPager viewPager;

    public PointIndicatorView(Context context) {
        super(context);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            initView();
        }
    }

    public PointIndicatorView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            initView();
        }
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    public void initView() {
        setOrientation(HORIZONTAL);
        setGravity(Gravity.CENTER);

    }

    public void setViewPager(ViewPager viewPager) {
        this.viewPager = viewPager;
    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    public void setPointScrollView() {
        int pointNumbers = Objects.requireNonNull(viewPager.getAdapter()).getCount();
        final ArrayList<ImageView> arrayList = new ArrayList<>();
        for (int i = 0; i < pointNumbers; i++) {
            ImageView imageView = new ImageView(getContext());
            imageView.setBackgroundResource(R.drawable.circule_white_point);
            imageView.setTag(i);
            FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.gravity = TEXT_ALIGNMENT_CENTER;
            layoutParams.rightMargin = 30;
            imageView.setLayoutParams(layoutParams);
            addView(imageView);
            arrayList.add(imageView);
        }
        paintCirculateView(viewPager.getCurrentItem(), arrayList);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                paintCirculateView(position, arrayList);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }

    private void paintCirculateView(int position, ArrayList<ImageView> arrayList) {
        for (ImageView imageView : arrayList) {
            if ((int) imageView.getTag() == position) {
                imageView.setBackgroundResource(R.drawable.circule_point);
            } else {
                imageView.setBackgroundResource(R.drawable.circule_white_point);
            }
        }
    }

}