[关闭]
@ZeroGeek 2015-08-19T06:13:45.000000Z 字数 10212 阅读 804

从Zero开始自定义View （三 )

view android

http://developer.android.com/intl/zh-cn/reference/android/graphics/Canvas.html
http://developer.android.com/intl/zh-cn/reference/android/graphics/Paint.html

结合官网详细学习一遍Canvas和Paint的用法，再做一个验证码生成器

1. Paint

1.1 简介

提供绘制几何图形，文本，位图的样式和颜色。

1.2 构造方法

  • Paint()
  • Paint(int flags) flags涉及一些图形学概念，如锯齿，抖动，平滑等绘制效果
  • Paint(Paint paint)

通常我们使用第一种就好

1.3 公有方法

重头戏（这里我没一一列举，列举一些常用的，详细自行查阅）

  • void clearShadowLayer() //清除阴影层
  • int getAlpha()
  • int getColor()
  • boolean getFillPath(Path src, Path dst)
  • int getFlags()
  • int getHinting()
  • PathEffect getPathEffect()
  • Paint.Style getStyle()
  • Paint.Align getTextAlign()
  • void getTextBounds(char[] text, int index, int count, Rect bounds)
  • void getTextBounds(String text, int start, int end, Rect bounds)
  • void getTextPath(char[] text, int index, int count, float x, float y, Path path)
  • int getTextWidths(String text, int start, int end, float[] widths)
  • void reset()
  • void set(Paint src)
  • void setARGB(int a, int r, int g, int b)
  • void setAlpha(int a)
  • void setColor(int color)
  • void setFlags(int flags)
  • void setHinting(int mode)
  • void setStyle(Paint.Style style)

Canvas

1.1 简介

1.2 构造方法

1.3 共有常用方法

看着看着就不想翻译了=。= ！ 建议先去复习下计算机图形学...

构造函数说明

参考 ： http://www.cnblogs.com/angeldevil/p/3479431.html

如果在Code中实例化一个View会调用第一个构造函数，如果在xml中定义会调用第二个构造函数，而第三个函数系统是不调用的，要由View显式调用，比如我们可以在第二个构造函数中调用了第三个构造函数。
第三个参数的意义就如同它的名字所说的，是默认的Style，只是这里没有说清楚，这里的默认的Style是指它在当前Application或Activity所用的Theme中的默认Style。

建议分析TextView的源码，得出自定义View的一些技巧或方法

做个验证码生成器

参考：http://blog.csdn.net/lmj623565791/article/details/24252901

