Android 自定义控件之模仿小米秒表，完整代码注解，复制可用 |
您所在的位置：网站首页 › Android自定义view实现酷炫智能仪表盘 › Android 自定义控件之模仿小米秒表，完整代码注解，复制可用 |
Android 自定义控件之模仿小米秒表，完整代码注解，复制可用
|
细心拷贝代码，就可以运行。 易君的开发工具为：Android Studio 功能介绍：1、自定义控件实现小米秒表表盘 2、获取当前系统的网络时间 3、可以多次计时（计时列表）【RecyclerView BaseQuickAdapter】 4、有【开始】、【计时】、【清零】 三个按钮 看效果图：如下图，初始效果 和 清零后的效果一样 计时效果：
1、在App的build.gradle中添加： implementation ‘com.android.support:recyclerview-v7:28.0.0’ implementation ‘com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.38’ implementation ‘com.google.android.gms:play-services-maps:16.1.0’ 用到的颜色 #000000 #ffffff在style 中添加主题 AppTheme01，将背景设为黑色 @color/Hei @color/Hei @color/Heiactivity_main.xml 布局文件 RecyclerView 的 item_time.xml 布局文件 按钮的背景 button_bg.xml 布局文件 【BaseActivity.java】(记得在 AndroidManifest.xml 中先声明) public class BaseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //主题设置 setTheme(R.style.AppTheme01); } }Log的封装的调试类【L.java】 public class L { //开关 public static final boolean DEBUG = true; //TAG public static final String TAG = "Smartbutler"; // Smart butler： 智能滤镜 public static void e(String text){ if(DEBUG){ Log.e(TAG,text); } } }数据类【Static.java】 public class Static { public static boolean cartoon = false; //画布旋转的默认值 public static boolean agree_flag = false; //秒表的默认值 }时间记录 BaseQuickAdapter 的实体类【TimeData.java】 public class TimeData { private String Type; private String Time; public String getType() { return Type; } public void setType(String type) { Type = type; } public String getTime() { return Time; } public void setTime(String time) { Time = time; } }时间记录列表的 BaseQuickAdapter【TimeAdapter.java】 public class TimeAdapter extends BaseQuickAdapter { public TimeAdapter(int layoutResId, List data) { super(layoutResId, data); } @Override protected void convert(BaseViewHolder helper, TimeData item) { helper.setText(R.id.item_TextView01,item.getType()); helper.setText(R.id.item_TextView02,item.getTime()); } }仿小米秒表 大 表盘自定义控件【xiaomiClock.java】 public class xiaomiClock extends View { private Paint textPaint, paint; private Path mTriangle; private Timer mTimer; private float agree = 1; private Shader mshader; private PathEffect mEffect; public xiaomiClock(Context context) { super(context); } public xiaomiClock(Context context, AttributeSet attrs) { super(context, attrs); //mEffect = new DashPathEffect(new float[]{1,2,5,10,50,20}, 0); // float[]{ 虚线的厚度, 虚线的间距,虚线的厚度, 虚线的间距 ......} mEffect = new DashPathEffect(new float[]{5,15}, 0); // float[]{ 虚线的厚度, 虚线的间距,虚线的厚度, 虚线的间距 ......} mshader = new SweepGradient(500, 500, Color.parseColor("#3b3b3b"), Color.parseColor("#ffffff")); //渐变遮罩样式 textPaint = new Paint(); textPaint.setStrokeWidth(16); textPaint.setColor(Color.WHITE); textPaint.setStrokeCap(Paint.Cap.ROUND); textPaint.setAntiAlias(true); paint = new Paint(); paint.setAntiAlias(true); mTriangle = new Path(); mTriangle.moveTo(960, 500);// 此点为多边形的顶点 //下面两个x 相等，表示底边的位置 mTriangle.lineTo(1000, 525); // y：底边宽的其中一个顶点 mTriangle.lineTo(1000, 475); //y：底边宽的其中一个顶点 mTriangle.close(); setmTimer(); System.out.println("度数" + ((float) 6.0 / 10)); } @Override protected void onDraw(Canvas canvas) { //绘画手表盘 drawbeauty(canvas); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //设置宽高 setMeasuredDimension(1000,1000); //画布大小 } public void drawbeauty(Canvas canvas) { int canvasWidth = canvas.getWidth(); int canvasHeight = canvas.getHeight(); //设置缓存层，因为下面要实用xfermode，使用xfemode必须使用缓存层，否则会出现黑色背景 int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG); //初始化画笔，因为上下两层做画需要的画笔属性不一样，所以只能每次重新设置一次 paint.setStyle(Paint.Style.STROKE); //设置画笔为不填充模式 paint.setPathEffect(mEffect); //设置笔画样式，这里设置的是虚线样式 paint.setStrokeWidth(50); //设置笔画宽度 canvas.drawCircle(500, 500, 420, paint); //画一个纯色表盘，虚线，空心圆形 【表盘位置和大小】 //设置画笔属性，SRC_IN属性，让第二个图案只能花在第一个图案上面，也就是只能画在上面所说那个纯色表盘里面 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); //把画笔虚线属性去掉，因为我要的是一个实心圆形，然后让这个实心但是颜色不一样圆形画在上面所说表盘上面，因为设置了xfermode，所以显示的一样会是虚线圆形表盘，但是颜色会变成你现在的颜色 paint.setPathEffect(null); //设置画笔shader属性，这里设置的是SweepGradient模式，可以让颜色过渡泾渭分明，以圆形为中心开始变化 paint.setShader(mshader); paint.setStyle(Paint.Style.FILL); canvas.save(); //保存画布 //旋转画布，然后你就会发现时钟表盘开始动了 if(Static.cartoon){ if(Static.agree_flag){ agree = 1; Static.agree_flag = false; } canvas.rotate(agree, 500, 500); //画布旋转的中心点 }else{ agree = 1; } canvas.drawRect(10, 10, 1000, 1100, paint); //渐变矩形绘制 canvas.drawPath(mTriangle, textPaint); //绘制小三角形 canvas.restore(); //最后将画笔去除Xfermode paint.setXfermode(null); canvas.restoreToCount(layerId); } private void setmTimer() { mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { L.e("agree = " + agree); //数值越大，旋转速度越快 agree = agree + 0.022f; if (agree > 360) agree = 1; postInvalidate(); } }, 1000, 3); //延时/周期 } }仿小米秒表 小 表盘自定义控件【xiaomiClock02.java】 public class xiaomiClock02 extends View { private Paint textPaint, paint; private Path mTriangle; private Timer mTimer; private float agree = 1; private Shader mshader; private PathEffect mEffect; public xiaomiClock02(Context context) { super(context); } public xiaomiClock02(Context context, AttributeSet attrs) { super(context, attrs); mEffect = new DashPathEffect(new float[]{5,0}, 0); mshader = new SweepGradient(110, 110, Color.parseColor("#3b3b3b"), Color.parseColor("#ffffff")); textPaint = new Paint(); textPaint.setStrokeWidth(16); textPaint.setColor(Color.WHITE); textPaint.setStrokeCap(Paint.Cap.ROUND); textPaint.setAntiAlias(true); paint = new Paint(); paint.setAntiAlias(true); mTriangle = new Path(); mTriangle.moveTo(190, 110); mTriangle.lineTo(110, 112); mTriangle.lineTo(110, 108); mTriangle.close(); setmTimer(); System.out.println("度数" + ((float) 6.0 / 10)); } @Override protected void onDraw(Canvas canvas) { drawbeauty(canvas); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(220,220); } public void drawbeauty(Canvas canvas) { int canvasWidth = canvas.getWidth(); int canvasHeight = canvas.getHeight(); int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG); paint.setStyle(Paint.Style.STROKE); //设置画笔为不填充模式 paint.setPathEffect(mEffect); //设置笔画样式，这里设置的是虚线样式 paint.setStrokeWidth(2); //设置笔画宽度 canvas.drawCircle(110, 110, 100, paint); //画一个纯色表盘，虚线，空心圆形 【表盘位置和大小】 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); paint.setPathEffect(null); paint.setShader(mshader); paint.setStyle(Paint.Style.FILL); canvas.save(); //保存画布 if(Static.cartoon){ if(Static.agree_flag){ agree = 1; Static.agree_flag = false; } canvas.rotate(agree, 110, 110); //画布旋转的中心点 }else{ agree = 1; } canvas.drawRect(1, 1, 220, 220, paint); //渐变矩形绘制 canvas.drawPath(mTriangle, textPaint); //绘制小三角形 canvas.restore(); paint.setXfermode(null); canvas.restoreToCount(layerId); } private void setmTimer() { mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { L.e("agree = " + agree); //数值越大，旋转速度越快 //agree++; agree = agree + 0.2f + 1f; if (agree > 360) agree = 1; postInvalidate(); } }, 1000, 3); //延时/周期 } }主页面【MainActivity.java】 public class MainActivity extends BaseActivity implements View.OnClickListener { private TextView mTextView; private TextView Time_TextView; //三个按钮 private TextView TextView01; private TextView TextView02; private TextView TextView03; private RecyclerView Recycler_View; private List Data; private BaseQuickAdapter Timedapter; private int number = 1; //用来统计计时的次数 //变化的时间数据 HH:mm:ss private int H = 0, m = 0, n = 0, s = 0; private String num_m, num_n, num_s; private boolean type = true; //用于避免连续点击开始时出错 Thread TimeThread = new Thread(new DataThread()); //创建启动时间控制线程 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Time_TextView = findViewById(R.id.Time_TextView); TextView01 = findViewById(R.id.TextView01); TextView01.setText("开始"); TextView02 = findViewById(R.id.TextView02); TextView03 = findViewById(R.id.TextView03); TextView01.setOnClickListener(this); TextView02.setOnClickListener(this); TextView03.setOnClickListener(this); Recycler_View = findViewById(R.id.RecyclerView); //设置 Recycler_View 布局样式 Recycler_View.setLayoutManager(new GridLayoutManager(MainActivity.this, 1, GridLayoutManager.VERTICAL, false)); Data = new ArrayList(); //新建数据对象 initAdapter(); //设置刷新适配器 } //Recycler_View 适配器 private void initAdapter() { Timedapter = new TimeAdapter(R.layout.item_time, Data); Timedapter.openLoadAnimation(); Recycler_View.setAdapter(Timedapter); } //时间显示逻辑 private String getWebData() { if (s >= 100) { s = 0; n++; if (n >= 60) { n = 0; m++; if (m >= 60) { m = 0; H++; } } } if (s |
2、在项目 build.gradle 中添加：maven { url ‘https://jitpack.io’ }
【本文地址】
今日新闻 |
推荐新闻 |