Android UI（四）云通信录项目之云端更新进度条实现

时间  2020-01-03
标签 android 通信 项目 云端 更新 进度 实现 栏目 Android 繁體版
原文   原文链接

做者：泥沙砖瓦浆木匠
网站：http://blog.csdn.net/jeffli1993
我的签名：打算起手不凡写出鸿篇巨做的人，每每坚持不了完成第一章节。
交流QQ群：【编程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo 前端

1、前言

    继续AndroidUI系列，UI实际上是个前端活，美感是最终的boss阶段。泥瓦匠的美感也就给大家评论评论哈哈，我等UI写到必定地步。我想写下Android的一系列简单入门。为了巩固提高呗。哈哈。下面介入正题。
    有道是路漫漫其修远兮，吾将上下而求索。任何东西都不是一步登天，爱情啥都同样。钱也同样，没人愿意给你1亿，更况且也没愿意给你100的。为何？没啥的，注意细节，一步一步来。让你值得那一亿就有了。可是要记住 android

“作人作事第一，技术第二”

2、正文

    泥瓦匠是个爱扯的人。项目的进展也不错，前天友人通了个宵，或是今天降温了，想睡觉。晚上去锻炼下，应该就行了。哈哈~扯淡完毕。今天咱们来实现下面这个界面：云通信录项目之云端更新界面 编程

image

    先理理思路： canvas

  • 一个barTop层：一个ImgView或是Button，一个TextView，用styles.xml控制其的样式。
  • 核心中间一个圆形进度条的实现，自定义View。此次的核心讲解。
  • 底部ImgBottom的实现       

3、实现圆形进度条

    实现这个，首先咱们得明白关于Canvas Paint的相关知识。这里我也就把涉及到的东西讲下。仍是看效果说话吧。关于2D绘图的api都在android.graphics和android.graphics.drawable包里面。图形相关的有Point（点），RetcF（矩形）等，还有动画相关有AnimationDrawable、 BitmapDrawable和TransitionDrawable等。 api

    本例中，其实咱们用到的是很简单的两个操做。定义一个矩形（RetcF）而后再矩形区域，画弧线。一个弧线是对应的白色底部，另外一个弧线是对应的进度。算好角度，而后就天然而然的能够了。话很少说，泥瓦匠就上代码了。（代码里面的详细注解，你也应该能够方便的看的懂。） ide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
package org.nsg.view;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
 
public class CircleProgressBar extends View
{
    private int maxProgress = 100;
    private int progress = 15;
    private int progressStrokeWidth = 16;
    private int marxArcStorkeWidth = 16;
    /* 画圆所在的距形区域 */
    RectF oval;
    Paint paint;
 