首先贴出核心的代码，重要地方都标有注释：

  1. package com.zero.apptest;
  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.Canvas;
  6. import android.graphics.Color;
  7. import android.graphics.Paint;
  8. import android.graphics.Point;
  9. import android.graphics.Rect;
  10. import android.util.AttributeSet;
  11. import android.util.Log;
  12. import android.util.TypedValue;
  13. import android.view.View;
  15. import java.util.ArrayList;
  16. import java.util.List;
  18. /**
  19.  * 生成数字验证码
  20.  * Created by zero on 15-8-18.
  21.  */
  22. public class RandomView extends View implements View.OnClickListener{
  23.     private static final String TAG = "RandomView";
  25.     private String mTitleText;  //验证码内容
  26.     private int mTitleTextColor; //验证码数字颜色
  27.     private int mTitleTextSize; //数字大小
  29.     private Rect mBound;  //内容大小
  30.     private Paint mPaint;
  32.     public static final int LEVEL_NO = 0;
  33.     public static final int LEVEL_ONE = 1;
  34.     public static final int LEVEL_TWO = 2;
  36.     private int mNumber; //验证码数字个数
  38.     private int mLevel; //识别度
  40.     public RandomView(Context context,AttributeSet attrs) {
  41.         this(context, attrs, 0);
  42.     }
  44.     public RandomView(Context context) {
  45.         this(context,null);
  46.     }
  47.     /**
  48.      * 获得自定义样式属性
  49.      */
  50.     public RandomView(Context context, AttributeSet attrs, int defStyleAttr) {
  51.         super(context, attrs, defStyleAttr);
  53.         //设置默认属性
  54.         mNumber = 4;
  55.         mLevel = LEVEL_ONE;
  57.         //读取自定义属性
  58.         TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.RandomView, defStyleAttr, 0);
  59.         int n = typedArray.getIndexCount();
  60.         //遍历所有属性
  61.         for (int i = 0; i < n; i++) {
  62.             int attr = typedArray.getIndex(i);
  63.             switch (attr) {
  64.                 case R.styleable.RandomView_myText:
  65.                     mTitleText = typedArray.getString(attr);
  66.                     break;
  67.                 case R.styleable.RandomView_myTextColor:
  68.                     mTitleTextColor = typedArray.getColor(attr, Color.BLACK);  // 设置默认颜色
  69.                     break;
  70.                 case R.styleable.RandomView_myTextSize:
  71.                     //默认设置为16sp，TypeValue可以把sp转化为px
  72.                     mTitleTextSize = typedArray.getDimensionPixelSize(attr,
  73.                             (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,16,getResources().getDisplayMetrics()));
  74.                     break;
  75.             }
  76.         }
  77.         typedArray.recycle();  //需要回收
  78.         mPaint = new Paint();
  79.         mPaint.setTextSize(mTitleTextSize);
  80.         mBound = new Rect();
  81.         mPaint.getTextBounds(mTitleText,0,mTitleText.length(),mBound);
  83.         setOnClickListener(this); //注意绑定监听点击事件
  84.     }
  86.     @Override
  87.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  89.         //分宽，高来测量，先学习三种模式MeasureSpec.EXACTLY，MeasureSpec.AT_MOST,MeasureSpec.UNSPECIFIED
  90.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  91.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  93.         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  94.         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  96.         int width;
  97.         int height ;
  99.         if (widthMode == MeasureSpec.EXACTLY) {
  100.             width = widthSize;
  101.         } else {
  102.             mPaint.setTextSize(mTitleTextSize);
  103.             mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
  104.             float textWidth = mBound.width();
  105.             int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
  106.             width = desired;
  107.         }
  109.         if (heightMode == MeasureSpec.EXACTLY) {
  110.             height = heightSize;
  111.         } else {
  112.             mPaint.setTextSize(mTitleTextSize);
  113.             mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
  114.             float textHeight = mBound.height();
  115.             int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
  116.             height = desired;
  117.         }
  119.         //注意必须设置
  120.         setMeasuredDimension(width, height);
  121.     }
  123.     @Override
  124.     protected void onDraw(Canvas canvas) {
  125.         super.onDraw(canvas);
  126.         final float textWith = mBound.width();
  127.         final float textHeight = mBound.height();
  129.         final int width = getMeasuredWidth();
  130.         final int height = getMeasuredHeight();
  132.         mPaint.setColor(Color.parseColor("#BDC3C7"));
  133.         canvas.drawRect(0, 0, width, height, mPaint);
  135.         mPaint.setColor(mTitleTextColor);
  136.         canvas.drawText(mTitleText, width / 2 - textWith / 2, height / 2 + textHeight / 2, mPaint);
  138.         switch (mLevel) {
  139.             case LEVEL_NO:
  140.                 break;
  141.             case LEVEL_ONE:
  142.                 paintComplex(20,20,width,height,canvas);
  143.                 break;
  144.             case LEVEL_TWO:
  145.                 paintComplex(40,40,width,height,canvas);
  146.                 break;
  147.             default:
  148.                 break;
  149.         }
  150.     }
  152.     @Override
  153.     public void onClick(View v) {
  154.         mTitleText = getRandomNumbers(mNumber);
  155.         requestLayout();   //请求重新设置布局调用onMeasure()
  156.         invalidate();  //请求重绘，调用onDraw()
  157.     }
  159.     public void setNumber(int number) {
  160.         if (number > 0 && number < 10) {
  161.             mNumber = number;
  162.         }
  163.     }
  165.     /**
  166.      * 生成n位的数字串
  167.      * @param n
  168.      * @return
  169.      */
  170.     private String getRandomNumbers(int n) {
  171.         String str = " ";
  172.         for (int i = 0; i < n; i++) {
  173.             str += (int)(Math.random()*10);
  174.         }
  175.         Log.d(TAG,"str="+str);
  176.         return str.trim();
  177.     }
  179.     //得到小于10的随机正整数
  180.     private int getRandomTen() {
  181.         return (int)(Math.random()*10);
  182.     }
  184.     /**
  185.      * 设置验证码识别度
  186.      * @param level
  187.      */
  188.     public void setLevel(int level) {
  189.         if (level == LEVEL_NO) {
  190.             mLevel = LEVEL_NO;
  191.         } else if (level == LEVEL_ONE) {
  192.             mLevel = LEVEL_ONE;
  193.         } else if (level == LEVEL_TWO) {
  194.             mLevel = LEVEL_TWO;
  195.         } else {
  196.             mLevel = LEVEL_ONE;  //默认样式
  197.         }
  198.     }
  200.     /**
  201.      *获得在宽w，高h矩形中随机n个点
  202.      */
  203.     private List<Point> getRandomPoint(int n, int w, int h) {
  204.         List<Point> list = new ArrayList<>();
  205.         for (int i = 0; i < n; i++ ) {
  206.             int x = (int)(Math.random()*1000) % w;
  207.             int y = (int)(Math.random()*1000) % h;
  208.             Point point = new Point(x,y);
  209.             list.add(point);
  210.         }
  211.         return list;
  212.     }
  214.     /**
  215.      * 画上一些散落的圆点和线段
  216.      */
  217.     private void paintComplex (int circleTotal,int lineTotal,int width,int height,Canvas canvas) {
  218.         List<Point> circles= getRandomPoint(circleTotal,width,height); //得到15个圆心
  219.         mPaint.setColor(Color.parseColor("#34495E"));
  220.         for (int i = 0 ; i < circles.size() ; i++) {
  221.             canvas.drawCircle(circles.get(i).x,circles.get(i).y,4,mPaint);
  222.         }
  223.         List<Point> lines= getRandomPoint(lineTotal,width,height); //得到10个点，作为弧的左顶点
  224.         mPaint.setColor(Color.GREEN);
  225.         for (int i = 0 ; i < lines.size() ; i++) {
  226.             int x = lines.get(i).x;
  227.             int y = lines.get(i).y;
  228.             canvas.drawLine(x,y,x+getRandomTen(),y+getRandomTen(),mPaint);
  229.         }
  230.     }
  231. }

