Note : In your project, open your_app > Gradle Scripts > build.gradle (Module: app) and add the following implementation statement to the dependencies{}
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0' // use this or use the latest compile version. In case u get bug.
}
XML Code
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp" // here u can adjust the width
android:layout_height="96dp" // here u can adjust the height
android:src="@drawable/profile" // here u can change the image
app:civ_border_width="2dp" // here u can adjust the border of the circle.
app:civ_border_color="#FF000000"/> // here u can adjust the border color
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val originalDrawable = ContextCompat.getDrawable(this, R.drawable.avatar_1)!!
val bitmap = convertDrawableToBitmap(originalDrawable)
val drawable = RoundedBitmapDrawableFactory.create(resources, bitmap)
drawable.setAntiAlias(true)
drawable.cornerRadius = Math.max(bitmap.width, bitmap.height) / 2.0f
avatarImageView.setImageDrawable(drawable)
}
companion object {
@JvmStatic
fun convertDrawableToBitmap(drawable: Drawable): Bitmap {
if (drawable is BitmapDrawable)
return drawable.bitmap
// We ask for the bounds if they have been set as they would be most
// correct, then we check we are > 0
val bounds = drawable.bounds
val width = if (!bounds.isEmpty) bounds.width() else drawable.intrinsicWidth
val height = if (!bounds.isEmpty) bounds.height() else drawable.intrinsicHeight
// Now we check we are > 0
val bitmap = Bitmap.createBitmap(if (width <= 0) 1 else width, if (height <= 0) 1 else height,
Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
drawable.setBounds(0, 0, canvas.width, canvas.height)
drawable.draw(canvas)
return bitmap
}
}
}
17 回答
您可以制作一个带有白色边框和透明内容的简单圆圈 .
然后创建一个可绘制的图层列表,并将其作为背景添加到您的图像视图中 .
并将其作为您的imageview的背景 .
你会有类似的东西 .
这是我设计的最简单的方法 . 试试这个 .
如果您正在使用lollipop以上的Android版本
我希望这对你有所帮助 .
1) With Third-party Library
Note : In your project, open your_app > Gradle Scripts > build.gradle (Module: app) and add the following implementation statement to the dependencies{}
有关完整说明,请查看:The Source here.
2) Without Third-party Library
res/values/attrs.xml
Layout
以上方法使用
src
属性 . 我做的是将两个图像视图放在一个框架布局内,一个在另一个上面,如下所示:只需将circular_crop.png放在您的可绘制文件夹中,该文件夹的形状为图像尺寸(在我的情况下为正方形),中间有白色背景和透明圆圈 . 如果您需要方形图像视图,可以使用此图像 .
只需下载上面的图片 .
以下是最简单的方法之一,使用以下代码:
Dependencies
XML Code
Screenshot:
资料来源:Circular ImageView GitHub Repository
在glide库和RoundedBitmapDrawableFactory类的帮助下,它很容易实现 . 您可能需要创建圆形占位符图像 .
滑翔V4:
Glide V3:
这样就可以了:
rectangle.xml
circle.xml
profile_image.xml(图层列表)
你的布局
我使用shape = "oval"而不是下面的"ring" . 它对我有用 . 为了使图像保持在边界内,我使用
<padding>
并在<ImageView>
中将<adjustViewBounds>
设置为true . 我尝试过尺寸在50 x 50像素到200x200像素之间的图像 .只需使用这些代码行即可完成:
别忘了导入:
在build.gradle中添加此库:
创建一个CustomImageview,它的
onDraw()
方法如下:此类是具有阴影,笔触,饱和度的自定义圆形图像视图,使用此自定义圆形ImageView,您可以使用“半径”将图像设置为圆形 . 圆形阴影ImageView的人不需要Github这个类就足够了 .
将CircularImageView添加到您的布局
@Jyotman Singh,答案非常好(对于纯色背景),所以我想通过共享矢量drawable来增强它,可以根据您的需要重新着色,也很方便,因为矢量单件形状可以很好地扩展 .
这是矩形圆形(@ drawable / shape_round_profile_pic):
用法是一样的:
实际上,您可以使用Google通过支持库RoundedBitmapDrawableFactory类(here和here)提供的内容,而不是使用第三方库:
摇篮:
MainActivity.kt
res/layout/activity_main.xml
res/drawable/avatar_1.xml
结果:
并且,假设您想在其上添加边框,您可以使用此示例:
stroke_drawable.xml
并将
android:foreground="@drawable/stroke_drawable"
添加到布局XML文件中的ImageView,你得到这个:我不知道如何添加阴影(这将适用于较旧的Android版本) . 使用FloatingActionButton(来自"com.google.android.material:material" dependency),我无法使位图填充FAB本身 . 如果有效的话,使用它可能会更好 .
编辑:如果你想添加高程阴影(可从API 21获得),你可以改变我写的内容:
Inside the layout XML file:
CircularShadowViewOutlineProvider.kt
In code:
结果:
只需使用这个简单的代码:首先添加依赖:
然后在xml布局中添加以下代码: -
使用下面的代码,你可以修改它:
试试这个 .
并在布局中使用此ImageView,如:
正如Orhan Obut的回答所述,但随着变化:
避免图像的延伸 . 和img.xml:
(没有更改)和circle.xml:
这里环的厚度最大 - 1000dp
和radiusRatio是图像宽度的一半(最大环宽,是吗?) - 2
如果需要,笔划是必需的边框 .
我使用了square png image(profile.png),顺便说一句 . 具有相同的宽度和高度 . 对于任意ImageView维度,这是正确的 .