Material Design

MaterialTextField

作者：黑衣侠客

---

前言：

一直以来，Android由于一些原因，使得在iOS可以轻易实现的效果和风格，在Android端实现起来相当复杂，Google在2014年的IO大会上重新发布了Material
Design，随着近几年的发展，Material Design的设计风格已经融入了越来越多的APP，也同样被Android开发者所喜爱。

先要导入依赖：

implementation 'com.google.android.material:material:1.1.0'

实现代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp">
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:hint="account"
            app:endIconTint="@color/colorPrimary">
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/account"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp">
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:hint="password"
            app:endIconMode="password_toggle"
            app:endIconTint="@color/colorPrimary">
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:id="@+id/remember_pass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Remember Password"/>
    </LinearLayout>
    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="sign in"
        android:textAllCaps="false"/>
</LinearLayout>

之后通过重写LoginActivity.java中的方法
(重写了Button键的点击事件)

login = findViewById(R.id.login);
    boolean isRemember = preferences.getBoolean("记住密码",false);
    if(isRemember){
        //将账号和密码都设置到文本框中
        String account = preferences.getString("account","");
        String password = preferences.getString("password","");
        accountEdit.setText(account);
        passwordEdit.setText(password);
        rememberPass.setChecked(true);
    }
    login.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View view){
            String account = accountEdit.getText().toString();
            String password = passwordEdit.getText().toString();
            if(account.equals("admin")&&password.equals("123456")){
                editor = preferences.edit();
                if(rememberPass.isChecked()){//检查复选框是否被选中
                    editor.putBoolean("remember_password",true);
                    editor.putString("account",account);
                    editor.putString("password",password);
                }else{
                    editor.clear();
                }
                editor.apply();
                Intent intent = new Intent(LoginActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }else{
                Toast.makeText(LoginActivity.this, "账号或密码输入错误", Toast.LENGTH_SHORT).show();
            }
        }
    });
}

BottomAppBar

添加依赖：

implementation 'com.android.support:design:29.0.0-alpha1'
implementation 'com.android.support:support-v4:29.0.0-alpha1'
implementation 'com.android.support:appcompat-v7:29.0.0-alpha1'

实现代码：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottomAppBar"/>
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:fabAlignmentMode="center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

说明：
BottomAppBar必须在Coordinatorlayout下使用
app:fabAttached="true"用于添加FloatingActionButton
在FloatingActionButton中，必须设置app:layout_anchor为BottomAppBarID
此外还可以设置以下选项：

app:fabAlignmentMode：在BottomAppBar设置Button的位置，默认条件下它居中
app:fabCradleDiameter:设置切口圆弧直径
app:fabCradleVerticalOffset:设置FloatingActionButton与园弧切除的垂直距离
app:menu:用于设置菜单资源文件,同样，也可以通过编程的方式进行

MaterialButton

MaterialButton是Button的延伸，是Button上的新Material Design主题。
它直接提供了材质主题，无需添加样式或主题。
默认情况下，背景与colorAccent相同

• app:icon：可用于设置除文本外可绘制图标
• app:iconTint:可用于设置图标的颜色
• app:iconPadding:设置填充
• app:rippleColor:用于设置单击按钮时的波纹颜色
• app:strokeColor:用于设置按钮上的边框颜色
• app:strokeWidth:用于设置边框的宽度
• app:cornerRadius:用于设置拐角处的半径