web-dev-qa-db-ja.com

Picassoを使用して角丸でImageViewを作成する

ImageView Round Cornerを作成するための多くのリンクがあることを知っています。しかし、画像の読み込みにPicassoライブラリを使用しています。 link を参照して結果を取得します。しかし、問題は、ListViewおよびLIstView's最初の項目ImageViewは完全に機能しますが、残りは変換が機能しません。

androidimageviewpicasso
32
Akshay

私はこの変換を使用しています： https://Gist.github.com/julianshen/58293

Picasso.with(activity).load(url).transform(new CircleTransform()).into(imageView);
44
dasar

RoundedCornersTransformation class of picasso-transformations libraryを使用できます。

例：

final int radius = 5;
final int margin = 5;
final Transformation transformation = new RoundedCornersTransformation(radius, margin);
Picasso.with(activity).load(url).transform(transformation).into(imageView);
29
STB Land

このクラスを使用して、ピカソで角の丸い長方形の画像ビューを作成できます。次のように使用します

 Picasso.with(activity).load(url).transform(new RoundedCornersTransform(this)).into(imageView);

以下はRoundedCornersTransformクラスです。

package com.demo.picasso;

import Android.graphics.Bitmap;
import Android.graphics.BitmapShader;
import Android.graphics.Canvas;
import Android.graphics.Paint;
import Android.graphics.RectF;

import com.squareup.picasso.Transformation;


public class RoundedCornersTransform implements Transformation {
@Override
public Bitmap transform(Bitmap source) {
    int size = Math.min(source.getWidth(), source.getHeight());

    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;

    Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
    if (squaredBitmap != source) {
        source.recycle();
    }

    Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
    Paint.setShader(shader);
    Paint.setAntiAlias(true);

    float r = size / 8f;
    canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, Paint);
    squaredBitmap.recycle();
    return bitmap;
}

@Override
public String key() {
    return "rounded_corners";
  }
}
24
stevyhacker

_picasso-transformations_ libraryのRoundedCornersTransformationclassを使用しました。リストビューにビューホルダーパターンのカスタムアダプターがありました。 _build.gradle_に以下の依存関係を追加しました：

_dependencies {
        compile 'jp.wasabeef:picasso-transformations:2.1.0'
} 
_

そして、私の_customArrayAdapter.Java_、iに追加しました：

Picasso.with(getContext()).load(path).transform(new RoundedCornersTransformation(10,10)).resize(175,300).into(viewHolder.ivImage);
これにより、画像のサイズが変更され、角が丸くなります。

7
DISHA

前述のように ここ 。 picasso-transformations ライブラリのMaskTransformationclassを使用できます。

例：

_final Transformation transformation = new MaskTransformation(getContext(), R.drawable.rounded_convers_transformation);
Picasso.with(activity).load(url).transform(transformation).into(imageView);
_

res/drawable/rounded_convers_transformation.xml

_<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:shape="rectangle">
    <corners Android:radius="5dp"/>
    <solid Android:color="@color/black"/>
</shape>
_

更新：ただし、.resize(w,h)イメージも大きくする必要があることに注意してください。イメージが大きくなると、ラウンドを決定できなくなるためです。

5
NickUnuchek

@ stevyhacker's answer および これに関連するもの に続いて、私はこれを思いつきました：

import Android.graphics.Bitmap;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.Path;
import Android.graphics.PorterDuff;
import Android.graphics.PorterDuffXfermode;
import Android.graphics.Rect;
import Android.graphics.RectF;

import com.squareup.picasso.Transformation;


public class RoundedCornersTransform implements Transformation {
    private static Bitmap createRoundedRectBitmap(Bitmap bitmap,
                                                  float topLeftCorner, float topRightCorner,
                                                  float bottomRightCorner, float bottomLeftCorner) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = Color.WHITE;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        Path path = new Path();
        float[] radii = new float[]{
                topLeftCorner, bottomLeftCorner,
                topRightCorner, topRightCorner,
                bottomRightCorner, bottomRightCorner,
                bottomLeftCorner, bottomLeftCorner
        };

        Paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        Paint.setColor(color);
        path.addRoundRect(rectF, radii, Path.Direction.CW);
        canvas.drawPath(path, Paint);
        Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, Paint);
        return output;
    }

    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        float r = size / 4f;

        Bitmap roundedBitmap = createRoundedRectBitmap(squaredBitmap, r, r, r, r);

        squaredBitmap.recycle();

        return roundedBitmap;
    }

    @Override
    public String key() {
        return "rounded_corners";
    }
}

次のように使用します。

Picasso.with(context).load(url).transform(new RoundedCornersTransform()).into(imageView);

おそらくいくつかの機能強化が必要なので、気をつけてください！

2
RominaV