下面,下来看一个Demo的效果,代码如下:

<FrameLayout 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.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"/>
</FrameLayout>
 import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout; public class MainActivity2 extends AppCompatActivity {
private FloatingActionButton fab_btn = null;
private FrameLayout root_layout = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2); root_layout = (FrameLayout) 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();
}
});

}
}

如上图所示,问题出来了,底部弹出来的把浮动的小圆给挡住了。这样到然是有问题的。所以需要再次进行修改。

修改代码如下:

 <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.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>
 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.view.View; public class MainActivity2 extends AppCompatActivity {
private FloatingActionButton fab_btn = null;
private CoordinatorLayout root_layout = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2); 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();
}
});
}
}

现在的效果就不会被挡住了,只需要把最外层的 FrameLayout修改成CoordinatorLayout 即可,非常方便。

63、具有过渡动画效果的布局Layout的更多相关文章

  1. 64、具有过渡动画效果的布局Layout( 2 )

    [ CoordinatorLayout-与手势完美结合的滑动视图 ] [ AppBarLayout-可以随手势滑动的AppBar ] <android.support.design.widget ...

  2. 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. react过渡动画效果的实现,react-transition-group

    本文介绍react相关的过渡动画效果的实现 有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果 安装 cnpm install react-tran ...

  4. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  5. CSS中的变形、过渡、动画效果

    一.变形 .过渡效果 1:元素平移 x方向 y方向 transform:translate(100px 100px); 2:过渡动画效果 a:什么属性参与过渡效果 b:过渡时间 c:过渡的效果 值包含 ...

  6. 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...

  7. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  8. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

  9. Swift - 动画效果的实现方法总结(附样例)

    在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用 ...

随机推荐

  1. Python-PyQt4学习资料汇总

    摘自:http://www.cnblogs.com/coderzh/archive/2009/06/28/1512654.html 官方文档: http://pyqt.sourceforge.net/ ...

  2. NPOI(2.1.3)向excel中插入图片,xls文档图片插入成功,xlsx文档图片插入失败

    众所周知,NPOI对xls和xlsx两个版本的excel文档的操作并没有一个统一的支持, 程序若想兼容这两个版本的操作,必须根据excel版本分别去调用HSSF和XSSF这两套操作库, 之前一直不明白 ...

  3. jmeter ---测试TCP服务器/模拟发送TCP请求

    jmeter测试TCP服务器/模拟发送TCP请求 jmeter测试TCP服务器,使用TCP采样器模拟发送TCP请求. TCP采样器:打开一个到指定服务器的TCP / IP连接,然后发送指定文本并等待响 ...

  4. jmeter测试http请求使用csv参数

    创建参数化文件 线程组添加CSV Data Set Config配置元件 为请求添加参数 重新运行查看结果 使用随机参数(JMeter有好多函数可以使用) 查看结果发现使用随机生成的数字 3

  5. unity Editor下自启动

    [InitializeOnLoad] 加上这个特性,并且在静态构造函数里写上内容.即可在Unity启动的时候自启动这个Editor脚本

  6. C++语言基础(20)-模板的非类型参数

    一.在函数模板中使用非类型参数 #include <iostream> using namespace std; template<class T> void Swap(T & ...

  7. WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

    <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;he ...

  8. Android实例-IdHTTP下载(并实现自动安装)(XE10+小米2)

    相关资料: 1.群号 383675978 2.运行时提示"connection closed gracefully"错误原因与解决 http://www.delphifans.co ...

  9. linux学习笔记32---命令ping和telnet

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...

  10. Spark1.5堆内存分配

    这是spark1.5及以前堆内存分配图 下边对上图进行更近一步的标注,红线开始到结尾就是这部分的开始到结尾 spark 默认分配512MB JVM堆内存.出于安全考虑和避免内存溢出,Spark只允许我 ...