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

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

一、添加属性文件
在values文件夹中新建attrs.xml文件,在文件中新建属性文件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<resources> 

 <!-- 自定义属性开始 -->
 <declare-styleable name="BorderTextView">
  <attr name="layout_borders" format="boolean"></attr>
  <attr name="layout_borderLeft" format="boolean"></attr>
  <attr name="layout_borderTop" format="boolean"></attr>
  <attr name="layout_borderRight" format="boolean"></attr>
  <attr name="layout_borderBottom" format="boolean"></attr>
 </declare-styleable>
 <!-- 自定义属性结束 --> 

</resources>

其中需要说明的是,自定义属性文件的根节点页是<resources>,在根节点内创建你所需要的属性值,自定义属性的节点是以<declare-styleable>开始的,它表示的是个属性集可以包含众多属性,其中name="BorderTextView"是属性集名。接着在<declare-styleable>中定义我们需要的以<attr>为节点的属性,attr表示属性的意思name表示当前属性的名称,format表示的是属性值的类型,例如我们当前定义的属性类型为boolean类型,也就是说当前定义的属性取值只能为boolean类型的,format可以表示的的类型有好多种,最常见的如:string,boolean,integer,dimension,reference等这,里就不再详细讲解了,如果谁有疑问,可以自己动手问问度娘,她知道的比我多,呵呵
二、使用自定义属性
在attrs.xml文件中定义好了属性,就可以在布局文件中使用了,接下来看看在布局文件中如何使用自定义属性吧,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:greendroid="http://schemas.android.com/apk/res/com.llew.e"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:background="#ffffff"
 android:layout_height="fill_parent">
 <TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_margin="10dip"
  android:text="@string/hello"
  android:textColor="#000000" /> 

 <com.llew.e.view.wedgit.BorderTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="左侧带有边框"
  android:layout_margin="10dip"
  greendroid:layout_borderLeft="true"
  android:textSize="20sp"
  android:textColor="#aabbcc">
 </com.llew.e.view.wedgit.BorderTextView> 

 <com.llew.e.view.wedgit.BorderTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="顶部带有边框"
  android:layout_margin="10dip"
  greendroid:layout_borderTop="true"
  android:textSize="20sp"
  android:textColor="#bbccaa">
 </com.llew.e.view.wedgit.BorderTextView> 

 <com.llew.e.view.wedgit.BorderTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="右侧带有边框"
  android:layout_margin="10dip"
  greendroid:layout_borderRight="true"
  android:textSize="20sp"
  android:textColor="#ccaabb">
 </com.llew.e.view.wedgit.BorderTextView> 

 <com.llew.e.view.wedgit.BorderTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="底部带有边框"
  android:layout_margin="10dip"
  greendroid:layout_borderBottom="true"
  android:textSize="20sp"
  android:textColor="#abcabc">
 </com.llew.e.view.wedgit.BorderTextView> 

 <com.llew.e.view.wedgit.BorderTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="四周带有边框"
  android:layout_margin="10dip"
  greendroid:layout_borders="true"
  android:textSize="20sp"
  android:textColor="#cbacba">
 </com.llew.e.view.wedgit.BorderTextView>
</LinearLayout> 

使用自定义控件也很简单就是包名+自定义控件名,为了使用我们自定义的属性,必须在布局文件的根节点中加上xmlns:greendroid="http://schemas.android.com/apk/res/com.llew.e"这句话,其中xmlns:greendroid表示的是命名空间名称,greendroid只是个名字是我们使用自定义属性的前缀,可以随便取值(只要不是android就行了),com.llew.e是在manifest中的package的对应值,使用自定义属性就想代码中的那样:greendroid:layout_borderLeft="true",(*^__^*) 嘻嘻……,是不是可简单?
三、根据自定义属性值做相应操作
完成自定义属性文件之后,我们就来为控件添加自定义的属性了,自定义控件我认为最简单的实现就是使用继承,在继承的基础上进行扩充来实现我们所要的功能,所以为了实现带边框的文本组件,我就直接继承了TextView组件,在它的基础上进行扩充了,代码如下:

