Android 仿微信小程序开屏页加载loading

Android 仿微信小程序开屏页加载loading

废话不多说，先上效果图~

首先就是底层有一个灰色的圆，然后按照圆形的轨迹进行绘制。
啊~说那么多也没用，还是直接上代码吧，哈哈哈哈

绘制底部圆形及轨迹：
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class miniAppStartLoadingView extends View {
private int mTotalWidth, mTotalHeight;
private int mCenterX, mCenterY;
//底色画笔
private Paint mCirclePaint;
//进度条画笔
private Paint mProgressPaint;
private float sweepAngle = 10;

private int startAngle = 1;public miniAppStartLoadingView(@NonNull Context context) {super(context);initPaint(context);
}public miniAppStartLoadingView(@NonNull Context context, @Nullable AttributeSet attrs) {super(context, attrs);initPaint(context);
}public miniAppStartLoadingView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initPaint(context);
}private void initPaint(Context context) {//画黑底的深色圆画笔mCirclePaint = new Paint();//抗锯齿mCirclePaint.setAntiAlias(false);// 防抖动mCirclePaint.setDither(true);// 开启图像过滤，对位图进行滤波处理。mCirclePaint.setFilterBitmap(true);mCirclePaint.setColor(Color.parseColor("#E6E6E6"));//空心圆mCirclePaint.setStyle(Paint.Style.STROKE);mCirclePaint.setStrokeWidth(1.0f);//画彩色圆弧的画笔mProgressPaint = new Paint();//抗锯齿mProgressPaint.setAntiAlias(false);// 防抖动mProgressPaint.setDither(true);// 开启图像过滤，对位图进行滤波处理。mProgressPaint.setFilterBitmap(true);mProgressPaint.setColor(Color.parseColor("#52B259"));//空心圆mProgressPaint.setStyle(Paint.Style.STROKE);//设置笔刷样式为原型mProgressPaint.setStrokeCap(Paint.Cap.ROUND);//设置圆弧粗mProgressPaint.setStrokeWidth(6.0f);//将绘制的内容显示在第一次绘制内容之上mProgressPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
}@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//canvas去锯齿canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));//画底色圆int width = getWidth() / 2 / 2;canvas.drawCircle(mCenterX, mCenterY, width, mCirclePaint);//按照圆心旋转Matrix matrix = new Matrix();matrix.setRotate(startAngle, mCenterX, mCenterY);/*** 这是一个居中的圆*/float x = (getWidth() - getHeight() / 2) / 2;float y = getHeight() / 4;RectF oval = new RectF(x, y,getWidth() - x, getHeight() - y);canvas.drawArc(oval, startAngle, sweepAngle, false, mProgressPaint);startAngle++;if (startAngle == 360) {startAngle = 1;sweepAngle++;}if (sweepAngle != 10 && sweepAngle < 300) {sweepAngle++;}//启动绘制postInvalidateDelayed(1);
}@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mTotalWidth = w;mTotalHeight = h;mCenterX = mTotalWidth / 2;mCenterY = mTotalHeight / 2;
}

}

总布局引用：
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class miniAppSplashView extends RelativeLayout {

private Context mContext;
private View rootView;
private ImageView iv_icon;
private TextView tv_name;public miniAppSplashView(@NonNull Context context) {this(context, null);
}public miniAppSplashView(@NonNull Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);
}public miniAppSplashView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);this.mContext = context;initView();
}private void initView() {rootView = LayoutInflater.from(mContext).inflate(R.layout.maia_webkit_mini_app_splash_layout, this);iv_icon = rootView.findViewById(R.id.maia_webkit_mini_app_splash_icon);tv_name = rootView.findViewById(R.id.maia_webkit_mini_app_splash_name);
}public void setIconUrl(String iconUrl) {if (TextUtils.isEmpty(iconUrl)) {return;}}public void setNameTxt(String appName) {if (TextUtils.isEmpty(appName)) {tv_name.setText(appName);}
}public void isShowView(boolean isShowView) {if (isShowView) {rootView.setVisibility(View.VISIBLE);} else {rootView.setVisibility(GONE);}
}

}

XML文件：

<?xml version="1.0" encoding="utf-8"?>

<com.example.myapplication.miniAppStartLoadingViewandroid:id="@+id/maia_webkit_mini_app_splash_loading"android:layout_width="150dp"android:layout_height="150dp"android:layout_centerInParent="true" /><ImageViewandroid:id="@+id/maia_webkit_mini_app_splash_icon"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerInParent="true"android:src="@mipmap/ic_launcher_round" /><TextViewandroid:id="@+id/maia_webkit_mini_app_splash_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/maia_webkit_mini_app_splash_loading"android:layout_centerHorizontal="true"android:text="微信小程序~"android:textColor="@color/black"android:textSize="16sp" />

到此就可以绘制出来一个和微信小程序开屏页一模一样的loading效果啦~

自己也是自定义View小白一枚，代码有不足的地方也欢迎各位大佬前来纠正~~

Android 仿微信小程序开屏页加载loading相关推荐

微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序首次进入加载引导页
微信小程序首次加载引导页让用户登录再次进入直接进入首页的解决方案实现思路:在app.json中第一个加载项设置为一个空白页面 login1 "pages": [&quo ...
第三节：微信小程序模拟动态加载服务器返回json数据
上一节虽然完成了新闻的静态展示页面,但是实际开发中,数据通常是请求服务器返回的json数据,这时候就需要页面动态加载显示服务器返回的数据. 在完成的静态页面的代码上,需要做相应的修改,首先需要编写po ...

Android 仿微信小程序开屏页加载loading

Android 仿微信小程序开屏页加载loading相关推荐

最新文章

热门文章