自定义ViewPagerIndicator三角形指示器、圆形指示器简单使用

最新推荐文章于 2024-08-09 08:06:57 发布
最新推荐文章于 2024-08-09 08:06:57 发布
阅读量236 收藏
点赞数
文章标签： 移动开发
原文链接：https://my.oschina.net/u/3015461/blog/916382
版权

添加命名空间

xmlns:qishui="http://schemas.android.com/apk/res-auto"

使用控件布局

<com.example.zhou.tabpageindicator.view.ViewPagerIndicator
    android:id="@+id/id_indicator"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@color/colorPrimary"
    android:orientation="horizontal"
    qishui:item_count="5">
</com.example.zhou.tabpageindicator.view.ViewPagerIndicator>
<android.support.v4.view.ViewPager
    android:id="@+id/id_vp"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</android.support.v4.view.ViewPager>

逻辑设置

final List<String> mDatas = Arrays.asList(UiUtils.getStringArray(R.array.tab_names));
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public Fragment getItem(int position) {
        return FragmentFactory.createFragment(position);
    }
};
//设置Tab上的标题
mIndicator.setTabItemTitles(mDatas);
mViewPager.setAdapter(mAdapter);
//设置关联的ViewPager
mIndicator.setViewPager(mViewPager, 0);

其中mDatas获取到的是一串在Strings.xml字符集合

<string-array name="tab_names">
    <item>首页</item>
    <item>活动</item>
    <item>辅练</item>
    <item>商城</item>
    <item>我的</item>
</string-array>

简单点可以直接定义出来，不必获取xml中的；其中FragmentFactory就是创建不同的fragment简单点new 一个定义好的即可。

此文只为记录，向hongyang大佬致敬

http://blog.csdn.net/lmj623565791/article/details/42160391

相关资料下载

http://pan.baidu.com/s/1slFbxF3

 

圆形指示器

public class CircleIndicatorView extends View implements ViewPager.OnPageChangeListener{
    private static final String LETTER[] = new String[]{"A","B","C","D","E","F","G","H","I","G","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"};
    // private int mSelectColor = Color.parseColor("#E38A7C");
    private int mSelectColor = Color.parseColor("#FFFFFF");
    private Paint mCirclePaint;
    private Paint mTextPaint;
    private int mCount; // indicator 的数量
    private int mRadius;//半径
    private int mStrokeWidth;//border
    private int mTextColor;// 小圆点中文字的颜色
    private int mDotNormalColor;// 小圆点默认颜色
    private int mSpace = 0;// 圆点之间的间距
    private List<Indicator> mIndicators;
    private int mSelectPosition = 0; // 选中的位置
    private FillMode mFillMode = FillMode.NONE;// 默认只有小圆点
    private ViewPager mViewPager;
    private OnIndicatorClickListener mOnIndicatorClickListener;
    /**
     * 是否允许点击Indicator切换ViewPager
     */
    private boolean mIsEnableClickSwitch = false;
    public CircleIndicatorView(Context context) {
        super(context);
        init();
    }

