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)