android笔记-Android Design支持包控件二（TextInputLayout 、TabLayout）

3、TextInputLayout    

        TextInputLayout继承自LinearLayout，用来把EditText包裹在该布局中，可以让hint文字变成一个在EditText上方的浮动标签，同时还包括一个漂亮的material动画。TextInputLayout只接受一个子元素。子元素需要是一个EditText元素。

        1）、使用方法

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp">
    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入姓名"/>
</android.support.design.widget.TextInputLayout>

        2）、TextInputLayout显示错误信息

        a、显示错误信息：

tilName.setError("登录名不能为空");

        b、清除错误信息显示

tilName.setErrorEnabled(false);
tilName.setError(null);

        3）、TextInputLayout颜色设置

android:textColorHint 表示hint的颜色，在布局文件中设置

colorControlNormal 表示下划线没有获取焦点的颜色，在style AppTheme中设置（布局文件设置无效）

colorControlActivated 表示获取焦点时的颜色，在style AppTheme中设置（布局文件设置无效）

单独给TextInputLayout设置style不成功，不知道为什么

        4）、自定义浮动标签样式

 先新建一个style

 <style name="hintAppearance"parent="TextAppearance.AppCompat">
       <item name="android:textSize">14sp</item>
       <item name="android:textColor">#ffee00</item>
</style>

在TextInputLayout中加入

app:hintTextAppearance="@style/hintAppearance"

        5）、自定义错误信息的样式

先新建一个style

<style name="TextInputLayoutErrMsgStyle">
    <item name="android:textColor">@color/blue_dark</item>
    <item name="android:textSize">16sp</item>
</style>

为TextInputLayout 设置属性app:errorTextAppearance

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    app:errorTextAppearance="@style/TextInputLayoutErrMsgStyle">
    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入姓名"/>
</android.support.design.widget.TextInputLayout>

        6）TextInputLayout的一些属性

app:hintEnable="false" 关闭浮动标签(默认是开启的)。关闭后和没有使用TextInputLayout效果一样

app:hintAnimationEnabled="false" 关闭浮动标签显示与隐藏之间有一个过渡动画(默认是开启的)

app:counterEnabled="true" 如果我们想要在EditText后面加个字数统计，例如当输入内容是固定位数时(例如手机号码)，我们可以让用户看到自己当前输入的长度。默认是关闭的

app:counterMaxLength="11" 设置一个输入的最大长度，如下：

        7）、输入密码时显示的图标

        a、打开图标，默认关闭

app:passwordToggleEnabled="true"//默认是关闭的

        b、自定义图标

app:passwordToggleDrawable="@mipmap/ic_launcher"

        c、给图标加颜色

app:passwordToggleTint="@color/colorAccent"

        d、给图标加颜色时混合模式

不用设置该属性，使用默认的就好

//screen,src_in,src_atop,src_over,multiply等几种设计模式
app:passwordToggleTintMode="screen"//screen

 

4、TabLayout

TabLayout提供了一个水平布局来显示tabs

1）、常用属性

app:tabIndicatorColor 设置指示器的颜色

app:tabIndicatorHeight 设置指示器的高度

app:tabPaddingStart  设置每个tab距离上下左右的padding 

app:tabPaddingEnd       

app:tabPaddingTop       

app:tabPaddingBottom

app:tabBackground 设置tab的背景色

app:tabSelectedTextColor 设置tab被选中时文字颜色

app:tabTextColor 设置tab未被选中时文字颜色

app:tabTextAppearance 使用style设置tab中文字的样式（如大小、颜色、禁止全大写）

2）、使用方法

xml中：

    <android.support.design.widget.TabLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/blue_black"
        app:tabIndicatorHeight="2dp"
        app:tabBackground="@color/grey"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"
        app:tabTextAppearance="@style/TabTextAppearance"/>

代码中：

        tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        // 注意：setupWithViewPager包含tablayout.addTab(tablayout.newTab().setText("Tab 1"));功能，不必单独调用
        tablayout.setupWithViewPager(viewPager);

        String tab = "table";
        tablayout.getTabAt(0).setText(tab + " 1");
        tablayout.getTabAt(1).setText(tab + " 2");
        tablayout.getTabAt(2).setText(tab + " 3");
        tablayout.getTabAt(3).setText(tab + " 4");
        tablayout.getTabAt(4).setText(tab + " 5");

注意：

        设置tab栏信息时，要在tablayout.setupWithViewPager(viewpager);之后，否则会出现tab上的文字不显示的问题。具体原因可以通过查看setupWithViewPager方法内部，里面执行了removeAllTabs()的操作。

3）、在Tab上显示图标

        TabLayout没有明确地提供向Tab中设置图标的途径。我们可以创建一个SpannableString（继承CharSequence），而将图标放置在ImageSpan中，设置在SpannableString中。

代码如下：

    private void initImageTabLayout() {
        imageTabLayout = (TabLayout) findViewById(R.id.image_tab_layout);
        imageTabLayout.addTab(imageTabLayout.newTab().setText(getPageTitle(0)));
        imageTabLayout.addTab(imageTabLayout.newTab().setText(getPageTitle(1)));
        imageTabLayout.addTab(imageTabLayout.newTab().setText(getPageTitle(2)));
        imageTabLayout.addTab(imageTabLayout.newTab().setText(getPageTitle(3)));
    }

    public CharSequence getPageTitle(int position) {
        Drawable drawable;
        switch (position) {
            case 0:
                drawable = ContextCompat.getDrawable(this, R.drawable.app_poslogon);
                break;
            case 1:
                drawable = ContextCompat.getDrawable(this, R.drawable.app_query);
                break;
            case 2:
                drawable = ContextCompat.getDrawable(this, R.drawable.app_setting);
                break;
            default:
                drawable = ContextCompat.getDrawable(this, R.drawable.app_settle);
                break;
        }
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
        SpannableString spannableString = new SpannableString(" ");
        spannableString.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return spannableString;
    }

效果图如下：

注意

        设置完之后运行，发现Tab上并没有显示图标，而是什么也没有了。这是因为TabLayout的textAllCaps属性默认值是true，会阻止ImageSpan的渲染，我们只需要将其重写为false即可

4）、在Tab上显示自定义View

代码如下：

    private void initCustomViewTabLayout() {
        TabLayout customViewTablayout = (TabLayout) findViewById(R.id.custom_view_tab_layout);
        customViewTablayout.addTab(customViewTablayout.newTab().setCustomView(R.layout.tablayout_custom_tab));
        customViewTablayout.addTab(customViewTablayout.newTab().setCustomView(R.layout.tablayout_custom_tab));
        customViewTablayout.addTab(customViewTablayout.newTab().setCustomView(R.layout.tablayout_custom_tab));
        customViewTablayout.addTab(customViewTablayout.newTab().setCustomView(R.layout.tablayout_custom_tab));
        customViewTablayout.addTab(customViewTablayout.newTab().setCustomView(R.layout.tablayout_custom_tab));
    }

效果图如下：