仿新浪微盾客户端项目简介五

简介:

这节中,我们我们来讨论微盾上界面上实现的二三事。这也是这个项目的重头戏。

界面上我们要做一个什么效果,一个倒计时的效果了,这个倒计时效果以后用的很多,希望对大家有帮助。

我这里布局方式用到了帧布局的方式,一个是所谓的表盘的情况,一个是倒计时的秒针, 相应的布局文件如下了:


<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <com.itcast.vdunx.RingView
            android:layout_width="@dimen/ring_view_width"
            android:layout_height="@dimen/ring_view_height" >
        </com.itcast.vdunx.RingView>

        <com.itcast.vdunx.CountdownIndicator
            android:id="@+id/pb_progress"
            android:layout_width="@dimen/countdown_indicator_width"
            android:layout_height="@dimen/countdown_indicator_height"
            android:layout_gravity="center" >
        </com.itcast.vdunx.CountdownIndicator>
    </FrameLayout>

那个RingView是我自定义的表盘控件,它即在手机的界面上画了一个园,而这个CountdownIndicator即是一个倒计时控件,它是一个什么,一个扇形,一个随着时间的变化而不断改变自己大小的扇形。这两个控件的原理是什么了,我们来窥探它一下原貌了。

首先看一下RingVieW的源代码:


  Paint paint;
    Context ctx;
    public RingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        this.paint.setAntiAlias(true);//没有锯齿
        this.paint.setStyle(Paint.Style.STROKE);//画空心
        ctx = context;
    }
    
    @Override
    protected void onDraw(Canvas paramCanvas) {
        float center = getWidth()/2;
        int innerCircle = dip2px(ctx,83); //设置内圆半径
        int ringWidth = dip2px(ctx,5);  //设置圆环宽度
        
        //绘制内圆
        this.paint.setARGB(155, 167, 190, 206);
        this.paint.setStrokeWidth(2);//设置线条宽度
        paramCanvas.drawCircle(center,center, innerCircle, this.paint);//innerCircle:半径

        //绘制圆环
        this.paint.setARGB(255, 212 ,225, 233);
        this.paint.setStrokeWidth(ringWidth);//中间圆环宽度
        paramCanvas.drawCircle(center,center, innerCircle+1+ringWidth/2, this.paint);

        //绘制外圆
        this.paint.setARGB(155, 167, 190, 206);
        this.paint.setStrokeWidth(2);
        paramCanvas.drawCircle(center,center, innerCircle+ringWidth, this.paint);
    }

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

通过上面的源代码,我们可以清晰看出来了,这个只是通过相应画笔在指定的圆心位置按照固定位置来画出来相应的圆环。

而CountdownIndicator控件则比上述的控件园复杂一点了,首先还是看代码:


public class CountdownIndicator extends View {
    Paint paint;
    double phase;

    public CountdownIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.paint = new Paint();
        this.paint.setAntiAlias(true);

        // 在此处无法直接获得控件的宽高,只能从资源文件中读取
        float x = context.getResources().getDimension(
                R.dimen.countdown_indicator_width) / 2;// 返回的是像素值
        float y = context.getResources().getDimension(
                R.dimen.countdown_indicator_height) / 2;

        RadialGradient rg = new RadialGradient(x, y, y, Color.argb(255,
                143, 201, 233), Color.argb(255, 166, 212, 235), TileMode.MIRROR);// 渐变
        this.paint.setShader(rg);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float f1 = (float) (phase * 360);
        float f2 = 270 - f1;
        RectF localRectF = new RectF(0, 0, getWidth(), getHeight());
        canvas.drawArc(localRectF, f2, f1, true, paint);// f2:起始角度,f1:扫描幅度
    }

    public void setPhase(double phase) {
        if (phase < 0 || phase > 1) {
            throw new IllegalArgumentException();
        }
        this.phase = phase;
        invalidate();
    }

这个类主要就是Phase这个角度,而他扫描的幅度这是一个起始角度,起始角度是一个o-1的浮点数*360,而相应的扫描的幅度根据相应数据三角函数的方法是270-起始角度了,这样就得到一个倒计时秒盘的结果。

有了这两个类之后,根据相应的时间控件计时之后,最终的计时的效果是这样的:

这个动画制作过程大家明白吧。




目录
相关文章
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1210 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1172 87
|
9天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1767 12
|
19天前
|
人工智能 运维 安全
|
2天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
230 127
|
10天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
362 0

热门文章

最新文章