今年的Google IO给我们android开发着带来了三样非常屌非常屌的library:

  1. ASD(Android Support Design)
  2. APL(Android Percent Layout)
  3. DBL(Data Binding Library)

这三个库都是非常屌非常屌的库,第一个能够让我们在低版本号的Android上使用Material Design,第二个是为了更好的适配,提供了基于百分比的Layout;至于第三个,能让Activity更好负责MVC中C的职责,让我们开发人员更少的去findViewById。

ok。首先我们来看看第一个库,可能也是最基本的库-ASD。

ASD简单介绍

前面说了,ASD给我们提供了Material Design提供了向下的兼容,当然我们也须要学习几个控件的使用,最后用一个实例的形式综合一个须要学习的这几个控件。

怎样使用ASD?非常easy。在AS中加入以下一句话就ok啦。

compile ‘com.android.support:design:22.2.0’

当然,我们在我们学习一些控件的时候还须要AppCompat Library。所以:

compile ‘com.android.support:appcompat-v7:22.2.0’

Snackbar

Snackbar我觉得他是一个介于Dialog和Toast之前的玩意,能够在作为一种用户选择提醒时使用。

Snackbar的使用非常easy,接下来我们以代码和效果的形式高速预览一下这玩意的使用。

    public void click(View view) {
Snackbar.make(view, "真要点我?", Snackbar.LENGTH_LONG)
.setAction("真的!", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你真点我了!",
Toast.LENGTH_SHORT).show();
}
}).show();
}

来看看效果。



好吧,这玩意真的非常easy,对照着上面的代码这以下的效果,肯定秒懂的。

FloatingActionButton

在看看看还有一个小控件,或许在项目中我们须要一个圆形的Button, 你可能会想到用自己定义Shape的方式去做。但那样文本的显示不好居中,这时预计就想到用自己定义控件去攻克了。好吧,如今ASD给我们提供了FloatingActionButton能够轻松的创建圆形Button,并且更牛x的是FloatingActionButton具有更绚丽的效果。

FloatingActionButton的使用也非常easy,他直接继承ImageView,所以ImageView的所有属性都能够用在FloatingActionButton上。来,看看我们的demo:

<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:onClick="click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:src="@drawable/add"
app:backgroundTint="#FF00FF00"
app:rippleColor="#FF0000FF"
app:borderWidth="0dp"
app:fabSize="normal"
app:elevation="10dp"
app:pressedTranslationZ="20dp"/>

简单解释一下命名空间为app的配置项。

1. app:backgroundTint是指定默认的背景颜色

2. app:rippleColor是指定点击时的背景颜色

3. app:borderWidth border的宽度

4. app:fabSize是指FloatingActionButton的大小。可选normal|mini

5. app:elevation 能够看出该空间有一个海拔的高度

6. app:pressedTranslationZ 哈,按下去时的z轴的廉价

来看看FloatingActionButton的效果:



恩。不错,可是有一个明显的缺陷就是FloatingActionButton和Snackbar的配合不太好。这对于Material Design简直就是耻辱!

想要解决问题,我们须要引入还有一个控件。

CoordinatorLayout

CoordinatorLayout这个控件的作用是让它的子view更好的去协作,在接下来的时间里,我们基本都会用到这个控件,这里我们仅仅是简单的用CoordinatorLayout来包裹一下FloatingActionButton来达到和Snackbar更好协作的效果。

改动我们的布局:

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:onClick="click"
android:layout_gravity="right"
android:src="@drawable/add"
app:backgroundTint="#FF00FF00"
app:borderWidth="0dp"
app:elevation="20dp"
app:fabSize="normal"
app:pressedTranslationZ="10dp"
app:rippleColor="#FF0000FF" />
</android.support.design.widget.CoordinatorLayout>

此时的效果:



能够看到,当Snackbar显示的时候。Button自己主动往上移动了,而当Snackbar消失以后。Button又回到了原来的位置。

TabLayout

TabLayout也是一个好东西。有了它我们再也不须要使用麻烦人的PagerTabStrip了。也不须要使用自己定义view的形式来达到效果。

