Android UI设计系列之自定义DrawView组件实现数字签名效果（5）_Android

最近项目中有个新的需求，用户在完交易需要进行输入支付密码付款的时候，要让用户签下自己的签名，提起到数字签名这个东西，感觉有点高大上，后来想想数字签名的原理也不是太复杂，主要实现原理就是利用了View的绘图原理，把用户在屏幕上的手指移动轨迹显示在屏幕上，接着把在屏幕上显示的轨迹View转换成一张图片，最后把图片保存到本地或者上传到服务器...
还是老规矩，首先看一下工程目录吧：

public class DrawView extends View { 

 /**
  * 签名画笔
  */
 private Paint paint;
 /**
  * 签名画布
  */
 private Canvas cacheCanvas;
 /**
  * 画笔路径
  */
 private Path path;
 /**
  * 缓存图片
  */
 private Bitmap cacheBitmap;
 /**
  * 图片宽度
  */
 private int width;
 /**
  * 图片高度
  */
 private int height;
 /**
  * 手指触摸屏幕时的X，Y坐标
  */
 private float xDown, yDown;
 /**
  * 是否正在绘制
  */
 private boolean isDrawing = false; 

 /**
  * 默认画笔颜色
  */
 private int paintColor = Color.CYAN; 

 /**
  * 默认画板背景色
  */
 private int canvasColor = Color.parseColor("#bbccaa"); 

 public DrawView(Context context, int width, int height) {
  super(context);
  this.width = width;
  this.height = height;
  initWedgits();
 } 

 /**
  * 初始化组件
  */
 private void initWedgits() {
  try {
   paint = new Paint(Paint.DITHER_FLAG);
   // 设置抗锯齿
   paint.setAntiAlias(true);
   // 设置画笔宽度
   paint.setStrokeWidth(3);
   paint.setDither(true);
   // 设置样式
   paint.setStyle(Paint.Style.STROKE);
   paint.setStrokeJoin(Paint.Join.ROUND);
   paint.setStrokeCap(Paint.Cap.ROUND);
   // 画笔颜色
   paint.setColor(paintColor);
   // 绘制路径
   path = new Path();
   // 创建空缓存图片
   cacheBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
   // 把画布内容画到空缓存图片上
   cacheCanvas = new Canvas(cacheBitmap);
  } catch (Exception e) {
   e.printStackTrace();
  }
 } 

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
 } 

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas); 

  canvas.drawColor(canvasColor);
  canvas.drawBitmap(cacheBitmap, 0, 0, paint);
  canvas.drawPath(path, paint);
 } 

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  // 记录手指摁下屏幕时的X坐标
  final float x = event.getX();
  // 记录手指摁下屏幕时的Y坐标
  final float y = event.getY();
  switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
   // 手指摁下时清空之前的设置
   path.reset();
   // 设置路径起始点
   path.moveTo(x, y);
   xDown = x;
   yDown = y;
   isDrawing = true;
   break;
  case MotionEvent.ACTION_MOVE:
   // 移动下一点
   path.quadTo(xDown, yDown, x, y);
   // 重新设置起点
   xDown = x;
   yDown = y;
   isDrawing = true;
   break;
  case MotionEvent.ACTION_UP:
   path.lineTo(xDown, yDown);
   // 手指抬起时绘制路径
   cacheCanvas.drawPath(path, paint);
   // 路径重置
   path.reset();
   isDrawing = false;
   break;
  default:
   break;
  }
  // 刷新界面
  invalidate();
  return true;
 } 

 /**
  * 设置画笔颜色
  *
  * @param color
  *   画笔颜色
  */
 public void setPaintColor(int color) {
  paintColor = color;
 } 

 /**
  * 设置画板颜色
  *
  * @param color
  *   画板颜色
  */
 public void setCanvasColor(int color) {
  canvasColor = color;
 } 

 /**
  * 返回绘画状态
  *
  * @return【true:正在绘制】【false:绘制完成】
  */
 public boolean getDrawState() {
  return isDrawing;
 } 

 /**
  * 返回Bitmap
  *
  * @return 返回绘制的图片
  */
 public Bitmap getBitmap() {
  return cacheBitmap;
 }
}

