33

Custom ListViewを含む がImageViewありTextViewます。すべてが正常に機能しています。

私が欲しいのは、画像がリストに表示され、角が丸いことです。Webservice から、画像を長方形の形で取得します。しかし、以下のように角丸で表示したいですImageView

ここに画像の説明を入力

丸い角で画像をマスクする方法を教えてもらえますか?

以下のようにドローアブルファイルを作成して、 src in として適用してみましたImageView。しかし、私には何も機能しません。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
      <shape android:shape="oval" >
         <solid android:color="#FFFFFF" />
         <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />
         <corners android:radius="5dp" />
      </shape>
   </item>
   <item>
      <shape android:shape="oval" >
         <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
         <solid android:color="#FFFFFF" />
      </shape>
   </item>
</layer-list>

編集:

ここに画像の説明を入力

以下のソリューションを適用しました:

<FrameLayout
    android:id="@+id/imagemaskframe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/op_ivpic"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:scaleType="fitXY" />

    <ImageView
        android:id="@+id/iv_mask_op"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/imgmask" />

</FrameLayout>
4

11 に答える 11

33

最善の方法は、操作および/またはCanvasを使用して行うことです。あなたが利用可能で、に保存されているとしましょう。PorterDuffShadersBitmapmBitmap

オプション 1: シェーダーを使用する。

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Load the bitmap as a shader to the paint.
    final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    final Shader shader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    paint.setShader(shader);

    // Draw a circle with the required radius.
    final float halfWidth = canvas.getWidth()/2;
    final float halfHeight = canvas.getHeight()/2;
    final float radius = Math.max(halfWidth, halfHeight);
    canvas.drawCircle(halfWidth, halfHeight, radius, paint);
}

オプション 2: PorterDuff モードを使用する。

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Create a circular path.
    final float halfWidth = canvas.getWidth()/2;
    final float halfHeight = canvas.getHeight()/2;
    final float radius = Math.max(halfWidth, halfHeight);
    final Path path = new Path();
    path.addCircle(halfWidth, halfHeight, radius, Path.Direction.CCW);

    final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    canvas.drawPath(path, paint);
}

ノート:

  1. onDraw() 呼び出し内でオブジェクトを作成するのは良くありません。したがって、最初は別の場所にペイントとシェーダーを配置する必要があります。これはおそらく、画像ビットマップをビューに設定するときに実行できます。
  2. Canvasハードウェア テクスチャによってバッキングされていない場合は、保存して復元する必要がある場合があります。その周りの一般的なアイデアはここでは言及されていません。
  3. setWillNotDraw(false);コンストラクターに追加することを忘れないでください。

追加の参考資料:

  1. https://sriramramani.wordpress.com/2012/12/21/shaders/に情報がありShadersます。
  2. http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/ShapedButton.javaPathは、Android 版 Firefox の曲線ボタンに使用します。
  3. http://sriramramani.wordpress.com/2012/08/27/constructing-squishy-buttons/Canvasには、ICS 以前の保存、復元、および特殊なケースに関する情報があります。
于 2013-08-30T08:02:17.513 に答える
17

別の方法を使用することをお勧めします。

一人FrameLayoutと二人ImageViewならできる。

<FrameLayout>
    <ImageView />  your image 
    <ImageView />  put a image which has a transparent circle in it
</FrameLayout>

あなたの画像は透明な円で見ることができます。

于 2013-08-30T08:52:41.490 に答える
15

v4 サポート ライブラリRoundedBitmapDrawableをに適用して、目的の効果を得ることができます。ImageView

ImageView imageView = (ImageView)findViewById(R.id.imageView);
Bitmap avatar = BitmapFactory.decodeResource(getResources(), R.drawable.avatar);
RoundedBitmapDrawable roundDrawable = RoundedBitmapDrawableFactory.create(getResources(), avatar);
roundDrawable.setCircular(true);
imageView.setImageDrawable(roundDrawable);
于 2016-01-26T19:57:39.410 に答える
3

次のコードを参照してください。これはまさにあなたが望むことを行います。

https://github.com/vinc3m1/RoundedImageView

あなたが言ったように、カスタムビューが必要ない場合は、次のアイデアを試してください

角が丸く、背景が透明な 9 パッチの .png 画像 (フォト フレームのようなもの) を作成します。

次に、次のように 2 つの画像ビューを使用して相対レイアウト / FrameLayout を作成します。

<RelativeLayout ....>
   <ImageView android:id="@+id/myImage" ..>
   <ImageView android:id="@+id/myRoundCorner" android:src="@drawable/myRoundCornerdFrame">
</RelativeLayout>

両方の画像ビューが画像ソースを除いて同じ属性を持っていることを確認し、ソースが myRoundCornerFrame である画像ビューが別の画像ビューの上にあることを確認してください。

于 2013-08-30T09:08:24.400 に答える
2

android-shape-imageview を試してみてください。役立つはずです。

于 2014-12-16T14:34:41.850 に答える
0

drawable hdpi フォルダーに roundimage.xml という名前の xml ファイルを作成し、次のコードを試してください。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
        <solid android:color="@android:color/darker_gray" />
       <corners android:bottomRightRadius="50dip"
        android:bottomLeftRadius="50dip"  
        android:topRightRadius="50dip"
        android:topLeftRadius="50dip"/>
   </shape>

次に、ファイルを画像の背景に含めます

android:background="@drawable/roundimage"

ご要望に応じて寸法と色を変更していただきますようお願いいたします。

このコードを使用してください

package com.company.app.utils;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;

public class ImageHelper {
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
}

これが機能するので、これを使用します。

角を直角にしたい場合は、これを使用してください

public static Bitmap getRoundedCornerBitmap(Context context, Bitmap input, int pixels ,

int w , int h , boolean squareTL, boolean squareTR, boolean squareBL, boolean squareBR)
{

Bitmap output = Bitmap.createBitmap(w, h, Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final float densityMultiplier = context.getResources().getDisplayMetrics().density;

final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, w, h);
final RectF rectF = new RectF(rect);

//make sure that our rounded corner is scaled appropriately
final float roundPx = pixels*densityMultiplier;

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);


//draw rectangles over the corners we want to be square
if (squareTL ){
    canvas.drawRect(0, 0, w/2, h/2, paint);
}
if (squareTR ){
    canvas.drawRect(w/2, 0, w, h/2, paint);
}
if (squareBL ){
    canvas.drawRect(0, h/2, w/2, h, paint);
}
if (squareBR ){
    canvas.drawRect(w/2, h/2, w, h, paint);
}

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(input, 0,0, paint);

return output;
}

また、これを入れるために ImageView をオーバーライドして、xml で定義できるようにしました。スーパー コールがここで作成するロジックの一部を追加することもできますが、私の場合は役に立たないのでコメントしました。

@Override
protected void onDraw(Canvas canvas) {
//super.onDraw(canvas);
    Drawable drawable = getDrawable();

    Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();


    Bitmap roundBitmap=CropImageView.getRoundedCornerBitmap( getContext(), 
    bitmap,10, w, h , true, false,true, false);
    canvas.drawBitmap(roundBitmap, 0,0 , null);
}
于 2013-08-30T07:54:35.743 に答える