Android design support library中包含8个material design组件,最低支持android 2.1,这些组件是google针对github上最火的几个android组件进行了标准化的封装,使用design非常简单
引用这个库:在 build.gradle
文件中加上这段代码: compile 'com.android.support:design:22.2.0
这8个组件分别是:
TextInputLayout
FloatingActionButton
Snackbar
Tabs
选项卡,一般和 TabLayout 一起使用哦
Navigation View
大家都记得 DrawerLayout 这个控件吧!
CoordinatorLayout
,
CollapsingToolbarLayout
和
AppBarLayout
这三个组件
- CoordinatorLayout 是一个超级 FrameLayout
- CollapsingToolbarLayout 类似 这张图
- AppBarLayout 全新,用来实现各种 Material Design 概念效果的一个 Layout,主要负责对滑动的响
组件布局分析:
<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/expanded_toolbar_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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" />
<com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar
android:id="@+id/stuff_container"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@id/cat_avatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:src="@drawable/cutecat" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="16dp"
android:orientation="vertical">
<TextView
android:id="@id/cat_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="Title"
android:textColor="@android:color/white"
android:textSize="18dp" />
<TextView
android:id="@+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtitle"
android:textColor="#80ffffff"
android:textSize="15dp" />
</LinearLayout>
</com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<include layout="@layout/included_sample_content" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
android:src="@drawable/ic_edit"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
-
CollapsingAvatarToolbar必须有个Toolbar伴随,如果你不想使用Toolbar,我们可以讨论讨论。
-
扩展高度(Expanded height) 取决于AppBarLayout的高度。
-
折叠高度(Collapsed height )取决于Toolbar的高度。
-
你必须在CollapsingAvatarToolbar里面设置头像(avatar)和标题视图( title view),且id必须喝上面演示的完全一致。这些id事library里面的。(所以是@而不是@+)。
-
你可以使用任意TextView作为title,以及任意view作为头像,我这里的例子用的是hdodenhof的CircleImageView ,但是这取决于你自己。
-
你也可以添加更多view到CollapsingAvatarToolbar里面。
-
所有的自定义属性都是可选的,如果没有提供就使用默认的 。
外部Library