首先来看看简单使用方法。

<android.support.design.widget.TabLayout
android:id="@+id/tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#FFFF0000"
app:tabSelectedTextColor="#FF0000FF"
app:tabTextColor="#FFFFFFFF"
app:tabMode="scrollable"
app:tabGravity="fill"/>

还是仅仅解释app命名空间的。

1. app:tabIndicatorColor tab的指示符颜色

2. app:tabSelectedTextColor 选择tab的文本颜色

3. app:tabTextColor 普通tab字体颜色

4. app:tabMode 模式。可选fixed和scrollable fixed是指固定个数。scrollable是能够横行滚动的(逼格高)

5. app:tabGravity 对齐方式。可选fill和center

在来看看activity的代码:

final TabLayout tabLayout = (TabLayout) findViewById(R.id.tl);
for(int i=0;i<20;i++) tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
} @Override
public void onTabUnselected(TabLayout.Tab tab) { } @Override
public void onTabReselected(TabLayout.Tab tab) { }
});

首先,获取该控件,然后一个for循环加入20个tab,使用:

tabLayout.addTab(tabLayout.newTab().setText(“TAB”));

加入新的tab。然后通过setOnTabSelectedListener来设置tab的item点击事件。so easy。 来看看效果。

AppBarLayout

AppBarLayout这个控件也是让子view共同协作的。它和CoordinatorLayout的差别在于:

AppBarLayout是在效果上的协作,用AppBarLayout包裹的子view会以一个总体的形式作为AppBar。

CoordinatorLayout是在行为上的一种协作,尤其是在滚动的协作上,能够说非常完美(额, 也不是那么完美)

首先来看一下我们要做的效果吧。



从效果图上看,Toolbar和TabLayout成为了一体。

再来看看我们的代码

<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"
android:fitsSystemWindows="true"
tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="? attr/actionBarSize"/> <android.support.design.widget.TabLayout
android:id="@+id/tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>

仅仅是用AppBarLayout包裹了一下Toolbar和TabLayout。细心的朋友可能看到了我们的TabLayout的背景也变了颜色。这里是由于我们在theme中设置了:

<item name="colorPrimary">#FF00FF00</item>

那上面那个白色背景的呢? 好难看!难道没有设置吗?事实上我也设置了,可是没有体现到TabLayout上,从这里也验证了我们上面所说的:

AppBarLayout是在效果上的一种协作

既然我们验证了该如果,那么顺便来验证一下

CoordinatorLayout是在行为上的一种协作

的如果吧。

改动代码:

<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"
android:fitsSystemWindows="true"
tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="? attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout
android:id="@+id/tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Loader最帅"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

对照上面的代码,首先我们加入了app的命名空间,为什么要加入这个?由于我们以下要用到!

(靠!

什么回答)

并且。我们给Toolbar添加了一条配置:

app:layout_scrollFlags="scroll|enterAlways"

表示这个控件是能够滚出屏幕的,并且是随时能够再显示

layout_scrollFlags的其它取值有:

1. scroll 谁要滚出屏幕,谁就设置这个值

2. enterAlways 其它向上滑动时。能够马上显示出来

3. exitUntilCollapsed 将关闭滚动直到它被折叠起来(有 minHeight) 并且一直保持这样

4. enterAlwaysCollapsed 定义了 View 是怎样回到屏幕的。当你的 view 已经声明了一个最小高度(minHeight) 并且你使用了这个标志,你的 View 仅仅有在回到这个最小的高度的时候才会展开,仅仅有当 view 已经到达顶部之后它才会又一次展开所有高度。

(以上解释。參考了其它文章[目測也是翻译的官方文档])

在CoordinatorLayout中我们还引入了另外一个新的控件:

NestedScrollView。这个view事实上是ScrollView的增强版,增强在哪呢?他支持属性:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

这条语句的作用是标识他要一起来写作完毕scroll的效果。

