Android Material Desing 控件小结-1 |

总结一下 Material Design 控件使用。

TextInputLayout

TextInputLayout 控件是一个容器，只接受一个子元素，而子元素需要是一个 EditText 控件。

TextInputLayout 的作用是当输入文字时，它可以把提示文字 Hint 移至 EditText 上方。

 1    <android.support.design.widget.TextInputLayout
 2        android:layout_width="0dp"
 3        android:layout_height="wrap_content"
 4        android:layout_marginStart="8dp"
 5        app:layout_constraintLeft_toLeftOf="parent"
 6        android:layout_marginEnd="8dp"
 7        app:layout_constraintRight_toRightOf="parent"
 8        android:layout_marginTop="8dp"
 9        app:layout_constraintTop_toBottomOf="@+id/usernameLayout"
10        android:id="@+id/passwordLayout"
11        >
12
13        <EditText
14            android:id="@+id/password"
15            android:layout_width="match_parent"
16            android:layout_height="wrap_content"
17            android:hint="hint"/>
18    </android.support.design.widget.TextInputLayout>

而当 EditText 中输入的内容不正确时，TextInputLayout 还能够进行错误的处理。setError 方法会在 EditText 下方显示红色的错误消息。setErrorEnabled方法开启错误提醒功能，使用代码如下：

 1 String username = mUsernameLayout.getEditText().getText().toString();
 2        String password = mPasswordLayout.getEditText().getText().toString();
 3
 4        if (!username.equals(RIGHT_NAME)){
 5            mUsernameLayout.setError("not right username");
 6            Log.d(TAG,"not right username");
 7        }else if (!password.equals(RIGHT_PASSWORD)){
 8            mPasswordLayout.setError("not right password");
 9            Log.d(TAG,"not right password");
10        }else {
11            // 取消错误提醒
12            mUsernameLayout.setErrorEnabled(false);
13            mPasswordLayout.setErrorEnabled(false);
14            Toast.makeText(TextInputActivity.this,"Welcome !",Toast.LENGTH_SHORT).show();
15        }

TabLayout

TabLayout 控件是用来和 ViewPager 配合使用的。当滑动 ViewPager 内部的页面时需要让上方的 Tab 也随之移动时就可以考虑使用 TabLayout 了。

使用 ViewPager 还需要对应的 Adapter ，简单使用代码如下：

 1   mTabPagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
 2
 3        mViewpager.setAdapter(mTabPagerAdapter);
 4
 5        // 设置回调
 6        mViewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
 7        // 设置 Tab 模式
 8        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
 9
10        mTabLayout.setupWithViewPager(mViewpager);

初次之后，还可以给 TabLayout 设置各种属性，既可以从 XML 布局中添加，也可以在代码中通过 set 方法来设置，如下图所示：

tablayout-attribute

Toolbar 可以用来替换 ActionBar 的，如果要替换 ActionBar ，那么在使用时，需要配置 Activity 的 theme 为Theme.AppCompat.NoActionBar，或者在对应的主题中加入如下：

1		<item name="windowActionBar">false</item>
2		<item name="android:windowActionBar">false</item>

不然会报错This Activity already has an action bar supplied by the window decor.

并且在代码中还需要添加 setSupportActionBar(toolbar);。

如果当做单独的控件来使用则不需要对主题进行设置。

Toolbar 也有各种设置选项，包括标题，子标题，Logo，菜单等。

1	mToolbar.setTitle("Title");
2        mToolbar.setSubtitle("SubTitle");
3        mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
4        mToolbar.inflateMenu(R.menu.toolbar_menu);
5        mToolbar.setLogo(R.mipmap.ic_launcher);

其中，当想给 Toolbar 弹出的菜单设置样式时，可以通过 popupTheme属性来设置样式。popupTheme 的样式可以自定义 style ，也可以使用安卓自带的。

参考

原创文章，转载请注明来源: Android Material Desing 控件小结-1

留言

TextInputLayout

TabLayout

Toolbar

参考

CATALOG