美文网首页IT部落Android知识程序员
Android中FloatingActionButton实现悬浮

Android中FloatingActionButton实现悬浮

作者: ROOM先生 | 来源:发表于2017-04-24 16:05 被阅读463次
    效果图.png

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

    相关文章

      网友评论

        本文标题:Android中FloatingActionButton实现悬浮

        本文链接:https://www.haomeiwen.com/subject/curpzttx.html