[Android] PorterDuff使用实例----实现新浪微博图片下载效果

先上效果图，如demo_sinaweibo.gif

由效果图，下半部分是简单的效果叠加，上半部分是新浪微博加载图片显示进度的效果，显示进度的半透明区域只与根据背景图的非透明区域叠加，背景图的透明区域仍为透明。
为实现此要求，联想到APIDemos中的com.example.android.apis.graphics.Xfermodes，可以自定义组件在组件的绘制过程中设置PorterDuff.Mode即可实现。
另效果图中显示当下载进度超过50%时，重新设置了背景图。

本次自定义组件选择继承ImageView来实现，名为PorterDuffView。将ImageView新增一porterduffMode。在该模式下，将可显示图片加载进度；否则按ImageView原有规则显示图片。

1.PorterDuffView的XML编码

设置PorterDuffView的porterduffMode，可有两种方式，一为在xml中设置，一为在代码设置。

xml中设置的实现：
在/res/values下新建一"attrs.xml",内容如下：

[html] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <resources>
  3. <!--请参阅
  4. [android_sdk]\platforms\android-n\data\res\values\attrs.xml
  5. -->
  6. <declare-styleable name="porterduff.PorterDuffView">
  7. <attr name="porterduffMode" format="boolean"></attr>
  8. </declare-styleable>
  9. </resources>

在此声明中，属性名为"porterduffMode"，对其赋值范围为boolean型。赋值范围的规范可参考：[android_sdk]\platforms\android-n\data\res\values\attrs.xml

有声明后，在layout下的布局文件，需首先在原有基础上添加一命名空间，代码如下：

[html] view plaincopy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:porterduff="http://schemas.android.com/apk/res/lab.sodino.porterduff"
  3. android:orientation="vertical"
  4. .... ....
  5. ></LinearLayout>

命名空间名为"porterduff"，赋值规则为"http://schemas.android.com/apk/res/"+App包名。
在布局文件中使用PorterDuffView时，几乎与ImageView一致，设置porterduffMode如下：

[html] view plaincopy

  1. <lab.sodino.porterduff.PorterDuffView
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:id="@+id/porterDuffView"
  5. android:src="@drawable/loading"
  6. android:layout_gravity="center"
  7. porterduff:porterduffMode="true"
  8. ></lab.sodino.porterduff.PorterDuffView>

另，在代码中设置porterduffMode为直接调用setPorterDuffMode(boolean)，参数为true即可。

2.PorterDuffView的Java编码
需要重写ImageView的onDraw()方法。
当其porterduffMode值为true时，显示图片加载进度。否则按ImageView 的规则显示图片。
由效果图可知，需要生成一半透明的前景图。
生成前景图的代码为：

[java] view plaincopy

  1. /** 生成一宽与背景图片等同高为1像素的Bitmap，。 */
  2. private static Bitmap createForegroundBitmap(int w) {
  3. Bitmap bm = Bitmap.createBitmap(w, FG_HEIGHT, Bitmap.Config.ARGB_8888);
  4. Canvas c = new Canvas(bm);
  5. Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
  6. p.setColor(FOREGROUND_COLOR);
  7. c.drawRect(0, 0, w, FG_HEIGHT, p);
  8. return bm;
  9. }

为节约内存消耗，生成的前景图Bitmap其高度只有1像素。那么在onDraw()方法中，需要根据加载进度，循环滴绘制叠加区域。代码如下：

[java] view plaincopy

  1. int tH = height - (int) (progress * height);
  2. for (int i = 0; i < tH; i++) {
  3. canvas.drawBitmap(bitmapFg, tmpW, tmpH + i, paint);
  4. }

在onDraw()方法中，调用Paint.setXfermode()绘制完叠加区域后，应再次对其设置值为null取消PorterDuff效果。

加载区域的进度值由PorterDuffView.setProgress()决定，因为每次设定新的进度后，应该调用 invalidate()及时刷新界面。
效果图中进度过50%时更改了背景图，方法为PorterDuffView.setBitmap()，该方法将重新计算Bitmap的宽高，并生成新的前景图，调用ImageView.setImageBitmap()请求对组件重新布局及刷新界面。

本文为Sodino所有，转载请注明出处：http://blog.csdn.net/sodino/article/details/7741236
以下贴出Java代码，XML请看官自行实现：