    public CircleProgressBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        oval = new RectF();
        paint = new Paint();
    }
 
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        int width = this.getWidth();
        int height = this.getHeight();
 
        width  = (width > height) ? height : width;
        height = (width > height) ? height : width;
 
        /* 设置画笔为抗锯齿 */
        paint.setAntiAlias(true);
        /* 设置画笔颜色 */
        paint.setColor(Color.WHITE);
        /* 白色背景 */
        canvas.drawColor(Color.TRANSPARENT);
        /* 线宽 */
        paint.setStrokeWidth(progressStrokeWidth);
        paint.setStyle(Style.STROKE);
 
        /* 左上角x */
        oval.left = marxArcStorkeWidth / 2;
        /* 左上角y */
        oval.top  = marxArcStorkeWidth / 2;
        /* 左下角x */
        oval.right  = width  - marxArcStorkeWidth / 2;
        /* 右下角y */
        oval.bottom = height - marxArcStorkeWidth / 2;
 
        /* 绘制白色圆圈，即进度条背景 */
        canvas.drawArc(oval, -90, 360, false, paint);
        paint.setColor(Color.rgb(0x57, 0x87, 0xb6));
        paint.setStrokeWidth(marxArcStorkeWidth);
        /* 绘制进度圆弧，这里是蓝色 s*/
        canvas.drawArc(oval, -90, ((float) progress / maxProgress) * 360,false, paint);
 
        /* 设置百分比文本 */
        paint.setStrokeWidth(1);
        String text = progress + "%";
        int textHeight = height / 4;
        paint.setTextSize(textHeight);
        int textWidth = (int) paint.measureText(text, 0, text.length());
        paint.setStyle(Style.FILL);
        canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, paint);
 
    }
 
    public int getMaxProgress()
    {
        return maxProgress;
    }
 
    public void setMaxProgress(int maxProgress)
    {
        this.maxProgress = maxProgress;
    }
 
    /** 设置进度
     * @param progress 进度百分比
     * @param view  标识进度的节点视图
     */
    public void setProgress(int progress, View view)
    {
        this.progress = progress;
        view.setAnimation(pointRotationAnima(0,(int) (((float) 360 / maxProgress) * progress)));
        this.invalidate();
    }
 
    /** 非ＵＩ线程调用 */
    public void setProgressNotInUiThread(int progress, View view)
    {
        this.progress = progress;
        view.setAnimation(pointRotationAnima(0,(int) (((float) 360 / maxProgress) * progress)));
        this.postInvalidate();
    }
 
    /** 进度标注点的动画
     * @param fromDegrees
     * @param toDegrees
     */
    private Animation pointRotationAnima(float fromDegrees, float toDegrees)
    {
        /* 进度点起始位置(图片偏移约54度) */
        int initDegress = 300;
        RotateAnimation animation =
                new RotateAnimation(fromDegrees,
                        initDegress + toDegrees,
                        Animation.RELATIVE_TO_SELF,
                        0.5f,
                        Animation.RELATIVE_TO_SELF,
                        0.5f);
        /* 设置动画执行时间 */
        animation.setDuration(1);
        /* 设置重复执行次数 */
        animation.setRepeatCount(1);
        /* 设置动画结束后是否停留在结束位置 */
        animation.setFillAfter(true);
        return animation;
    }
     
}
1
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<RelativeLayout xmlns:android=" http://schemas.android.com/apk/res/android"
    xmlns:tools=" http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
     
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:background="@drawable/bg_black">
        <ImageView
            android:id="@+id/img_user_list_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:paddingLeft="24dp"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="fitXY"
            android:src="@drawable/btn_return"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/txt_topbar"
            android:text="云端更新"/>
    </RelativeLayout>
     
     <org.nsg.main.CircleProgressBar
        android:id="@+id/sync_progress"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginBottom="210dp"
        android:layout_alignBottom="@+id/lay_bottom"
        android:layout_centerHorizontal="true"
         />
 
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="140dp"
        android:layout_alignBottom="@+id/lay_bottom">
         
        <TextView
            android:id="@+id/syncText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/red"
            android:paddingLeft="50dp"
            android:textSize="15sp"
            android:text="舒适提醒："/>
         
        <TextView
            android:id="@+id/syncText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="15sp"
            android:text="在Wifi下，更新更有效果"/>
      
    </LinearLayout>
     
    <Button
       android:id="@+id/syncButton"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_marginLeft="20dp"
       android:layout_marginRight="20dp"
        android:layout_marginBottom="90dp"
        android:layout_alignBottom="@+id/lay_bottom"
        android:textColor="@color/white"
        android:textSize="22sp"
       android:background="@drawable/user_detail_call_bg"
       android:text="更新" />
     
    <LinearLayout
        android:id="@+id/lay_bottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/libe_footer" />
    </LinearLayout>
     
</RelativeLayout>

定义好这个View以后，咱们就把最难的东西搞定了。代码里面，最后用动画的形式展示给你们，百分比会根据你设计的百分比进行变化。泥瓦匠和你们同样，都想急切的看到效果图，只要你们以下简单的操做就行了。打开设计的xml文件详细的xml设计我也方便你们贴出来了：其余设计都是简单的，我这边也不展开讲了。 post

4、总结

   本章关于云通信录的界面我会慢慢分享给你们。项目也放在下面的连接供你们下载学习。这期就到这里，泥瓦匠也要休息了。关于代码在下面的连接：http://files.cnblogs.com/Alandre/AndroidUI04.rar   学习

   如以上文章或连接对你有帮助的话，别忘了在文章按钮或到页面右下角点击 “赞一个” 按钮哦。你也能够点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章 动画
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程