Android Material Design-UI

Material Design出来这么长时间了。今天抽空总结下 Material Design 新增加的一些UI，算是一个总结吧。

首先在gradle脚本中添加

compile 'com.android.support:design:22.2.0'

接下来我们看看design包里面新加了些什么玩意。



可以看出多出来这么些个UI：

AppBarLayout

CollapsingToolbarLayout

CoordinatorLayout

FloatingActionButton

NavigationView

Snackbar

Tablayout

TextInputLayout

接下来我们一一介绍

AppBarLayout

用法

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
...
</android.support.design.widget.AppBarLayout>

就是一个ViewGroup，配合ToolBar与CollapsingToolbarLayout等使用。

CollapsingToolbarLayout

可伸缩折叠的Toobar，具体的用法参考这篇文章CollapsingToolbarLayout

CoordinatorLayout

这其实也是个viewgroup

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
>

<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffbb55"
app:layout_scrollFlags="scroll|enterAlways" />

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#30469b"
app:tabGravity="fill"
app:layout_collapseMode="pin"
app:tabMode="scrollable"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#ffffff" />
</android.support.design.widget.AppBarLayout>

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

</android.support.design.widget.CoordinatorLayout>

该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout。为什么这样说呢？原因是：它是组织它众多子view之间互相协作的一个ViewGroup。CoordinatorLayout 的神奇之处就在于 Behavior 对象。怎么理解呢？CoordinatorLayout使得子view之间知道了彼此的存在，一个子view的变化可以通知到另一个子view，CoordinatorLayout 所做的事情就是当成一个通信的桥梁，连接不同的view，使用 Behavior 对象进行通信。比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标记了app:layout_scrollFlags滚动事件,那么在CoordinatorLayout布局里其它标记了app:layout_behavior的子View（LinearLayout、RecyclerView、NestedScrollView等）就能够响应（如ToolBar、TabLayout）控件被标记的滚动事件。

上面有一点错误，就是标记了app:layout_behavior的子view必须是ReayclerView。

FloatingActionButton

将这个控件当成ImageButton用即可。具体的用法参考FloatingActionButton 完全解析[Design Support Library(2)]

我这里不多说了。

NavigationView

具体用法继续参考百万的博客Android 自己实现 NavigationView [Design Support Library(1)]

Snackbar

用法

Snackbar.make(textinputlayout,"quanshijie",Snackbar.LENGTH_LONG)
.setAction("dosomething", new View.OnClickListener() {
@Override
public void onClick(View v) {

}
})
.show();

SnackBar提供了极其多的方法，我们看下



有设置显示时间、ActionText颜色、进入动画、退出动画等。

TabLayout

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#30469b"
app:tabGravity="fill"
app:layout_collapseMode="pin"
app:tabMode="scrollable"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#ffffff" />

一般来说，tablayout会配合上viewpager来使用。

ViewPager mViewpager = (ViewPager) findViewById(R.id.viewpager);
MyviewPagerAdapter adapter=new MyviewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentDemo(),"Tab one");
adapter.addFragment(new FragmentDemo(),"Tab two");
adapter.addFragment(new FragmentDemo(),"Tab three");
adapter.addFragment(new FragmentDemo(),"Tab four");
adapter.addFragment(new FragmentDemo(), "Tab five");
mViewpager.setAdapter(adapter);

TabLayout mTablayout = (TabLayout) findViewById(R.id.tabLayout);
mTablayout.addTab(mTablayout.newTab().setText("1"));
mTablayout.addTab(mTablayout.newTab().setText("2"));
mTablayout.addTab(mTablayout.newTab().setText("3"));
mTablayout.setupWithViewPager(mViewpager);

mTablayout.setupWithViewPager(mViewpager);

通过这个就把tablayout和viewpager关联上了。

TextInputLayout

<android.support.design.widget.TextInputLayout
android:id="@+id/textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="user_password" />
</android.support.design.widget.TextInputLayout>

内部只能有一个EditText

textinputlayout= (TextInputLayout) findViewById(R.id.textinputlayout);
textinputlayout.getEditText().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) {

}

@Override
public void afterTextChanged(Editable s) {
if (textinputlayout.getEditText().getText().length()<6){
textinputlayout.setErrorEnabled(true);
textinputlayout.setError("密码长度不能小于6位");
}else{
textinputlayout.setErrorEnabled(false);
}
}
});

最后，重点戏来了。有的同学不知道控件有啥子属性。没关系，我在这里就给出方法。

我们知道自定义控件的时候会写attr.xml文件中写属性。并在xml文件中引用进来。同样我们使用design的时候也引用了。引用的是哪里的呢。Design包下面的。values.xml文件下看看。那个下面就是属性了。比如说

<declare-styleable name="FloatingActionButton">
<attr name="android:background"/>
<attr name="backgroundTint"/>
<attr name="backgroundTintMode"/>
<attr format="color" name="rippleColor"/>
<attr name="fabSize">
<enum name="normal" value="0"/>
<enum name="mini" value="1"/>
</attr>
<attr name="elevation"/>
<attr format="dimension" name="pressedTranslationZ"/>
<attr format="dimension" name="borderWidth"/>
</declare-styleable>

这个我们就知道控件有哪些属性了吧。

好，今天就到这里。