Material Design 作者: android Fly

【Material Design】Android ShapeableImageView 自定義圖片形狀 範例

【Material Design】Android ShapeableImageView 自定義圖片形狀 範例

ShapeableImageView 是在 Android 中一種可以自定義形狀的圖片視圖，可以通過簡單的語法來將裁剪的形狀應用於圖片上，可以通過它的loadPath的方法載入形狀文件中定義的裁剪模式，還可以將圖片裁剪為圓形或是任何其他任意多邊形，ShapeableImageView 還提供了自定義邊框顏色以及 drawable 資源映射語法

文章目錄

  1. ShapeableImageView 圓角
  2. ShapeableImageView 圓
  3. ShapeableImageView 半圓
  4. ShapeableImageView 切角
  5. ShapeableImageView 菱形
  6. ShapeableImageView 邊
  7. ShapeableImageView 對話框

1.ShapeableImageView 圓角

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50dp</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

2.ShapeableImageView 圓

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

3.ShapeableImageView 半圓

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeTopRight">50%</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

4.ShapeableImageView 切角

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50dp</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

5.ShapeableImageView 菱形

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

6.ShapeableImageView 邊

theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="ImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ImageStyle"
            android:padding="20dp"
            android:src="@drawable/zombie"
            app:strokeColor="@color/black"
            app:strokeWidth="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

7.ShapeableImageView 對話框

MainActivity.kt
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val dialogModel = ShapeAppearanceModel.builder().apply {
            setAllCorners(RoundedCornerTreatment())
            setAllCornerSizes(20f)
            setRightEdge(object : TriangleEdgeTreatment(15f, false) {
                override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
                    super.getEdgePath(length, 25f, interpolation, shapePath)
                }
            })
        }.build()

        (binding.text.parent as ViewGroup).clipChildren = false
        binding.text.setTextColor(Color.WHITE)
        binding.text.background = MaterialShapeDrawable(dialogModel).apply {
            setTint(ContextCompat.getColor(this@MainActivity, R.color.purple_200))
            paintStyle = Paint.Style.FILL
        }
    }

}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:padding="10dp"
            android:textSize="30sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

發表迴響