Question

我见过关于Material Design的Udacity讲座，并且提到了使用RoundedBitmapDrawable来实现圆形视图。但是我有一些麻烦使它适用于Picasso。

我不确定Picasso究竟是如何工作的，但我在文件存储中有大的非方形图像。因此，我使用Picasso如下：

Picasso.with(context).load(f).resize(densityDpi, densityDpi).centerInside().transform(new Transformation() {
    @Override
    public Bitmap transform(Bitmap source) {
        Log.d("jano", "transformation running");
        RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(context.getResources(), source);
        drawable.setCircular(true);
        drawable.setCornerRadius(source.getWidth() / 2.0f);
        return drawable.getBitmap();
    }

    @Override
    public String key() {
        return "circle";
    }
}).into(imageView);

然而，图像的方形没有圆角（应该是圆形的）。这就是我想要实现的目标。

使用RoundedBitmapDrawable是否有任何简单的方法可以实现此目的，还是必须完全实现转换？（我在StackOverflow上看到过）

请不要在没有说明的情况下提交答案，为什么不能使用。我只想知道这两个项目的组合（Picasso，RoundedBitmapDrawable）

Answer 1

我尝试了很多相同但也没有工作......我猜这是getBitmap期间的一个问题，无论如何，我解决了这个问题：（请注意，主要区别在于我使用setImage作为drawable而不是像我说的那样转换为Bitmap）

    Picasso.with(getContext())
    .load(mUser.user.profileImageUrl)
    .into(mProfileImage, new Callback() {
        @Override
        public void onSuccess() {
            Bitmap source = ((BitmapDrawable) mProfileImage.getDrawable()).getBitmap();
            RoundedBitmapDrawable drawable =
                    RoundedBitmapDrawableFactory.create(getContext().getResources(), source);
            drawable.setCircular(true);
            drawable.setCornerRadius(Math.max(source.getWidth() / 2.0f, source.getHeight() / 2.0f));
            mProfileImage.setImageDrawable(drawable);
        }

        @Override
        public void onError() {

        }
    });

Answer 2

你可以使用谷歌IO应用程序的BezelImageView，它可以很好地与Picasso库一起使用，只需将这个类添加到你的项目中，你可以像任何其他的图像视图一样直接开始使用它，但是bezelImageView有2个额外的选项来指定圆形边框颜色，和面具可绘制。链接到源代码here。

BezelImageView.java

/*
 * Copyright 2014 Google Inc. All rights reserved.
 *
 * 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.
 */

package com.google.samples.apps.iosched.ui.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.google.samples.apps.iosched.R;

/**
 * An {@link android.widget.ImageView} that draws its contents inside a mask and draws a border
 * drawable on top. This is useful for applying a beveled look to image contents, but is also
 * flexible enough for use with other desired aesthetics.
 */
public class BezelImageView extends ImageView {
    private Paint mBlackPaint;
    private Paint mMaskedPaint;

    private Rect mBounds;
    private RectF mBoundsF;

    private Drawable mBorderDrawable;
    private Drawable mMaskDrawable;

    private ColorMatrixColorFilter mDesaturateColorFilter;
    private boolean mDesaturateOnPress = false;

    private boolean mCacheValid = false;
    private Bitmap mCacheBitmap;
    private int mCachedWidth;
    private int mCachedHeight;

    public BezelImageView(Context context) {
        this(context, null);
    }