    public CircleIndicatorView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        getAttr(context,attrs);
        init();
    }

    public CircleIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        getAttr(context,attrs);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CircleIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        getAttr(context,attrs);
        init();
    }

    private void init(){

        mCirclePaint = new Paint();
        mCirclePaint.setDither(true);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mTextPaint = new Paint();
        mTextPaint.setDither(true);
        mTextPaint.setAntiAlias(true);
        // 默认值
        mIndicators = new ArrayList<>();

        initValue();

    }

    private void initValue(){
        mCirclePaint.setColor(mDotNormalColor);
        mCirclePaint.setStrokeWidth(mStrokeWidth);

        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mRadius);
    }

    /**
     * 获取自定义属性
     * @param context
     * @param attrs
     */
    private void getAttr(Context context,AttributeSet attrs){
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicatorView);
        mRadius = (int) typedArray.getDimensionPixelSize(R.styleable.CircleIndicatorView_indicatorRadius,dpToPx(6));
        mStrokeWidth = (int) typedArray.getDimensionPixelSize(R.styleable.CircleIndicatorView_indicatorBorderWidth,dpToPx(2));
        mSpace = typedArray.getDimensionPixelSize(R.styleable.CircleIndicatorView_indicatorSpace,dpToPx(5));
        // color
        mTextColor = typedArray.getColor(R.styleable.CircleIndicatorView_indicatorTextColor,Color.BLACK);
        mSelectColor = typedArray.getColor(R.styleable.CircleIndicatorView_indicatorSelectColor,Color.WHITE);
        mDotNormalColor = typedArray.getColor(R.styleable.CircleIndicatorView_indicatorColor,Color.GRAY);

        mIsEnableClickSwitch = typedArray.getBoolean(R.styleable.CircleIndicatorView_enableIndicatorSwitch,false);
        int fillMode = typedArray.getInt(R.styleable.CircleIndicatorView_fill_mode,2);
        if(fillMode == 0){
            mFillMode = FillMode.LETTER;
        }else if(fillMode == 1){
            mFillMode = FillMode.NUMBER;
        }else{
            mFillMode = FillMode.NONE;
        }
        typedArray.recycle();
    }

    /**
     * 测量每个圆点的位置
     */
    private void measureIndicator(){
        mIndicators.clear();
        float cx = 0;
        for(int i=0;i<mCount;i++){
            Indicator indicator = new Indicator();
            if( i== 0){
                cx = mRadius + mStrokeWidth;
            }else{
                cx += (mRadius + mStrokeWidth) * 2 +mSpace;
            }

            indicator.cx = cx;
            indicator.cy = getMeasuredHeight() / 2;

            mIndicators.add(indicator);
        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int width = (mRadius+mStrokeWidth)* 2 * mCount + mSpace *(mCount - 1);
        int height = mRadius * 2 + mSpace * 2;

        setMeasuredDimension(width,height);

        measureIndicator();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        for(int i=0;i<mIndicators.size();i++){

            Indicator indicator = mIndicators.get(i);
            float x = indicator.cx;

            float y = indicator.cy;

            if(mSelectPosition == i){
                mCirclePaint.setStyle(Paint.Style.FILL);
                mCirclePaint.setColor(mSelectColor);
            }else{
                mCirclePaint.setColor(mDotNormalColor);
                if(mFillMode != FillMode.NONE){
                    mCirclePaint.setStyle(Paint.Style.STROKE);
                }else{
                    mCirclePaint.setStyle(Paint.Style.FILL);

                }
            }
            canvas.drawCircle(x,y, mRadius, mCirclePaint);

            // 绘制小圆点中的内容
            if(mFillMode != FillMode.NONE){
                String text = "";
                if(mFillMode == FillMode.LETTER){
                    if(i >= 0 && i<LETTER.length){
                        text = LETTER[i];
                    }
                }else{
                    text = String.valueOf(i+1);
                }
                Rect bound = new Rect();
                mTextPaint.getTextBounds(text,0,text.length(),bound);
                int textWidth = bound.width();
                int textHeight = bound.height();

                float textStartX = x - textWidth / 2;
                float textStartY = y + textHeight / 2;
                canvas.drawText(text,textStartX,textStartY, mTextPaint);
            }

        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float xPoint = 0;
        float yPoint = 0;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                xPoint = event.getX();
                yPoint = event.getY();
                handleActionDown(xPoint,yPoint);
                break;

        }

        return super.onTouchEvent(event);
    }

    private void handleActionDown(float xDis,float yDis){
        for(int i=0;i<mIndicators.size();i++){
            Indicator indicator = mIndicators.get(i);
            if(xDis < (indicator.cx + mRadius+mStrokeWidth)
                    && xDis >=(indicator.cx - (mRadius + mStrokeWidth))
                    && yDis >= (yDis - (indicator.cy+mStrokeWidth))
                    && yDis <(indicator.cy+mRadius+mStrokeWidth)){
                // 找到了点击的Indicator
                // 是否允许切换ViewPager
                if(mIsEnableClickSwitch){
                    mViewPager.setCurrentItem(i,false);
                }

                // 回调
                if(mOnIndicatorClickListener!=null){
                    mOnIndicatorClickListener.onSelected(i);
                }
                break;
            }
        }
    }

    public void setOnIndicatorClickListener(OnIndicatorClickListener onIndicatorClickListener) {
        mOnIndicatorClickListener = onIndicatorClickListener;
    }

    private void setCount(int count) {
        mCount = count;
        invalidate();
    }

    /**
     * 设置 border
     * @param borderWidth
     */
    public void setBorderWidth(int borderWidth){
        mStrokeWidth = borderWidth;
        initValue();
    }

    /**
     * 设置文字的颜色
     * @param textColor
     */
    public void setTextColor(int textColor) {
        mTextColor = textColor;
        initValue();
    }

    /**
     * 设置选中指示器的颜色
     * @param selectColor
     */
    public void setSelectColor(int selectColor) {
        mSelectColor = selectColor;
    }

    /**
     *  设置指示器默认颜色
     * @param dotNormalColor
     */
    public void setDotNormalColor(int dotNormalColor) {
        mDotNormalColor = dotNormalColor;
        initValue();
    }

    /**
     * 设置选中的位置
     * @param selectPosition
     */
    public void setSelectPosition(int selectPosition) {
        mSelectPosition = selectPosition;
    }

    /**
     * 设置Indicator 模式
     * @param fillMode
     */
    public void setFillMode(FillMode fillMode) {
        mFillMode = fillMode;
    }

    /**
     * 设置Indicator 半径
     * @param radius
     */
    public void setRadius(int radius) {
        mRadius = radius;
        initValue();
    }

    public void setSpace(int space) {
        mSpace = space;
    }

    public void setEnableClickSwitch(boolean enableClickSwitch){
        mIsEnableClickSwitch = enableClickSwitch;
    }
    /**
     *  与ViewPager 关联
     * @param viewPager
     */
    public void setUpWithViewPager(ViewPager viewPager){
        releaseViewPager();
        if(viewPager == null){
            return;
        }
        mViewPager = viewPager;
        mViewPager.addOnPageChangeListener(this);
        int count = mViewPager.getAdapter().getCount();
        setCount(count);
    }

    /**
     * 重置ViewPager
     */
    private void releaseViewPager(){
        if(mViewPager!=null){
            mViewPager.removeOnPageChangeListener(this);
            mViewPager = null;
        }

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        mSelectPosition = position;
        invalidate();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * Indicator 点击回调
     */
    public interface OnIndicatorClickListener{
        public void onSelected(int position);
    }


    public static class Indicator{
        public float cx; // 圆心x坐标
        public float cy; // 圆心y 坐标
    }

    public enum FillMode{
        LETTER,
        NUMBER,
        NONE
    }


    public  int dpToPx(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
    }

    public  int pxToDp(float px) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, px, Resources.getSystem().getDisplayMetrics());
    }

}

