【android开发】手写签名系统的设计与实现之实现画笔设置（四）

上一篇文章我们介绍了如何实现在画板上海书写，其过程相对来说是比较简单的，既然我们实现了画布和画笔，也实现了手写，为了提高可用性，我们增加了对画笔风格的设置功能，这样就可以根据自己的需要选择画笔的颜色、粗细、风格（铅笔、浮雕、水彩等）效果。今天我们就介绍画笔风格的设置功能的实现过程，先看看效果图：

                         

一、实现原理：

1、对话款我们用的是popupwindow，不是alertdialog对话框，两者是有区别的：前者是阻塞型，即popupwindow会阻塞主线程，当popupwindow弹出来后，主线程暂停工作，只有popupwindow退出后，主线程才会恢复；alertdialog是非阻塞型，即不会影响到主线程的工作。两者在实现过程中，都是将自定义的布局嵌入到其里面。对于popupwindow对话框的实现，之前的博客【android开发】手机应用管理器的实现之实现popupWindow类对话框（二）已经介绍了，这里就不在介绍了。
2、  为了更好地显示当前选择画笔的实际效果，我们做了动态预览，这是自定义两个view：ShowLineView和PenCircleView，来完成相应的操作。

3、由于今天要创建的文件比较多，我们来先看一下项目的目录结构图：

二、实现过程：

首先我们新建一个布局文件pen_set.xml，代码如下：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"  
3.         android:id="@+id/setpenlayout"  
4.         android:layout_width="wrap_content"  
5.         android:layout_height="360dp"  
6.         android:orientation="horizontal"  
7.         android:background="@drawable/grey_layout">  
8.     <LinearLayout   
9.         android:layout_width="wrap_content"   
10.         android:layout_height="wrap_content"  android:orientation="vertical"   
11.         android:paddingLeft="7dip">  
12.         <FrameLayout   
13.             android:layout_width="195dip"  
14.             android:layout_height="60dip"  
15.             android:background="@drawable/white_layout"  
16.             android:layout_marginRight="5dp"  
17.             android:layout_marginTop="5dp" >  
18.         <LinearLayout   
19.                 android:orientation="horizontal"   android:paddingRight="12dip"  
20.                 android:layout_width="195dip" android:id="@+id/penShowLayout"  
21.                 android:layout_height="60dip" >  
22.         </LinearLayout>   
23.     </FrameLayout>    
24.     <LinearLayout android:id="@+id/sizeSelectLayoutPen"  
25.         android:layout_width="195dip" android:layout_height="40dip"  
26.         android:orientation="horizontal"   
27.         android:background="@drawable/darkgrey_layout"  
28.         android:layout_marginRight="5dp"  
29.         android:layout_marginTop="5dp"  
30.         android:focusable="false" android:paddingRight="12dip">  
31.         <SeekBar   
32.             android:id="@+id/penSizeSeekBar"  
33.             android:layout_width="140dp"  
34.             android:layout_marginLeft="10dp"  
35.             android:max="30"  
36.             android:layout_height="wrap_content"  
37.             android:layout_gravity="center_vertical"  
38.             android:maxHeight="5dp"  
39.             android:progressDrawable="@drawable/seekbar_bg_img"  
40.             />  
41.         <LinearLayout  
42.                     android:id="@+id/penSizeShowLayout"  
43.                     android:layout_marginTop="10dp"  
44.                     android:layout_width="40dp"  
45.                     android:layout_height="40dp"  
46.                     android:layout_gravity="center_vertical"  
47.                     android:layout_marginLeft="6dp"  
48.                     android:orientation="horizontal"></LinearLayout>  
49.     </LinearLayout>  
50.       
51.   
52.     <LinearLayout   
53.         android:orientation="horizontal"     
54.         android:paddingRight="12dip"  
55.         android:layout_width="195dip"   
56.         android:id="@+id/pen_style_seclct"  
57.         android:layout_height="60dip"   
58.         android:background="@drawable/deepgrey_layout"  
59.         android:layout_marginRight="5dp"  
60.         android:layout_marginTop="5dp">  
61.             <RadioGroup android:id="@+id/penRaidoGroup1"  
62.             android:layout_width="match_parent" android:layout_height="wrap_content"  
63.             android:orientation="horizontal" android:layout_marginTop="8dip">  
64.         <RadioButton  
65.             android:id="@+id/buttonBlurPen" android:layout_weight="1"  
66.             android:layout_width="0dip"  android:button="@null"  
67.             android:layout_height="wrap_content"  
68.             android:background="@drawable/plainpen"  
69.             >  
70.         </RadioButton>  
71.         <RadioButton  
72.             android:id="@+id/buttonEmboss" android:layout_weight="1"  
73.             android:layout_width="0dip" android:button="@null"  
74.             android:layout_height="wrap_content"  
75.              android:background="@drawable/embosspen">  
76.         </RadioButton>  
77.         <RadioButton  
78.             android:id="@+id/buttonPlainPen" android:layout_weight="1"  
79.             android:layout_width="0dip" android:button="@null"  
80.             android:layout_height="wrap_content"  
81.               
82.             android:background="@drawable/blurpen">  
83.         </RadioButton>  
84.         <RadioButton  
85.             android:id="@+id/buttonSelectBackGroundColor" android:layout_weight="1"  
86.             android:layout_width="0dip" android:button="@null"  
87.             android:layout_height="wrap_content"  
88.             android:background="@drawable/fourpen">  
89.         </RadioButton>  
90.         </RadioGroup>  
91.     </LinearLayout>  
92.       
93.         <LinearLayout android:layout_width="195dip"   
94.             android:background="@drawable/verygrey_layout"  
95.             android:layout_marginBottom="10dp"  
96.             android:layout_marginRight="5dp"  
97.             android:layout_marginTop="5dp"  
98.             android:layout_height="75dip" android:id="@+id/LinearLayoutColor"  
99.             android:paddingLeft="7dip" android:orientation="vertical"  
100.             android:paddingRight="10dip">  
101.           
102.               
103.         <LinearLayout android:layout_width="wrap_content" android:layout_height="28dip"  
104.             android:orientation="horizontal"  android:layout_marginTop="7dip">  
105.         <RadioGroup android:layout_width="wrap_content"  
106.             android:layout_height="wrap_content" android:id="@+id/radioGroupColor"  
107.             android:orientation="horizontal" ></RadioGroup>  
108.         </LinearLayout>  
109.           
110.           
111.         <LinearLayout android:layout_width="wrap_content" android:layout_height="28dip"  
112.             android:orientation="horizontal" >  
113.             <RadioGroup android:layout_width="wrap_content"  
114.             android:layout_height="fill_parent" android:id="@+id/radioGroupColor2"  
115.             android:orientation="horizontal" ></RadioGroup>  
116.         </LinearLayout>  
117.       
118.           
119.     </LinearLayout>  
120.       
121.     </LinearLayout>  
122.   
123.     <RelativeLayout  
124.         android:id="@+id/savedPenLayout"  
125.         android:layout_width="45dp"  
126.         android:layout_height="252dp"  
127.         android:layout_marginBottom="10dp"  
128.         android:layout_marginRight="5dp"  
129.         android:layout_marginTop="5dp"  
130.         android:background="@drawable/verygrey_layout"  
131.         android:orientation="vertical" >  
132.               
133.     </RelativeLayout>  
134.       
135.           
136.     </LinearLayout>  