换句话说,上面的滚出屏幕的效果要配合一个能够滚动的View,并且得设置了该属性后才干够。(至少你得告诉人家。谁要滚出去,滑动谁时才滚出去吧)

好吧,来看看此时的效果:



看到了吧,我们在滑动以下的时候,Toolbar自觉的滚出了屏幕,并且在往上滑动的时候,Toolbar立刻出现了,这就是enterAlways的功劳。

CollapsingToolbarLayout

最后,我们来看一个逼格相同高的控件:CollapsingToolbarLayout。

该控件的的子view必须要有Toolbar,他的作用就是提供一个可折叠的标题栏。

通常情况下。该控件会和上面我们说的一些控件搭配使用,达到一种固定的效果

CollapsingToolbarLayout本身的使用非常easy,仅仅是他的子view须要设置非常多属性来达到这种效果。以下。我们就提供一个demo实例,来学习一下CollapsingToolbarLayout的使用,顺便复习一下上面所学到的一些控件。

我们来实现一个这种UI:



首先来分析一下,最直观的。能够看到有一个行为上的协作, 那肯定须要CoordinatorLayout这个控件,并且还会有一个效果上的协作,那肯定是AppBarLayout啦。当然。细心的朋友可能还会看出来,那个图片和Toolbar会有一种视差的效果,并且整个banner部分是一种折叠的效果,这就须要CollapsingToolbarLayout这个控件了。

来说一下CoolapsingToolbarLayout,这个控件必须要有一个Toolbar的子view,并且它将作为AppBarLayout的唯一直接子view使用,它提供了一个能够折叠的AppBar,并且还提供一种视差的效果。

以下就让我们从样例中感受CoolapsingToolbarLayout的使用。

<RelativeLayout 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=".MainActivity"> <android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/ctl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="? attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/banner"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout> <android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true">
<android.support.design.widget.FloatingActionButton
android:onClick="add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="0dp"
android:src="@drawable/add"
app:backgroundTint="#FF00FF00"
app:rippleColor="#FF0000FF"
app:borderWidth="0dp"
app:fabSize="normal"
app:elevation="10dp"
app:pressedTranslationZ="20dp"/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

分析一下这个布局,最外层一个RelativeLayout他包括了两个CoordinatorLayout , 第二个CoordinatorLayout比較简单就是包括了一个FloatingActionButton,这种使用方法能够參考博客上面讲的。

我们的重点是放在第一个CoordinatorLayout上。它有两个直接子view,和我们说的一样。一个提供滚出效果。一个提供滚动的效果。接下来一个AppBarLayoutImageViewToolbar作为了AppBar。

可是它不是直接包括了这两个小控件,而是通过CollapsingToolbarLayout,并且表示滚动标识的app:layout_scrollFlags="scroll|exitUntilCollapsed"也是赋值给了CollapsingToolbarLayout,在这里思考一下。这样整个CoolapsingToolbarLayout将会作为一个总体滚出界面。可是看效果并非啊, Toolbar明明还在那,那么接下来,我们来观察一下这个ImageViewToolbar有什么奇妙之处:

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/banner"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="? attr/actionBarSize"
app:layout_collapseMode="pin"/>

ImageView有一条属性app:layout_collapseMode="parallax"表示这个ImageView以视差的形式折叠(效果上看着貌似就是有点小偏移)。

Toolbar的app:layout_collapseMode="pin"表示Toolbar在折叠的过程中会停靠顶部(pin的意思是钉住)。

最后我们使用了一个RecyclerView,并且给这个控件设置app:layout_behavior="@string/appbar_scrolling_view_behavior",至于RecyclerView如果你不会用。请自行网补

继续…, 继续观察上面的效果,在滑动的过程中有一个蛋疼的颜色–绿色。它是一个从无到有的过程,是一个渐变的效果,它是怎么控制的呢?

来看看CollapsingToolbarLayout它有一条属性是:app:contentScrim="?attr/colorPrimary",设置这条属性,在滑动的过程中。会自己主动变化到该颜色。

