Android学习笔记——自定义TextView模仿验证码效果
2015-12-16 17:10
477 查看
今天学习了 鸿洋老师 有关 android 自定义 view 起步 的相关博客(博客链接),并按着老师在博客中的讲解 自己去写了 demo,下面花点时间按照自己的理解写一下学习笔记吧;
android中自定义view 的实现 大体分以下几个步骤:
1.在res/values的 attrs.xml 中去定义所要实现view的样式
2.新建自定义view类 并 继承 View类,在构造函数中获取 自定义样式的属性
3.重写 onDraw;
4.重写 onMeasure(如果自定义view的宽或高 为 WRAP_CONTENT);
ok,get到自定义view的步骤后,就按部就班的开始吧,本次demo基本是按着鸿洋老师的那个来的,只不过后面加了些躁点来模拟验证码效果;
首先在 res/values 下新建 attrs.xml 来定义 CustomTextView 样式:
自定义样式名字为CustomTextView,并且定义了 三个属性,分别为:customTextViewText:表示文本内容,customTextViewTextColor:文本颜色,customTextViewTextSize:文本字体大小;
OK, 样式定义好后便进入下一步:写CustomTextView的类继承 View类
首先写CustomTextView 的构造函数,并在构造函数里拿到 自定义style的属性值 然后赋值给三个相应的类成员变量;再用画笔Paint的getTextBounds获得自定义view的宽和高;另外在构造函数里添加的clickListener是为了用于监听CustomTextView的点击事件以便作内容显示切换;OK,属性获得后 就可以开始绘制了,来重写 onDraw方法:
在onDraw()方法中分别绘制了 CustomTextView的大小,view中显示的文字以及用于模糊显示的黑点和线条。。。并没有重写 onMeasure() 因为 具体给出了 view的显示宽高。。
OK,接下来要做的事儿就是 让 view在每次点击之后显示不同的四位的数字,随机方法如下:
然后再在ClickListener中的 onClick 方法中 给 mTextViewText = randomText()即可;
最后在 所要用到该自定义view的布局之中添加如下代码:
OK, 最终效果如图:
OK, 这次笔记内容差不多就这些。。。 对于 自定义 view 还需要学习很多东西,加油加油~~
android中自定义view 的实现 大体分以下几个步骤:
1.在res/values的 attrs.xml 中去定义所要实现view的样式
2.新建自定义view类 并 继承 View类,在构造函数中获取 自定义样式的属性
3.重写 onDraw;
4.重写 onMeasure(如果自定义view的宽或高 为 WRAP_CONTENT);
ok,get到自定义view的步骤后,就按部就班的开始吧,本次demo基本是按着鸿洋老师的那个来的,只不过后面加了些躁点来模拟验证码效果;
首先在 res/values 下新建 attrs.xml 来定义 CustomTextView 样式:
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="customTextViewText" format="string"/> <attr name="customTextViewTextColor" format="color"/> <attr name="customTextViewTextSize" format="dimension"/> <declare-styleable name="CustomTextView"> <attr name="customTextViewText"/> <attr name="customTextViewTextColor"/> <attr name="customTextViewTextSize"/> </declare-styleable> </resources>
自定义样式名字为CustomTextView,并且定义了 三个属性,分别为:customTextViewText:表示文本内容,customTextViewTextColor:文本颜色,customTextViewTextSize:文本字体大小;
OK, 样式定义好后便进入下一步:写CustomTextView的类继承 View类
<pre name="code" class="java"> private String mTextViewText; private int mTextViewTextColor; private int mTextViewTextSize; private Rect mBound; private Paint mPaint; public CustomTextView(Context context){ this(context, null); } public CustomTextView(Context context, AttributeSet attrs){ this(context, attrs, 0); } public CustomTextView(Context context, AttributeSet attrs, int defStyle){ super(context,attrs,defStyle); //获得自定义样式属性 TypedArray a = context.getTheme().obtainStyledAttributes(attrs ,R.styleable.CustomTextView,defStyle , 0); int n = a.getIndexCount(); for(int i = 0; i<n; i++){ int attr = a.getIndex(i); switch (attr){ case R.styleable.CustomTextView_customTextViewText: mTextViewText = a.getString(attr); break; case R.styleable.CustomTextView_customTextViewTextColor: mTextViewTextColor = a.getColor(attr, Color.BLACK); break; case R.styleable.CustomTextView_customTextViewTextSize: mTextViewTextSize = a.getDimensionPixelSize(attr ,(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP , 16, getResources().getDisplayMetrics())); break; } } a.recycle(); mPaint = new Paint(); mPaint.setTextSize(mTextViewTextSize); mBound = new Rect(); mPaint.getTextBounds(mTextViewText, 0, mTextViewText.length(), mBound); //添加监听事件 用于 数字点击切换 this.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mTextViewText = randomText(); //UI刷新 postInvalidate(); //invalidate(); } }); }
首先写CustomTextView 的构造函数,并在构造函数里拿到 自定义style的属性值 然后赋值给三个相应的类成员变量;再用画笔Paint的getTextBounds获得自定义view的宽和高;另外在构造函数里添加的clickListener是为了用于监听CustomTextView的点击事件以便作内容显示切换;OK,属性获得后 就可以开始绘制了,来重写 onDraw方法:
<pre name="code" class="java"><pre name="code" class="java"> @Override protected void onDraw(Canvas canvas) { Random random = new Random(); //绘制view范围 mPaint.setColor(Color.YELLOW); canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint); //绘制view颜色 mPaint.setColor(mTextViewTextColor); canvas.drawText(mTextViewText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint); //绘制黑点来模糊数字显示 mPaint.setColor(Color.BLACK); for(int i = 0 ; i< 1000; i++) { canvas.drawCircle(random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredHeight()), 1, mPaint); } //绘制黑线同样为了模糊数字显示 mPaint.setColor(Color.BLUE); for(int i = 0; i< 15 ; i++) { canvas.drawLine(random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredWidth()), mPaint); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); }
在onDraw()方法中分别绘制了 CustomTextView的大小,view中显示的文字以及用于模糊显示的黑点和线条。。。并没有重写 onMeasure() 因为 具体给出了 view的显示宽高。。
OK,接下来要做的事儿就是 让 view在每次点击之后显示不同的四位的数字,随机方法如下:
private String randomText(){ Random random = new Random(); Set<Integer> set = new HashSet<Integer>(); while(set.size() <4){ int randomInt = random.nextInt(10); set.add(randomInt); } StringBuilder sb = new StringBuilder(); for(Integer i : set){ sb.append("" + i); } return sb.toString(); }
然后再在ClickListener中的 onClick 方法中 给 mTextViewText = randomText()即可;
最后在 所要用到该自定义view的布局之中添加如下代码:
<com.example.dxdrush.customviewdemo.views.CustomTextView android:layout_width="200dp" android:layout_height="100dp" android:layout_centerInParent="true" custom:customTextViewText="1234" custom:customTextViewTextColor="#ff2222" custom:customTextViewTextSize="40sp" />
OK, 最终效果如图:
OK, 这次笔记内容差不多就这些。。。 对于 自定义 view 还需要学习很多东西,加油加油~~
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories