Android开发学习之路-Android Design Support Library使用(CoordinatorLayout的使用)

效果图:

上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig的库)。另一个是底部的这个按钮,这个按钮点击之后会出现一个SnackBar(比Toast要强大,因为可以设定点击的监听事件),在按钮点击之后SnackBar出现之后按钮会自动的向上移动避免被遮挡,这是CoordinatorLayout的一个功能。

Android Design Support Library是一个谷歌提供的用来实现Material Design(以下简称MD)的一个兼容库,它实现的效果不单单可以在android5.0以上的设备运行,本实例用到了其中的一些控件,比如SnackBar、FloatingActionButton等等

先贴一下布局再来解释:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.design.widget.CoordinatorLayout
 3     android:id="@+id/root"
 4     xmlns:android="http://schemas.android.com/apk/res/android"
 5     xmlns:app="http://schemas.android.com/apk/res-auto"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent">
 8
 9
10     <android.support.v4.widget.NestedScrollView
11         android:layout_width="match_parent"
12         android:layout_height="match_parent"
13         app:layout_behavior="@string/appbar_scrolling_view_behavior">
14
15         <LinearLayout
16             android:layout_width="match_parent"
17             android:layout_height="match_parent"
18             android:orientation="vertical">
19
20             <!-- 这里为了实现能拖动可以添加多个ImageView,省略...-->
21         </LinearLayout>
22
23     </android.support.v4.widget.NestedScrollView>
24
25     <android.support.design.widget.AppBarLayout
26         android:layout_width="match_parent"
27         android:layout_height="250dp"
28         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
29
30         <android.support.design.widget.CollapsingToolbarLayout
31             android:id="@+id/collapsingtoolbarlayout"
32             android:layout_width="match_parent"
33             android:layout_height="match_parent"
34             app:contentScrim="#636EEE"
35             app:title="Windows10"
36             app:expandedTitleMarginStart="50dp"
37             app:layout_scrollFlags="scroll|exitUntilCollapsed">
38
39             <ImageView
40                 android:layout_width="match_parent"
41                 android:layout_height="match_parent"
42                 android:scaleType="fitXY"
43                 android:src="@drawable/my"
44                 app:layout_collapseMode="parallax"/>
45
46
47             <android.support.v7.widget.Toolbar
48                 android:id="@+id/toolbar"
49                 android:layout_width="match_parent"
50                 android:layout_height="?attr/actionBarSize"
51                 android:minHeight="20dp"
52                 app:layout_collapseMode="pin"
53                 app:popupTheme="@style/Theme.AppCompat.Light"
54                 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
55                 />
56         </android.support.design.widget.CollapsingToolbarLayout>
57
58     </android.support.design.widget.AppBarLayout>
59
60     <android.support.design.widget.FloatingActionButton
61         android:id="@+id/fab_btn"
62         android:layout_width="wrap_content"
63         android:layout_height="wrap_content"
64         android:layout_gravity="bottom|right"
65         android:layout_margin="10dp"
66         android:src="@mipmap/ic_launcher"
67         app:fabSize="normal"/>
68
69 </android.support.design.widget.CoordinatorLayout>

在最外层使用一个CoordinatorLayout来做主布局,在布局中生命使用命名空间名为app,这个布局是一个功能强大的FrameLayout,就是这个布局的作用下我们才能做到上面的效果。可以看到代码的最后我们放了一个FloatingActiongButton,因为这个控件放在这个布局中,所以如果我们给它设定点击事件并让它弹出一个SnackBar,就能做到上面的这个效果了。

接下来是做图片滑动的这个效果,在最外层使用一个AppBarLayout,这个布局是一个特殊的LinearLayout,是为了兼容MD而设计的一个布局,在CoordinatorLayout中使用它就能做到一些协调的效果,根据API可以看到它的用法如下:

能FQ的就看:http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

这里已经给出了整个效果实现的框架了,接下来我们要在ToolBarLayout中添加一个CollapsingToolBarLayout,这个布局是名称翻译是“崩溃的工具栏布局”?莫名喜感哈哈!这里使用它的目的就是实现图片滑动消失,然后显示ToolBar,这个类的描述:

app:contentScrim="#636EEE"
app:title="Windows10"
app:expandedTitleMarginStart="50dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"

这个布局的四个属性分别是收缩后的颜色,标题文字,打开后的标题距离以及图片的收缩效果,每一个是什么可以自己尝试一下。

最后是在这个布局中添加一个ImageView和一个ToolBar就可以了,至于滑动的效果就可以自己设置一下,API是可以看到的。

再贴一下Activity的代码:

public class CoordinatorLayoutActivity extends AppCompatActivity {
    private FloatingActionButton ftb_btn;
    private CoordinatorLayout root;
    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_coordinatorlayout);
        ftb_btn = (FloatingActionButton) findViewById(R.id.fab_btn);
        root = (CoordinatorLayout) findViewById(R.id.root);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
        setSupportActionBar(toolbar);

        ftb_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(root,"我是一个Snackbar",Snackbar.LENGTH_LONG).setAction("我知道了", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                }).show();
            }
        });
    }
}

