Android - 点击可以转动的自定义右下角浮动FABImageButton按钮

因为项目需要一个右下角浮动的圆形的按钮，顺便增加了一个用户友好体验，点击按钮后开始转动，再次点击后停止转动，如图：

实现方式：

首先添加一个FABImageButton.java的类文件

package com.example.test;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.StateListDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.ImageButton;

public class FABImageButton extends ImageButton{
    private Context content;
    private Animation operatingAnim;
    private boolean isAnimPlay = false;
    private int bgColor;
    private int bgColorPressed;
    
    public FABImageButton(Context context) {
		super(context);
		this.content = context;
		init(null);
	}
    public FABImageButton(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.content = context;
		init(attrs);
	}
    public FABImageButton(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		this.content = context;
		init(attrs);
	}
    @SuppressLint("NewApi") 
    public FABImageButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    	super(context, attrs, defStyleAttr, defStyleRes);
        this.content = context;
        init(attrs);
    }
    /**
     * 播放/暂停旋转动画
     * */
    public void PlayAnim(){
    	if(!isAnimPlay){
    		startAnimation(operatingAnim);
		isAnimPlay = true;
    	}else{
    		clearAnimation();
		isAnimPlay = false;
    	}
    }
    
    private Drawable createButton(int color) {
        OvalShape oShape = new OvalShape();
        ShapeDrawable sd = new ShapeDrawable(oShape);
        setWillNotDraw(false);
        sd.getPaint().setColor(color);
        ShapeDrawable sd1 = new ShapeDrawable(oShape);

        sd1.setShaderFactory(new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient lg = new LinearGradient(0,0,0, height,
                        new int[] {
                                Color.WHITE,
                                Color.GRAY,
                                Color.DKGRAY,
                                Color.BLACK
                        }, null, Shader.TileMode.REPEAT);
                return lg;
            }
        });

        LayerDrawable ld = new LayerDrawable(new Drawable[] { sd1, sd });
        ld.setLayerInset(0, 0, 0, 0, 0);

        return ld;
    }
    
    @SuppressLint("NewApi") 
    private void init(AttributeSet attrSet) {
    	//加载动画
    	operatingAnim = AnimationUtils.loadAnimation(content, R.anim.tip);
		LinearInterpolator lin = new LinearInterpolator();
		operatingAnim.setInterpolator(lin);
    	
        Resources.Theme theme = content.getTheme();
        TypedArray arr = theme.obtainStyledAttributes(attrSet, R.styleable.FAB, 0, 0);
        try {
            setBgColor(arr.getColor(R.styleable.FAB_bg_color, Color.BLACK));
            setBgColorPressed(arr.getColor(R.styleable.FAB_bg_color_pressed, Color.GRAY));
            StateListDrawable sld = new StateListDrawable();

            sld.addState(new int[] {android.R.attr.state_pressed}, createButton(bgColorPressed));
            sld.addState(new int[] {}, createButton(bgColor));
            setBackground(sld);
        }

        catch(Throwable t) {}
        finally {
             arr.recycle();
        }

    }

    public void setBgColor(int color) {
        this.bgColor = color;
    }

    public void setBgColorPressed(int color) {
        this.bgColorPressed = color;
    }
}

2. values文件夹下面定义个名称为stylable.xml的资源文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FAB">
        <!-- Background color -->
        <attr name="bg_color" format="color|reference"/>
        <attr name="bg_color_pressed" format="color|reference"/>
    </declare-styleable>
</resources>

 

3.创建一个旋转的动画效果res文件夹下面建立一个anim文件夹，在文件夹下面建立一个名称为tip.xml的xml文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <rotate
        android:duration="200"  //转动速度
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359" />
</set>

 

4.layout里面添加FABImageButton

<com.example.test.FABImageButton
	android:id="@+id/fabbtn"
	android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@android:drawable/ic_input_add"   
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:tint="@android:color/white"/>

 

5.MainActivity文件

public class MainActivity extends Activity {
	FABImageButton fabbtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ListView lv = (ListView) findViewById(R.id.lv1);
        String[] data = new String[100];
        for (int i=0; i < data.length; i++)
            data[i] = "浮动按钮" + i;

        ArrayAdapter<String> aAdpt = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data);
        lv.setAdapter(aAdpt);
        
		
        fabbtn = (FABImageButton) findViewById(R.id.fabbtn);
        fabbtn.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v) {
				fabbtn.PlayAnim();
			}
        });
    }
}

　　

结束...