在项目中运用Meterial Design实现动画效果

简介: 在 2015 年的 I/O 开发者大会上,Google 介绍了一个新的 Android Design Support Library,该库可以帮助开发者在应用上使用 meterial design。以前在自己公司的项目上有用过,最近把这个库中的 CoordinatorLayout单独拿出来做了个小例子写篇博文,纯粹当成整理复习笔记,下次如果需求再碰到这个,直接用上 。。。

CoordinatorLayout效果图


运行效果图:(录屏分辨率有点低,导致图片模糊,实际效果是很清晰的)

0.gif

什么是 CoordinatorLayout


CoordinatorLayout,是继承自 FrameLayout 。该布局非常好用,能够协调子元素之间的依赖关系。CoordinatorLayout通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。常常与CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout、NestedScrollView以及Toolbar。这几个控件相互配合,可以写出一个类似上面效果图不错的页面出来。

这边附上官网的介绍链接,有兴趣看英文文档的强烈推荐:

http://android-developers.blogspot.com/2015/05/android-design-support-library.html


3实现的核心代码


main_activity.xml 代码如下:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:focusable="true"
        android:focusableInTouchMode="true" />
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#30469b"
            app:expandedTitleMarginBottom="160dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_img"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/aa"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="22dp"
                android:layout_marginLeft="38dp"
                android:layout_marginRight="34dp"
                android:textColor="@android:color/black"
                android:textSize="16sp"
                android:text="Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </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">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/content"
            android:lineSpacingExtra="8dp"
            android:textSize="20sp" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

mainActivity.java

public class MainActivity extends AppCompatActivity {    
    @Override
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Android 概要简述");
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.back);
    }
}

4常用属性讲解


看到上面核心代码,是不是觉得使用起来很简单,其实关键代码就是一个布局。外层是CoordinatorLayout 包裹,因为CoordinatorLayout前面说了,它是继承自五大布局中的 FrameLayout,所以用法与之类似。

这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar的折叠效果。

有几个重要的属性需要重点介绍下:


1、app:contentScrim="#30469b"

设置当完全CollapsingToolbarLayout收缩后ToolBar的背景颜色。


2、app:layout_scrollFlags="scroll|exitUntilCollapsed"

当用户向上拉时收缩时,可以固定Toolbar一直在上面。


3、app:expandedTitleMarginStart="48dp"

可以设置扩张时候标题向左填充的距离。


4、 app:layout_collapseParallaxMultiplier="0.5"

CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过这个属性来改变。值的范围[0.0,1.0],值越大视察越大。


5、app:layout_collapseMode=”parallax”

     app:layout_collapseMode="pin"

子视图的折叠模式,有两种,经常使用:

pin:设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上,在折叠的时候最后固定在顶端;

parallax:视差模式,在折叠的时候会有个视差折叠的效果。


最后,如果想要本文代码的同学,只需要在微信公众号「程序IT圈」的后台,回复:CoordinatorLayout 。即可获得本文代码。

22.jpg

总结


简单介绍CoordinatorLayout的用法,没有深入介绍,大家如果需要深入了解这个控件的使用,在这里推荐一篇我认为写的好的博客给大家深入学习。

链接如下:http://blog.csdn.net/xyz_lmn/article/details/48055919


本文属于原创,如有转载,请标注原作者,版权归本公众号所有。如果你喜欢我写的文章请关注 程序IT圈  ,欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话,不妨点个赞或给个赞赏哈,您的支持就是我坚持原创的动力~~

相关文章
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(2)阴影盒子
Flutter笔记:Widgets Easier组件库(2)阴影盒子
34 0
|
6月前
|
开发框架 前端开发 开发者
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
【4月更文挑战第30天】Flutter框架支持Material Design和Cupertino Design两种设计风格,助力开发者创建吸引人的移动应用。Material Design基于现实世界物理规律,提供`Scaffold`、`Card`等组件,实现纸片效果和直观体验。Cupertino Design注重简洁图标和流畅动画,借助`CupertinoTabScaffold`、`CupertinoActivityIndicator`等组件呈现苹果风格界面。Flutter的`Theme`类允许统一管理应用样式,开发者可根据需求混搭两种风格,实现跨平台的优质用户体验。
175 0
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
|
前端开发 JavaScript
Ant-Design自定义样式
Ant-Design自定义样式
249 0
|
容器
react-Ant Design框架项目中文字轮播与图片轮播的实现
在react-Ant Design框架项目中实现文字轮播和图片轮播,在这里记录一下,实现过程有一点小坑需要注意
664 0
react-Ant Design框架项目中文字轮播与图片轮播的实现
|
前端开发 JavaScript UED
纯css实现Material Design中的水滴动画按钮
纯css实现Material Design中的水滴动画按钮
纯css实现Material Design中的水滴动画按钮
|
前端开发 JavaScript
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
|
C#
开发Google Material Design风格的WPF程序
原文:开发Google Material Design风格的WPF程序 今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit。
2157 0
|
UED
Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
原文:Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)   Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控制对象在多个不同的视觉状态之间切换、导航。
795 0
|
Android开发 数据安全/隐私保护 iOS开发
使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分
本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分,你是否曾经对某一款应用有过很棒的想法或者想向别人展示你的想法会带来改变?可是否又有以下限制令你止步?
1511 0
使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分
本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分,最后在这个总结性的第三部分,我们将进一步深入,同时将会作出一个更细致的原型。 开始之前,你应该已经完成了 Part 1 andPart 2 , 如果没有的话,先去看看这两篇内容吧.
1019 0