自定义View - 简单的TextView封装

引言

在平常的开发中,我们总会有各种各样的按钮,圆角的、直角的、正常状态的、按下状态的、禁用状态的。一直的做法就是在drawable中写一个selector,然后用item加shap来实现。这种做法实现起来也是非常简单,但是存在一个问题:当我们shap文件有上千个的时候,我们应该如何维护?

分析

先上一张图吧:

不同状态的按钮

仔细分析下来,图中的几个按钮都是差不多的,他们之间有着许多的相通点,像这种情况,我们真的需要为每一个TextView写一个单独的selector吗?按照我个人的理解,其实可以将这些不同的属性抽取出来做成自定义View。

确定属性

既然分析出了异同,那么我们就可以先确定好需要哪些属性,所谓磨刀不误砍柴工,编码之前有个完整的思路,能少走许多弯路。


属性名说明
TextRadius圆角
背景颜色相关
NormalBackgroundColor正常情况下的背景颜色
PressBackgroundColor按下情况下的背景颜色
DisableBackgroundColor禁用状态下的背景颜色
SelectedBackgroundColor选中状态下背景颜色
文字颜色相关
NormalTextColor正常情况下的文字颜色
PressTextdColor按下情况下的文字颜色
DisableTextColor禁用状态下的文字颜色
SelectedTextColor选中状态下文字颜色

开始编码

创建PressTextView

开始编码了,创建PressTextView继承至TextView,我的做法是将TextView当做Button来使用,好像是TextView有更好的拓展性。

创建好PressTextView

创建attr

class创建完成,在value目录下创建press_text_view_attr文件,将前面确定好的属性转换为attr,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PressTextView">
        <!--圆角-->
        <attr name="TextRadius" format="dimension" />
        <!--正常情况下的背景颜色-->
        <attr name="NormalBackgroundColor" format="color" />
        <!--按下情况下的背景颜色-->
        <attr name="PressBackgroundColor" format="color" />
        <!--禁用状态下的背景颜色-->
        <attr name="DisableBackgroundColor" format="color" />
        <!--选中状态下背景颜色-->
        <attr name="SelectedBackgroundColor" format="color" />
        <!--正常情况下的文字颜色-->
        <attr name="NormalTextColor" format="color" />
        <!--按下情况下的文字颜色-->
        <attr name="PressTextColor" format="color" />
        <!--禁用状态下的文字颜色-->
        <attr name="DisableTextColor" format="color" />
        <!--选中状态下文字颜色-->
        <attr name="SelectedTextColor" format="color" />
    </declare-styleable>
</resources>

初始化相关属性

这里定义的属性稍微有点多,而且将来相关属性可能会越来越多,所以选择创建一个config类来存储相关属性,减少PressTextView的代码量。

PressTextViewConfig内容:


/**不使用public修饰是不想其它模块进行访问*/
/*public*/ class PressTextViewConfig {
    /**
     * 圆角
     */
    public float TextRadius;
    /**
     * 正常情况下的背景颜色
     */
    public int NormalBackgroundColor;
    /**
     * 按下情况下的背景颜色
     */
    public int PressBackgroundColor;
    /**
     * 禁用状态下的背景颜色
     */
    public int DisableBackgroundColor;
    /**
     * 选中状态下背景颜色
     */
    public int SelectedBackgroundColor;
    /**
     * 正常情况下的文字颜色
     */
    public int NormalTextColor;
    /**
     * 按下情况下的文字颜色
     */
    public int PressTextColor;
    /**
     * 禁用状态下的文字颜色
     */
    public int DisableTextColor;
    /**
     * 选中状态下文字颜色
     */
    public int SelectedTextColor;
}

然后再PressTextView中定义一个PressTextViewConfig的属性,这样就可以方便的赋值和使用:

/**
 * 初始化相关属性
 *
 * @param context
 * @param attrs
 */
