Android中FloatingActionButton实现悬浮按钮实例

Android中FloatingActionButton(悬浮按钮) 使用不是特别多,常规性APP应用中很少使用该控件. 当然他的使用方法其实很简单.直接上代码:

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

  <CheckBox
    android:id="@+id/cbDelay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:text="delay" />

  <RelativeLayout
    android:id="@+id/rlAddBill"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/fab01Add"
    android:layout_marginLeft="10dp"
    android:background="#00000000"
    android:visibility="gone">

    <LinearLayout
      android:id="@+id/ll01"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_below="@+id/ll02"
      android:orientation="horizontal">

      <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toLeftOf="@+id/miniFab01"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingBottom="5dp"
        android:text="销售单"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.FloatingActionButton
        android:id="@+id/miniFab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundTint="@color/colorAccent"
        app:elevation="5dp"
        app:fabSize="mini" />
    </LinearLayout>

    <LinearLayout
      android:id="@+id/ll02"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_below="@+id/ll03"
      android:orientation="horizontal">

      <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toLeftOf="@+id/miniFab02"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingBottom="5dp"
        android:text="销售退货"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.FloatingActionButton
        android:id="@+id/miniFab02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundTint="@color/colorAccent"
        app:elevation="5dp"
        app:fabSize="mini" />
    </LinearLayout>

    <LinearLayout
      android:id="@+id/ll03"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_alignParentTop="true"
      android:orientation="horizontal">

      <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toLeftOf="@+id/miniFab02"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingBottom="5dp"
        android:text="收款单"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.FloatingActionButton
        android:id="@+id/miniFab03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundTint="@color/colorAccent"
        app:elevation="5dp"
        app:fabSize="mini" />
    </LinearLayout>
  </RelativeLayout>

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab01Add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/cbDelay"
    android:layout_marginRight="15dp"
    android:layout_marginTop="22dp"
    android:src="@mipmap/btn_play_normal"
    app:backgroundTint="#31bfcf"
    app:elevation="5dp"
    app:fabSize="normal"
    app:rippleColor="#e7d161" />
</RelativeLayout>

MainActivity:

package com.example.liupanpan.floatingactionbuttondemo;

import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  private CheckBox cbDelay;
  private FloatingActionButton fab01Add;
  private boolean isAdd = false;
  private RelativeLayout rlAddBill;
  private int[] llId = new int[]{R.id.ll01, R.id.ll02, R.id.ll03};
  private LinearLayout[] ll = new LinearLayout[llId.length];
  private int[] fabId = new int[]{R.id.miniFab01, R.id.miniFab02, R.id.miniFab03};
  private FloatingActionButton[] fab = new FloatingActionButton[fabId.length];
  private AnimatorSet addBillTranslate1;
  private AnimatorSet addBillTranslate2;
  private AnimatorSet addBillTranslate3;
  private AnimatorSet addBillTranslate4;
  private AnimatorSet addBillTranslate5;
  private AnimatorSet addBillTranslate6;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.basic_fab_activity);
    initView();
    setDefaultValues();
    bindEvents();
  }

  private void initView() {
    cbDelay = (CheckBox) findViewById(R.id.cbDelay);
    fab01Add = (FloatingActionButton) findViewById(R.id.fab01Add);
    rlAddBill = (RelativeLayout) findViewById(R.id.rlAddBill);
    for (int i = 0; i < llId.length; i++) {
      ll[i] = (LinearLayout) findViewById(llId[i]);
    }
    for (int i = 0; i < fabId.length; i++) {
      fab[i] = (FloatingActionButton) findViewById(fabId[i]);
    }
  }

  private void setDefaultValues() {
    addBillTranslate1 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
    addBillTranslate2 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
    addBillTranslate3 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
//    addBillTranslate4 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
//    addBillTranslate5 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
//    addBillTranslate6 = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.add_bill_anim);
  }

  private void bindEvents() {
    fab01Add.setOnClickListener(this);
    for (int i = 0; i < fabId.length; i++) {
      fab[i].setOnClickListener(this);
    }
  }

  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.fab01Add:
        fab01Add.setImageResource(isAdd ? R.mipmap.ic_launcher_round : R.mipmap.ic_launcher_round);
        isAdd = !isAdd;
        rlAddBill.setVisibility(isAdd ? View.VISIBLE : View.GONE);
        if (isAdd) {
          addBillTranslate1.setTarget(ll[0]);
          addBillTranslate1.start();
          addBillTranslate2.setTarget(ll[1]);
          addBillTranslate2.setStartDelay(cbDelay.isChecked() ? 50 : 0);
          addBillTranslate2.start();
          addBillTranslate3.setTarget(ll[2]);
          addBillTranslate3.setStartDelay(cbDelay.isChecked() ? 100 : 0);
          addBillTranslate3.start();
//          addBillTranslate4.setTarget(ll[3]);
//          addBillTranslate4.setStartDelay(cbDelay.isChecked() ? 250 : 0);
//          addBillTranslate4.start();
//          addBillTranslate5.setTarget(ll[4]);
//          addBillTranslate5.setStartDelay(cbDelay.isChecked() ? 300 : 0);
//          addBillTranslate5.start();
//          addBillTranslate6.setTarget(ll[5]);
//          addBillTranslate6.setStartDelay(cbDelay.isChecked() ? 350 : 0);
//          addBillTranslate6.start();
        }
        break;
      case R.id.miniFab01:
        hideFABMenu();
        break;
      case R.id.miniFab02:

        hideFABMenu();
        break;
      case R.id.miniFab03:
        hideFABMenu();
        break;
      default:
        break;

    }
  }

  private void hideFABMenu() {
    rlAddBill.setVisibility(View.GONE);
    fab01Add.setImageResource(R.mipmap.ic_launcher_round);
    isAdd = false;
  }
}

