我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
当前回答
另一个想法是使用ImageView的clipToOutline属性。
这是一个布局示例:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Simple view to draw borders for an image,
borders will be rounded because of the oval-shaped background. -->
<View
android:id="@+id/v_border"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/shape_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- Image itself: fits the border view,
a margin serves as a border width;
the key point here - is a background shape which will clip the view to its forms. -->
<ImageView
android:id="@+id/iv_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/shape_oval"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@+id/v_border"
app:layout_constraintEnd_toEndOf="@+id/v_border"
app:layout_constraintStart_toStartOf="@+id/v_border"
app:layout_constraintTop_toTopOf="@+id/v_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
这是我们的shape_border可绘制对象:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#FF00FF" />
</shape>
和shape_oval drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" />
你在代码中唯一要做的就是启用clipToOutline属性:
binding.ivImage.clipToOutline = true
当然,您甚至可以使用一些BindingAdapter来避免这一行代码。
其他回答
下面是最简单的方法之一,使用以下代码:
依赖关系
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
这是我设计的最简单的方法。试试这个。
依赖关系
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>
@Jyotman Singh,答案非常好(对于坚实的背景),所以我想通过分享可以根据你的需要重新着色的矢量绘图来增强它,而且这很方便,因为矢量整体形状是可伸缩的。
这是矩形-圆形状(@drawable/shape_round_profile_pic):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="284"
android:viewportHeight="284"
android:width="284dp"
android:height="284dp">
<path
android:pathData="M0 142L0 0l142 0 142 0 0 142 0 142 -142 0 -142 0zm165 137.34231c26.06742 -4.1212 52.67405 -17.543 72.66855 -36.65787 11.82805 -11.30768 20.55487 -22.85153 27.7633 -36.72531C290.23789 158.21592 285.62874 101.14121 253.48951 58.078079 217.58149 9.9651706 154.68849 -10.125717 98.348685 8.5190299 48.695824 24.95084 12.527764 67.047123 3.437787 118.98655 1.4806194 130.16966 1.511302 152.96723 3.4990422 164.5 12.168375 214.79902 47.646316 256.70775 96 273.76783c21.72002 7.66322 44.26673 9.48476 69 5.57448z"
android:fillColor="#ffffff" /> // you can change frame color
</vector>
用法是一样的:
<FrameLayout
android:layout_width="70dp"
android:layout_height="70dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/YOUR_PICTURE" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_round_profile_pic"/>
</FrameLayout>
这样就可以了:
rectangle.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/transparent" />
<padding android:bottom="-14dp" android:left="-14dp" android:right="-14dp" android:top="-14dp" />
</shape>
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />
<stroke
android:width="15dp"
android:color="@color/verification_contact_background" />
</shape>
profile_image.xml(图层列表)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/rectangle" />
<item android:drawable="@drawable/circle"/>
</layer-list>
你的布局
<ImageView
android:id="@+id/profile_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/default_org"
android:src="@drawable/profile_image"/>
另一种不使用任何库的方法是使用ImageFilterView,并设置视图的圆百分比将使圆
app: roundPercent =“1”
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/ivProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/custom_button_1"
app:roundPercent="1"
android:scaleType="fitXY"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@+id/etName"/>