今天主要是跟着 MDC-101 Android: Material Components (MDC) Basics (Kotlin)
准备工作：打开 app 下的 build.gradle 文件中 dependencies 依赖项中添加 api 'com.google.android.material:material:1.3.0'
第一篇要实现的效果：
要实现的效果
主要是要实现简单的登录效果。在这个小示例中，有 TextInputLayout ， TextInputEditText 和 MaterialButton 。
布局文件结果如下：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="@color/white"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:padding="24dp"
android:paddingTop="16dp">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="48dp"
android:layout_marginBottom="16dp"
app:srcCompat="@drawable/shr_logo"
android:contentDescription="@string/shr_logo_content_description" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="132dp"
android:text="@string/shr_app_name"
android:textAllCaps="true"
android:textSize="16sp" />
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/shr_hint_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/password_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/shr_hint_password"
app:errorEnabled="true"
app:passwordToggleEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="@string/shr_button_next" />
<com.google.android.material.button.MaterialButton
android:id="@+id/cancel_button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_toStartOf="@id/next_button"
android:text="@string/shr_button_cancel" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
结果在我的手机上，会发现并不是纯白的背景颜色，但是我截图以后在电脑上现实正常，我手机上显示偏蓝，不明显，但是还是能够看出来。
所对应的资源文件：
<!-- shr_logo.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="149dp"
android:height="152dp"
android:tint="?attr/colorControlNormal"
android:viewportWidth="149"
android:viewportHeight="152">
<path
android:fillAlpha="0.4"
android:fillColor="#DADCE0"
android:fillType="evenOdd"
android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
android:strokeWidth="1"
android:strokeAlpha="0.4"
android:strokeColor="#00000000" />
</vector>
这个就是很明显的那个 logo 。
<string name="shr_app_name">Shrine</string>
<string name="shr_logo_content_description">Shrine Logo</string>
<string name="shr_hint_username">用户名</string>
<string name="shr_hint_password">密码</string>
<string name="shr_button_next">登录</string>
<string name="shr_button_cancel">取消</string>
<string name="shr_error_password">密码格式不正确</string>
MDC Text Field features include:
- Displaying built-in error feedback
- Supporting a toggle for password visibility using
app:passwordToggleEnabled- Offering built-in helper text functionality using
app:helperText- Displaying total and max character counts using
app:counterEnabledandapp:counterMaxLength
除了上面使用的 app:errorEnabled="true" ，输入框还有上面的属性，也就是 TextInputLayout 有这样的属性。
MDC Button features include:
- Built-in touch feedback (called the MDC Ripple) by default
- Default elevation
- Customizable corner radius and stroke
这是按钮的。
下面就是所对应的 Activity 或 Fragment 中对应的逻辑：
next_button.setOnClickListener {
if (!isPasswordValid(password_edit_text.text)) {
password_text_input.error = getString(R.string.shr_error_password)
} else {
password_text_input.error = null // Clear the error
}
}
password_edit_text.setOnKeyListener { _, _, _ ->
if (isPasswordValid(password_edit_text.text)) {
password_text_input.error = null //Clear the error
}
false
}
可以看到上面我没有通过 findById 的方式获取节点，而是直接使用了定义的 id ，如果要实现类似的功能，需要在 app 下的 build.gradle 中上边添加 kotlin-android-extensions 。当然我们也可以直接使用 databinding 。其中的 isPasswordValid 函数定义如下：
private fun isPasswordValid(text: Editable?): Boolean {
return text != null && text.length >= 8
}
经过测试，我发现输入密码的时候如果刚开始出现了 密码格式不正确 ，那么在满足条件以后在模拟器上能够正常消失，但是在我的手机上并不能，不能是指当位数够了仍然还会显示，但是如果够了超出了几位，此时删除一位就会清除错误的那个提示。
网友评论