Android实现仿iOS菊花加载圈动画效果
短信预约 -IT技能 免费直播动态提醒
常见的实现方式
- 切图，做旋转动画
- 自定义View，绘制效果
- gif图
1、切图会增加体积，但相对简单，不过在换肤的场景下，会使用不同颜色，需要准备多张图，不够灵活。
2、由于自定义的好处，不同颜色只需要提供自定义属性，换肤时切换属性设置即可，比较灵活。
3、gif图普遍比较大，而且加载gif没有原生支持，需要引入第三方库，而且消耗内存比较大，不推荐。
效果图：
完整代码
自定义属性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ActivityIndicatorView">
<!-- 菊花颜色 -->
<attr name="aiv_color" format="color" />
<!-- 开始角度 -->
<attr name="aiv_startAngle" format="integer" />
<!-- 线条宽度 -->
<attr name="aiv_strokeWidth" format="dimension" />
<!-- 是否自动开始 -->
<attr name="aiv_auto_start" format="boolean" />
</declare-styleable>
</resources>Java代码实现过程：
public class ActivityIndicatorView extends View {
private int mColor = Color.argb(255, 255, 255, 255);
private int mStartAngle = 0;
private float mStrokeWidth = 0;
private boolean isAutoStart;
private final int mLineCount = 12;
private final int minAlpha = 0;
private final int mAngleGradient = 360 / mLineCount;
private int[] mColors = new int[mLineCount];
private Paint mPaint;
private Handler mAnimHandler = new Handler(Looper.getMainLooper());
private Runnable mAnimRunnable = new Runnable() {
@Override
public void run() {
mStartAngle += mAngleGradient;
invalidate();
mAnimHandler.postDelayed(mAnimRunnable, 50);
}
};
public ActivityIndicatorView(Context context) {
this(context, null);
}
public ActivityIndicatorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ActivityIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setup(context, attrs, defStyleAttr, 0);
}
private void setup(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ActivityIndicatorView, defStyleAttr, defStyleRes);
mColor = typedArray.getColor(R.styleable.ActivityIndicatorView_aiv_color, mColor);
mStartAngle = typedArray.getInt(R.styleable.ActivityIndicatorView_aiv_startAngle, mStartAngle);
mStrokeWidth = typedArray.getDimension(R.styleable.ActivityIndicatorView_aiv_strokeWidth, mStrokeWidth);
isAutoStart = typedArray.getBoolean(R.styleable.ActivityIndicatorView_aiv_auto_start, true);
typedArray.recycle();
initialize();
}
private void initialize() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
int alpha = Color.alpha(mColor);
int red = Color.red(mColor);
int green = Color.green(mColor);
int blue = Color.blue(mColor);
int alphaGradient = Math.abs(alpha - minAlpha) / mLineCount;
for (int i = 0; i < mColors.length; i++) {
mColors[i] = Color.argb(alpha - alphaGradient * i, red, green, blue);
}
mPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
float radius = Math.min(getWidth() - getPaddingLeft() - getPaddingRight(), getHeight() - getPaddingTop() - getPaddingBottom()) * 0.5f;
if (mStrokeWidth == 0) {
mStrokeWidth = pointX(mAngleGradient / 2, radius / 2) / 2;
}
mPaint.setStrokeWidth(mStrokeWidth);
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
canvas.drawLine(
centerX + pointX(-mAngleGradient * i + mStartAngle, radius / 2),
centerY + pointY(-mAngleGradient * i + mStartAngle, radius / 2),
//这里计算Y值时, 之所以减去线宽/2, 是防止没有设置的Padding时,图像会超出View范围
centerX + pointX(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
//这里计算Y值时, 之所以减去线宽/2, 是防止没有设置的Padding时,图像会超出View范围
centerY + pointY(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
mPaint);
}
}
private float pointX(int angle, float radius) {
return (float) (radius * Math.cos(angle * Math.PI / 180));
}
private float pointY(int angle, float radius) {
return (float) (radius * Math.sin(angle * Math.PI / 180));
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (isAutoStart) {
start();
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mAnimHandler != null) {
stop();
}
}
public void start() {
mAnimHandler.post(mAnimRunnable);
}
public void stop() {
mAnimHandler.removeCallbacks(mAnimRunnable);
}
public void setColor(int color) {
this.mColor = color;
}
public void setStrokeWidth(float strokeWidth) {
this.mStrokeWidth = strokeWidth;
}
public void setStartAngle(int startAngle) {
this.mStartAngle = startAngle;
}
}布局代码
布局中添加控件，适当时候显示、隐藏即可，最好都设置宽、高、颜色以及线宽，默认效果比较不符合使用。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.tongwei.bootrunsample.base.widget.ActivityIndicatorView
android:id="@+id/activity_indicator"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_centerInParent="true"
app:aiv_color="#A2A3B0"
app:aiv_strokeWidth="2.5dp" />
</RelativeLayout>到这里就结束了.
以上就是Android实现仿iOS菊花加载圈动画效果的详细内容，更多关于Android仿iOS菊花加载圈动画的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
