我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
当前回答
下面是最简单的方法之一,使用以下代码:
依赖关系
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0' // use this or use the latest compile version. In case u get bug.
}
XML代码
<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
截图:
来源:Circular ImageView GitHub Repository
其他回答
我希望这对你有所帮助。
1) 可塑性图像视图
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:padding="5dp"
app:strokeWidth="10dp"
app:strokeColor="@android:color/darker_gray"
app:shapeAppearanceOverlay="@style/circleImageView"
android:src="@drawable/profile"
android:layout_margin="10dp"/>
Style add here: res/values/styles.xml
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
完整的描述请查看这里:来源在这里。
2) 圆图像视图
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项
implementation 'de.hdodenhof:circleimageview:3.1.0'
完整的描述请查看这里:来源在这里。
3) 循环图像视图
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:src="@drawable/image"
app:civ_border_color="#3f51b5"
app:civ_border_width="4dp"
app:civ_shadow="true"
app:civ_shadow_radius="10"
app:civ_shadow_color="#3f51b5"/>
别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项
implementation 'com.mikhaellopez:circularimageview:4.3.1'
完整的描述请查看这里:来源在这里。
这是我设计的最简单的方法。试试这个。
依赖关系
implementation 'androidx.appcompat:appcompat:1.3.0-beta01' implementation 'androidx.cardview:cardview:1.0.0' <android.support.v7.widget.CardView android:layout_width="80dp" android:layout_height="80dp" android:elevation="12dp" android:id="@+id/view2" app:cardCornerRadius="40dp" android:layout_centerHorizontal="true" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="1.9"> <ImageView android:layout_height="80dp" android:layout_width="match_parent" android:id="@+id/imageView1" android:src="@drawable/YOUR_IMAGE" android:layout_alignParentTop="true" android:layout_centerHorizontal="true"> </ImageView> </android.support.v7.widget.CardView> If you are working on android versions above lollipop <android.support.v7.widget.CardView android:layout_width="80dp" android:layout_height="80dp" android:elevation="12dp" android:id="@+id/view2" app:cardCornerRadius="40dp" android:layout_centerHorizontal="true"> <ImageView android:layout_height="80dp" android:layout_width="match_parent" android:id="@+id/imageView1" android:src="@drawable/YOUR_IMAGE" android:scaleType="centerCrop"/> </android.support.v7.widget.CardView>
添加边界圆ImageView -最新版本
用另一个比内部CardView稍大的CardView包装它,并设置它的背景色,为圆形图像添加边框。你可以增加外部CardView的大小来增加边框的厚度。
<androidx.cardview.widget.CardView
android:layout_width="155dp"
android:layout_height="155dp"
app:cardCornerRadius="250dp"
app:cardBackgroundColor="@color/white">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
app:cardCornerRadius="250dp"
android:layout_gravity="center">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/default_user"
android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
只需使用这些代码行,你就完成了:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
app:civ_border_width="3dp"
app:civ_border_color="#FFFFFFFF"
android:id="@+id/profile"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_below="@+id/header_cover_image"
android:layout_centerHorizontal="true"
android:layout_marginTop="-130dp"
android:elevation="5dp"
android:padding="20dp"
android:scaleType="centerCrop"
android:src="@drawable/profilemain" />
别忘了导入:
import de.hdodenhof.circleimageview.CircleImageView;
在构建中添加此库。gradle:
compile 'de.hdodenhof:circleimageview:2.1.0'
您不需要任何第三方库。
你可以在材质中使用ShapeableImageView。
implementation 'com.google.android.material:material:1.2.0'
style.xml
<style name="ShapeAppearanceOverlay.App.CornerSize">
<item name="cornerSize">50%</item>
</style>
在布局
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="100dp"
android:layout_height="100dp"
app:srcCompat="@drawable/ic_profile"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize"
/>
你们可以看到
https://developer.android.com/reference/com/google/android/material/imageview/ShapeableImageView
或者这个
https://medium.com/android-beginners/shapeableimageview-material-components-for-android-cac6edac2c0d
另外,这两个库可以帮助您。
https://github.com/vinc3m1/RoundedImageView
实现以下代码:
implementation 'com.makeramen:roundedimageview:2.3.0'
简单的用法:
<com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageView1"
android:src="@drawable/photo1"
android:scaleType="fitCenter"
app:riv_corner_radius="30dip"
app:riv_border_width="2dip"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_tile_mode="repeat"
app:riv_oval="true" />
https://github.com/chirag-kachhadiya/RoundedImageView
简单的用法:
实现以下代码:
implementation 'com.github.chirag-kachhadiya:RoundedImageView:1.0'
<com.infinityandroid.roundedimageview.RoundedImageView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:adjustViewBounds="true"
android:src="@drawable/the_hundred"
app:corner_radius="10" />