glide加载圆角图片

附录1简单介绍了Android开源的图片加载框架。在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬而未决:比如用户的头像,往往用户的头像是从服务器端读出的一个普通矩形图片,但是现在的设计一般要求在APP端的用户头像显示成圆形头像,那么此时虽然Glide可以加载,但加载出来的是一个矩形,如果要Glide在加载过程中就把矩形图转换成圆形的,则需要在Glide之上引入一个开源项目:glide-transformations
glide-transformations在github上的项目主页是: https://github.com/wasabeef/glide-transformations  

写一个例子说明。

package zhangphil.app;  
  
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.widget.ImageView;  
  
import com.bumptech.glide.Glide;  
  
import jp.wasabeef.glide.transformations.BlurTransformation;  
import jp.wasabeef.glide.transformations.CropCircleTransformation;  
import jp.wasabeef.glide.transformations.RoundedCornersTransformation;  
  
public class MainActivity extends AppCompatActivity {  
  
    //我csdn博客头像  
    String url = "http://avatar.csdn.net/9/7/A/1_zhangphil.jpg";  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //原图,是我博客的头像  
        ImageView image1 = (ImageView) findViewById(R.id.image1);  
        Glide.with(this).load(url).crossFade(1000).into(image1);  
  
        //原图 -> 圆图  
        ImageView image2 = (ImageView) findViewById(R.id.image2);  
        Glide.with(this).load(url).bitmapTransform(new CropCircleTransformation(this)).crossFade(1000).into(image2);  
  
        //原图的毛玻璃、高斯模糊效果  
        ImageView image3 = (ImageView) findViewById(R.id.image3);  
        Glide.with(this).load(url).bitmapTransform(new BlurTransformation(this, 25)).crossFade(1000).into(image3);  
  
        //原图基础上复合变换成圆图 +毛玻璃(高斯模糊)  
        ImageView image4 = (ImageView) findViewById(R.id.image4);  
        Glide.with(this).load(url).bitmapTransform(new BlurTransformation(this, 25), new CropCircleTransformation(this)).crossFade(1000).into(image4);  
  
        //原图处理成圆角,如果是四周都是圆角则是RoundedCornersTransformation.CornerType.ALL  
        ImageView image5 = (ImageView) findViewById(R.id.image5);  
        Glide.with(this).load(url).bitmapTransform(new RoundedCornersTransformation(this, 30, 0, RoundedCornersTransformation.CornerType.BOTTOM)).crossFade(1000).into(image5);  
    }  
}  
主要实现类如下是所示,可以加载圆形图像,椭圆图像,以及矩形圆角,上圆角,下圆角。

/**
 * Copyright (C) 2017 Wasabeef
 * 

* Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at *

* http://www.apache.org/licenses/LICENSE-2.0 *

* Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import com.bumptech.glide.Glide; import com.bumptech.glide.load.Transformation; import com.bumptech.glide.load.engine.Resource; import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool; import com.bumptech.glide.load.resource.bitmap.BitmapResource; public class RoundedCornersTransformation implements Transformation { public enum CornerType { ALL, TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, TOP, BOTTOM, LEFT, RIGHT, OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT, DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT } private BitmapPool mBitmapPool; private int mRadius; private int mDiameter; private int mMargin; private CornerType mCornerType; public RoundedCornersTransformation(Context context, int radius, int margin) { this(context, radius, margin, CornerType.ALL); } public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) { this(pool, radius, margin, CornerType.ALL); } public RoundedCornersTransformation(Context context, int radius, int margin, CornerType cornerType) { this(Glide.get(context).getBitmapPool(), radius, margin, cornerType); } public RoundedCornersTransformation(BitmapPool pool, int radius, int margin, CornerType cornerType) { mBitmapPool = pool; mRadius = radius; mDiameter = mRadius * 2; mMargin = margin; mCornerType = cornerType; } @Override public Resource transform(Resource resource, int outWidth, int outHeight) { Bitmap source = resource.get(); int width = source.getWidth(); int height = source.getHeight(); Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888); if (bitmap == null) { bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); drawRoundRect(canvas, paint, width, height); return BitmapResource.obtain(bitmap, mBitmapPool); } private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) { float right = width - mMargin; float bottom = height - mMargin; switch (mCornerType) { case ALL: canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); break; case TOP_LEFT: drawTopLeftRoundRect(canvas, paint, right, bottom); break; case TOP_RIGHT: drawTopRightRoundRect(canvas, paint, right, bottom); break; case BOTTOM_LEFT: drawBottomLeftRoundRect(canvas, paint, right, bottom); break; case BOTTOM_RIGHT: drawBottomRightRoundRect(canvas, paint, right, bottom); break; case TOP: drawTopRoundRect(canvas, paint, right, bottom); break; case BOTTOM: drawBottomRoundRect(canvas, paint, right, bottom); break; case LEFT: drawLeftRoundRect(canvas, paint, right, bottom); break; case RIGHT: drawRightRoundRect(canvas, paint, right, bottom); break; case OTHER_TOP_LEFT: drawOtherTopLeftRoundRect(canvas, paint, right, bottom); break; case OTHER_TOP_RIGHT: drawOtherTopRightRoundRect(canvas, paint, right, bottom); break; case OTHER_BOTTOM_LEFT: drawOtherBottomLeftRoundRect(canvas, paint, right, bottom); break; case OTHER_BOTTOM_RIGHT: drawOtherBottomRightRoundRect(canvas, paint, right, bottom); break; case DIAGONAL_FROM_TOP_LEFT: drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom); break; case DIAGONAL_FROM_TOP_RIGHT: drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom); break; default: canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); break; } } private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); } private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), paint); } private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); } private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint); } private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), paint); } private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), paint); } private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); } private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); } private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); } private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), paint); } private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), paint); } private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); } private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), paint); canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), paint); } private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, mRadius, paint); canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), mRadius, mRadius, paint); canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); } @Override public String getId() { return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter=" + mDiameter + ", cornerType=" + mCornerType.name() + ")"; } }



如有疑问,大家共勉

你可能感兴趣的:(Android)