Android中FloatingActionButton实现悬浮按钮实例

时间:2021-05-20

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就不上传了.

效果如下:

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章