Material Design是在2014年Google I/O大会上重磅推出的一套全新的界面设计语言,是由谷歌的设计工程师们基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,包含了视觉、运动、互动效果等特性。
为支持Material Design UI设计风格,谷歌在2015年的Google I/O大会上推出了一个Design Support库,这个库将Material Design中最具代表性的一些控件和效果进行了封装,使得开发者在即使不了解Material Design的情况下也能非常轻松地将自己地应用Material化。
1.FloatingActionButton
FloatingActionButton就是一个漂亮的按钮,其本质是一个ImageVeiw。有一点要注意,Meterial Design引入了Z轴的概念,就是所有的view都有了高度,他们一层一层贴在手机屏幕上,而FloatingActionButton的Z轴高度最高,它贴在所有view的最上面,没有view能覆盖它。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiaoyehai.materialdesign.fab.FabActivity">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|right"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|bottom"
android:layout_margin="16dp"
app:fabSize="mini"
android:backgroundTint="#f00" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp" />
</android.support.design.widget.CoordinatorLayout>
2.CoordinatorLayout
又名协调者布局,它是support.design包中的控件.它是一个 FrameLayout
CoordinatorLayout是在 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果.
简单来说就是
作为最上层的View
作为一个 容器与一个或者多个子View进行交互
CoordinatorLayout各种特效
CoordinatorLayout实现浮动操作按钮效果:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiaoyehai.materialdesign.coordinatelayout.CoordinatorLayoutActivity1">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp" />
</android.support.design.widget.CoordinatorLayout>
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
}
});
只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。浮动操作按钮有一个 默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。
CoordinatorLayout+AppBarLayout+Toolbar:
上滑隐藏Toolbar,下滑显示Toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiaoyehai.materialdesign.coordinatelayout.CoordinatorLayoutActivity2">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:title="TitleBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout属性:
1.layout_scrollFlags=scroll的时候,这个View会跟着滚动事件响应,设置这个flag后就会随着滑动而滚出屏幕,没有设置这个flag的view将被固定在屏幕顶部。
2.layout_scrollFlags=“enterAlways”的时候 这个View会响应下拉事件,向下的滚动都会导致该view变为可见
3.layout_scrollFlags=“enterAlwaysCollapsed”的时候 当你的视图已经设置最小高度属性(minHeight)再设置该属性,那么你的视图只能以最小高度进入,仅当滚动视图到达顶部时才扩大到完整高度。
4.layout_scrollFlags=“exitUntilCollapsed”的时候 从大慢慢滚动变小,最后折叠在顶端。
TabLayout+ViewPager:
布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiaoyehai.materialdesign.coordinatorlayout.CoordinatorLayoutActivity3">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="?attr/colorPrimary"
android:scaleType="fitXY"
android:src="@drawable/tangyan"
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:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp" />
</android.support.design.widget.CoordinatorLayout>
activity:
/**
* 案例:
* CoordinatorLayout+AppBarLayout+TabLayout+ViewPager
*/
public class CoordinatorLayoutActivity3 extends BaseActivity {
@BindView(R.id.tablayout)
TabLayout mTabLayout;
@BindView(R.id.viewpager)
ViewPager mViewpager;
@BindView(R.id.fab)
FloatingActionButton mFab;
private List<Fragment> mFragmentList = new ArrayList<>();
private String[] tableTitle = {"主页", "微博", "相册"};
@Override
protected int getLayoutID() {
return R.layout.activity_coordinator_layout3;
}
@Override
protected void initView() {
for (int i = 0; i < tableTitle.length; i++) {
mFragmentList.add(new ListFragment(tableTitle[i]));
}
MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), mFragmentList, tableTitle);
mViewpager.setAdapter(myViewPagerAdapter);
mTabLayout.setupWithViewPager(mViewpager);
}
@Override
protected void initListener() {
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
}
});
}
@Override
protected void initData() {
}
}
Fragment:
/**
* Created by xiaoyehai on 2018/7/24 0024.
*/
@SuppressLint("ValidFragment")
public class ListFragment extends Fragment {
@BindView(R.id.recycleview)
RecyclerView mRecycleview;
Unbinder unbinder;
private String title;
private List<String> dataList;
public ListFragment(String title) {
this.title = title;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragmett_list, container, false);
unbinder = ButterKnife.bind(this, view);
initData();
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getActivity());
//分割线
DividerItemDecoration itemDecoration = new DividerItemDecoration(getActivity(), LinearLayoutManager.VERTICAL);
mRecycleview.addItemDecoration(itemDecoration);
mRecycleview.setLayoutManager(layoutManager);
RecycleAdapter adapter = new RecycleAdapter(getActivity(), dataList, R.layout.item_recyclerview);
mRecycleview.setAdapter(adapter);
return view;
}
private void initData() {
dataList = new ArrayList<>();
for (int i = 0; i < 50; i++) {
dataList.add(title + i);
}
}
@Override
public void onDestroyView() {
super.onDestroyView();
unbinder.unbind();
}
}
这里需要注意的是:滚动控件必须实现NestedScrollingChild接口(如RecyclerView,NestedScrollView),而没有实现该接口的滚动控件如ScrollView、WebView、ListView是全部都没有作用的。后面CollapsingToolbarLayout也同样遵循该规则。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
3.AppBarLayout
继承了LinearLayout(默认的AppBarLayout是垂直方向),它是为了Material Design设计的App Bar,
它的作用是把AppBarLayout包裹的内容都作为AppBar。说白了它的出现就是为了和CoordinatorLayout搭配使用, 实现一些炫酷的效果的。没有CoordinatorLayout,它和Linearlayout没区别。
4.CollapsingToolbarLayout
CollapsingToolbarLayout继承与FrameLayout.可折叠的toolbar布局。
简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能
Collapsing title(可以折叠 的 标题 )
Content scrim(内容装饰),当我们滑动的位置 到达一定阀值的时候,内容 装饰将会被显示或者隐藏
Status bar scrim(状态栏布)
Parallax scrolling children,滑动的时候孩子呈现视觉特差效果
Pinned position children,固定位置的 孩子
结合ViewPager的视觉特差:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiaoyehai.materialdesign.coordinatorlayout.CoordinatorLayoutActivity4">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/tangyan"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp" />
</android.support.design.widget.CoordinatorLayout>
/**
* CollapsingToolbarLayout里面 包含ImageView 和ToolBar,
* ImageView的app:layout_collapseMode="parallax",表示视差效果,
* ToolBar的 app:layout_collapseMode="pin",当这个TooBar到达 CollapsingToolbarLayout的底部的时候,会代替整个CollapsingToolbarLayout显示
*/
public class CoordinatorLayoutActivity4 extends BaseActivity {
@BindView(R.id.tablayout)
TabLayout mTabLayout;
@BindView(R.id.viewpager)
ViewPager mViewpager;
@BindView(R.id.fab)
FloatingActionButton mFab;
@BindView(R.id.toolbar)
Toolbar mToolbar;
private List<Fragment> mFragmentList = new ArrayList<>();
private String[] tableTitle = {"主页", "微博", "相册"};
@Override
protected int getLayoutID() {
return R.layout.activity_coordinator_layout4;
}
@Override
protected void initView() {
mToolbar.setTitle("唐嫣");
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
for (int i = 0; i < tableTitle.length; i++) {
mFragmentList.add(new ListFragment(tableTitle[i]));
}
MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), mFragmentList, tableTitle);
mViewpager.setAdapter(myViewPagerAdapter);
mTabLayout.setupWithViewPager(mViewpager);
}
@Override
protected void initListener() {
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
}
});
}
@Override
protected void initData() {
}
}