ViewPager+Fragment 点击左右两个按钮实现滑动 自定义圆形

先上图 大家看图说话 哈哈哈哈

c.jpg

b.jpg

![

a.jpg

因为我还没有学会如何上传动图 先这样看吧
MainActivity 布局样式

MainActivity 主要代码

package com.example.myapplication;

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

import java.util.ArrayList;


public class MainFragment extends Fragment implements View.OnClickListener {


    private View inflate;

    private static final String TAG = "MainActivity";
    private ViewPager vp;
    private Button one;
    private Button two;
    private ArrayList list;
    private int currentItem;
    private Button one1;
    private Button two1;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        inflate = inflater.inflate(R.layout.fragment_main, container, false);
        initView(inflate);
        return inflate;
    }

    private void initView(View view) {
        vp = view.findViewById(R.id.vp);
        one = view.findViewById(R.id.one);
        one1 = view.findViewById(R.id.one1);
        two = view.findViewById(R.id.two);
        two1 = view.findViewById(R.id.two1);
        one.setVisibility(View.GONE);
        one1.setVisibility(View.VISIBLE);
        list = new ArrayList<>();

        //        创建三个Fragment
        OneFragment oneFragment = new OneFragment();
        TwoFragment twoFragment = new TwoFragment();
        ThreeeFragment threeeFragment = new ThreeeFragment();
        list.add(oneFragment);
        list.add(twoFragment);
        list.add(threeeFragment);

        one.setOnClickListener(this);
        one1.setOnClickListener(this);
        two.setOnClickListener(this);
        two1.setOnClickListener(this);


//        自定义的圆角
        final CircleIndicator circleIndicator = view.findViewById(R.id.circleview);

//        viewpager适配器
        vp.setAdapter(new FragmentStatePagerAdapter(getFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }

            @Override
            public int getCount() {
                return list.size();
            }

        });
//        把自定义的圆角添加进viewpager
        circleIndicator.setUpWithViewPager(vp);


        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
//          这个用于实现页面改变后的配置可以使当前页面的图标点亮
                currentItem = vp.getCurrentItem();
                if (position == 0) {
                    one.setVisibility(View.GONE);
                    one1.setVisibility(View.VISIBLE);
                } else if (position == 1) {
                    one1.setVisibility(View.GONE);
                    one.setVisibility(View.VISIBLE);
                    two.setVisibility(View.VISIBLE);
                    two1.setVisibility(View.GONE);
                } else if (position == 2) {
                    two1.setVisibility(View.VISIBLE);
                    two.setVisibility(View.GONE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
//              这里用switch判断点击的是哪个按钮
//              setCurrentItem(int index)方法主要用来制定初始化的页面，例如加入3个页面通过setCurrentItem(0)制定第一个页面为当前页面
            case R.id.one:
//                根据viewpager的下标进行判断
                if (currentItem == 1) {
                    vp.setCurrentItem(0);
                    one.setVisibility(View.GONE);
                    one1.setVisibility(View.VISIBLE);

                } else if (currentItem == 2) {
                    vp.setCurrentItem(1);
                    two1.setVisibility(View.GONE);
                    two.setVisibility(View.VISIBLE);
                }

                break;
            case R.id.two:
                if (currentItem == 0) {
                    vp.setCurrentItem(1);
                    one.setVisibility(View.VISIBLE);
                    one1.setVisibility(View.GONE);
                } else if (currentItem == 1) {
                    vp.setCurrentItem(2);
                    two.setVisibility(View.GONE);
                    two1.setVisibility(View.VISIBLE);
                }
                break;
        }
    }
}

自定义的圆形类

package com.example.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.viewpager.widget.ViewPager;

/**
 * @author LiHangZhou
 * @description:
 * @date :2020/12/17 16:34
 * @love :zlx
 */
public class CircleIndicator extends View {
    //默认圆半径
    private int radius = 15;
    //当前指示圆半径
    private float selectedRadius;
    private int width;
    private int count;
    private Paint paint;
    private Paint selectedPaint;
    private int height;
    private float current;

    public CircleIndicator(Context context) {
        this(context, null);
    }

    public CircleIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //默认圆画笔
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.GRAY);
        //当前指示圆画笔
        selectedPaint = new Paint();
        selectedPaint.setAntiAlias(true);
        selectedPaint.setColor(Color.RED);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        height = getMeasuredHeight();
        width = getMeasuredWidth();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这个距离如下图所示
        int distance = width / (count + 1);
        //灰色圆
        for (int i = 0; i < count; i++) {
            canvas.drawCircle(distance * (i + 1), height / 2, radius, paint);
        }
        //红色圆
        Paint selectedPain = new Paint();

        canvas.drawCircle(current, height / 2, selectedRadius, selectedPain);
    }

    //和viewpager联动
    public void setUpWithViewPager(ViewPager viewPager) {
        if (viewPager == null) {
            return;
        }
        //确定要画几个圆
        count = viewPager.getAdapter().getCount();
        viewPager.addOnPageChangeListener(new
                                                  ViewPager.OnPageChangeListener() {
                                                      @Override
                                                      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                                                          setCircleSize(position, positionOffset, positionOffsetPixels);
                                                      }

                                                      @Override
                                                      public void onPageSelected(int position) {
                                                      }

                                                      @Override
                                                      public void onPageScrollStateChanged(int state) {
                                                      }
                                                  });
    }

    //设置红色圆移动的距离
    private void setCircleSize(int position, float positionOffset, int positionOffsetPixels) {
        Log.d("xxxxx", position + "/" + positionOffset + "/" + positionOffsetPixels);
        int distance = width / (count + 1);
        current = (position + 1) * distance + distance * positionOffset;
        //设置红色圆的大小，
        selectedRadius = radius + 3 * (1 + 0);
        invalidate();
    }
}

三个fragmnet

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;


public class OneFragment extends Fragment {


    private RecyclerView oneRv;
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        view = inflater.inflate(R.layout.fragment_one, container, false);

        return view;
    }
}

fragment的布局

因为三个fragment基本一样只发一个就OK了