自定义属性

<declare-styleable name="CircleIndicatorView">
    <attr name="indicatorRadius" format="dimension"/>
    <attr name="indicatorBorderWidth" format="dimension"/>
    <attr name="indicatorSpace" format="dimension"/>
    <attr name="indicatorTextColor" format="color"/>
    <attr name="indicatorColor" format="color"/>
    <attr name="indicatorSelectColor" format="color"/>
    <attr name="enableIndicatorSwitch" format="boolean"/>
    <attr name="fill_mode">
        <enum name="letter" value="0"/>
        <enum name="number" value="1"/>
        <enum name="none" value="2"/>
    </attr>
</declare-styleable>

xml设置

<com.zhouwei.indicatorview.CircleIndicatorView
         android:id="@+id/indicator_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_marginBottom="50dp"
         android:layout_centerHorizontal="true"
         app:indicatorSelectColor="#00A882"
         app:fill_mode="letter"
         app:indicatorBorderWidth="2dp"
         app:indicatorRadius="8dp"
         app:indicatorColor="@color/colorAccent"
         app:indicatorTextColor="@android:color/white"
         />

.class设置

// 初始化ViewPager 相关
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mPagerAdapter = new ViewPagerAdapter();
        mViewPager.setAdapter(mPagerAdapter);

        mIndicatorView = (CircleIndicatorView) findViewById(R.id.indicator_view);
        // 关联ViewPager 
        mIndicatorView.setUpWithViewPager(mViewPager);