在res/value/下创建attrs.xml，设置自定义属性：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="RandomView" >
  4.         <attr name="myText" format="string" />
  5.         <attr name="myTextColor" format="color" />
  6.         <attr name="myTextSize" format="dimension" />
  7.     </declare-styleable>
  9. </resources>

main.xml :
注意 引入 xmlns:test="http://schemas.android.com/apk/res-auto" （在gradle构建下)，
如果是在eclipse则引入xmlns:test="http://schemas.android.com/apk/res/<包名>"
其中 ‘test’ ，是自己取个名字，与下面定义保持一致就行。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:test="http://schemas.android.com/apk/res-auto"
  4.     xmlns:android="http://schemas.android.com/apk/res/android"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     >
  9.     <android.support.design.widget.TextInputLayout
  10.         android:id="@+id/textInput"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content">
  13.         <EditText
  14.             android:layout_width="match_parent"
  15.             android:layout_height="wrap_content"
  16.             android:textColor="@android:color/black"/>
  17.     </android.support.design.widget.TextInputLayout>
  19.     <Spinner
  20.         android:id="@+id/spinner"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="80dp">
  23.     </Spinner>
  25.     <Button
  26.         android:id="@+id/btn"
  27.         android:layout_width="match_parent"
  28.         android:layout_height="wrap_content"
  29.         android:text="Go"/>
  31.     <com.zero.apptest.RandomView
  32.         android:id="@+id/random"
  33.         android:layout_width="wrap_content"
  34.         android:layout_height="50dp"
  35.         test:myText="6890"
  36.         test:myTextColor="#ECF0F1"
  37.         test:myTextSize="26sp"
  38.         android:layout_gravity="center"
  39.         android:paddingLeft="5dp"
  40.         android:paddingRight="5dp"
  41.     />
  42. </LinearLayout>

