触摸时可着色/变暗

Question

我目前正在开发的应用程序使用大量 ImageView 作为按钮。这些按钮上的图形使用 Alpha 通道淡出按钮的边缘，使它们看起来不规则。目前，我们必须为每个按钮生成 2 个图形（1 个用于选定/聚焦/按下状态，另一个用于默认的未选定状态），并为每个按钮使用 XML 文件中定义的 StateListDrawable。

虽然这工作得很好，但似乎非常浪费，因为所有选定的图形都只是未选定按钮的着色版本。这些需要时间来生成（无论多短）并占用最终 APK 的空间。似乎应该有一个简单的方法来自动实现这一点。

完美的解决方案似乎是为每个按钮使用 ImageView，并在其色调属性中指定 ColorStateList。此方法的优点是所有按钮（共享相同色调）只需要一个 XML ColorStateList。然而它不起作用。正如此处所述，当提供给色调的值不是单一颜色时，ImageView 会抛出 NumberFormatException。

我的下一个尝试是对选定的可绘制对象使用 LayerDrawable。在图层列表内，我们将在堆栈底部放置原始图像，并用半透明矩形覆盖。这适用于按钮图形的实体部分。然而，原本应该完全透明的边缘现在与顶层的颜色相同。

有没有人遇到过这个问题并找到合理的解决方案？我想坚持使用 XML 方法，但可能会编写一个简单的 ImageView 子类，该子类将在代码中进行所需的着色。

Answer 1

对于那些遇到类似需求的人来说，用代码解决这个问题是相当干净的。这是一个示例：

public class TintableButton extends ImageView {

    private boolean mIsSelected;

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

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

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

    private void init() {
        mIsSelected = false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN && !mIsSelected) {
            setColorFilter(0x99000000);
            mIsSelected = true;
        } else if (event.getAction() == MotionEvent.ACTION_UP && mIsSelected) {
            setColorFilter(Color.TRANSPARENT);
            mIsSelected = false;
        }

        return super.onTouchEvent(event);
    }
}

它尚未完成，但可以很好地作为概念证明。

Answer 2

您可以为此组合 StateListDrawable 和 LayerDrawable。

public Drawable getDimmedDrawable(Drawable drawable) {
        Resources resources = getContext().getResources();
        StateListDrawable stateListDrawable = new StateListDrawable();
        LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
                drawable,
                new ColorDrawable(resources.getColor(R.color.translucent_black))
        });
        stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, layerDrawable);
        stateListDrawable.addState(new int[]{android.R.attr.state_focused}, layerDrawable);
        stateListDrawable.addState(new int[]{android.R.attr.state_selected}, layerDrawable);
        stateListDrawable.addState(new int[]{}, drawable);
        return stateListDrawable;
}

我假设我们的 color.xml 看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="translucent_black">#80000000</color>
</resources>

Answer 3

您的回答非常好:)

但是，我没有创建按钮对象，而是仅调用 OnTouchlistener 来更改每个按钮的状态看法。

public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        Drawable background =  v.getBackground();
        background.setColorFilter(0xBB000000, PorterDuff.Mode.SCREEN);
        v.setBackgroundDrawable(background);
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        Drawable background =  v.getBackground();
        background.setColorFilter(null);
        v.setBackgroundDrawable(background);
    }

    return true;

}

但给出了相同的结果

Answer 4

我认为这个解决方案很简单！

步骤 1：创建 res/drawable/dim_image_view.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/dim_image_view_normal"/> <!-- focused -->
    <item android:state_pressed="true" android:drawable="@drawable/dim_image_view_pressed"/> <!-- pressed -->
    <item android:drawable="@drawable/dim_image_view_normal"/> <!--default -->
</selector>

步骤 2：创建 res/drawable/dim_image_view_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item><bitmap android:src="@mipmap/your_icon"/></item>
</layer-list>

步骤 3：创建 res/drawable/dim_image_view_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item><bitmap android:src="@mipmap/your_icon" android:alpha="0.5"></bitmap></item>
</layer-list>

步骤 4：尝试将 xml 布局中的图像设置为：

android:src="@drawable/dim_image_view"

Answer 5

我也有看起来不规则的按钮，需要色调。最后，我只是采用了状态颜色列表作为我的 ImageButton 背景。给人的印象是按钮颜色在按下时会发生变化，并且非常简单且计算强度较低。我知道这并不完全是一种色调，但它确实在通常转瞬即逝的时刻向用户提供了必要的视觉反馈。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:state_pressed="true"
        android:drawable="@android:color/darker_gray" />
    <item android:drawable="@android:color/transparent" />
</selector>

Answer 6

您可以使用我创建的类 https://github.com/THRESHE/TintableImageButton
不完全是最好的解决方案，但它有效。

Answer 7

你的回答也很好;)

我正在修改一点，它会给你这样的结果：

Rect rect;
Drawable background;
boolean hasTouchEventCompleted = false;

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        rect = new Rect(v.getLeft(), v.getTop(), v.getRight(),
                v.getBottom());
        hasTouchEventCompleted = false;
        background = v.getBackground();
        background.setColorFilter(0x99c7c7c7,
                android.graphics.PorterDuff.Mode.MULTIPLY);
        v.setBackgroundDrawable(background);
    } else if (event.getAction() == MotionEvent.ACTION_UP
            && !hasTouchEventCompleted) {
        background.setColorFilter(null);
        v.setBackgroundDrawable(background);

    } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
        if (!rect.contains(v.getLeft() + (int) event.getX(), v.getTop()
                + (int) event.getY())) {
            // User moved outside bounds
            background.setColorFilter(null);
            v.setBackgroundDrawable(background);
            hasTouchEventCompleted = true;
        }
    }


    //Must return false, otherwise you need to handle Click events yourself.  
    return false;
}

Answer 8

我认为这个解决方案很简单：

    final Drawable drawable = ... ;
    final int darkenValue = 0x3C000000;
    mButton.setOnTouchListener(new OnTouchListener() {
        Rect rect;
        boolean hasColorFilter = false;

        @Override
        public boolean onTouch(final View v, final MotionEvent motionEvent) {
            switch (motionEvent.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
                    drawable.setColorFilter(darkenValue, Mode.DARKEN);
                    hasColorFilter = true;
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (rect.contains(v.getLeft() + (int) motionEvent.getX(), v.getTop()
                            + (int) motionEvent.getY())) {
                        if (!hasColorFilter)
                            drawable.setColorFilter(darkenValue, Mode.DARKEN);
                        hasColorFilter = true;
                    } else {
                        drawable.setColorFilter(null);
                        hasColorFilter = false;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    drawable.setColorFilter(null);
                    hasColorFilter = false;
                    break;
            }
            return false;
        }
    });