在mudpdfactivity中先初始化控件：

[java]  view plain copy

1. /** 
2.      * 功能：初始化设置画笔popupwindow视图里面的控件 
3.      */  
4.     public void initialSetPenBtV(){  
5.         penSetView = getLayoutInflater().inflate(R.layout.pen_set, null);  
6.         setpenlayout = (LinearLayout) penSetView.findViewById(R.id.setpenlayout) ;  
7.         penShowLayout = (LinearLayout) penSetView.findViewById(R.id.penShowLayout) ;  
8.         penSizeSeekBar = (SeekBar) penSetView.findViewById(R.id.penSizeSeekBar) ;  
9.         penSizeShowLayout = (LinearLayout) penSetView.findViewById(R.id.penSizeShowLayout) ;  
10.         colorRadioGroup = (RadioGroup) penSetView.findViewById(R.id.radioGroupColor);  
11.         colorRadioGroup2 = (RadioGroup) penSetView.findViewById(R.id.radioGroupColor2);  
12.         //plainpen = (RadioButton) penSetView.findViewById(R.id.buttonPlainPen);  
13.         penRadioGroupf = (RadioGroup) penSetView.findViewById(R.id.penRaidoGroup1);  
14.         penSizeSeekBar.setOnSeekBarChangeListener(this);  
15.         showLineView = new ShowLineView(this) ;  
16.         penShowLayout.addView(showLineView);  
17.         penCircleView = new PenCircleView(this) ;  
18.         penSizeShowLayout.addView(penCircleView,40,40);  
19.         showLineView.setAttr(6, Color.BLACK, mPenType) ;  
20.           
21.         initpenRadioGroupf(penSetView);  
22.     }  