然后是MainActivity中，主要代码

  1.     RandomView mRandomView;
  2.     TextInputLayout mTIL;
  3.     EditText mEt;
  4.     Button mBtn;
  5.     Spinner mSpinner;
  6.     int mLevel;
  7.     private static final String[] mRes={"无效果","等级1","等级2"};
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.main);
  14.         mLevel = RandomView.LEVEL_ONE;
  16.         mRandomView = (RandomView) findViewById(R.id.random);
  17.         mTIL = (TextInputLayout) findViewById(R.id.textInput);
  18.         mBtn = (Button) findViewById(R.id.btn);
  19.         mSpinner = (Spinner) findViewById(R.id.spinner);
  21.         mTIL.setHint("请输入验证码个数：");
  22.         mEt = mTIL.getEditText();
  23.         mEt.addTextChangedListener(new TextWatcher() {
  24.             @Override
  25.             public void beforeTextChanged(CharSequence s, int start, int count, int after) {
  26.             }
  27.             @Override
  28.             public void onTextChanged(CharSequence s, int start, int before, int count) {
  29.                 if (!isNumeric(s.toString())) {
  30.                     mTIL.setErrorEnabled(true);
  31.                     mTIL.setError("只能输入数字");
  32.                     mBtn.setEnabled(false);
  33.                 } else {
  34.                     mTIL.setErrorEnabled(false);
  35.                     mBtn.setEnabled(true);
  36.                 }
  37.             }
  38.             @Override
  39.             public void afterTextChanged(Editable s) {
  41.             }
  42.         });
  44.         ArrayAdapter<String> adapter = new ArrayAdapter<>(this,android.R.layout.simple_spinner_item,mRes);
  45.         adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  46.         mSpinner.setAdapter(adapter);
  47.         mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
  48.             @Override
  49.             public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
  50.                 switch (position) {
  51.                     case 0:
  52.                         mLevel = RandomView.LEVEL_NO;
  53.                         break;
  54.                     case 1:
  55.                         mLevel = RandomView.LEVEL_ONE;
  56.                         break;
  57.                     case 2:
  58.                         mLevel = RandomView.LEVEL_TWO;
  59.                         break;
  60.                 }
  61.             }
  62.             @Override
  63.             public void onNothingSelected(AdapterView<?> parent) {
  64.             }
  65.         });
  66.         mBtn.setOnClickListener(new View.OnClickListener() {
  67.             @Override
  68.             public void onClick(View v) {
  69.                 String str = mEt.getText().toString().trim();
  70.                 if (!str.equals(null) && !str.equals("")) {
  71.                     int n = Integer.parseInt(str);
  72.                     if (n > 0 && n < 10) {
  73.                         mRandomView.setNumber(n);
  74.                         mRandomView.setLevel(mLevel);
  75.                         Toast.makeText(getApplicationContext(),"设置成功",Toast.LENGTH_SHORT).show();
  76.                     } else {
  77.                         closeInput();
  78.                         final Snackbar snackbar = Snackbar.make(mTIL,"不能超过10",Snackbar.LENGTH_LONG);
  79.                         snackbar.show();
  80.                         snackbar.setDuration(2000);
  81.                         snackbar.setAction("取消",new View.OnClickListener() {
  82.                             @Override
  83.                             public void onClick(View v) {
  84.                                 snackbar.dismiss();
  85.                             }
  86.                         });
  87.                     }
  88.                 }
  89.             }
  90.         });
  91.     }
  93.     private boolean isNumeric(String str) {
  94.         Pattern pattern = Pattern.compile("[0-9]*");
  95.         return pattern.matcher(str).matches();
  96.     }
  98.     private void closeInput() {
  99.         InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
  100.         imm.hideSoftInputFromWindow(mTIL.getWindowToken(), 0);
  101.     }

运行效果：
效果

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注