Android自定义控件之可自定义背景颜色的圆角TextView

2016-07-12

前言

最近在做一个需求,就是实现一个可以自定义背景颜色,并且是圆角的TextView,如下图:

01

这个自定义控件实现起来非常简单,简要说一下思路吧:

  1. 最好继承TextView,这样就能继承TextView已有的功能
  2. 实现圆角TextView最简单的方法就是写一个包含圆角的Shape然后设置成TextView的背景
  3. 自定义TextView的背景颜色,就是要在修改这个Shape的背景颜色而不是修改TextView的背景颜色

第1点和第2点都比较常规,第3点如果对Drawable不太了解的话,不查资料是很难知道怎么解决的,下面来说说如何实现吧。

1 新建圆角背景

在res/drawable下新建一个xml,姑且取名为background_text_view_with_corners.xml,xml的内容如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="@android:color/black" />

<corners android:radius="2.5dp" />

</shape>

这个color的值只是一个默认样式的值,所以设置一个任意的就好。

2 新建自定义TextView

新建一个Java类继承TextView,干脆叫TextViewWithCorners,实现如下:

public class TextViewWithCorners extends TextView {
public TextViewWithCorners(Context context) {
super(context);
init();
}

public TextViewWithCorners(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public TextViewWithCorners(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
setBackgroundResource(R.drawable.background_text_view_with_corners);
}
}

可见,只是在初始化的时候,将背景设置成了刚才创建的圆角背景。那么,如果改变这个圆角背景的颜色呢?

3 实现自定义圆角背景的颜色

这里要用到的是GradientDrawable这个类,详细的资料可以自行搜索,我们将TextViewWithCornerssetBackgroundColor(int color)方法重写,完整代码如下:

public class TextViewWithCorners extends TextView {
protected GradientDrawable mGradientDrawable;

public TextViewWithCorners(Context context) {
super(context);
init();
}

public TextViewWithCorners(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public TextViewWithCorners(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
setBackgroundResource(R.drawable.background_text_view_with_corners);
}

@Override
public void setBackgroundColor(int color) {
mGradientDrawable.setColor(color);
}
}

这样,这个可以自定义背景颜色并且是圆角的TextView就算完成了。

4 实际使用

在实际使用中也很简单,首先看看布局文件:

<TextViewWithCorners
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:textColor="@android:color/white"
android:text="可自定义背景颜色的圆角TextView"/>

可见,和TextView的用法没什么差别,为了显示效果,需要给首尾添加一个Padding,然后将textColor设置成和背景色有一定反差的颜色。

然后看看在代码中如何设置背景颜色:

TextViewWithCorners textViewWithCorners = (TextViewWithCorners) findViewById(R.id.tv);
textViewWithCorners.setBackgroundColor(Color.parseColor("#5EDD9E"));

这样,就能实现文章开头中图片的效果了。

noBorder

除非另有声明,本博客所有文章采用的授权方式为 自由转载-非商用-非衍生-保持署名 ,转载请务必注明出处,谢谢。

文章评论



章节列表