最后,要注意一下,如今我们不能给Toolbar设置标题了,而是给CollapsingToolbarLayout设置标题,能够看到标题在滚动的过程中会有一个大小的变化。



如今这个效果的逼格已经非常高了。可是我们还不满足,那个绿色太TMD的难看了, 哎?能不能尾随那个图片的颜色?这样看起来逼格是不是更高!!

哈哈,全然能够!

这须要我们再引用还有一个库Palette,关于Palette的使用。能够看我之前的博客:《Android5.0之Palette简单有用》

我们在activity中这么使用:

final CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);
ctl.setTitle("Cool UI");
...
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.banner);
Palette.generateAsync(bmp, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
Palette.Swatch swatch = palette.getDarkMutedSwatch();
ctl.setContentScrimColor(swatch.getRgb());
}
});

来看看此时的效果:



CollapsingToolbarLayout的ContentScrim是我们从那个Bitmap上取的。

好了。就这么多吧。累尿了,歇息去了。

源代码下载: demo下载

高逼格UI-ASD(Android Support Design)的更多相关文章

  1. 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.android.support.design.widget.Ta ...

  2. Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.这个功能就是以前APP开发常用的选项卡某一卡片被切换.选中时候的 ...

  3. 使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能

    1.概述 TabLayout是在2015年的google大会上,google发布了新的Android Support Design库的新组件之一,以此来全面支持Material Design 设计风格 ...

  4. 使用 CoordinatorLayout 出错 inflating class android.support.design.widget.CoordinatorLayout

    ava.lang.RuntimeException: Unable to start activity ComponentInfo{com.czr.ianpu/com.czr.ianpu.MainAc ...

  5. Android Material Design:ViewPager与android.support.design.widget.TabLayout双向交互联动切换

    通常,android.support.design.widget.TabLayout与Android的ViewPager联合使用,实现与ViewPager的切换与联动.(1)比如,当用户手指触摸选择T ...

  6. android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题

    在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决. <?xml version=&qu ...

  7. Caused by: android.view.InflateException: Binary XML file line #12: Error inflating class android.support.design.widget.TabLayout,TableLayout引起页面崩溃

    在使用TableLayout的时候,运行引用程序直接Crash. FATAL EXCEPTION: main Process: com.edaixi.activity, PID: 9703 java. ...

  8. Android Support Design 控件 FloatingActionButton

    经常刚可以看到悬浮控件,比如印象笔记的下面那个绿色的悬浮按钮,这个控件非常简单也是来自Design Support Library中同理需要在android studio中加入依赖库:design库 ...

  9. com.android.support:design

    Error:Could not find com.android.support:design:27.3.1.Required by: project :app Please install the ...

随机推荐

  1. (转)Git Gui for Windows的建库、克隆(clone)、上传(push)、下载(pull)、合并

    原文地址: http://blog.csdn.net/fym0512/article/details/7713006 本教程将讲述:gitk的Git Gui的部分常用功能和使用方法,包括:建库.克隆( ...

  2. 【ajax跨域】原因原理解决

    1.安全,跨域cookie iframe 2.很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的.当需要通讯时,本站脚本创建一个<scr ...

  3. em与px的区别 [ 转 ]

    其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...

  4. 使用VIEWER.JS进行简单的图片预览

    <script src="../res/js/viewer.min.js"></script><script type="text/java ...

  5. Sencha Touch vs jQuery Mobile

    Sencha Touch:重量级框架,类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高 jQuery Mobile:轻量级框架,实质是jQuery插件;组件较少;交 ...

  6. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  7. dojo之FilteringSelect

    1.保证可视框宽度与下拉框宽度一致 forceWidth:'true' 2.控制下拉框的高度 maxHeight:'120'

  8. docker修改容器信息,打包等

    https://blog.csdn.net/x6_9x/article/details/72891404

  9. Tensorflow 方法记录

    1.tf.convert_to_tensor:传入的list必须是一个有固定长度的list,如果为2维的list,第二维的list的长度必须是固定. 2.tf.layers.conv1d(),默认宽卷 ...

  10. CSS 实现单边阴影

    box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 o ...