DrawView的代码注释都很清晰，我还是大致说下DrawView的执行逻辑吧，DrawView继承了View也就是说具有了View的所有功能，要实现图片绘制就要实现onDraw()方法，要实现对手指在屏幕上的轨迹绘制就需要获取轨迹坐标，所以需要重写onTouchEvent()放法，重点在onTouchEvent()方法中。当手指摁下时我们绘制起点，但是在绘制起点前需要先调用path.reset()方法，防止path进行二次重绘，path的moveTo方法就是来绘制当前触摸事件的起点，摁下完成之后调用inValidate()方法进行界面刷新。当手指移动时调用path.quadTo()方法，这个方法就是追加的意思，把新坐标点追加到path中，手指移动之后再调用inValidate()方法进行界面刷新，最后当手指抬起时，把在当前事件周期内的轨迹绘制到画板cacheCanvas上，最后再调用inValidate()方法进行界面刷新，因此一次的手指移动轨迹就绘制完成，当要进行下一次的绘制，就是重复以上操作了...

接下来我们看看DrawView的使用吧，首先看一下布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#ffffff"> 

 <TextView
  android:id="@+id/title"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="请绘制签名"
  android:textSize="18sp"
  android:layout_margin="5dip"
  android:gravity="center"
  android:textColor="#000000" /> 

 <FrameLayout
  android:id="@+id/contents"
  android:layout_width="fill_parent"
  android:layout_height="0dip"
  android:layout_weight="1"
  android:layout_gravity="center"
  android:background="#aabbcc">
 </FrameLayout> 

 <Button
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:onClick="save"
  android:text="保存签名" />
</LinearLayout>

乍一看布局文件中并没有使用我们自定义的DrawView，不过不用着急我是使用了通过在FrameLayout中动态添加的方法把DrawView添加进来的，好了，那紧接着看看MainActivity中的代码实现吧：

public class MainActivity extends Activity { 