运行程序,就可以实现当前的效果.问题XML的图片请自己替换一下,demo就不上传了.

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android setButtonDrawable()的兼容问题解决办法

    Android  setButtonDrawable()的兼容问题解决办法 setButtonDrawable()的兼容问题 API16实现 /** * Set the background to a given Drawable, identified by its resource id. * * @param resid the resource id of the drawable to use as the background */ public void setButtonDraw

  • Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】

    本文实例讲述了Android编程实现自定义PopupMenu样式.分享给大家供大家参考,具体如下: PopupMenu是Android中一个十分轻量级的组件.与PopupWindow相比,PopupMenu的可自定义的能力较小,但使用更加方便. 先上效果图: 本例要实现的功能如下: 1.强制显示菜单项的图标. 默认状态下,PopupMenu的图标是不显示的,并且Android没有为我们开放任何API去设置它的显示状态.为了显示菜单项的图标,可以自己重写PopupMenu并修改相关属性,也可以直接

  • Android悬浮按钮点击返回顶部FloatingActionButton

    先看一下Android悬浮按钮点击回到顶部的效果: FloatingActionButton是Design Support库中提供的一个控件,这个控件可以轻松实现悬浮按钮的效果 首先,要在项目中使用这个悬浮按钮就要先把design这个包导入项目 gradle中加入依赖 compile 'com.android.support:design:25.0.0' 接下来就是在xml中使用: 我这里是放置一个listView模拟返回顶部 <?xml version="1.0" encodi

  • Android开发设置RadioButton点击效果的方法

    本文实例讲述了Android开发设置RadioButton点击效果的方法.分享给大家供大家参考,具体如下: 在安卓开发中用到底部菜单栏 需要用到RadioButton这个组件 实际应用的过程中,需要对按钮进行点击,为了让用户知道是否点击可这个按钮,可以设置点击后 ,该按钮的颜色或者背景发生变化. layout中这部分的代码为: <RadioButton android:id="@+id/radio_button0" android:layout_height="fill

  • Android Button 自带阴影效果另一种解决办法

    在Android 5.0以后的版本中,定义一个button时,系统自动会加一个阴影的效果,有的时候这种效果看起来比较好,有的时候不符合UI的设计要求,这时候就需要手动去掉阴影. 网上很多文章写了解决办法,就是给button加一句话style="?android:attr/borderlessButtonStyle",这个确实能解决问题,但是又带来了另外一个问题,就是一般情况下,在写布局的时候,都会给每个控件写一个style,这样方便复用,比如我写了一个button,引了一个style,

  • Android仿知乎悬浮功能按钮FloatingActionButton效果

    前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,所以就来实践实践.效果基本出来了,大家可以自己去完善. 首先看一下效果图: 我们看到点击FloatingActionButton后会展开一些item,然后会有一个蒙板效果,这都是这个View的功能.那么这整个View肯定是个ViewGroup,我们一部分一部分来看. 首先是这个最小的Tag: 这个Tag带文字,可以是一个TextView,但为了美观,我们使用CardView,CardView是一个FrameLayout,我们要让它具有显

  • Android ButtonOnClick事件的写法总结

    Android ButtonOnClick事件的写法总结 假设layout里有三个Button吧,id分别是 button_1 ,button_2 , button_3 之前一直都知道有两种onClick写法: button_1.setOnClickListener(new Button.OnClickListener(){ public void onClick(View v) { //在这里添加点击事件 } }); 第二种: button_2.setOnClickListener(liste

  • Android中FloatingActionButton实现悬浮按钮实例

    Android中FloatingActionButton(悬浮按钮) 使用不是特别多,常规性APP应用中很少使用该控件. 当然他的使用方法其实很简单.直接上代码: xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

  • Android中实现图文并茂的按钮实例代码

    效果图如下所示: 代码: <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:gravity="center" android:background="#8

  • Android自定义APP全局悬浮按钮

    原本想通过framelayout实现一个悬浮在其他控件上的按钮,但是觉得很麻烦,需要各个界面都要动态填充.于是想到了悬浮窗,就自定一个ImageView用于显示全局按钮. 一.首先因为悬浮窗式的所以要添加权限,对于SDK>=23的需要动态获取权限,我这边用的是22的 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> <uses-permission android:

  • Android 中FloatingActionButton(悬浮按钮)实例详解

    Android 中FloatingActionButton(悬浮按钮)实例详解 一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 二.使用准备, 在as 的 build.grade文件中写上 compile 'com.android.support:design:22.2.0' 三.使用说明 <android.support.design.widget.FloatingActionButton android:id="@+id/floa

  • Android开发模仿qq视频通话悬浮按钮(实例代码)

    模仿qq视频通话的悬浮按钮的实例代码,如下所示: public class FloatingWindowService extends Service{ private static final String TAG="OnTouchListener"; private static View mView = null; private static WindowManager mWindowManager = null; private static Context mContext

  • Android中activity跳转按钮事件的四种写法

    具体实现代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 方法1. 采用实现OnClickListener接口的类 ((Button) findViewById(R.i

  • Android 中Lambda表达式的使用实例详解

     Android 中Lambda表达式的使用实例详解 Java8 中着实引入了一些非常有特色的功能,如Lambda表达式.streamAPI.接口默认实现等等.Lambda表达式在 Android 中最低兼容到 Android2.3 系统,兼容性还是不错的,Lambda表达式本质上是一种匿名方法,它既没有方法名,也没有访问修饰符和返回值类型,使用它编写的代码将更加简洁易读. 1.Lambda表达式的基本写法 如果想要在 Android 项目中使用 Lambda表达式 或者 Java8 的其他新特

  • Android中判断网络是否连接实例详解

    Android中判断网络是否连接实例详解 在android中,如何监测网络的状态呢,这个有的时候也是十分重要的,方法如下: public class ConnectionDetector { private Context _context; public ConnectionDetector(Context context){ this._context = context; } public boolean isConnectingToInternet(){ ConnectivityMana

  • android中Handle类的用法实例分析

    本文实例讲述了android中Handle类的用法.分享给大家供大家参考.具体如下: 当我们在处理下载或是其他需要长时间执行的任务时,如果直接把处理函数放Activity的OnCreate或是OnStart中,会导致执行过程中整个Activity无响应,如果时间过长,程序还会挂掉.Handler就是把这些功能放到一个单独的线程里执行,与Activity互不影响. 当用户点击一个按钮时如果执行的是一个常耗时操作的话,处理不好会导致系统假死,用户体验很差,而Android则更进一步,如果任意一个Ac

  • 如何在Android中实现渐显按钮的左右滑动效果

    先看下运行效果:    程序结构: MainActivity文件中代码: 复制代码 代码如下: package com.android.buttonpageflipper;import android.app.Activity;import android.graphics.PixelFormat;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.Gra

随机推荐