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

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

c.jpg

b.jpg

a.jpg

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/one"
        android:text="下一个"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/two"
       android:text="上一个"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <com.example.myapplication.CircleIndicator
        android:id="@+id/circleview"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

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<Fragment> 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;

/**
 * @description:
 * @date :2020/12/17 16:34
 */
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的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".OneFragment">


    <TextView
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30dp"
        android:text="第0个页面" />
</LinearLayout>

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

最后编辑于：2022.06.17 09:12:38

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,056评论 5赞 474
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,842评论 2赞 378
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 148,938评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,296评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,292评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,413评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,824评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,493评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,686评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,502评论 2赞 318
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,553评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,281评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,820评论 3赞 305
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,873评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,109评论 1赞 258
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,699评论 2赞 348
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,257评论 2赞 341

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

推荐阅读更多精彩内容

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