Material Design:CollapsingToolbarLayout
activity_main.xml:
<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" > <android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dip"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <!-- app:expandedTitleGravity="left|bottom"扩张后Title位置还可以这么设置 --> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:collapsedTitleGravity="left"
app:contentScrim="#2196F3"
app:expandedTitleMarginStart="20dp"
app:title="zzw" > <ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"
android:scaleType="centerCrop"
android:src="@drawable/bg_default" /> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize" >
</android.support.v7.widget.Toolbar>
</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" > <android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dip"
app:divider="?android:attr/listDivider"
app:dividerPadding="5dp"
app:showDividers="beginning|middle|end" > <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="0" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="1" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="2" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="3" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="4" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="5" />
</android.support.v7.widget.LinearLayoutCompat>
</android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end|right"
android:src="@drawable/ic_launcher"
app:backgroundTint="#64b5f6"
app:backgroundTintMode="multiply"
app:borderWidth="0dp"
app:elevation="10dp"
app:fabSize="normal"
app:pressedTranslationZ="20dp"
app:rippleColor="#1976d2" >
</android.support.design.widget.FloatingActionButton> </android.support.design.widget.CoordinatorLayout>
我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。
1、在CollapsingToolbarLayout中:
我们设置了layout_scrollFlags:关于它的值我这里再说一下:
- scroll - 想滚动就必须设置这个。
- enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
- exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
- enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
- contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
- expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。还可以通过app:expandedTitleGravity="left|bottom"设置Title相对位置
2、在ImageView控件中:
我们设置了:
- layout_collapseMode (折叠模式) - 有两个值:layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。
- pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
- parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
package com.zzw.testcollapsingtoolbarlayout; import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.widget.Toolbar; public class MainActivity extends Activity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");// 设置标题
mCollapsingToolbarLayout.setExpandedTitleColor(Color.RED);// 设置还没收缩时状态下字体颜色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);// 设置收缩后Toolbar上字体的颜色 Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setNavigationIcon(android.R.drawable.ic_menu_delete); } }
Material Design:CollapsingToolbarLayout的更多相关文章
- Material Design学习-----CollapsingToolbarLayout
博客引用(http://www.open-open.com/lib/view/open1438265746378.html) CollapsingToolbarLayout为我们提供了一个很方便的顶部 ...
- Material Design之CollapsingToolbarLayout使用
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...
- Android Material Design之CollapsingToolbarLayout使用
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...
- Material Design: NavigationView FlaotingActionBar SnackBar采用
转载 请明确说明 MingsangAndroid 本文介绍了Design Support Library的引入 拥抱Android Design Support Library新变化(导航视图.悬浮A ...
- ANDROID L——Material Design详解(UI控件)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- Material Design学习
前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...
- Android Material design
1.Material Design:扁而不平 2.Android Support Design 库 之 Snackbar使用及源码分析 3.十大Material Design开源项目,直接拿来用!
- [转]ANDROID L——Material Design详解(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
- [转]Android 5.0——Material Design详解(动画篇)
Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Andr ...
随机推荐
- POJ 1743 后缀数组不重叠最长重复子串
#include<stdio.h> #include<string.h> #include<algorithm> #define maxn 30000 using ...
- nyoj 105 九的余数
点击打开链接 九的余数 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数整除九之后的余数. 输入 ...
- adb bugreport > d:/bug.txt
adb bugreport > d: 快速下载anr等bug日志
- 第一次听到了docker
1.今天工作中,同时要我给应用申请3个docker,因为之前是一直在做开发,部署就在tomcat里面测试,下来搜素了一下,发现docker和maven类似,不过docker是环境的一个快照,因为之前开 ...
- XBox360-双光盘游戏自制GOD
一直在找极限竞速4(Forza4),虽然这个版本比较老,但因为带体感.终于下到了,可惜是2个ISO.试着自己做GOD.用到两个软件:Iso2God和Xbox Backup Creator(俗称XBC) ...
- FZU Problem 2136 取糖果
Problem 2136 取糖果 Time Limit: 1000 mSec Memory Limit : 32768 KB Problem Description 有N个袋子放成一排,每个 ...
- 用C#编写游戏脚本
大学宿舍玩游戏的时候,为了简化重复的键鼠动作,有学习过按键精灵和TC脚本开发工具,并做了一些小脚本,基本达到了当时的需求.不知不觉,已经毕业了3年了,无聊之余又玩起了游戏,对于一些无趣的重复行为,于是 ...
- Social networks and health: Communicable but not infectious
Harvard Men’s Health Watch Poet and pastor John Donne famously proclaimed “No man is an island.” It ...
- 关于AIR新浪登录测试
/** *由于在应用申请中,我设置的域名属于新浪云,因此在本地测试的话肯定不能成功的,有个办法就是直接在新浪云那边授权成功后,将token的值直接使用post或者get方法传递过来,直接在本地 *lo ...
- 慕课网-安卓工程师初养成-2-10 Java中的强制类型转换
来源:http://www.imooc.com/code/1241 相信小伙伴们也发现了,尽管自动类型转换是很方便的,但并不能满足所有的编程需要. 例如,当程序中需要将 double 型变量的值赋给一 ...