private void init(Context context, AttributeSet attrs) {
    mPressTextViewConfig = new PressTextViewConfig();

    // 打开样式资源
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PressTextView);

    //圆角
    mPressTextViewConfig.TextRadius = typedArray.getDimension(R.styleable.PressTextView_TextRadius, 5);

    // 正常背景颜色
    mPressTextViewConfig.NormalBackgroundColor = typedArray
            .getColor(R.styleable.PressTextView_NormalBackgroundColor,
                    0xff3F51B5);
    // 按下背景颜色
    mPressTextViewConfig.PressBackgroundColor = typedArray
            .getColor(R.styleable.PressTextView_PressBackgroundColor,
                    0xff303F9F);
    // 禁言背景颜色
    mPressTextViewConfig.DisableBackgroundColor = typedArray
            .getColor(R.styleable.PressTextView_DisableBackgroundColor,
                    0xffeeeeee);

    // 选中背景颜色
    mPressTextViewConfig.SelectedBackgroundColor = typedArray
            .getColor(R.styleable.PressTextView_SelectedBackgroundColor,
                    0xffFF4081);

    // 正常字体颜色
    mPressTextViewConfig.NormalTextColor = typedArray.getColor(R.styleable.PressTextView_NormalTextColor,
            Color.WHITE);
    // 按下字体颜色
    mPressTextViewConfig.PressTextColor = typedArray.getColor(R.styleable.PressTextView_PressTextColor,
            0xffeeeeee);
    // 禁用字体颜色
    mPressTextViewConfig.DisableTextColor = typedArray.getColor(R.styleable.PressTextView_DisableTextColor,
            0xff999999);
    // 选中字体颜色
    mPressTextViewConfig.SelectedTextColor = typedArray.getColor(R.styleable.PressTextView_SelectedTextColor,
            0xffcdcdcd);

    //释放资源
    typedArray.recycle();

    mPaint = new Paint();
    mPaint.setAntiAlias(true);

    setClickable(true);
    setFocusable(true);
}

绘制

我们继承的是TextView,所以其他逻辑可以直接忽略,包括宽高啊、测量之类的,只需要重写onDraw方法,在onDraw中进行绘制。而绘制有以下要点:

  • 因为背景使用圆角,所以使用drawRoundRect来进行绘制,而绘制的时机是在super.onDraw(canvas)之前进行绘制。
  • 需要判断不同的状态来使用不同的背景颜色和字体颜色
  • 设置字体颜色需要在super.onDraw(canvas)之后
  • 需要重写onTouchEvent方法,方法内不做其它事情,就为了调用postInvalidate方法触发绘制。

核心代码也比较简单,这里就直接全部贴上了:

@Override
protected void onDraw(Canvas canvas) {
    if (mBackgroundRectf == null) {
        mBackgroundRectf = new RectF(0, 0, getWidth(), getHeight());
    }
    // 画笔颜色
    mPaint.setColor(switchBackground());
    canvas.drawRoundRect(mBackgroundRectf, mPressTextViewConfig.TextRadius,
            mPressTextViewConfig.TextRadius,
            mPaint);

    super.onDraw(canvas);

    //设置字体颜色
    setTextColor(switchTextColor());
}

/**
 * 字体颜色
 */
private int switchTextColor() {
    if (!isEnabled()) {
        return mPressTextViewConfig.DisableTextColor;
    }
    // 按下状态
    if (isPressed()) {
        return mPressTextViewConfig.PressTextColor;
    }

    // 选中状态
    if (isSelected()) {
        return mPressTextViewConfig.SelectedTextColor;
    }
    return mPressTextViewConfig.NormalTextColor;
}

/**
 * 判断背景颜色
 *
 * @return
 */
private int switchBackground() {
    // 禁用状态
    if (!isEnabled()) {
        return mPressTextViewConfig.DisableBackgroundColor;
    }
    // 按下状态
    if (isPressed()) {
        return mPressTextViewConfig.PressBackgroundColor;
    }

    // 选中状态
    if (isSelected()) {
        return mPressTextViewConfig.SelectedBackgroundColor;
    }

    return mPressTextViewConfig.NormalBackgroundColor;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 触摸的时候重绘
    postInvalidate();
    return super.onTouchEvent(event);
}

使用

编写完成,现在在xml中进行引用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.jc.lib.view.PressTextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="正常可点击(有按下背景和字体颜色)"
        android:textSize="18sp"
        app:NormalBackgroundColor="#03a4f9"
        app:NormalTextColor="#fff"
        app:PressBackgroundColor="#3F51B5"
        app:PressTextColor="#eee"
        app:TextRadius="8dp" />

    <com.jc.lib.view.PressTextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="禁用状态"
        android:textSize="18sp"
        android:enabled="false"
        app:DisableBackgroundColor="#eeeeee"
        app:DisableTextColor="#999999"
        app:TextRadius="20dp" />

    <com.jc.lib.view.PressTextView
        android:id="@+id/mSelectTv"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="选中状态"
        android:textSize="18sp"
        app:SelectedBackgroundColor="@color/colorPrimaryDark"
        app:SelectedTextColor="#fff"
        app:TextRadius="4dp" />
</LinearLayout>

效果

现在就是验证编码成果的时候了。

结果

总结

其实这只是一个简单的TextView封装,并不难,有时候只是一个思路问题,由此延伸,我们的其他布局也是不是可以这样做呢?或者再加上边框、实线边框、虚线边框、上边框。这些就不一一去实现了,在这里主要是为了提供这样一个思路,我们更需要做的是跳出当前思想的局限性,用散发性思维去思考事物。

最后

未完待续、敬请期待!
免为其难的关注一下公众号吧!!

FullScreenDeveloper

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值