Android中实现点击样式和未点击样式的切换

Android中实现点击样式和未点击样式的切换

比如我们的输入框，需要在用户未触发焦点时显示一个样式，触发后显示另一个样式。

界面控件，这里使用了ClearableEditText插件实现，参考：https://github.com/Cielsk/clearable-edittext官方文档查看使用方法，不用这个也可以，这里只是讲解样式的切换。

<com.cielyang.android.clearableedittext.ClearableEditText
            android:id="@+id/username"
            style="@style/EditText.SingleLine.Border"
            android:layout_width="0dp"
            android:drawableStart="@drawable/input_username"
            android:hint="@string/enter_phone_or_email"
            app:clearIconDrawWhenFocused="true"
            app:clearIconDrawable="@drawable/close"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

​ 通过 style 封装通用样式，参考：Android中实现封装通用样式-优快云博客，通过background设置背景颜色的点击和切换。

    <!--单行输入框，圆角边框-->
    <style name="EditText.SingleLine.Border">
        <item name="android:background">@drawable/selector_edit_text_border</item>
        <item name="android:layout_marginTop">@dimen/padding_large</item>
    </style>

selector_edit_text_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--获取到焦点-->
    <item android:drawable="@drawable/shape_edit_text_selected_border" android:state_focused="true" />

    <!--默认状态-->
    <item android:drawable="@drawable/shape_edit_text_border" />
</selector>

shape_edit_text_selected_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--填充颜色为透明-->
    <solid android:color="@color/transparent" />

    <stroke
        android:width="@dimen/d1"
        android:color="?attr/colorPrimary" />

    <!--圆角-->
    <corners android:radius="@dimen/d5" />
</shape>

shape_edit_text_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--填充颜色为透明-->
    <solid android:color="@color/transparent" />

    <!--边框为灰色-->
    <stroke
        android:width="@dimen/d1"
        android:color="@color/black11" />

    <!--圆角-->
    <corners android:radius="@dimen/d5" />
</shape>