【问题标题】:Circular Imageview in androidandroid中的圆形Imageview
【发布时间】:2017-04-12 19:38:02
【问题描述】:

我想在我的应用程序中使用圆形 ImageView。我找到了一些代码,但这只是圆角图像而不是圈子。这是我的代码。还要检查图像。

   public class CircularImageView extends android.support.v7.widget.AppCompatImageView {

public CircularImageView(Context context) {
    super(context);
}

public CircularImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

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

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

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

    Bitmap roundBitmap = getRoundBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundBitmap(Bitmap bmp, int radius) {
    Bitmap sBmp;

    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sBmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
    } else {
        sBmp = bmp;
    }

    Bitmap output = Bitmap.createBitmap(radius, radius,
            Bitmap.Config.ARGB_8888);


    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, radius, radius);

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(sBmp, rect, rect, paint);

    return output;
}

 }

这里是xml文件

 <com.example.CircularImageView
          android:layout_width="70dp"
          android:layout_height="70dp"
          app:srcCompt="@drawable/dummy />

我在 stackoverflow 上阅读了很多答案,但没有根据我的要求找到任何答案。我不想使用任何我想创建自己的代码的库。
我是 android 的新手,你能告诉我我的代码中缺少我吗?

【问题讨论】:

  • “我找到了一些代码,但这只是圆形图像而不是圆形” - 请解释其中的区别。您可能会考虑在某处上传图像并从您的“问题”链接到它。 “没有根据我的要求找到任何东西”——请详细说明您的“要求”是什么。
  • @CommonsWare 请检查我更新我的问题。圆形意味着它只是圆角
  • 好吧,当我在 Google 上搜索 android imageview rounded corners 时,我会找到各种解决方案。显然,您必须进行类似的搜索。当你尝试these answersthis blog post等时,你遇到了什么问题?

标签: java android android-imageview


【解决方案1】:

使用ImageViewCardView创建RoundedImageView的简单方法

检查这个例子:https://github.com/SergeySharipov/RoundedImageView

将以下依赖项添加到您的应用模块的 build.gradle 文件中:

 dependencies {
        implementation 'com.android.support:cardview-v7:27.1.0'
 }

将代码添加到您的布局并更改“YOUR_PICTURE”:

<android.support.v7.widget.CardView
        android:id="@+id/card_view_for_image"
        android:layout_margin="2dp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cardCornerRadius="100dp">

        <ImageView
            android:id="@+id/rounded_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/YOUR_PICTURE" />

</android.support.v7.widget.CardView>

【讨论】:

    【解决方案2】:
    1. 尝试从ImageView 扩展CircularImageView 而不是android.support.v7.widget.AppCompatImageView

    CircularImageView.java

    package com.ferdous.stackoverflowanswer;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.graphics.Rect;
    import android.graphics.drawable.BitmapDrawable;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.widget.ImageView;
    
    public class CircularImageView extends ImageView {
    
        public CircularImageView(Context context) {
            super(context);
        }
    
        public CircularImageView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
    
            Drawable drawable = getDrawable();
    
            if (drawable == null) {
                return;
            }
    
            if (getWidth() == 0 || getHeight() == 0) {
                return;
            }
            Bitmap b = ((BitmapDrawable) drawable).getBitmap();
            Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
    
            int w = getWidth(), h = getHeight();
    
            Bitmap roundBitmap = getRoundBitmap(bitmap, w);
            canvas.drawBitmap(roundBitmap, 0, 0, null);
    
        }
    
        public static Bitmap getRoundBitmap(Bitmap bmp, int radius) {
            Bitmap sBmp;
    
            if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
                float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
                float factor = smallest / radius;
                sBmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
            } else {
                sBmp = bmp;
            }
    
            Bitmap output = Bitmap.createBitmap(radius, radius,
                    Bitmap.Config.ARGB_8888);
    
    
            Canvas canvas = new Canvas(output);
    
            final String color = "#BAB399";
            final Paint paint = new Paint();
            final Rect rect = new Rect(0, 0, radius, radius);
    
            paint.setAntiAlias(true);
            paint.setFilterBitmap(true);
            paint.setDither(true);
            canvas.drawARGB(0, 0, 0, 0);
            paint.setColor(Color.parseColor(color));
            canvas.drawCircle(radius / 2 + 0.7f, radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            canvas.drawBitmap(sBmp, rect, rect, paint);
    
            return output;
        }
    
    }
    
    1. 在您的 XML 中,尝试使用属性 android:src 而不是 app:srcCompt

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:gravity="center">
      
          <com.ferdous.stackoverflowanswer.CircularImageView
              android:layout_width="200dp"
              android:layout_height="200dp"
              android:src="@drawable/dummy"
              android:background="#ff0000"/>
      
      </LinearLayout>
      

    输出:

    希望对你有帮助~

    【讨论】:

    • @FiverrProjects 我已经更新了我的答案。有关我的代码的输出,请参见附图。希望它会有所帮助
    • @FiverrProjects 如果我的回答似乎有用,请投赞成票。在此先感谢:)
    【解决方案3】:
    • 您可以将fresco lib 用于循环image

    • 您只需按照文档在xml layout 中添加属性fresco:roundAsCircle="true"

    • 此外,此库对于从 Web 加载 asynchronous 图像很有用。

    【讨论】:

    • 我不想使用任何库
    【解决方案4】:

    Use Piccasso 是一个非常受欢迎的库

    在你的毕业典礼中

    compile 'com.makeramen:roundedimageview:2.2.1'
    compile 'com.squareup.picasso:picasso:2.5.2'
    

    在您的代码中:

    Transformation transformation = new RoundedTransformationBuilder()
                .cornerRadiusDp(40)
                .oval(false)
                .build();
    
        Picasso.with(getApplicationContext())
                .load(//Your url image or bitmap)
                .fit()
                .transform(transformation)
                .into(//Your imageview);
    

    【讨论】:

      【解决方案5】:

      我使用材质库可塑形的图像视图。

      <com.google.android.material.imageview.ShapeableImageView
          app:shapeAppearanceOverlay="@style/ShapeAppearance.App.Image.Circle"
          />
      

      把下面的代码放到styles.xml中

      <style name="ShapeAppearance.App.Image.Circle" parent="">
          <item name="cornerFamily">rounded</item>
          <item name="cornerSize">50%</item>
          <item name="android:background">@color/transparent</item>
      </style>
      

      对于 kotlin 开发者,我建议 coil library 它有各种动画和裁剪功能:

      imageView.load("https://www.example.com/image.jpg") {
         crossfade(true)
         placeholder(R.drawable.image)
         transformations(CircleCropTransformation())
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-12-24
        • 2012-09-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-04-18
        • 2016-09-09
        • 1970-01-01
        相关资源
        最近更新 更多