android开发分享Android透明PNG文件添加底色

Android透明PNG文件添加底色1、走过的弯路2、最笨的方法-方法13、使用API设置底色-方法24、继续优化-方法3作为一个APK开发者,界面的优美是必须要考虑的事情,见到一个好的APK,如果想要获得APK上的图标,可以采用一个很方便的方式:直接解压APK文件到本地,直接找res文件夹,就可以找到对应的图片。其中,png图片很常见,

Android透明PNG文件添加底色

  • 1、走过的弯路
  • 2、最笨的方法-方法1
  • 3、使用API设置底色-方法2
  • 4、继续优化-方法3

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

Android透明PNG文件添加底色Android透明PNG文件添加底色

1、走过的弯路

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

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="https://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); } 

源码地址:

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/addevelopment/894415.html

(0)
上一篇 2021年10月21日
下一篇 2021年10月21日

精彩推荐