最后说明:这些效果的实现都用了一些看起来比较新的布局和控件,但是实际上这些控件都是我们平常使用到的,其实只是把旧的东西封装了加入了一些新的属性,然后系统已经帮我们在底层实现了一些动画效果。另外,在CoordinatorLayout中使用的各种控件协调动画效果都需要一些经过适配的控件或者是布局来兼容这种新的设计语言,所以旧的就不合适了。

时间: 2024-10-12 01:07:24

Android开发学习之路-Android Design Support Library使用(CoordinatorLayout的使用)的相关文章

Android开发学习之路--网络编程之xml、json

一般网络数据通过http来get,post,那么其中的数据不可能杂乱无章,比如我要post一段数据,肯定是要有一定的格式,协议的.常用的就是xml和json了.在此先要搭建个简单的服务器吧,首先呢下载xampp,然后安装之类的就不再多讲了,参考http://cnbin.github.io/blog/2015/06/05/mac-an-zhuang-he-shi-yong-xampp/.安装好后,启动xampp,之后在浏览器输入localhost或者127.0.0.1就可以看到如下所示了: 这个就

Android开发学习之路-RecyclerView滑动删除和拖动排序

Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开发学习之路-下拉刷新怎么做? 本篇是接着上面三篇之后的一个对RecyclerView的介绍,这里多说两句,如果你还在使用ListView的话,可以放弃掉ListView了.RecyclerView自动帮我们缓存Item视图(ViewHolder),允许我们自定义各种动作的动画和分割线,允许我们对It

android开发学习之路——连连看之游戏逻辑(五)

GameService组件则是整个游戏逻辑实现的核心,而且GameService是一个可以复用的业务逻辑类. (一)定义GameService组件接口 根据前面程序对GameService组件的依赖,程序需要GameService组件包含如下方法.   ·start():初始化游戏状态,开始游戏的方法.     ·Piece[][] getPieces():返回表示游戏状态的Piece[][]数组.     ·boolean hasPieces():判断Pieces[][]数组中是否还剩Piec

Android开发学习之路--UI之简单聊天界面

学了很多的ui的知识,这里就来实现个聊天的界面,首先来实现个layout的xml,代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:lay

Android开发学习之路--性能优化之常用工具

??android性能优化相关的开发工具有很多很多种,这里对如下六个工具做个简单的使用介绍,主要有Android开发者选项,分析具体耗时的Trace view,布局复杂度工具Hierarchy View,应用启动时间,Memory.CPU.Network分析,静态代码检查工具Lint以及程序稳定性monkey.下面就开始学习下这些工具吧. 一.Android开发者选项 ??Andorid开发工具众多,首先就是手机自带的开发者选项了,至于手机怎么启动开发者选项,那么请自行百度或者google了,接

Android开发学习之路-抢红包助手开发全攻略

背景:新年之际,微信微博支付宝红包是到处飞,但是,自己的手速总是比别人慢一点最后导致红包没抢到,红包助手就应运而生. 需求:收到红包的时候进行提醒,然后跳转到红包的界面方便用户 思路:获取“读取通知信息”权限,然后开启服务监控系统通知,判断如果是微信红包就进行提醒(声音),然后跳转到红包所在的地方 界面: 界面分为两部分,一部分是可以对App进行操作的,下面是一个可以滑动的界面,提示用户如何是软件正常工作,布局代码如下: <?xml version="1.0" encoding=

Android开发学习之路--Content Provider之初体验

天气说变就变,马上又变冷了,还好空气不错,阳光也不错,早起上班的车上的人也不多,公司来的同事和昨天一样一样的,可能明天会多一些吧,那就再来学习android吧.学了两个android的组件,这里学习下第三个android的组件,Content Provider内容提供器. Content Provider向我们提供了在不同应用程序之间的数据共享,比如微信啊,支付宝啊,想要获取手机联系人的信息,而手机联系人是另一个应用程序,那么这时候就需要用到Content Provider了.Content P

Android开发学习之路--Broadcast Receiver初体验

学习了Activity组件后,这里再学习下另一个组件Broadcast Receiver组件.这里学习下自定义的Broadcast Receiver.通过按键自己发送广播,然后自己接收广播.新建MyBroadcastReceiver,代码如下: package com.example.jared.broadcasttest; import android.content.BroadcastReceiver; import android.content.Context; import andro

Android开发学习之路--Activity之四种启动模式

后天终于可以回家了,马上就要过年了,趁着年底打酱油的模式,就多学习学习,然后记录记录吧.关于Activity已经学习了七七八八了,还有就是Activity的四种启动模式了,它们分别为,standard,singleTop,singleTask,singleInstance,根据名字也差不多可以理解这四种模式了: 1.standard:标准启动模式,默认情况下就是这个模式了,这个模式下启动的Activity会被多次实例化. 2.singleTop:这个模式下启动Activity的话,如果栈顶也是同