Android Design Library之一

http://blog.magicer.xyz/2017/...

使用Design包后，瞬间感觉自己APP逼格高了呢。妈妈再也不用担心我个人APP设计丑了。

Snackbar

Snackbar可以很方便的替换Toast。实现一种更优雅的轻量级提示功能。而且还可以设置Action。在同一时间，只能有一个Snackbar在界面上显示。下面来看下怎么使用：

 Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT).show();

简单的一行代码，跟Toast一样。我们还可以通过设置Action来实现轻量级的交互。

 Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT)
                .setAction("ok", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击事件
            }
        }).show();

不过这个时候，可能你会发现，Snackbar出现的时间太短了,可能来不及点。没有关系。只需要将Snackbar.LENGTH_SHORT换成Snackbar.LENGTH_INDEFINITE。
有时候我们需要跟APP设计风格匹配更换其他背景颜色。这个时候也很简单。

        Snackbar snackbar = Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_INDEFINITE)
                .setAction("ok", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        //点击事件
                    }
                });
        //更改Snackbar背景颜色
        snackbar.getView().setBackgroundColor(Color.parseColor("#009688"));
        //设置Action文字的颜色
        snackbar.setActionTextColor(Color.parseColor("#9E9E9E"));
        snackbar.show();

TextInputLayout

TextInputLayout做为EditText的父容器使用，当用户输入内容的时候，hint会移动到上方。
使用方法很简单。看下代码。

<android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="Username"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="4"
        app:counterTextAppearance="@style/counter"
        app:counterOverflowTextAppearance="@style/counter_over"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="Password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

 <style name="counter">
        <item name="android:textColor">@color/color_teal</item>
    </style>
    <style name="counter_over">
        <item name="android:textColor">@color/color_red</item>
    </style>

mEtUsername.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (s.length() <5){
                    mTilUsername.setError("最少5个字符");
                    mTilUsername.setErrorEnabled(true);
                }else {
                    mTilUsername.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

FloatingActionButton

来看下FloatingActionButton的集成关系

在来个简单使用的例子

<android.support.design.widget.FloatingActionButton
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        app:elevation="2dp"
        app:fabSize="normal"
        android:src="@drawable/ic_delete_white_36dp"/>

好了。这货就说这些吧。没什么好些的。详细的方法讲解就看文档呗，没啥好说的。

TabLayout

在使用TabLayout的时候，很多时候都是跟ViewPager结合使用。看下结合后的简单例子。

其实实现这种效果也很简单，用不几行代码就搞定了。
看下布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#00BCD4"
        app:tabGravity="fill"
        app:tabIndicatorColor="#009688"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#F44336"
        app:tabTextColor="#FFFFFF"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

其中TabLayout的几个属性的意思为：

• tabGravity：有两个值：fill表示tab充满屏幕，每个tab均分宽度,center表示根据默认的宽度，tab显示在屏幕中间
  例如这样

• tabIndicatorColor:表示tab底部的指示器的颜色。

• tabIndicatorHeight: 表示指示器的高度

• tabMode: 有两个值：scrollable表示当tab多了之后可以滚动。fixed宽度固定
  当数量为9个时fixed会显示成 而为scrollable会显示成

详细的方法属性等请看TabLayout官方文档

其他部分代码

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        ButterKnife.bind(this);
        init();
        mAdapter = new ImagePageAdapter(mViews);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

    }

    private void init() {
        mViews = new ArrayList<>();
        LayoutInflater inflater = LayoutInflater.from(this);
        for (int i = 0; i < 9; i++) {
            ImageView view = (ImageView) inflater.inflate(R.layout.item_tab, null);
            view.setImageResource(R.mipmap.ic_launcher);
            mViews.add(view);
        }
    }

public class ImagePageAdapter extends PagerAdapter {

    private List<View> mViews;

    public ImagePageAdapter(@NonNull List<View> views) {
        mViews = views;
    }

    @Override
    public int getCount() {
        return mViews.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViews.get(position));
        return mViews.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViews.get(position));
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "TAB"+position;
    }
}