 private FrameLayout frameLayout;
 private DrawView drawView;
 private TextView title; 

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main); 

  initWedgits();
 } 

 /**
  * 初始化组件
  */
 private void initWedgits() {
  try {
   frameLayout = (FrameLayout) findViewById(R.id.contents);
   title = (TextView) findViewById(R.id.title);
   title.setText(Html.fromHtml("<b>China中国<tt>中国</tt></b>China真伟大！")); 

  } catch (Exception e) {
   e.printStackTrace();
  }
 } 

 @Override
 public void onWindowFocusChanged(boolean hasFocus) {
  drawView = new DrawView(MainActivity.this, frameLayout.getWidth(), frameLayout.getHeight());
  frameLayout.addView(drawView);
 } 

 /**
  * 保存图片
  *
  * @param view
  */
 public void save(View view) {
  try {
   File file = new File(Environment.getExternalStorageDirectory()
     .getAbsolutePath() + "/handle.png");
   if (file.exists()) {
    file.delete();
   }
   file.createNewFile();
   if (drawView.getBitmap().compress(CompressFormat.PNG, 100, new FileOutputStream(file))) {
    Toast.makeText(getApplicationContext(), "图片保存成功", 1000).show();
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}

在MainActivity中的代码没什么好解释的，相信你一看就懂，最主要的是在save方法中使用了Bitmap的compress()方法，就是把图片存储在文件中，当我们签名结束之后点击保存签名按钮，签名图片就保存在了本地文件中了，当然了如果你想上传到后台服务器也不难，就是使用个异步操作进行图片上传就行了...

说明：当你运行程序的时候，会看见China中国中国真伟大！的字样，其中China和中国是加粗的效果，因为项目中有个需求让把汉字也加粗，上网上找了些方法，但是都是对英文和数字有效果对中文暂时没效果，我也是无意看源码中的注释，其中注释里边有加粗的文字说明，我就点击进去了，结果发现注释里的标签是<tt></tt>，当时脑子一转就想估计<tt>标签可以实现对汉字的加粗效果，呵呵，功夫不付有心人，把<tt>标签放到<b>里边已测试，果然有效果，呵呵，当时高兴坏了，现在再高兴一下，(*^__^*) 嘻嘻...

好了，现在我们运行程序来看一下效果图吧：

绘制签名：

当点击了保存按钮后，进入图库看看吧：

好了，数字签名的讲解到这里了，谢谢大家的阅读。

源码下载： Android UI实现数字签名效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android
， ui设计
， 组件
， 数字签名
DrawView
easyui皮肤组件ui设计、组件ui设计、火狐安装签名组件、cqcca数字签名组件、微信小程序自定义组件，以便于您获取更多的相关知识。

时间： 2024-08-21 07:14:48

Android UI设计系列之自定义DrawView组件实现数字签名效果（5）_Android的相关文章

Android UI设计系列之自定义DrawView组件实现数字签名效果（5）

最近项目中有个新的需求,用户在完交易需要进行输入支付密码付款的时候,要让用户签下自己的签名,提起到数字签名这个东西,感觉有点高大上,后来想想数字签名的原理也不是太复杂,主要实现原理就是利用了View的绘图原理,把用户在屏幕上的手指移动轨迹显示在屏幕上,接着把在屏幕上显示的轨迹View转换成一张图片,最后把图片保存到本地或者上传到服务器... 还是老规矩,首先看一下工程目录吧: public class DrawView extends View { /** * 签名画笔 */ private P

Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果（8）_Android

好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下:         通过观察QQ空间的运行效果,发现

Android UI设计系列之自定义Dialog实现各种风格的对话框效果（7）_Android

虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

Android UI设计系列之自定义ViewGroup打造通用的关闭键盘小控件ImeObserverLayout（9）_Android

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51598682 我们平时开发中总会遇见一些奇葩的需求,为了实现这些需求我们往往绞尽脑汁有时候还茶不思饭不香的,有点夸张了(*^__^*)--我印象最深的一个需求是在一段文字中对部分词语进行加粗显示.当时费了不少劲,不过还好,这个问题最终解决了,有兴趣的童靴可以看一下:Android UI设计之<六>使用HTML标签,实现在TextView中对部分文字进行加粗显示. 之前产品那边提了这样

Android UI设计系列之自定义TextView属性实现带下划线的文本框（4）_Android

在Android开发过程中,如果Android系统自带的属性不能满足我们日常开发的需求,那么就需要我们给系统控件添加额外的属性了.假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧.还好Android中自定义属性不是很复杂,也可以归纳为三步走吧. 老规矩,还是先贴出工程目录吧: 一.添加属性文件 在values文件夹中新建attrs.xml文件,在文件中新建属性

Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）_Android

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

Android UI设计系列之自定义EditText实现带清除功能的输入框(3)_Android

最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容

Android UI设计系列之自定义EditText实现带清除功能的输入框(3)

最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容

Android UI设计系列之HTML标签实现TextView设置中文字体加粗效果（6）_Android

搞软件开发的都知道项目中各种需求都有,而有时候各种奇葩的需求真是让人大跌眼镜,为了实现这些奇葩的需求我们往往苦逼的废寝忘食,我现在的项目中就有一个应该算得上奇葩的需求吧,需求是这样的:在一段文字中实现对部分文字加粗这个看上去也不难并且有点小儿科,因为TextView中有个属性是Android:textStyle,它其中一个值是bold,也就是说是对将要显示的文字进行加粗,于是我就在TextView控件中添加了此属性,代码如下: <TextView android:layout_width="