📜  Android中的发光按钮(1)

📅  最后修改于: 2023-12-03 15:29:22.711000             🧑  作者: Mango

Android中的发光按钮

介绍

发光按钮是Android开发中常见的一种控件,它可以在用户操作时发光,增加交互的视觉效果,增强应用用户体验。发光按钮通常被用于实现重要的操作按钮,例如登录、提交等。

实现

在Android中,发光按钮可以通过下面的几种方式实现:

方案一:设置背景资源

可以通过设置背景资源为一个发光的图片,实现发光按钮的效果。例如:

<Button
    android:id="@+id/btn_glow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Glow Button"
    android:background="@drawable/btn_glow" />

其中,@drawable/btn_glow是一个发光图片资源。

方案二:使用描边效果

可以在按钮的边缘添加描边效果,通过设置描边效果的颜色和宽度,实现发光按钮的效果。例如:

<Button
    android:id="@+id/btn_stroke"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Stroke Button"
    android:background="@drawable/btn_bg_stroke"
    android:textColor="@color/colorAccent"
    android:padding="16dp" />

其中,@drawable/btn_bg_stroke 是一个背景为透明的描边效果资源。

方案三:使用动态效果

可以使用动态效果,在用户操作时添加发光效果,增强交互体验。例如:

public class GlowButton extends AppCompatButton {

    private static final int ANIMATION_DURATION_MS = 1000;
    private static final float GLOW_SCALE_FACTOR = 1.2f;

    private Paint mPaint;
    private float mGlowRadius;
    private float mMaxGlowRadius;
    private ObjectAnimator mGlowAnimator;

    public GlowButton(Context context) {
        super(context);
        init();
    }

    public GlowButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
        mGlowRadius = 0;
        mMaxGlowRadius = getResources().getDimensionPixelSize(R.dimen.glow_button_max_radius);
        mGlowAnimator = ObjectAnimator.ofFloat(this, "glowRadius", 0, mMaxGlowRadius);
        mGlowAnimator.setInterpolator(new DecelerateInterpolator());
        mGlowAnimator.setDuration(ANIMATION_DURATION_MS);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            mGlowAnimator.start();
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            mGlowAnimator.reverse();
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setAlpha((int) ((1 - mGlowRadius / mMaxGlowRadius) * 255));
        canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, mGlowRadius, mPaint);
        super.onDraw(canvas);
    }

    public void setGlowRadius(float radius) {
        mGlowRadius = radius;
        invalidate();
    }
}

其中,GlowButton 继承了 AppCompatButton,在 onTouchEvent 方法中监听用户操作,使用属性动画实现发光动画。

总结

Android中的发光按钮可以通过设置背景资源、使用描边效果、使用动态效果等方式实现。使用发光按钮可以增强应用的用户体验,提升交互效果。