利用ShapeableImageView专门处理圆形和外框边线的特性,通过Glide加载图片装载到ShapeableImageView。注意,因为要描边,在xml定义ShapeableImageView时候,padding值与stroke值要保持一直,否则,圆图会在某些边缘地方被切边。
旋转的话,可以在上层Kotlin代码设置rotation(动态设置,灵活),旋转ShapeableImageView;也可以在xml里面写死rotation值(静态配置,不灵活)。
ShapeableImageView通过配置shapeAppearance改造成圆形图。
- "1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
-
- <com.google.android.material.imageview.ShapeableImageView
- android:id="@+id/image1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:background="@drawable/ic_launcher_background"
- android:padding="30px"
- android:src="@drawable/ic_launcher_foreground"
- app:shapeAppearance="@style/rounded_style"
- app:strokeColor="@android:color/holo_red_dark"
- app:strokeWidth="30px" />
-
- <com.google.android.material.imageview.ShapeableImageView
- android:id="@+id/image2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:background="@drawable/ic_launcher_background"
- android:padding="30px"
- android:src="@drawable/ic_launcher_foreground"
- app:shapeAppearance="@style/rounded_style"
- app:strokeColor="@android:color/holo_red_dark"
- app:strokeWidth="30px" />
-
- <com.google.android.material.imageview.ShapeableImageView
- android:id="@+id/image3"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:background="@drawable/ic_launcher_background"
- android:padding="30px"
- android:src="@mipmap/pic1"
- app:shapeAppearance="@style/rounded_style"
- app:strokeColor="@android:color/holo_red_dark"
- app:strokeWidth="30px" />
-
- <com.google.android.material.imageview.ShapeableImageView
- android:id="@+id/image4"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:background="@drawable/ic_launcher_background"
- android:padding="30px"
- android:rotation="-30"
- android:src="@mipmap/pic1"
- app:shapeAppearance="@style/rounded_style"
- app:strokeColor="@android:color/holo_red_dark"
- app:strokeWidth="30px" />
-
- <com.google.android.material.imageview.ShapeableImageView
- android:id="@+id/image5"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:background="@drawable/ic_launcher_background"
- android:padding="30px"
- android:rotation="-30"
- android:scaleType="centerCrop"
- android:src="@mipmap/pic1"
- app:shapeAppearance="@style/rounded_style"
- app:strokeColor="@android:color/holo_red_dark"
- app:strokeWidth="30px" />
-
- LinearLayout>
styles.xml:
- "1.0" encoding="utf-8"?>
- <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
-
- <style name="rounded_style">
- <item name="cornerFamily">roundeditem>
- <item name="cornerSize">50%item>
- style>
- resources>
- import android.os.Bundle
- import androidx.appcompat.app.AppCompatActivity
- import com.bumptech.glide.load.resource.bitmap.CenterCrop
- import com.google.android.material.imageview.ShapeableImageView
-
-
- class MainActivity : AppCompatActivity() {
- companion object {
- const val DEGREE = -60
- const val SIZE = 500
- }
-
- override fun onCreate(savedInstanceState: Bundle?) {
- super.onCreate(savedInstanceState)
- setContentView(R.layout.activity_main)
-
- val iv1 = findViewById
(R.id.image1) - GlideApp.with(this)
- .load(R.mipmap.pic1)
- .transform(CenterCrop())
- .error(android.R.drawable.stat_notify_error)
- .override(SIZE)
- .into(iv1)
-
- val iv2 = findViewById
(R.id.image2) - iv2.rotation = DEGREE.toFloat()
- GlideApp.with(this)
- .load(R.mipmap.pic1)
- .transform(CenterCrop())
- .error(android.R.drawable.stat_notify_error)
- .override(SIZE)
- .into(iv2)
- }
- }