Android实现图片叠加效果的两种方法

本文实例讲述了Android实现图片叠加效果的两种方法。分享给大家供大家参考,具体如下:

效果图:

第一种:

第二种:

第一种是通过canvas画出来的效果:

public void first(View v) {
    // 防止出现Immutable bitmap passed to Canvas constructor错误
    Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),
        R.drawable.apple).copy(Bitmap.Config.ARGB_8888, true);
    Bitmap bitmap2 = ((BitmapDrawable) getResources().getDrawable(
        R.drawable.go)).getBitmap();
    Bitmap newBitmap = null;
    newBitmap = Bitmap.createBitmap(bitmap1);
    Canvas canvas = new Canvas(newBitmap);
    Paint paint = new Paint();
    int w = bitmap1.getWidth();
    int h = bitmap1.getHeight();
    int w_2 = bitmap2.getWidth();
    int h_2 = bitmap2.getHeight();
    paint.setColor(Color.GRAY);
    paint.setAlpha(125);
    canvas.drawRect(0, 0, bitmap1.getWidth(), bitmap1.getHeight(), paint);
    paint = new Paint();
    canvas.drawBitmap(bitmap2, Math.abs(w - w_2) / 2,
        Math.abs(h - h_2) / 2, paint);
    canvas.save(Canvas.ALL_SAVE_FLAG);
    // 存储新合成的图片
    canvas.restore();
    image.setImageBitmap(newBitmap);
}

Canvas canvas = new Canvas(newBitmap); 当以newBitmap创建Canvas时,所以操作都已经在该图上实现了。

该例子可以想做是播放器开始播放的效果,计算好中间位置,先覆盖一层透明灰色的正方形,然后在中间画上自己播放的按钮。

第二种是使用系统的LayerDrawable类,该类主要用来控制多个图片的结合:

public void second(View v) {
    Bitmap bitmap1 = ((BitmapDrawable) getResources().getDrawable(
        R.drawable.apple)).getBitmap();
    Bitmap bitmap2 = ((BitmapDrawable) getResources().getDrawable(
        R.drawable.go)).getBitmap();
    Drawable[] array = new Drawable[2];
    array[0] = new BitmapDrawable(bitmap1);
    array[1] = new BitmapDrawable(bitmap2);
    LayerDrawable la = new LayerDrawable(array);
    // 其中第一个参数为层的索引号,后面的四个参数分别为left、top、right和bottom
    la.setLayerInset(0, 0, 0, 0, 0);
    la.setLayerInset(1, 20, 20, 20, 20);
    image.setImageDrawable(la);
}

关联数组array,控制每一层的位置

注意:上面防止出现Immutable bitmap passed to Canvas constructor错误

原因是如果不用copy的方法,直接引用会对资源文件进行修改,而Android是不允许在代码里修改res文件里的图片

layer-list可以将多个图片按照顺序层叠起来。

语法:在drawalbe/drawable-layer.xml中

<layer-list xmlns:Android="http://schemas.android.com/apk/res/android">
  <item Android:drawable="@android:color/white" />
  <item Android:drawable="@drawable/logo_overlay" />
</layer-list>

使用方式像其他图片一样:

如在样式中引用:

<resources>
  <style name="LookupTheme" parent="@Android:style/Theme.Light.NoTitleBar">
    <item name="Android:windowBackground">@drawable/drawable-layer</item>
  </style>
</resources>

在java代码中引用:

复制代码 代码如下:

((ImageView) findViewById(R.id.imageview)).setImageDrawable(getResources().getDrawable(R.drawable.drawable-layer)

在代码中实现:

Resources resources = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.white);
layers[1] = r.getDrawable(R.drawable.logo_overlay);
LayerDrawable layerDrawable = new LayerDrawable(layers)
((ImageView) findViewById(R.id.imageview)).setImageDrawable(layerDrawable);

再举一个例子:

要用2张图片叠加起来,看上去形成一张图片

首先创建一个drawalbe/login_head.xml的文件,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list
 xmlns:Android="http://schemas.android.com/apk/res/android">
  <item Android:id="@+id/user_faceback_drawable" android:drawable="@drawable/faceback" />
  <item Android:id="@+id/user_face_drawable" android:drawable="@drawable/h001" android:left="10.0dip" android:top="18.0dip" android:right="25.0dip" android:bottom="35.0dip" />
</layer-list>

然后就可以使用这个组合的图片了,比如在ImageView中显示:

<ImageView Android:id="@+id/faceImg" android:background="@drawable/login_head"
Android:layout_width="wrap_content" android:layout_height="wrap_content" />

使用java代码:

如何使多个Drawable叠加(合成图片)?

大家可能知道Bitmap的叠加处理在Android平台中可以通过Canvas一层一层的画就行了,而Drawable中如何处理呢? 除了使用BitmapDrawable的getBitmap方法将Drawable转换为Bitmap外,今天Android123给大家说下好用简单的LayerDrawable类,LayerDrawable顾名思义就是层图形对象。下面直接用一个简单的代码表示:

Bitmap bm = BitmapFactory.decodeResource(getResources(),R.drawable.cwj);
Drawable[] array = new Drawable[3];
array[0] = new PaintDrawable(Color.BLACK); //黑色
array[1] = new PaintDrawable(Color.WHITE); //白色
array[2] = new BitmapDrawable(bm); //位图资源
LayerDrawable ld = new LayerDrawable(array); //参数为上面的Drawable数组
ld.setLayerInset(1, 1, 1, 1, 1); //第一个参数1代表数组的第二个元素,为白色
ld.setLayerInset(2, 2, 2, 2, 2); //第一个参数2代表数组的第三个元素,为位图资源
mImageView.setImageDrawable(ld);

