可绘制Android上的颜色叠加 [英] Color overlay on drawable Android

问题描述

我一直在这里关注本教程中等-对角切割视图" 以获得对角视图效果

I've been following this tutorial here Medium - Diagonal Cut View to get that diagonal view effect

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

<item android:drawable="@color/colorPrimary"  />

<item>
    <bitmap
        android:src="@drawable/bebe"
        android:gravity="center"
        android:alpha="0.1" />
</item>

<item android:top="260dp"
    android:bottom="-100dp"
    android:left="0dp"
    android:right="-260dp">
    <rotate
        android:fromDegrees="-10"
        android:pivotX="0%"
        android:pivotY="100%">
        <shape
            android:shape="rectangle">
            <solid
                android:color="@android:color/white"/>
        </shape>
    </rotate>
</item>
</layer-list>

到目前为止，代码几乎是相同的，并且可以实现效果，但是仅在Lollipop +上有效，我进行了搜索，但是找不到如何在可绘制对象的顶部覆盖颜色以实现相同的效果，并且我尝试了所有方法徒劳无功.

So far the code is the almost the same and the effect is achieved, but only works on Lollipop+, I have searched but cannot find how to have a color overlay on top of an drawable to achieve this same effect and all my tries has being in vain.

drawable放在RelativeLayout的background属性中.我试图在2个单独的ImageView中制作它，一个用于背景图像，一个用于颜色叠加，但这不适用于对角线样式.

The drawable goes in the background property of a RelativeLayout. I have tried to make it in 2 separated ImageView, one for the background image and one for the color overlay, but that doesn't apply the diagonal style right.

棒棒糖之前的版本怎么能达到这种效果?

How can one achieve this effect for pre-lollipop versions?

推荐答案

Drawable background = relativeLayout.getBackground();
background.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);

您也可以根据需要的效果尝试SRC_ATOP或MULTIPLY.

you can also try SRC_ATOPor MULTIPLY depending on desired effect.

=========编辑=======================

========= EDIT ========================

好的，我想我现在可以更好地理解您的要求了.起初还不太清楚.

Ok, I think I now better understand what you are asking. It wasn't entirely clear at first.

您并不是要问每个颜色覆盖的问题，或者说，这不是您的问题所在.您的问题在于您对alpha属性的依赖.

You aren't asking about a color overlay per-say, or rather, that is not what your problem is. Your problem lies in your reliance on the alpha attribute.

执行此操作，我对您的元素进行了重新排序，以使彩色形状位于图像的顶部，并且使彩色形状的颜色具有指定的alpha字节，而不是使图像透明.您可以根据需要更改颜色和Alpha.

Do this, I have reordered your elements, so that the colored shape goes on top of the image, and instead of making the image transparent, we make the colored shape's color have an specified alpha byte. You can change the color and alpha as you like.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/muse15fence_750"/>
    </item>
    
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#cc3F51B5"/>
        </shape>
    </item>



    <item
        android:bottom="-100dp"
        android:left="0dp"
        android:right="-260dp"
        android:top="260dp">
        <rotate
            android:fromDegrees="-10"
            android:pivotX="0%"
            android:pivotY="100%">
            <shape
                android:shape="rectangle">
                <solid
                    android:color="@android:color/white"/>
            </shape>
        </rotate>
    </item>
</layer-list>

这就是果冻豆的样子.

这篇关于可绘制Android上的颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！