Đã đăng vào thg 5 21, 2021 4:11 SA 3 phút đọc

3.5K

Hiển thị Image nhiều hình dạng với ShapeableImageView

Bài đăng này đã không được cập nhật trong 2 năm

Trước đây, khi ta sử dụng ImageView để hiển thị hình ảnh thì nó đơn giản chỉ hiển thị với hình chữ nhật cùi mía thôi. Để hiển thị hình dạng khác mà không tốn thời gian custom view thì ta thường nhờ đến sự cứu cánh của các thư viện, điển hình như CircleImageView của hdodenhof.

Và rồi cuối cùng thì Android cũng đã giới thiệu ShapeableImageView trong Material Design.

ShapeableImageView

ShapeableImageView kế thừa từ AppCompatImageView , nghĩa là nó có tất cả các function được cung cấp như trong AppCompatImageView

XML Attributes mới

strokeColor: màu đường viền của ImageView
strokeWidth: độ rộng đường viền của ImageView
cornerFamily: xác định corner của hình với giá trị là cut hoặc rounded tương ứng với loại cắt góc hay bo góc
cornerSize: xác định kích thước của corner, có thể sử dụng bằng giá trị phần trăm hoặc dp

Sử dụng

Thêm marerial design vào Gradle

implementation ‘com.google.android.material:material:1.2.0’

Circle ImageView

Circle ImageView thường được sử dụng nhiều cho avatar của user.

Đầu tiên, ta tạo style.

<style name="circle">
    <item name="cornerSize">50%</item>
</style>

Như ở trên, ta không thêm attribute cornerFamily vì giá trị mặc định của nó chính là rounded.

Sau đó gán style vào attribute app:shapeApperanceOverlay ở trong file layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/circle"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearanceOverlay="@style/circle"
    app:srcCompat="@drawable/doge" />

Circle ImageView Border

Ta dùng style như Circle Image trên và thêm thuộc tính strokeColor và strokeWidth để thêm border.

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/circle_border"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:padding="5dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearanceOverlay="@style/circle"
    app:srcCompat="@drawable/doge"
    app:strokeColor="@color/black"
    app:strokeWidth="5dp" />

Rounded Corner Image

Với loại hình bo góc ta cũng có thể thực hiện bằng cách lồng ImageView vào CardView vì CardView có hỗ trợ bo góc, tuy nhiên nó có thể làm giảm hiệu suất khi render layout. Vì vậy dùng ShapeableImageView thay thế là cách tốt hơn

Thêm style

<style name="rounded_corner">
    <item name="cornerSize">20dp</item>
</style>

Sử dụng style trong layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/rounded_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:shapeAppearanceOverlay="@style/rounded_corner"
    app:srcCompat="@drawable/doge" />

Rounded Corner Image Border

Tương tự, ta thêm thuộc tính strokeWidth và strokeColor

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/rounded_corner_with_border"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:padding="5dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:shapeAppearanceOverlay="@style/rounded_corner"
    app:srcCompat="@drawable/doge"
    app:strokeColor="@color/black"
    app:strokeWidth="5dp" />

Cut Corner Image

Đến đây thì ta phải thêm attribute cornerFamily với giá trị là cut

Tạo style

<style name="cut_corner">
    <item name="cornerSize">20dp</item>
    <item name="cornerFamily">cut</item>
</style>

Thêm vào layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/cut_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:shapeAppearanceOverlay="@style/cut_corner"
    app:srcCompat="@drawable/doge" />

Cut Corner Image Border

Tương tự

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/cut_corner_border"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:padding="5dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:shapeAppearanceOverlay="@style/cut_corner"
    app:srcCompat="@drawable/doge"
    app:strokeColor="@color/black"
    app:strokeWidth="5dp" />

Specific Rounded Corner

Thêm style

<style name="specific_rounded_corner">
    <item name="cornerSizeTopLeft">50dp</item>
    <item name="cornerSizeBottomRight">50dp</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
</style>

Thêm vào layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/specific_rounded_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:shapeAppearanceOverlay="@style/specific_rounded_corner"
    app:srcCompat="@drawable/doge" />

Specific Rounded Corner Border

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/specific_rounded_border_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:padding="5dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:shapeAppearanceOverlay="@style/specific_rounded_corner"
    app:srcCompat="@drawable/doge"
    app:strokeColor="@color/black"
    app:strokeWidth="5dp" />

Specific Cut Corner

Thêm style

<style name="specific_cut_corner">
    <item name="cornerSizeTopLeft">50dp</item>
    <item name="cornerSizeBottomRight">50dp</item>
    <item name="cornerFamilyTopLeft">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
</style>

Thêm vào layout


<com.gogle.android.material.imageview.ShapeableImageView
    android:id="@+id/specific_cut_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:shapeAppearanceOverlay="@style/specific_cut_corner"
    app:srcCompat="@drawable/doge" />

Specific Cut Corner Border

Tương tự

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/specific_cut_border_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:padding="5dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:shapeAppearanceOverlay="@style/specific_cut_corner"
    app:srcCompat="@drawable/doge"
    app:strokeColor="@color/black"
    app:strokeWidth="5dp" />

ImageView Rounded and Cut Corners

Một số design sẽ có cả sự kết hợp giữa bo góc và căn góc.

Thêm style

<style name="specific_mix_corner">
    <item name="cornerSize">50dp</item>
    <item name="cornerFamilyTopLeft">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
</style>

Thêm vào layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/specific_mix_corner"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:scaleType="centerCrop"
    app:shapeAppearanceOverlay="@style/specific_mix_corner"
    app:srcCompat="@drawable/doge" />

Programmatically với Kotlin

Nếu muốn set qua code thì ShapeableImageView cung cấp một số hàm mà ta có thể sử dụng.

Ví dụ ta muốn set Top Right Corner bo góc với size là 14dp:

topCornerImage.setShapeAppearanceModel(topCornerImage.getShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.ROUNDED,14dp)
        .build());