前言
安卓的Design包出来了很久了,布局的炫酷,是有目共睹,使用起来还是很方便的,而且实现的效果,让你惊奇,但是一些童鞋们还是不太熟悉怎么的使用它,然而自己也只是略知一二,所以在此总结一下,共同的学习交流一下如何的使用,希望对您们有一定的帮助
一、Design里面比较实用的类:
TextInputLayout FloatingActionButton NavigationView TabLayout Snackbar AppBarLayout CollapsingToolbarLayout CoordinatorLayout android.support.v7.widget.Toolbar(为了配合主题使用的)
二、类的如何的使用:
TextInputLayout:setHint()设置提示的文案;setError()设置错误的文案;
FloatingActionButton:
app:rippleColor="#f00" //点击按钮的颜色
app:backgroundTint="#f0f" //默认的颜色
app:fabSize="normal" //按钮大小
app:elevation="10dp" //阴影高度
app:layout_anchor="@id/appbar" //粘连在那个控件(注意:最后两个属性只有在CoordinatorLayout中才能生效)
app:layout_anchorGravity="bottom|right|end" //粘连的位置
3.NavigationView:(主要配合抽屉使用的 android.support.v4.widget.DrawerLayout)
android:layout_gravity="start" //抽屉的方向(只支持左右)
app:headerLayout="@layout/nav_header" //菜单的头布局
app:menu="@menu/drawer_view" //菜单的选项
4.TabLayout:
app:tabBackground="" //默认的背景颜色
app:tabIndicatorColor="" //指示器的颜色
app:tabIndicatorHeight="" //指示器的高度
app:tabMode="scrollable" //两种滚动模式: fixed:充满整个宽度 scrollable:可以左右的滑动
app:tabSelectedTextColor="" //选择字体的颜色
app:tabTextColor="" //默认肢体颜色
两种常用的方式:(1)单独的当使用,addTab(Tab tab)(2)和ViewPage联动的使用 setupWithViewPager(ViewPager viewPager)
5.Snackbar:(一个好看的底部弹出吐司:)
Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).show(); //直接的吐司
Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).setAction ("actionText",onClickListener).show();//吐完之后,里面还有一个点击的事件
6.Toolbar:就是一个封装好的标题:
setNavigationIcon(int)
设置工具栏的回退图标
setLogo(int)
设置工具栏logo图片
setTitle(CharSequence)
设置工具栏标题
setSubtitle(CharSequence)
设置工具栏子标题
7.后面的AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout得代码里说:
<?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:fitsSystemWindows="true"> //设置状态栏的透明度(系统会自己适配)
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed" //滑动的效果
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary" //折叠之后的颜色
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" //图片的折叠效果
app:layout_collapseParallaxMultiplier="1" //折叠的视觉差
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" /> //标题栏效果
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView //为了可以滑动,而代替了 ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> //可以和上面的布局进行联动(支持的控件 RecyclerView ViewPager NestedScrollView ,不支持ListView ,GridViEW )
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Friends"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Related"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
app:fabSize="normal"
app:elevation="10dp"
app:rippleColor="#f00"
app:backgroundTint="#f0f"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
上面滑动的属性的详解:
CoordinatorLayout
app:layout_scrollFlags (子布局设置是否可滑动)
android:layout_gravity 属性控制组件在布局中的位置
app:layout_behavior="@string/appbar_scrolling_view_behavior" 通知布局中包含滑动组件!
子布局通过app:layout_scrollFlags确定是否可滑动.给需要滑动的组件设置 app:layout_scrollFlags="scroll|enterAlways" 属性。
设置的layout_scrollFlags有如下几种选项:
scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。 enterAlwaysCollapsed:
当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
CollapsingToolbarLayout
app:collapsedTitleGravity 指定折叠状态的标题如何放置,可选值:top、bottom等
app:collapsedTitleTextAppearance="@style/TextAppearance.CollapsedTitle"
指定折叠状态标题文字的样貌
app:expandedTitleTextAppearance="@style/TextAppearance.ExpandedTitle"
指定展开状态标题文字的样貌
app:contentScrim="?attr/colorPrimaryDark"
指定CollapsingToolbarLayout完全被滚出到屏幕外时的ColorDrawable
app:expandedTitleGravity 展开状态的标题如何放置
app:titleEnabled指定是否显示标题文本
app:toolbarId指定与之关联的ToolBar,如果未指定则默认使用第一个被发现的ToolBar子View
app:expandedTitleMarginStart="10dp"
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginEnd
展开状态改变标题文字的位置,通过margin设置
app:layout_collapseParallaxMultiplier="0.7"
设置视差的系数,介于0.0-1.0之间。
app:layout_collapseMode="pin"(子布局设置折叠模式)
有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。
CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。
三、总结:
Design使用熟练了,会让你觉得布局非常优雅,好看,以后也可以充当你的去装逼的神器,比较难的点就是里面的属性,比较难以理解和活灵活用,也希望自己一些拙劣的见解可以帮助到你,让你不再对Design包里面的东西比较陌生,骚年行动起来吧,总会有你自己一片天地,要是有什么不足的地方多多的指导一下,大家一起互相学习,进步,谢谢你们!