上面的方法中LayerDrawable是关键,Android开发网提示setLayerInset方法原型为public void setLayerInset (int index, int l, int t, int r, int b) 其中第一个参数为层的索引号,后面的四个参数分别为left、top、right和bottom。对于简单的图片合成我们可以将第一和第二层的PaintDrawable换成BitmapDrawable即可实现简单的图片合成。

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android图形与图像处理技巧总结》、《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android多媒体操作技巧汇总(音频,视频,录音等)》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

时间: 2016-08-15

Android编程之图片颜色处理方法

本文实例讲述了Android编程之图片颜色处理方法.分享给大家供大家参考,具体如下: 你想做到跟美图秀秀一样可以处理自己的照片,美化自己的照片吗?其实你也可以自己做一个这样的软件,废话不多说了,直接上图,上代码了! 效果图如下: 没处理前: 处理之后: MainActivity.java的代码如下: package net.loonggg.test; import android.app.Activity; import android.graphics.Bitmap; import andro

Android开发中使用颜色矩阵改变图片颜色,透明度及亮度的方法

本文实例讲述了Android开发中使用颜色矩阵改变图片颜色,透明度及亮度的方法.分享给大家供大家参考,具体如下: 一.如图 二.代码实现 public class ColorImageActivity extends Activity { private ImageView mImageView; private SeekBar mSBRed,mSBGreen,mSBBlue,mSBAlpha,mSBLight; //修改后的图片 private Bitmap mModBitmap; //画布

android 多点触摸图片缩放的具体实现方法

布局: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/relativeLayout1"    android:layout_width="fill_parent

Android 矩阵ColorMatrix

中文名:坐标矩阵 高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成,是一个3*3的矩阵.最好记住.如下图 各个字段的含义: 上面的sinX和cosX,表示旋转角度的cos值和sin值,注意,旋转角度是按顺时针方向计算的. translateX和translateY表示x和y的平移量.scale是缩放的比例,1是不变,2是表示缩放1/2,这样子. 如何使用 set,pre,post方法 Matrix调用一系列set

android中实现背景图片颜色渐变方法

常用,记录一下. 效果图: 首先新建xml文件  bg_gradient.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android" >        <gradient          android:startColor="

Android实现的可以调整透明度的图片查看器实例

本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下:  main.xml部分代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

Android 图片的颜色处理实例代码

仿造美图秀秀移动鼠标调整seekbar,调整图片的颜色 项目布局如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="ma

Android中利用matrix 控制图片的旋转、缩放、移动

本文主要讲解利用android中Matrix控制图形的旋转缩放移动,具体参见一下代码: 复制代码 代码如下: /**  * 使用矩阵控制图片移动.缩放.旋转  */  public class CommonImgEffectView extends View { private Context context ;      private Bitmap mainBmp , controlBmp ;      private int mainBmpWidth , mainBmpHeight , c

Android裁剪图片为圆形图片的实现原理与代码

以前在eoe论坛中找过裁剪图片为圆形图片的方法,但是效果都不是很理想,这几天因为公司业务的要求,需要对头像进行裁剪以圆形的方式显示,这个方法是根据传入的图片的高度(height)和宽度(width)决定的,如果是 width <= height时,则会裁剪高度,裁剪的区域是宽度不变高度从顶部到宽度width的长度:如果 width > height,则会裁剪宽度,裁剪的区域是高度不变,宽度是取的图片宽度的中心区域,不过不同的业务需求,对裁剪图片要求不一样,可以根据业务的需求来调整裁剪的区域.

Android图片特效:黑白特效、圆角效果、高斯模糊

1.黑白效果 复制代码 代码如下: /**     * 将彩色图转换为黑白图     *      * @param 位图     * @return 返回转换好的位图     */    public static Bitmap convertToBlackWhite(Bitmap bmp) {        int width = bmp.getWidth(); // 获取位图的宽        int height = bmp.getHeight(); // 获取位图的高 int[] pi

Android 图片选择详解及实例代码

 Android 图片选择 可以达到的效果: 1.第一个图片的位置放照相机,点击打开照相机 2.其余的是显示全部存储的图片,点击一次是查看大图,长按则是每张图片出现一个checkBox,可以进行选择 下面是实例效果图 MainActivity 类 public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener, AdapterView.OnItemLongClickLis

Android 图片特效如何实现及总结

Android 图形特效 最近公司项目,有一个需求是做图片特效的任务,自己写了代码实现特效,但是不是很好,上网搜了相关资料,整理了一下比较全面的Android 图片特效的资料,大家可以看下, 一.图形特效(一)特效的实现方式 在Android中,提供了3种方式实现特效,setXXX方法,postXXX和preXXX()方法. 1.setXXX方法用于直接设置Matrix的值,每使用一次setXXX()方法,整个的Matrix都会变掉. 2.postXXX方法用于采用后乘的方式为Matrix设置值

Android实现自定义ImageView的圆角矩形图片效果

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪对应的圆角矩形的bitmap,然后在onDraw()进行绘制圆角矩形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import and

Python实现PS滤镜特效之扇形变换效果示例

本文实例讲述了Python实现PS滤镜特效之扇形变换效果.分享给大家供大家参考,具体如下: 这里用 Python 实现 PS 滤镜中的一种几何变换特效,称为扇形变换,将图像扭曲成一个扇形,具体的算法原理和效果图可以参考附录说明 import numpy as np from skimage import img_as_float import matplotlib.pyplot as plt from skimage import io import math import numpy.matl

很棒的一组js图片轮播特效

大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50

非常漂亮的JS+CSS图片幻灯切换特效

非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

js图片轮播特效代码分享

本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

基于javascript实现样式清新图片轮播特效

本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g