相关设置可以不在xml中设置，在代码中同样可以设置

// 在代码中设置相关属性
        
        CircleIndicatorView indicatorView = (CircleIndicatorView) findViewById(R.id.indicator_view3);
        // 设置半径
        indicatorView.setRadius(DisplayUtils.dpToPx(15));
        // 设置Border
        indicatorView.setBorderWidth(DisplayUtils.dpToPx(2));

        // 设置文字颜色
        indicatorView.setTextColor(Color.WHITE);
        // 设置选中颜色
        indicatorView.setSelectColor(Color.parseColor("#FEBB50"));
        //
        indicatorView.setDotNormalColor(Color.parseColor("#E38A7C"));
        // 设置指示器间距
        indicatorView.setSpace(DisplayUtils.dpToPx(10));
        // 设置模式
        indicatorView.setFillMode(CircleIndicatorView.FillMode.LETTER);
        
        // 设置点击Indicator可以切换ViewPager
        indicatorView.setEnableClickSwitch(true);

        // 最重要的一步：关联ViewPager
        indicatorView.setUpWithViewPager(mViewPager);

自定义属性

属性名属性意义取值
indicatorRadius设置指示器圆点的半径单位为 dp 的值
indicatorBorderWidth设置指示器的border单位为 dp 的值
indicatorSpace设置指示器之间的距离单位为 dp 的值
indicatorTextColor设置指示器中间的文字颜色颜色值，如：＃FFFFFF
indicatorColor设置指示器圆点的颜色颜色值
indicatorSelectColor设置指示器选中的颜色颜色值
fill_mode设置指示器的模式枚举值：有三种，分别是letter,number和none
enableIndicatorSwitch设置是否点击Indicator切换ViewPager,默认为false布尔值

源代码参见

https://github.com/pinguo-zhouwei/CircleIndicatorView

 

 

转载于:https://my.oschina.net/u/3015461/blog/916382