    public BezelImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BezelImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // Attribute initialization.
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BezelImageView,
                defStyle, 0);

        mMaskDrawable = a.getDrawable(R.styleable.BezelImageView_maskDrawable);
        if (mMaskDrawable != null) {
            mMaskDrawable.setCallback(this);
        }

        mBorderDrawable = a.getDrawable(R.styleable.BezelImageView_borderDrawable);
        if (mBorderDrawable != null) {
            mBorderDrawable.setCallback(this);
        }

        mDesaturateOnPress = a.getBoolean(R.styleable.BezelImageView_desaturateOnPress,
                mDesaturateOnPress);

        a.recycle();

        // Other initialization.
        mBlackPaint = new Paint();
        mBlackPaint.setColor(0xff000000);

        mMaskedPaint = new Paint();
        mMaskedPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        // Always want a cache allocated.
        mCacheBitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);

        if (mDesaturateOnPress) {
            // Create a desaturate color filter for pressed state.
            ColorMatrix cm = new ColorMatrix();
            cm.setSaturation(0);
            mDesaturateColorFilter = new ColorMatrixColorFilter(cm);
        }
    }

    @Override
    protected boolean setFrame(int l, int t, int r, int b) {
        final boolean changed = super.setFrame(l, t, r, b);
        mBounds = new Rect(0, 0, r - l, b - t);
        mBoundsF = new RectF(mBounds);

        if (mBorderDrawable != null) {
            mBorderDrawable.setBounds(mBounds);
        }
        if (mMaskDrawable != null) {
            mMaskDrawable.setBounds(mBounds);
        }

        if (changed) {
            mCacheValid = false;
        }

        return changed;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mBounds == null) {
            return;
        }

        int width = mBounds.width();
        int height = mBounds.height();

        if (width == 0 || height == 0) {
            return;
        }

        if (!mCacheValid || width != mCachedWidth || height != mCachedHeight) {
            // Need to redraw the cache.
            if (width == mCachedWidth && height == mCachedHeight) {
                // Have a correct-sized bitmap cache already allocated. Just erase it.
                mCacheBitmap.eraseColor(0);
            } else {
                // Allocate a new bitmap with the correct dimensions.
                mCacheBitmap.recycle();
                //noinspection AndroidLintDrawAllocation
                mCacheBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
                mCachedWidth = width;
                mCachedHeight = height;
            }

            Canvas cacheCanvas = new Canvas(mCacheBitmap);
            if (mMaskDrawable != null) {
                int sc = cacheCanvas.save();
                mMaskDrawable.draw(cacheCanvas);
                mMaskedPaint.setColorFilter((mDesaturateOnPress && isPressed())
                        ? mDesaturateColorFilter : null);
                cacheCanvas.saveLayer(mBoundsF, mMaskedPaint,
                        Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG);
                super.onDraw(cacheCanvas);
                cacheCanvas.restoreToCount(sc);
            } else if (mDesaturateOnPress && isPressed()) {
                int sc = cacheCanvas.save();
                cacheCanvas.drawRect(0, 0, mCachedWidth, mCachedHeight, mBlackPaint);
                mMaskedPaint.setColorFilter(mDesaturateColorFilter);
                cacheCanvas.saveLayer(mBoundsF, mMaskedPaint,
                        Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG);
                super.onDraw(cacheCanvas);
                cacheCanvas.restoreToCount(sc);
            } else {
                super.onDraw(cacheCanvas);
            }

            if (mBorderDrawable != null) {
                mBorderDrawable.draw(cacheCanvas);
            }
        }

        // Draw from cache.
        canvas.drawBitmap(mCacheBitmap, mBounds.left, mBounds.top, null);
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();
        if (mBorderDrawable != null && mBorderDrawable.isStateful()) {
            mBorderDrawable.setState(getDrawableState());
        }
        if (mMaskDrawable != null && mMaskDrawable.isStateful()) {
            mMaskDrawable.setState(getDrawableState());
        }
        if (isDuplicateParentStateEnabled()) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }

    @Override
    public void invalidateDrawable(Drawable who) {
        if (who == mBorderDrawable || who == mMaskDrawable) {
            invalidate();
        } else {
            super.invalidateDrawable(who);
        }
    }

    @Override
    protected boolean verifyDrawable(Drawable who) {
        return who == mBorderDrawable || who == mMaskDrawable || super.verifyDrawable(who);
    }
}

布局中的用法。

<com.google.samples.apps.iosched.ui.widget.BezelImageView
                android:id="@+id/session_photo"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center"
                android:scaleType="centerCrop"
                android:src="@drawable/dp"
                app:borderDrawable="@drawable/circle_stroke_only"
                app:maskDrawable="@drawable/circle_blue" />

circle_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00bcd4" />
</shape>

circle_stroke_only.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/theme_green" android:width="1dp"/>

</shape>

Answer 3

我花了几个小时处理完全相同的问题。它返回相同的非圆形图像的原因是因为它首先传递了一个非圆形的位图。

来自RoundedBitmapDrawable的文档：

getBitmap（）

返回此drawable用于呈现的位图。

因此，返回原始未转换的位图是有意义的。

解决方案：没什么！我最终使用了一个包含CropCircleTransformation()

的优秀图书馆picasso-transformations

示例：

 Picasso.with(mContext).load(url)
            .transform(new CropCircleTransformation())
            .into(holder_image);

Answer 4

我通过实现这样的目标（而不是直接使用.into（ImageView））为使用RoundedBitmapDrawable提供了解决方案

    Picasso.with(context)
                    .load("https://something.png")
                    .into( RoundCornersTargetProxy(my_avatar_imageview, 8f) )

目标实现如下

    class RoundCornersTargetProxy(val view: ImageView, val radius: Float): Target {
        override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
            view.setImageDrawable(placeHolderDrawable)
        }

        override fun onBitmapFailed(errorDrawable: Drawable?) {
            view.setImageDrawable(errorDrawable)
        }

        override fun onBitmapLoaded(bitmap: Bitmap, from: Picasso.LoadedFrom?) {
            RoundedBitmapDrawableFactory.create(Resources.getSystem(), bitmap).let {
                it.cornerRadius = radius
                view.setImageDrawable(it)
            }
        }

    }

这样，您不必在imageview中进行设置就可以再次获取它。

使用Picasso和RoundedBitmapDrawable

4 个答案: