Android自定义View模仿支付宝芝麻信用分动画实现

1 下载量 125 浏览量 更新于2024-08-29 收藏 336KB PDF 举报
本文档主要介绍了如何在Android平台上通过自定义View来实现一个类似支付宝9.9版本中的芝麻信用分仪表盘。作者首先分享了iOS版芝麻信用分的截图作为参考,并强调了自己的实现虽然接近但还有些差距。为了实现这个功能,开发者细致地介绍了关键步骤和代码细节。 首先,开发过程中涉及到的主要组件包括: 1. 初始化画笔: - **外层圆环画笔(mMiddleArcPaint)**: 使用`Paint`类创建,设置抗锯齿标志,宽度为8像素,颜色为白色,样式为stroke,透明度为80%。 - **内层圆环画笔(mInnerArcPaint)**: 类似地,宽度更大为30像素,样式保持stroke,颜色和透明度与外层相同。 - **中间字体画笔(mTextPaint)**: 用于显示信用分数的数值,颜色为白色,文本对齐方式为居中。 - **圆环大刻度画笔(mCalibrationPaint)**: 用于绘制主要的刻度线,宽度为4像素,颜色白色,透明度稍高。 - **圆环小刻度画笔(mSmallCalibrationPaint)**: 这部分代码未在给出的部分中列出,但可以推测是用来绘制更精细的刻度线或标记。 2. 设置View的基本属性: - **默认大小(defaultSize)**: 设置为250 dp单位,然后转换为像素。 - **默认Padding(arcDistance)**: 设置为14 dp单位,同样转换为像素,这可能用于留出空间以容纳圆环和其他元素。 3. 由于找不到原版带有模糊效果的小圆点,开发者可能需要寻找替代方法或者手动实现模糊效果,这可能涉及到图形处理技巧或者使用第三方库。 整个过程涉及Canvas API的使用,开发者需要根据信用分数计算出内外圆环的弧度变化,然后在Canvas上绘制出相应的形状和文字。自定义View的灵活性使得开发者能够调整界面风格以匹配支付宝的设计,尽管可能需要反复调试和优化以达到预期效果。 通过这篇文章,读者可以了解到在Android开发中如何利用Canvas和Paint对象来创建自定义视图,以及如何模拟支付宝芝麻信用分的视觉表现。这对于希望模仿特定设计、提升UI定制能力的Android开发者来说是一份宝贵的参考资料。
2019-07-19 上传
自定义View之仿支付宝芝麻信用分仪表盘效果,喜欢的话,请给个star,谢谢.使用添加项目依赖Add it in your root build.gradle at the end of repositories: allprojects {         repositories { ... maven { url "https://jitpack.io" }         }     } Add the dependency     dependencies {             compile 'com.github.HotBitmapGG:CreditSesameRingView:V1.0.2' }新版芝麻信用分使用     // The gradient color can define your own private final int[] mColors = new int[]{             0xFFFF80AB,             0xFFFF4081,             0xFFFF5177,             0xFFFF7997              }; // Set up the need to score mLayout = (RelativeLayout) view.findViewById(R.id.layout);       mButton = (Button) view.findViewById(R.id.btn);       newCreditSesameView = (NewCreditSesameView) view.findViewById(R.id.sesame_view);       mLayout.setBackgroundColor(mColors[0]);       mButton.setOnClickListener(new View.OnClickListener()       { @Override public void onClick(View view)            {                newCreditSesameView.setSesameValues(639);                startColorChangeAnim();            }       }); // The background color gradient animation Simply illustrates the effect Can customize according to your need public void startColorChangeAnim()      { ObjectAnimator animator = ObjectAnimator.ofInt(mLayout, "backgroundColor", mColors);          animator.setDuration(3000);          animator.setEvaluator(new ArgbEvaluator());          animator.start();      }旧版芝麻信用分使用      // Set up the need to score oldCreditSesameView = (OldCreditSesameView) view.findViewById(R.id.sesame_view);       mButton = (Button) view.findViewById(R.id.btn);       mButton.setOnClickListener(new View.OnClickListener()       { @Override public void onClick(View view)           {               oldCreditSesameView.setSesameValues(639);           }       });