chengniqie9367
关注
自定义ViewPagerIndicator的Demo
09-08
自定义ViewPagerIndicator的Demo，指示器自定义，参考开源库ViewPagerIndicator，
Android开发之自定义ViewPager三角形指示器
07-26
这个"Android开发之自定义ViewPager三角形指示器"项目旨在创建一个简单、轻量级的指示器，它用三角形图形表示用户当前所处的页面。 首先，我们来理解ViewPager的基本概念。ViewPager是Android Support Library中的...
教你轻松自定义ViewPagerIndicator
crazychen的专栏
08-02 4170
ViewPagerIndicator集成分页指示器，其实就是标题栏和ViewPager的联动效果，大家先看一下效果图直观了解：（图侵删） 这篇文章将会教大家怎么简单快速地制作自己的ViewPagerIndicator，同时说明制作思路，让大家可以轻易的扩展和定制自己想要的效果。 由于文章的主要目的在于介绍整体思路，所以实现的界面效果可能不是很好看，不过大家看过这篇文章以后，一定可以自己
CircleIndicator 使用教程
最新发布
gitblog_01068的博客
08-09 889
CircleIndicator 使用教程 CircleIndicatorA lightweight indicator like in nexus 5 launcher项目地址:https://gitcode.com/gh_mirrors/ci/CircleIndicator 1. 项目介绍 CircleIndicator 是一个用于 Android 平台的开源库，提供了简单易用的方式，为 Vi...
自定义ViewPagerIndicator
sinat_40387150的博客
07-02 202
package com.demo.tab.viewpagertab.View; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics....
Android实战之 自定义GitHub开源项目ViewPagerIndicator
高磊的专栏
12-28 4783
自定义GitHub开源项目ViewPagerIndicator
自定义ViewPager指示器
丶ban
09-23 229
ViewPagerIndicator package com.example.videopagerindicator.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color;
ViewPagerIndicator-三角形指示器
06-18
总的来说，"ViewPagerIndicator-三角形指示器"是Android开发中提升用户体验的一个实用技巧，它结合了ViewPager的滑动特性与自定义视图的灵活性，使得用户更容易理解应用程序的导航结构。通过下载并研究`...
改动的viewPagerIndicator-三角形指示器
06-18
总的来说，这个“改动的viewPagerIndicator-三角形指示器”是一个适用于 Android 开发的自定义组件，它提供了独特的视觉反馈，改进了用户交互，并可能在性能和功能上有所优化。对于需要在应用中使用 ViewPager 的...
自定义ViewPagerIndicator：创建炫酷导航栏指示器
"Android自定义ViewPagerIndicator实现炫酷导航栏指示器，通过使用ViewPager与Fragment配合，创建一个自定义的Indicator组件，具有抗锯齿、颜色定制和圆角效果的三角形指示器。" 在Android应用开发中，ViewPager...
自定义ViewPagerIndicator---炫酷的导航栏指示器+ViewPager+Fragment
08-20
本人博客：自定义ViewPagerIndicator---炫酷的导航栏指示器+ViewPager+Fragment的demo
ViewPagerIndicator:viewpager,indicator,自定义指示器，支持圆形，指示器顶部展示，展示图片等功能
05-15
ViewPagerIndicator viewpager,indicator,自定义指示器，支持圆形，指示器顶部展示，展示图片等功能 <com.example.indicator.PagerSlidingTabStrip android:id="@+id/id_pager_s_t_s" android:layout_width="match_parent" android:layout_height="30dp" android:layout_marginLeft="10dp" app:pstsDefalutTextColor="@color/lf_color_80ffffff" app:pstsDividerColor="@color/lf_color_transparent" app:pstsDividerPadding="0dp" app:pstsDi
Android 自定义控件实现ViewPagerIndicator 高仿MIUI
12-28
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/42160391 有问题请博客留言
vue-status-indicator-一个Vue.js组件，用于将状态指示器显示为彩色圆点。-Vue.js开发
05-27
状态指示器·Vue组件，用于将状态指示器显示为彩色圆点。 这是状态指示器的一个分支，具有一些更改，可用于V状态指示器·一个Vue组件，用于将状态指示器显示为彩色点。 这是状态指示器的一个分支，具有一些更改以便与Vue一起使用。 安装/使用＃使用npm $ npm i -S安装vue-status-dicator＃或yarn $ yarn add vue-status-indicator
自定义ViewPagerIndicator以及一些问题记录
zy的博客
10-29 213
自定义的ViewPagerIndicator 项目里有个地方需要用到ViewPagerIndicator，不想因为这一点小功能引入第三方库。于是就自己写了一个简单的，支持设置圆形、圆角矩形和随滑动伸缩。 代码还有很多可以优化的地方，就贴一点关键代码吧。 整体的思路是持有和ViewPager的itemCount相同数量的rectF和一个当前位置的rectF，通过给ViewPager添加一个滑动监听...
ViewPagerIndicator替换成三角形指示器
pengruiyu1的博客
12-09 717
前言:自己在做项目的时候需要做一个如下效果的界面的切换,自己去结合以前的,和找了一点资源 一丶首先上效果图如下:
Android自定义Viewpager指示器PagerIndicator-仿微博头条效果
厚积薄发
07-16 3078
平时工作之余，喜欢看看新闻，手机难免会装了几个新闻阅读类的app。新闻类的app风格大致一致，可以选择不同栏目，栏目可以切换。最近就在用微博头条，感觉界面挺清新的。而且它使用的PagerIndicator挺好看的。昨晚居然准时下班了，趁着早就实现了下。今天用博客好好记录下 上图效果分析1 每个tab都包含色块和文字，而且文字的显示个数不同2 文字：由未选中到被选中的文字颜色从黑色变成白色；由选中到未
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值