当前位置： 移动技术网 > 移动技术>移动开发>Android > Android透明PNG文件添加底色

Android透明PNG文件添加底色

2020年08月10日  | 移动技术网移动技术  | 我要评论

Android透明PNG文件添加底色


       作为一个APK开发者，界面的优美是必须要考虑的事情，见到一个好的APK，如果想要获得APK上的图标，可以采用一个很方便的方式：直接解压APK文件到本地，直接找res文件夹，就可以找到对应的图片。
       其中，png图片很常见，而透明的png图片更常见。为什么呢？因为我们可以通过修改底色，来获得不同的视觉效果，达到一张png图显示多种状态。很实用，比如，一个ImageView控件放入一个透明的png响铃，点击后，响铃变色，提示ImageView是否点击的状态。下面我将一步步实现上述需求。
       先上图，如果有一样的需求，继续往下看（点击前后图1，图2对比）：

图1图2

1、走过的弯路

       对于图片我们都知道怎么设置背景色，android:background="@color/black",就是在设置底色为黑色，但是效果并没有达到预期，没有实现响铃颜色的变化，只是做了一个遮挡，显示一个响铃轮廓，见图1红色框。
       那个怎么设置一个响铃的色彩呢？首先想到的是编写一个.xml文件，因为之前用过此类方法解决控件圆角的问题。代码如下。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/gray"/>
        </shape>
    </item>

    <item>
        <bitmap android:src="@drawable/ic_notify"/>
    </item>
</layer-list>

       后来发现不行，见图1黄色框。通过查询资料和实测，发现一个item，就是一个画布，每张画布可以放置一个图片，但是底层的item会覆盖顶层的item，且不可设置透明度，所以此种方式无法实现上述我们提出的需求。
       后来引入android:tint="@color/gray"属性解决了这个问题，效果见图1青色框。
       tint属性是对图片进行着色，以适应不同需求。还有个属性android:tintMode="src_in"来配合它使用，顾名思义就是着色方式，默认采用src_in。一共有六中Mode，下面只简单列写，不解释具体含义。multiply、screen、srcin、src_over、src_atop、add

       下面2节和3节实现点击更换底色效果。

2、最笨的方法-方法1

       最笨的方法就是建立一个RelativeLayout布局，然后放入多个ImageView，不同的ImageView实现不同底色的png文件。因为RelativeLayout布局本身的特点，所有的ImageView都彼此覆盖，不存在轮廓改变的情况，正因为如此，可以通过设置不同ImageView的visibility属性来实现不同的ImageView。xml代码如下：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image_view_false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:src="@drawable/ic_notify"
        android:tint="@color/gray"/>

    <ImageView
        android:id="@+id/image_view_true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:src="@drawable/ic_notify"
        android:tint="@color/blue"
        android:visibility="invisible"/>
</RelativeLayout>

       java处理代码。因为我要实现的是两个底色png的切换，所以只做了两个ImageView。当然可以增加，但是相应的需要设置多个ImageView的Visibility属性，且不能简单地依靠布尔数据isSelect区分ImageView。

if(isSelectMode1)
{
    imageViewTrue.setVisibility(View.INVISIBLE);
    imageViewFalse.setVisibility(View.VISIBLE);
    isSelectMode1 = false;
}
else
{
    imageViewTrue.setVisibility(View.VISIBLE);
    imageViewFalse.setVisibility(View.INVISIBLE);
    isSelectMode1 = true;
}

3、使用API设置底色-方法2

       使用第2节中的方法固然可以实现不同底色的png图片，但是就如第2节中说的那样，如果想实现多个底色的图片切换，一是需要多个ImageView，xml就变得不简洁；二是切换png颜色需要设置多个ImageView的Visibility属性，代码一看就不好；所以引入新的API实现上述需求。
imageViewButton.setColorFilter(Color.BLUE);
       顾名思义，这个接口就是设置Filter的。那么我们采用一张图片实现png底色切换。xml代码如下：

<ImageView
        android:id="@+id/image_view_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:src="@drawable/ic_notify"
        android:tint="@color/gray" />

       JAVA处理代码。

if(isSelectMode2) {
    imageViewButton.setColorFilter(Color.GRAY);
    isSelectMode2 = false;
}
else {
    imageViewButton.setColorFilter(Color.BLUE);
    isSelectMode2 = true;
}

4、继续优化-方法3

       方法3实现了预期效果，代码也不是很多，但是有些控件无法通过此方法实现png切换，比如ExpandChildList等List控件或则其变形。所以最后还是需要做一个新的类。其中mySelect为控件MyImageView的选中状态。
       MyImageView.java

public class MyImageView extends AppCompatImageView{
    public boolean mySelect = false;

    public MyImageView(Context context) {
        this(context, null);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setMySelect(boolean mySelect) {
        this.mySelect = mySelect;
    }

    public boolean getMySelect()
    {
        return mySelect;
    }
}

       xml代码如下：

<com.example.testchangepngbackgroundcolor.MyImageView
    android:id="@+id/image_view_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:src="@drawable/ic_notify"
    android:tint="@color/gray" />

       java处理代码。

if(imageViewButton.getMySelect()) {
    imageViewButton.setColorFilter(Color.GRAY);
    imageViewButton.setMySelect(false);
}
else {
    imageViewButton.setColorFilter(Color.BLUE);
    imageViewButton.setMySelect(true);
}

源码地址：

本文地址：https://blog.csdn.net/guocctjpu/article/details/107871273

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网