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

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

一、前言

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

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

二、正文

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

先理理思路：

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

三、实现圆形进度条

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

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


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设计我也方便大家贴出来了：其他设计都是简单的，我这边也不展开讲了。

四、总结

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

如以上文章或链接对你有帮助的话，别忘了在文章按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章

时间： 2024-11-05 19:25:02

Android UI（四）云通讯录项目之云端更新进度条实现的相关文章

【转】Android UI系列-----时间、日期、Toasts和进度条Dialog

原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内容有任何疑问, 可以通过评论或发邮件的方式联系我: [email protected] / [email protected] 如果需要转载,请注明出处,谢谢!! 本篇随笔将继续学

[Android UI]分享：简洁大方的自定义的进度条NumberProgressBar

这是网上淘到的一个个性组件,我感觉挺简洁大气的,所以在此记录也可与你们一同分享这个不错的进度条组件 下图为效果: 这是个自定义的view,我这里就不去深究了,看demo界面的代码,看看如何使用的. MainActivity.java /** * demo主界面 * @author jan */ public class MainActivity extends Activity implements OnProgressBarListener { private Timer timer; //进

Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框

作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧:13958686678(泥瓦匠开个玩笑~) 一.前言 继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐

android一个上传图片的例子,包括如何终止上传过程，如果在上传的时候更新进度条(一)

先上效果图: Layout为: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent&quo

Android -- 真正的 高仿微信 打开网页的进度条效果

(本博客为原创,http://home.cnblogs.com/u/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截图 六,完整项目 一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一

基于Android的计步器(Pedometer)的讲解(三)——CircleBar(圆形进度条)

计步器(Pedometer)整个项目的源代码,感兴趣的朋友可以下载来看看(记得帮小弟在github打个星~) https://github.com/296777513/pedometer 本篇文章讲的demo在这里下载(0分下载): http://download.csdn.net/detail/a296777513/8328461 先给几张效果图: 如上图所示,点击中间的圆圈会依次显示3个不同的页面(信息),而且圆形的进度条是动态增加的,效果还是可以的.然后给出源代码,供大家参考 Circle

Android简易实战教程--第二话《两种进度条》

点击按钮模拟进度条下载进度,"下载"完成进度条消失. 代码如下: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_

android一个上传图片的样例,包含怎样终止上传过程，假设在上传的时候更新进度条(一)

先上效果图: Layout为: <? xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent&qu

阅读《Android 从入门到精通》（17）——进度条

进度条(ProgressBar) java.lang.Object; android.view.View; android.widget.ProgressBar; ProgressBar 类方法 ProgressBar 演示样例 完整project:http://download.csdn.net/detail/sweetloveft/9416791 以下我们要学习该类中最经常使用的方法.主要是 setMax 和 setProgress 等方法. 1.MainActivity.java pack