我们是在长按事件中弹出对话框：

[java]  view plain copy

1. @Override  
2.     public boolean onLongClick(View v) {  
3.         // TODO Auto-generated method stub  
4.         updateLineShow();  
5.         if(penSetPop == null){  
6.             penSetPop = new PopupWindow(penSetView,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);          
7.             penSetPop.setBackgroundDrawable(getResources().getDrawable(R.drawable.popover_background_left));    
8.             penSetPop.setFocusable(true);  
9.             penSetPop.setOutsideTouchable(true);  
10.             penSetPop.showAsDropDown(mAddPicButton,0,0);  
11.             initColorViews();  
12.         }else{  
13.             penSetPop.setFocusable(true);  
14.             penSetPop.setOutsideTouchable(true);  
15.             penSetPop.showAsDropDown(mAddPicButton,0,0);  
16.             penSetPop.update();  
17.         }  
18.         return true;//返回false时，点击事件还会响应；返回true，长按事件后点击事件就不响应了  
19.     }  

画笔的样式我们共做了四种样式，分别是铅笔、毛笔、签字笔、水彩笔，样式设置主要是通过类BlurMaskFilter和EmbossMaskFilte，通过改变他们的属性变量值来改变画笔书写效果，比如投影值、透明度等，将类BlurMaskFilter和EmbossMaskFilte的实例对象设置好后通过类Paint的方法：setMaskFilter（）来传给画笔paint

[java]  view plain copy

1. /** 
2.      * 功能：设置画笔风格 
3.      * @param mPaintType 
4.      * @return 
5.      */  
6.      private MaskFilter getMaskFilter(int mPaintType){  
7.             MaskFilter maskFilter = null;  
8.             switch (mPaintType) {  
9.             case PEN_TYPE.PLAIN_PEN://签字笔风格  
10.                 maskFilter = null;  
11.                 break;  
12.             case PEN_TYPE.BLUR://铅笔模糊风格  
13.                 maskFilter = new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL);  
14.                 break;  
15.             case PEN_TYPE.EMBOSS://毛笔浮雕风格  
16.                 maskFilter = new EmbossMaskFilter(new float[] { 1, 1, 1 }, 0.4f, 6, 3.5f);   
17.                 break;  
18.             case PEN_TYPE.TS_PEN://透明水彩风格  
19.                 maskFilter = null;  
20.                 mPenPaint.setAlpha(50);  
21.                 break;  
22.             default:  
23.                 maskFilter = null;  
24.                 break;  
25.             }  
26.             mPenPaint.setMaskFilter(maskFilter);  
27.             return maskFilter;  
28.         }  

在对话框中我们四个画笔选项：

[java]  view plain copy

1. /** 
2.      * 功能：操作设置画笔风格 
3.      * @param view 
4.      */  
5.     private void initpenRadioGroupf(View view) {  
6.   
7.         plainpen = (RadioButton) view.findViewById(R.id.buttonPlainPen);  
8.         plainpen.setChecked(true);  
9.         penRadioGroupf  
10.                 .setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
11.                     @Override  
12.                     public void onCheckedChanged(RadioGroup group, int checkedId) {               
13.                         if (checkedId == -1) {  
14.                             return;  
15.                         }  
16.                         switch (checkedId) {  
17.                         case R.id.buttonBlurPen:  
18.                             setToolTyle(PEN_TYPE.BLUR);  
19.                             break;  
20.                         case R.id.buttonEmboss:  
21.                             setToolTyle(PEN_TYPE.EMBOSS);  
22.                             break;  
23.                         case R.id.buttonPlainPen:  
24.                             setToolTyle(PEN_TYPE.PLAIN_PEN);  
25.                             break;  
26.                         case R.id.buttonSelectBackGroundColor:  
27.                             setToolTyle(PEN_TYPE.TS_PEN);  
28.                             break;  
29.                         default:  
30.                             break;  
31.                         }  
32.                         updateLineShow();  
33.                     }  
34.                 });  
35.     }  
36.       
37.     /** 
38.      * 功能：设置画笔的样式 
39.      *  */  
40.     private void setToolTyle(int type) {  
41.         //mPaintView.setCurrentPainterType(type);  
42.         mPenType = type;  
43.   
44.     }  

同时我们设置了十种颜色的选项，通过RadioGroup控件来动态添加选项，每一组五种，分成两组：

[java]  view plain copy