[java] view plaincopy

  1. ActPorterDuff.java
  2. package lab.sodino.porterduff;
  3. import android.app.Activity;
  4. import android.graphics.BitmapFactory;
  5. import android.os.Bundle;
  6. import android.widget.SeekBar;
  7. import android.widget.SeekBar.OnSeekBarChangeListener;
  8. public class ActPorterDuff extends Activity implements OnSeekBarChangeListener {
  9. private SeekBar seekbar;
  10. private PorterDuffView porterDuffView;
  11. private int currentId;
  12. public void onCreate(Bundle savedInstanceState) {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.main);
  15. seekbar = (SeekBar) findViewById(R.id.seekbar);
  16. seekbar.setOnSeekBarChangeListener(this);
  17. float progress = seekbar.getProgress() * 1.0f / seekbar.getMax();
  18. porterDuffView = (PorterDuffView) findViewById(R.id.porterDuffView);
  19. porterDuffView.setProgress(progress);
  20. }
  21. public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  22. porterDuffView.setProgress(progress * 1.0f / seekbar.getMax());
  23. if (progress > 50 && currentId != R.drawable.loading_2) {
  24. currentId = R.drawable.loading_2;
  25. porterDuffView.setBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.loading_2));
  26. } else if (progress <= 50 && currentId != R.drawable.loading) {
  27. currentId = R.drawable.loading;
  28. porterDuffView.setBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.loading));
  29. }
  30. }
  31. public void onStartTrackingTouch(SeekBar seekBar) {
  32. }
  33. public void onStopTrackingTouch(SeekBar seekBar) {
  34. }
  35. }