public class BorderTextView extends TextView { 

 /**
  * 四周是否带有边框【true:四周带有边框】【false:四周不带边框】
  */
 boolean borders = false;
 /**
  * 左边是否带有边框【true:左侧带有边框】【false:左侧不带边框】
  */
 boolean borderLeft = false;
 /**
  * 顶部是否带有边框【true:顶部带有边框】【false:底部不带边框】
  */
 boolean borderTop = false;
 /**
  * 右侧是否带有边框【true:右侧带有边框】【false:右侧不带边框】
  */
 boolean borderRight = false;
 /**
  * 底部是否带有边框【true:底部带有边框】【false:底部不带边框】
  */
 boolean borderBottom = false;
 /**
  * 边框颜色
  */
 String textColor = "#ff000000"; 

 public BorderTextView(Context context) {
  this(context, null);
 } 

 public BorderTextView(Context context, AttributeSet attrs) {
  this(context, attrs, android.R.attr.textViewStyle);
 } 

 public BorderTextView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  // 获取自定义属性集
  TypedArray typedArray = context.obtainStyledAttributes(attrs,
    R.styleable.BorderTextView);
  // 是否设置全部边框,默认为false
  borders = typedArray.getBoolean(
    R.styleable.BorderTextView_layout_borders, false);
  // 是否设置左侧边框,默认为false
  borderLeft = typedArray.getBoolean(
    R.styleable.BorderTextView_layout_borderLeft, false);
  // 是否设置顶部边框,默认为false
  borderTop = typedArray.getBoolean(
    R.styleable.BorderTextView_layout_borderTop, false);
  // 是否设置右侧边框,默认为false
  borderRight = typedArray.getBoolean(
    R.styleable.BorderTextView_layout_borderRight, false);
  // 是否设置底部边框,默认为false
  borderBottom = typedArray.getBoolean(
    R.styleable.BorderTextView_layout_borderBottom, false);
  // 获取文本颜色值,用来画边框的,便于和文本颜色匹配
  textColor = attrs.getAttributeValue(
    "http://schemas.android.com/apk/res/android", "textColor");
  typedArray.recycle();
 } 

 @Override
 public void draw(Canvas canvas) {
  super.draw(canvas);
  // 创建画笔
  Paint paint = new Paint();
  // 获取该画笔颜色
  int color = paint.getColor();
  // 设置画笔颜色
  paint.setColor(Color.parseColor(textColor));
  // 如果borders为true,表示左上右下都有边框
  if (borders) {
   canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint);
   canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);
   canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1,
     this.getHeight() - 1, paint);
   canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1,
     this.getHeight() - 1, paint);
  } else {
   if (borderLeft) {
    // 画左边框线
    canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint);
   }
   if (borderTop) {
    // 画顶部边框线
    canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);
   }
   if (borderRight) {
    // 画右侧边框线
    canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1,
      this.getHeight() - 1, paint);
   }
   if (borderBottom) {
    // 画底部边框线
    canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1,
      this.getHeight() - 1, paint);
   }
  }
  // 设置画笔颜色归位
  paint.setColor(color);
 }
} 

其实给BorderTextView添加边框也是很简单,原理就是其draw方法中绘画出边框罢,我们都知道每一个View控件在屏幕上显示出来大致可以归纳为三大步骤,首先调用View控件的onMesure方法,其次调用View控件的onLayout方法,再次调用View控件的onDraw方法,所以我们只需要在draw方法中绘制出边框就行了,绘制边框的步骤很简单,代码注释也很详细,就不再详细讲解了
最后运行一下程序来看一下效果图吧,呵呵

好了,今天的自定义属性实现带边框的TextView控件就讲解完了,谢谢大家的阅读。

源码下载:Android UI实现带下划线的文本框

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android
, textview
ui设计
textview带下划线、css3 text文本框美化、vb中text文本框的属性、text文本框、input text文本框长度,以便于您获取更多的相关知识。

时间: 2024-11-08 20:16:10

Android UI设计系列之自定义TextView属性实现带下划线的文本框(4)_Android的相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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