制造渐变的倒影效果

泡在网上的日子 / 文 发表于2015-05-01 11:11 次阅读 倒影

英文原文: http://andraskindler.com/blog/2014/creating-view-reflections/

转载注明出处

Creating View reflections


虽然拟物化的设计的时代已经过去,但你不应该忘记在那个时代学到的所有东西。其中一种效果就是倒影,一种可好可坏的东西-过度使用可能会让你的UI看起来臃肿,但有时候它又是改善用户体验的良药。这篇文章将演示如何为任意的View制造一个渐变的倒影效果。

整个过程可以分为三大步:

1.建立一个你想要将之倒影的界面(就是一个view),但是不要把它添加到根view中。

2.布局与渲染这个View,以便获得这个View的bitmap。

3.为这个bitmap添加倒影,并把它绘制在屏幕上。

构建UI

第一步非常简单。和平常一样只是记住不要把根view添加到你的布局层级中。示例中使用的是一个红底白字的TextView,但是这种效果并不是局限于一个单独的View,还可以是更复杂的布局(ViewGroup)

final TextView textView = new TextView(this);
textView.setText("test");
textView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER));
textView.setTextColor(Color.WHITE);
textView.setTextSize(40);
textView.setBackgroundColor(Color.RED);
textView.setPadding(100, 20, 100, 20);

布局与渲染 

布局过程包括两步:测量view,布局view。测量是通过measure() 方法完成,该方法负责决定view与其子view的尺寸需求。调用measure() 之后,getMeasuredWidth() 和getMeasuredHeight() 方法便能返回正确的值,这个值将在layout()方法中使用。layout()方法可以强制所有的view根据尺寸参数放置子view的位置。

final int measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
textView.measure(measureSpec, measureSpec);
textView.layout(0, 0, textView.getMeasuredWidth(), textView.getMeasuredHeight());

下一步,使用draw()方法捕获view的bitmap ,该方法将它渲染到画布上。

final Bitmap b = Bitmap.createBitmap(textView.getWidth(), textView.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas c = new Canvas(b);
textView.draw(c);

制造倒影

产生倒影可以分为四个步骤,下图展示了每一步可以得到的效果:

你需要决定倒影的大小(用原view的百分比来衡量也许不错),中间间隙的高度,这两个都应该以像素(px)为单位。你还需要一个新的bitmap(和原bitmap大小相同,包括了倒影和间隙),以及它的Canvas。

final int reflectionHeight = original.getHeight() * percentage;
Bitmap bitmapWithReflection = Bitmap.createBitmap(original.getWidth(), (original.getHeight() + reflectionHeight + gap), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapWithReflection);

首先,绘制原始的bitmap:

canvas.drawBitmap(original, 0, 0, null);

然后添加一个间隙,这个间隙在这里用透明的画笔来代替:

final Paint transparentPaint = new Paint();
transparentPaint.setARGB(0, 255, 255, 255);
canvas.drawRect(0, original.getHeight(), original.getWidth(), original.getHeight() + gap, transparentPaint);

下一步:倒影,我们将使用一个修改了的matrix 来让图像沿x轴翻转,然后将之绘制在画布中:

final Matrix matrix = new Matrix();
matrix.preScale(1, -1);
canvas.drawBitmap(Bitmap.createBitmap(original, 0, original.getHeight() - reflectionHeight, 
                                        original.getWidth(), reflectionHeight, matrix, false), 0, original.getHeight() + gap, null);

最后一点很重要,使用合适的 LinearGradient为倒影添加一个渐变效果:

final Paint fadePaint = new Paint();
fadePaint.setShader(new LinearGradient(0, original.getHeight(), 0, original.getHeight() + reflectionHeight + gap, 0x70ffffff, 0x00ffffff, Shader.TileMode.CLAMP));
fadePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawRect(0, original.getHeight(), original.getWidth(), bitmapWithReflection.getHeight() + gap, fadePaint);

好了,现在你就能得到一个显示一个view的渐变倒影效果的bitmap了,你可以将这个bitmap显示在ImageView 中,或者作为view的背景,或者在View子类的onDraw() 方法中使用。

被忘了调用original 的recycle() 避免内存管理的问题。

完整的代码在这里at this Gist

可能打不开,我直接复制下来吧:

package com.inch.android.sandbox.activity;
 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;
 
public class ReflectionActivity extends BaseActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        final FrameLayout root = new FrameLayout(this);
        setContentView(root);
 
        final TextView textView = new TextView(this);
        textView.setText("test");
        textView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER));
        textView.setTextColor(Color.WHITE);
        textView.setTextSize(40);
        textView.setGravity(Gravity.CENTER_HORIZONTAL);
        textView.setBackgroundColor(Color.RED);
        textView.setPadding(100, 20, 100, 20);
 
        final int measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        textView.measure(measureSpec, measureSpec);
        textView.layout(0, 0, textView.getMeasuredWidth(), textView.getMeasuredHeight());
        final Bitmap b = Bitmap.createBitmap(textView.getWidth(), textView.getHeight(), Bitmap.Config.ARGB_8888);
        final Canvas c = new Canvas(b);
        textView.draw(c);
 
        final ImageView imageView = new ImageView(this);
        imageView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER));
        imageView.setImageBitmap(createReflection(b, 1, 10));
        root.addView(imageView);
    }
 
    private Bitmap createReflection(Bitmap original, float percentage, int gap) {
 
        final int reflectionHeight = (int) (original.getHeight() * percentage);
        Bitmap bitmapWithReflection = Bitmap.createBitmap(original.getWidth(), (original.getHeight() + reflectionHeight + gap), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmapWithReflection);
 
        // original image
        canvas.drawBitmap(original, 0, 0, null);
        // gap drawing
        final Paint transparentPaint = new Paint();
        transparentPaint.setARGB(0, 255, 255, 255);
        canvas.drawRect(0, original.getHeight(), original.getWidth(), original.getHeight() + gap, transparentPaint);
        // reflection
        final Matrix matrix = new Matrix();
        matrix.preScale(1, -1);
        canvas.drawBitmap(Bitmap.createBitmap(original, 0, original.getHeight() - reflectionHeight, original.getWidth(), reflectionHeight, matrix, false), 0, original.getHeight() + gap, null);
        // reflection shading
        final Paint fadePaint = new Paint();
        fadePaint.setShader(new LinearGradient(0, original.getHeight(), 0, original.getHeight() + reflectionHeight + gap, 0x70ffffff, 0x00ffffff, Shader.TileMode.CLAMP));
        fadePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawRect(0, original.getHeight(), original.getWidth(), bitmapWithReflection.getHeight() + gap, fadePaint);
 
        original.recycle();
        return bitmapWithReflection;
    }
 
}


收藏 赞 (6) 踩 (0)
上一篇:appetize:一个提供安卓和ios在线模拟器的网站
一个提供安卓和ios在线模拟器的网站,只要上传一个apk,就能在线查看运行效果。 这是首页 https://appetize.io/ 点击demo按钮我们就能进入到一个模拟器中: 这是一个iPhone 5s的模拟器,在下方可以选择不同的iPhone或者安卓模拟器。我就选择一个nexus5吧 选
下一篇:嵌套两层滑动view下,IllegalArgumentException: pointerIndex out of range的解决方法
感谢a405942873 的投递,笔记原文: http://blog.csdn.net/a405942873/article/details/40264685 ---------------------- 发现问题期间的一些记录,日期是后面补充的,不一定准确,不想看可以直接翻到下面。 --------------------------- 2014年10月17日23:4