[java] view plaincopy

    1. PorterDuffView.java
    2. package lab.sodino.porterduff;
    3. import java.text.DecimalFormat;
    4. import android.content.Context;
    5. import android.content.res.TypedArray;
    6. import android.graphics.Bitmap;
    7. import android.graphics.Canvas;
    8. import android.graphics.Paint;
    9. import android.graphics.PorterDuff;
    10. import android.graphics.PorterDuffXfermode;
    11. import android.graphics.drawable.BitmapDrawable;
    12. import android.graphics.drawable.Drawable;
    13. import android.util.AttributeSet;
    14. import android.util.Log;
    15. import android.widget.ImageView;
    16. /**
    17. * 自定义组件实现新浪微博的图片加载效果。<br/>
    18. *
    19. * @author Sodino E-mail:[email protected]
    20. * @version Time：2012-7-9 上午01:55:04
    21. */
    22. public class PorterDuffView extends ImageView {
    23. /** 前景Bitmap高度为1像素。采用循环多次填充进度区域。 */
    24. public static final int FG_HEIGHT = 1;
    25. /** 下载进度前景色 */
    26. // public static final int FOREGROUND_COLOR = 0x77123456;
    27. public static final int FOREGROUND_COLOR = 0x77ff0000;
    28. /** 下载进度条的颜色。 */
    29. public static final int TEXT_COLOR = 0xff7fff00;
    30. /** 进度百分比字体大小。 */
    31. public static final int FONT_SIZE = 30;
    32. private Bitmap bitmapBg, bitmapFg;
    33. private Paint paint;
    34. /** 标识当前进度。 */
    35. private float progress;
    36. /** 标识进度图片的宽度与高度。 */
    37. private int width, height;
    38. /** 格式化输出百分比。 */
    39. private DecimalFormat decFormat;
    40. /** 进度百分比文本的锚定Y中心坐标值。 */
    41. private float txtBaseY;
    42. /** 标识是否使用PorterDuff模式重组界面。 */
    43. private boolean porterduffMode;
    44. /** 标识是否正在下载图片。 */
    45. private boolean loading;
    46. public PorterDuffView(Context context, AttributeSet attrs) {
    47. super(context, attrs);
    48. init(context, attrs);
    49. }
    50. /** 生成一宽与背景图片等同高为1像素的Bitmap，。 */
    51. private static Bitmap createForegroundBitmap(int w) {
    52. Bitmap bm = Bitmap.createBitmap(w, FG_HEIGHT, Bitmap.Config.ARGB_8888);
    53. Canvas c = new Canvas(bm);
    54. Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
    55. p.setColor(FOREGROUND_COLOR);
    56. c.drawRect(0, 0, w, FG_HEIGHT, p);
    57. return bm;
    58. }
    59. private void init(Context context, AttributeSet attrs) {
    60. if (attrs != null) {
    61. // //////////////////////////////////////////
    62. // int count = attrs.getAttributeCount();
    63. // for (int i = 0; i < count; i++) {
    64. // LogOut.out(this, "attrNameRes:" +
    65. // Integer.toHexString(attrs.getAttributeNameResource(i))//
    66. // + " attrName:" + attrs.getAttributeName(i)//
    67. // + " attrResValue:" + attrs.getAttributeResourceValue(i, -1)//
    68. // + " attrValue:" + attrs.getAttributeValue(i)//
    69. // );
    70. // }
    71. // //////////////////////////////////////////
    72. TypedArray typedArr = context.obtainStyledAttributes(attrs, R.styleable.porterduff_PorterDuffView);
    73. porterduffMode = typedArr.getBoolean(R.styleable.porterduff_PorterDuffView_porterduffMode, false);
    74. }
    75. Drawable drawable = getDrawable();
    76. if (porterduffMode && drawable != null && drawable instanceof BitmapDrawable) {
    77. bitmapBg = ((BitmapDrawable) drawable).getBitmap();
    78. width = bitmapBg.getWidth();
    79. height = bitmapBg.getHeight();
    80. // LogOut.out(this, "width=" + width + " height=" + height);
    81. bitmapFg = createForegroundBitmap(width);
    82. } else {
    83. // 不符合要求，自动设置为false。
    84. porterduffMode = false;
    85. }
    86. paint = new Paint();
    87. paint.setFilterBitmap(false);
    88. paint.setAntiAlias(true);
    89. paint.setTextSize(FONT_SIZE);
    90. // 关于FontMetrics的详情介绍，可见：
    91. // http://xxxxxfsadf.iteye.com/blog/480454
    92. Paint.FontMetrics fontMetrics = paint.getFontMetrics();
    93. // 注意观察本输出：
    94. // ascent:单个字符基线以上的推荐间距，为负数
    95. Log.d("ANDROID_LAB", "ascent:" + fontMetrics.ascent//
    96. // descent:单个字符基线以下的推荐间距，为正数
    97. + " descent:" + fontMetrics.descent //
    98. // 单个字符基线以上的最大间距，为负数
    99. + " top:" + fontMetrics.top //
    100. // 单个字符基线以下的最大间距，为正数
    101. + " bottom:" + fontMetrics.bottom//
    102. // 文本行与行之间的推荐间距
    103. + " leading:" + fontMetrics.leading);
    104. // 在此处直接计算出来，避免了在onDraw()处的重复计算
    105. txtBaseY = (height - fontMetrics.bottom - fontMetrics.top) / 2;
    106. decFormat = new DecimalFormat("0.0%");
    107. }
    108. public void onDraw(Canvas canvas) {
    109. if (porterduffMode) {
    110. int tmpW = (getWidth() - width) / 2, tmpH = (getHeight() - height) / 2;
    111. // 画出背景图
    112. canvas.drawBitmap(bitmapBg, tmpW, tmpH, paint);
    113. // 设置PorterDuff模式
    114. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));
    115. // canvas.drawBitmap(bitmapFg, tmpW, tmpH - progress * height,
    116. // paint);
    117. int tH = height - (int) (progress * height);
    118. for (int i = 0; i < tH; i++) {
    119. canvas.drawBitmap(bitmapFg, tmpW, tmpH + i, paint);
    120. }
    121. // 立即取消xfermode
    122. paint.setXfermode(null);
    123. int oriColor = paint.getColor();
    124. paint.setColor(TEXT_COLOR);
    125. paint.setTextSize(FONT_SIZE);
    126. String tmp = decFormat.format(progress);
    127. float tmpWidth = paint.measureText(tmp);
    128. canvas.drawText(decFormat.format(progress), tmpW + (width - tmpWidth) / 2, tmpH + txtBaseY, paint);
    129. // 恢复为初始值时的颜色
    130. paint.setColor(oriColor);
    131. } else {
    132. Log.d("ANDROID_LAB", "onDraw super");
    133. super.onDraw(canvas);
    134. }
    135. }
    136. public void setProgress(float progress) {
    137. if (porterduffMode) {
    138. if (this.progress != progress) {
    139. this.progress = progress;
    140. // 刷新自身。
    141. invalidate();
    142. }
    143. }
    144. }
    145. public void setBitmap(Bitmap bg) {
    146. if (porterduffMode) {
    147. bitmapBg = bg;
    148. width = bitmapBg.getWidth();
    149. height = bitmapBg.getHeight();
    150. bitmapFg = createForegroundBitmap(width);
    151. Paint.FontMetrics fontMetrics = paint.getFontMetrics();
    152. txtBaseY = (height - fontMetrics.bottom - fontMetrics.top) / 2;
    153. setImageBitmap(bg);
    154. // 请求重新布局，将会再次调用onMeasure()
    155. //          requestLayout();
    156. }
    157. }
    158. public boolean isLoading() {
    159. return loading;
    160. }
    161. public void setLoading(boolean loading) {
    162. this.loading = loading;
    163. }
    164. public void setPorterDuffMode(boolean bool) {
    165. porterduffMode = bool;
    166. }
    167. }
