63、具有过渡动画效果的布局Layout

下面,下来看一个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>
 1 import android.os.Bundle;
 2 import android.support.design.widget.FloatingActionButton;
 3 import android.support.design.widget.Snackbar;
 4 import android.support.v7.app.AppCompatActivity;
 5 import android.view.View;
 6 import android.widget.FrameLayout;
 7
 9 public class MainActivity2 extends AppCompatActivity {
11     private FloatingActionButton fab_btn = null;
12     private FrameLayout root_layout = null;
13
14     @Override
15     protected void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         setContentView(R.layout.activity_main2);
18
19         root_layout = (FrameLayout) this.findViewById(R.id.root_layout);
20         fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);
21         fab_btn.setOnClickListener(new View.OnClickListener() {
22             @Override
23             public void onClick(View v) {
24                 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)
25                         .setAction("知道了", new View.OnClickListener() {
26                     @Override
27                     public void onClick(View v) {
28
29                     }
30                 }).show();
32             }
33         });
35     }
37 }

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

修改代码如下:

 1 <android.support.design.widget.CoordinatorLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:id="@+id/root_layout"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical">
 8     <android.support.design.widget.FloatingActionButton
 9         android:id="@+id/fab_btn"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:layout_gravity="bottom|right"
13         android:layout_margin="10dp"
14         android:src="@drawable/ic_launcher"
15         app:fabSize="normal"/>
16 </android.support.design.widget.CoordinatorLayout>
 1 package com.example.com.designdemo;
 2
 3 import android.os.Bundle;
 4 import android.support.design.widget.CoordinatorLayout;
 5 import android.support.design.widget.FloatingActionButton;
 6 import android.support.design.widget.Snackbar;
 7 import android.support.v7.app.AppCompatActivity;
 8 import android.view.View;
 9
10
11 public class MainActivity2 extends AppCompatActivity {
13     private FloatingActionButton fab_btn = null;
14     private CoordinatorLayout root_layout = null;
15
16     @Override
17     protected void onCreate(Bundle savedInstanceState) {
18         super.onCreate(savedInstanceState);
19         setContentView(R.layout.activity_main2);
20
21         root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout);
22         fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);
23         fab_btn.setOnClickListener(new View.OnClickListener() {
24             @Override
25             public void onClick(View v) {
26                 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)
27                         .setAction("知道了", new View.OnClickListener() {
28                             @Override
29                             public void onClick(View v) {
31                             }
32                         }).show();
34             }
35         });
37     }
39 }

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

时间: 2024-10-10 02:10:39

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

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

[ CoordinatorLayout-与手势完美结合的滑动视图 ] [ AppBarLayout-可以随手势滑动的AppBar ] 1 <android.support.design.widget.CoordinatorLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto"

jQuery和CSS3全屏带过渡动画效果的模态窗口插件

animatedModal.js是一款效果非常炫酷的jQuery和CSS3全屏带过渡动画的模态窗口特效插件.该模态窗口插件和animate.css完美结合,你可以使用animate.css中的任何动画效果来制作该模态窗口的过渡动画效果. 在线演示:http://www.htmleaf.com/Demo/201503031453.html 下载地址:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201503031452.html

165在屏幕中实现过渡动画效果

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController () 4 - (void)layoutUI; 5 - (UIImageView *)nextView; 6 - (v

iOS开发——动画篇Swift篇&amp;动画效果的实现

Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用animateWithDuration来实现动画 (1)此方法共有5个参数: duration:动画从开始到结束的持续时间,单位是秒 delay:动画开始前等待的时间 options:动画执行的选项.里面可以设置动画的效果.可以使用UIViewAnimationOpt

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

在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用animateWithDuration来实现动画 (1)此方法共有5个参数: duration:动画从开始到结束的持续时间,单位是秒 delay:动画开始前等待的时间 options:动画执行的选项.里面可以设置动画的效果.可以使用UIViewAnimationOptions类提供的各种预置效果 a

Windows Store App 过渡动画

Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发生的变化,不会让用户觉得元素的位置变化过于突然.下面通过一个示例介绍如何为界面中的文本块添加过渡动画. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为TransitionAnimationPage,双击打开此页面的TransitionAnimationPage.xaml文件,在Gr

带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件.该幻灯片插件内置有16种不同的动画过渡效果.它提供了丰富的参数来控制幻灯片的播放.它使用简单,并且可以兼容IE8浏览器. 在线预览   源码下载 使用方法 使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件. 1 2 3 <link rel="stylesheet" href="css/nivo-slider.

Android中给layout下的布局文件添加动画效果

先上实现效果: 给ListView添加文本内容,文本内容添加进ListView的过程中增加动画效果 步骤一: 先定义好一个动画文件,把要实现的动画效果写好. 1.在res文件夹下创建anim文件夹 2.在anim文件夹中添加一个fd.xml(文件名自定义)文件 fd.xml内容: <!--组合动画 duration:组合动画发生的的间隔时间 --> <set android:duration="1000" xmlns:android="http://sche

[AndroidStudio]DrawerLayout布局结合HomeAsUp箭头动画效果最小系统

2019-12-27  20:44:40  WideMouth DrawerLayout布局结合HomeAsUp箭头动画效果最小系统 2019年12月27日,现在,终于解决了写下这篇博客的所有事情,之前一直纠结博客园无法上传视频,找了很多种方法,尝试上传B网站视频测试,查看博客时却无法显示,原来是园主设置了JS权限,申请了才能支持HTML代码,几个小时申请完后,发现上传的视频无法自动播放(尝试了网上的办法,还是没能解决,头疼),一小时前找到了完美的解决办法(GIF)哈哈,多么简单的办法,还真是难