按下按钮背景在单击之前是透明的

时间:2016-05-09 12:05:25

标签: android

按下按钮后,我实现了Ripple Animation。一切都很好,除非我点击按钮是透明使得无法看到。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="3dp"/>
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

这是我创建的自定义按钮类。

public class MyButton extends Button {


        public MyButton(final Context context) {
            super(context);
            init();
        }

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

        public MyButton(final Context context, final AttributeSet attrs,
                        final int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

        private void init() {
            mPaint = new Paint();
            mPaint.setAlpha(100);
        }

        @Override
        public boolean onTouchEvent(@NonNull final MotionEvent event) {
            if (event.getActionMasked() == MotionEvent.ACTION_UP) {
                mDownX = event.getX();
                mDownY = event.getY();

                ObjectAnimator animator = ObjectAnimator.ofFloat(this, "radius", 0,
                        getWidth() * 3.0f);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.setDuration(400);
                animator.start();
            }
            return super.onTouchEvent(event);
        }

        public void setRadius(final float radius) {
            mRadius = radius;
            if (mRadius > 0) {
                RadialGradient radialGradient = new RadialGradient(mDownX, mDownY,
                        mRadius * 3, Color.TRANSPARENT, getResources().getColor(R.color.colorPrimaryDark),
                        Shader.TileMode.MIRROR);
                mPaint.setShader(radialGradient);
            }
            invalidate();
        }

        private Path mPath = new Path();
        private Path mPath2 = new Path();

        @Override
        protected void onDraw(@NonNull final Canvas canvas) {
            super.onDraw(canvas);

            mPath2.reset();
            mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);

            canvas.clipPath(mPath2);

            mPath.reset();
            mPath.addCircle(mDownX, mDownY, mRadius / 3, Path.Direction.CW);

            canvas.clipPath(mPath, Region.Op.DIFFERENCE);

            canvas.drawCircle(mDownX, mDownY, mRadius, mPaint);
        }
    }

这是我使用myButton类的地方

 <io.wyntr.peepster.MyButton
            android:layout_width="325dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:textSize="20dp"
            android:textAllCaps="false"
            android:text="Continue"
            android:id="@+id/sendCodeButton"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:clickable="true"
            android:background="@drawable/ripple"
            android:textColor="@color/icons"
            android:layout_gravity="center_horizontal" />

截图:

unPressed State of the Button

Pressed State of the Button

2 个答案:

答案 0 :(得分:1)

等着你回复我的评论,但要继续前进并添加我的答案:

您可以通过添加

来设置将使用ripple动画的按钮的颜色
<item android:drawable="@android:color/holo_blue_bright" />

像这样:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
    <item android:drawable="@android:color/holo_blue_bright" />
</ripple>

经过测试。使用时,按钮的默认颜色(未按下)将变为holo_blue_bright。这是我认为对你有用的post。 :)

希望这会有所帮助。干杯。 :)

答案 1 :(得分:0)

此行会删除按钮的边框,因此它当然是不可见的 尝试将其更改为其他内容

style="@style/Widget.AppCompat.Button.Borderless"
相关问题