时间： 2024-08-09 12:16:34

[Android] PorterDuff使用实例----实现新浪微博图片下载效果的相关文章

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

Android:通过滤镜实现点击图片变暗效果

实现点击图片(ImageView)变暗效果,有一个较简单的方法,就是讲目标图片设置为背景图片(setBackground),再创建一个selector.xml文件,里面放置一张普通状态时的透明图片,一张点击状态下的棕色半透明图片,将其设置为ImageView的源图片.这样在点击ImageView时,源图片会变换透明度,达到变暗效果.但这种方法有个缺点:由于源图片已经被限制死了,假如我们需要自定义背景图片,将目标图片放置在背景图片上,就无法实现了.这里介绍一种通过滤镜和监听onTouchEvent

Android学习笔记--使用HttpURLConnection实现网络下载效果，附带进度条显示

下面我就直接上代码了,因为代码中我已经写了非常详细的注释 1 package com.wuxianedu.httpdemo; 2 3 import android.app.ProgressDialog; 4 import android.content.Intent; 5 import android.net.Uri; 6 import android.os.AsyncTask; 7 import android.os.Handler; 8 import android.os.Message;

Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr

Picasso：一个专为Android打造的强大的图片下载和缓存库

简介 在Android应用中,图片消费了大量的资源,却为应用提供了很好的视觉体验.幸运的是,Picasso为你的应用提供了非常容易的图片加载方式--通常一行代码就可以搞定! Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView); Picasso处理了Android上图片加载的许多坑: 1)在Adapter中,处理了ImageView的循环利用和取消下载. 2)耗费最小的内存处理了复杂的图

android异步任务图片下载(进度条提示进度)

一.AsyncTask介绍 Android提供了几种在其他线程中访问UI线程的方法. Activity.runOnUiThread( Runnable ) View.post( Runnable ) View.postDelayed( Runnable, long ) Hanlder 这些类或方法同样会使你的代码很复杂很难理解.然而当你需要实现一些很复杂的操作并需要频繁地更新UI时这会变得更糟糕. 为了解决这个问题,Android 1.5提供了一个工具类:AsyncTask,它使创建需要与用户界

毕加索的艺术——Picasso,一个强大的Android图片下载缓存库，OkHttpUtils的使用，二次封装PicassoUtils实现微信精选

毕加索的艺术--Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选 官网: http://square.github.io/picasso/ 我们在上篇OkHttp的时候说过这个Picasso,学名毕加索,是Square公司开源的一个Android图形缓存库,而且使用起来也是非常的简单,只要一行代码就轻松搞定了,你会问,为什么不介绍一下Glide?其实Glide我有时间也是会介绍的,刚好上篇我们用到了Picasso,

Android 图片下载

Android开发者可能会使用Universal Image Loader或者Square`s newer Picasso这些第三方的库去处理图片的加载 Universal Image Loader https://github.com/nostra13/Android-Universal-Image-Loader Square`s newer Picasso https://github.com/square/picasso Android 图片下载,布布扣,bubuko.com

android:强大的图片下载和缓存库Picasso

1.Picasso简介 Picasso是Square公司出品的一个强大的图片下载和缓存图片库.官方网址是:http://square.github.io/picasso/ 只需要一句代码就可以将图片下载并设置到ImageView上. Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView); 2.主要特点 2.1Adapter downloads 使用ListView,GridView的时候