64、具有过渡动画效果的布局Layout（ 2 ）
【 CoordinatorLayout-与手势完美结合的滑动视图 】
【 AppBarLayout-可以随手势滑动的AppBar 】
<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/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <!--
使用 Toolbar 作为一个标题栏 app:layout_scrollFlags="scroll|enterAlways":
当向上混动的时候，Toolbar会移出屏幕，只要向下滑动，就会显示Toolbar。 app:layout_scrollFlags="scroll|enterAlwaysCollapsed":
当向上混动的时候，Toolbar会移出屏幕,向下滑动时，滑动到第一个的时候才会显示Toolbar。 app:layout_scrollFlags="scroll|exitUntilCollapsed":
不管向上还是向下移动，Toolbar都不会滑出屏幕。
另外：如果加上，android:minHeight="20dp"的时候。
当向上滑动时候，Toolbar移出屏幕，直到变成最小高度，
向下滑动时，滑动到第一个的时候才会显示Toolbar
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#77db93"
android:minHeight="20dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout> <!-- 与手势完美结合的滑动视图 -->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
............
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton
android:id="@+id/fab_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:src="@drawable/ic_launcher"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
<resources>
<!-- values/styles.xml -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
package com.example.com.designdemo; import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View; public class MainActivity2 extends AppCompatActivity {
private FloatingActionButton fab_btn = null;
private CoordinatorLayout root_layout = null;
private Toolbar toolbar = null; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2); toolbar = (Toolbar) this.findViewById(R.id.toolbar);
setSupportActionBar(toolbar); root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout);
fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);
fab_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)
.setAction("知道了", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}).show();
}
}); }
}
使用 Toolbar 作为一个标题栏
app:layout_scrollFlags="scroll|enterAlways":
当向上混动的时候，Toolbar会移出屏幕，只要向下滑动，就会显示Toolbar。
app:layout_scrollFlags="scroll|enterAlwaysCollapsed":
当向上混动的时候，Toolbar会移出屏幕,向下滑动时，滑动到第一个的时候才会显示Toolbar。
app:layout_scrollFlags="scroll|exitUntilCollapsed":
不管向上还是向下移动，Toolbar都不会滑出屏幕。
另外：如果加上，android:minHeight="20dp"的时候。当向上滑动时候，Toolbar移出屏幕，直到变成最小高度，
向下滑动时，滑动到第一个的时候才会显示Toolbar
【 Collapsing Toolbars-可以伸缩的ToolBar 】
1、activity_main2.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:id="@+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <!--
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
把文字颜色设置成白色。
-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!--
app:contentScrim="#77db93" 滑动到顶部，图片背景变成Toolbar条。
-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#77db93"
app:expandedTitleMarginStart="80dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/bg_01"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/> <!-- android:background="#77db93" -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="20dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <!-- 与手势完美结合的滑动视图 -->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
...............
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton
android:id="@+id/fab_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:src="@drawable/ic_launcher"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
2、MainActivity2.xml
package com.example.com.designdemo; import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View; public class MainActivity2 extends AppCompatActivity {
private FloatingActionButton fab_btn = null;
private CoordinatorLayout root_layout = null;
private CollapsingToolbarLayout collapsingToolbarLayout = null;
private Toolbar toolbar = null; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2); toolbar = (Toolbar) this.findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); collapsingToolbarLayout = (CollapsingToolbarLayout)this.findViewById(R.id.collapsingToolbarLayout);
collapsingToolbarLayout.setTitle("标题文字内容"); root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout);
fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);
fab_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)
.setAction("知道了", new View.OnClickListener() {
@Override
public void onClick(View v) {}
}).show();
}
});
}
}
3、styles.xml
<resources>
<!-- values/styles.xml -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
DEMO完整下载地址：http://download.csdn.net/detail/androidsj/9304305
64、具有过渡动画效果的布局Layout（ 2 ）的更多相关文章
- 63、具有过渡动画效果的布局Layout
下面,下来看一个Demo的效果,代码如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react过渡动画效果的实现,react-transition-group
本文介绍react相关的过渡动画效果的实现 有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果 安装 cnpm install react-tran ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- CSS中的变形、过渡、动画效果
一.变形 .过渡效果 1:元素平移 x方向 y方向 transform:translate(100px 100px); 2:过渡动画效果 a:什么属性参与过渡效果 b:过渡时间 c:过渡的效果 值包含 ...
- 【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果
基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- Windows Store App 过渡动画
Windows Store App 过渡动画 在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...
- Swift - 动画效果的实现方法总结（附样例）
在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用 ...
随机推荐
- LR11.5 安卓模拟器性能测试
LR11.5 安卓模拟器性能测试 上一篇 / 下一篇 2013-07-04 08:07:19 / 个人分类:相关知识 查看( 1172 ) / 评论( 1 ) / 评分( 0 / 0 ) 1.首先下 ...
- 英特尔 Android* 开发者指南上的对等应用
简单介绍 当没有 Wi-Fi 訪问点或互联网訪问时,Android* 应用可能须要对等连接在两台或多台 Android* 设备之间建立连接. 比方,文件共享应用和多人游戏. 该功能可使用 NFC.蓝牙 ...
- Python 的__name__属性
Python 的__name__属性: 一个模块被另一个程序第一次引入时,其主程序将运行. 如果我们想在模块被引入时,模块中的某一程序块不执行,我们可以用__name__属性来使该程序块仅在该模块自身 ...
- Latex插入项目列表符号
1. 关于 {itemize}里序号的形式 (这个在书里有介绍): latex默认生成的简单列表, 默认为一个小圆点,..... 而我们在写文章时可能想要一些不一样的列表符号, 比如 -, * 之类的 ...
- python导入模块的两种方式
第一种 from support import * 这种方式导入后可以直接调用(有命名冲突问题)命名冲突后定义的覆盖前定义的 如果在函数导入前定义 则导入函数覆盖 否则相反 if __name__ = ...
- js操作时间 加法 减法 计算 格式化时间
Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d ...
- andorid手机电脑操作
之前一直使用androidscreencast在pc上对手机进行操作,好久都没用了,前些天再次用的时候,提演示样例如以下: 决定还是自己写一个吧,由于7月份要做一个小分享,打算讲一些android的东 ...
- 使用 ConfigurationSection 创建自定义配置节
我们可以通过用自己的 XML 配置元素来扩展标准的 ASP.NET 配置设置集,要完成这一功能,我们必须实现继承System.Configuration.ConfigurationSection 类来 ...
- Java并发编程（六）：Java里实现对象安全发布的四种方式
接上篇,首先要了解什么是对象的发布与逸出? Java里安全发布对象的四种方法1.单例(注意懒汉和饿汉的区别)2.静态属性,注意类里的静态域和静态代码块的顺序有要求3.枚举4.final
- Catalog的种类
框架中的Catalog 在MEF框架中,包含了4种Catalog,所有的Catalog的是从System.ComponentModel.Composition.Primitives名称空间下的Comp ...