1. /** 
2.      * 功能：显示颜色选择视图ColorRadioGroup 
3.      */  
4.     private void initColorRadioGroup() {  
5.         mColorViewList = new ArrayList<ColorView>();  
6.         mColorViewList.add(colorView1);  
7.         mColorViewList.add(colorView2);  
8.         mColorViewList.add(colorView3);  
9.         mColorViewList.add(colorView4);  
10.         mColorViewList.add(colorView5);  
11.         RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(  
12.                 COLOR_VIEW_SIZE, COLOR_VIEW_SIZE);  
13.         params.setMargins(1, 2, 6, 6);  
14.   
15.         for (ColorView colorView : mColorViewList) {  
16.             colorRadioGroup.addView(colorView, params);  
17.             colorView.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
18.                 @Override  
19.                 public void onCheckedChanged(CompoundButton buttonView,  
20.                         boolean isChecked) {  
21.                     for (ColorView colorView : mColorViewList) {  
22.                         if (buttonView.equals(colorView)  
23.                                 && buttonView.isChecked()) {  
24.                               
25.                             colorRadioGroup2.clearCheck();  
26.                             penColor = colorView.getColor();  
27.                             updateLineShow();  
28.                         }  
29.                     }  
30.                 }  
31.             });  
32.         }  
33.     }  
34.       
35.     /** 
36.      * 功能：显示颜色选择视图ColorRadioGroup2 
37.      */  
38.     private void initColorRadioGroup2() {  
39.         mColorViewList2 = new ArrayList<ColorView>();  
40.         mColorViewList2.add(colorView7);  
41.         mColorViewList2.add(colorView8);  
42.         //mColorViewList.add(colorView9);  
43.         mColorViewList2.add(colorView10);  
44.         mColorViewList2.add(colorView11);  
45.         //mColorViewList.add(colorView12);  
46.         mColorViewList2.add(colorView13);  
47.         RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(  
48.                 COLOR_VIEW_SIZE, COLOR_VIEW_SIZE);  
49.         params.setMargins(1, 2, 6, 6);  
50.   
51.         for (ColorView colorView2 : mColorViewList2) {  
52.             colorRadioGroup2.addView(colorView2, params);  
53.             colorView2.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
54.                 @Override  
55.                 public void onCheckedChanged(CompoundButton buttonView,  
56.                         boolean isChecked) {  
57.                     for (ColorView colorView2 : mColorViewList2) {  
58.                         if (buttonView.equals(colorView2)  
59.                                 && buttonView.isChecked()) {  
60.                             //set the first row unchecked  
61.                             colorRadioGroup.clearCheck();  
62.                             penColor = colorView2.getColor();  
63.                             updateLineShow();  
64.                         }  
65.                     }  
66.                 }  
67.             });  
68.         }  
69.     }  

选中后更新两个view：

[java]  view plain copy

1. /** 
2.      * 功能：更新画笔线条的粗细 
3.      */  
4.     private void updateLineShow(){  
5.         showLineView.setAttr(penSize, penColor, mPenType) ;  
6.         penCircleView.penAttrChange(penSize, penColor) ;  
7.         //ColorDrawable colorDrawable = new ColorDrawable(mPaintView.getPenColor()) ;  
8.         //pencolor.setBackgroundColor(mPaintView.getPenColor()) ;  
9.     }  

进度条来设置画笔的粗细：

[java]  view plain copy

1. @Override  
2.     public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {  
3.         // TODO Auto-generated method stub  
4.         penSize = progress;  
5.         updateLineShow();  
6.     }  

这样设置对话框基本就完成了，我们设置好，要将相应的数值传递给画笔，我们是通过三个全局变量来保存画笔的颜色、粗细、风格的。

[java]  view plain copy

1. paint.setColor(MuPDFActivity.penColor); //设置画笔的颜色  
2.         paint.setStrokeWidth(MuPDFActivity.penSize);//设置画笔的粗细  
3.         getMaskFilter(MuPDFActivity.mPenType);  

当然了我们在实现过程中远比这要复杂，我们创建了几个画笔的接口文件已经封装了几个工具类，我们就不详细说了，可以看看项目的源码。好了，到此今天我们的任务就算结束了，现在读取pdf和书写画板都实现了，剩下就是怎么在pdf上签名了，下一篇我们将继续介绍最关键的一部分-在pdf文件上添加签名。欢迎大家继续关注，由于今天的代码比较多，在文章的最后面我们会将今天的代码分享给大家，项目运行是正常的，如果你在运行中出现问题，请在博客下面留言，大家一起讨论……