home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีวาดเครื่องหมายถูก (Tick/Checkmark) พร้อมพื้นหลังวงกลมใน Android

ภาพรวม

บทความนี้สาธิตการสร้างไอคอนเครื่องหมายถูก (Checkmark/Tick) ภายในวงกลมสีเขียว ด้วย Vector Drawable

ขั้นตอนที่ 1: สร้างโปรเจกต์

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/checkmark_circle" />

</LinearLayout>

ขั้นตอนที่ 3: Vector Drawable (res/drawable/checkmark_circle.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <!-- วงกลมพื้นหลัง -->
    <path
        android:fillColor="#6AC259"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />

    <!-- เครื่องหมายถูก (สีขาว) -->
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41L9,16.17z" />

</vector>

คำอธิบาย Path Data

วงกลม (Circle)

M12,2 C6.48,2 2,6.48 2,12 S4.48,22 12,22 S22,17.52 22,12 S17.52,2 12,2 Z
  • M12,2 - เริ่มที่ (12,2) จุดบนสุด
  • C6.48,2 2,6.48 2,12 - Cubic Bezier curve ไปมุมซ้ายล่าง
  • S... - Smooth curve ต่อเนื่อง

เครื่องหมายถูก (Checkmark)

M9,16.17 L4.83,12 L3.41,13.41 L9,19 L21,7 L19.59,5.59 L9,16.17 Z
  • สร้างรูป V shape ที่โค้งเล็กน้อย

ปรับแต่งสีและขนาด

<vector ...>
    <path android:fillColor="#4CAF50" android:pathData="..." />  <!-- วงกลมสีเขียว -->
    <path android:fillColor="#FFFFFF" android:pathData="..." />  <!-- ถูกสีขาว -->
</vector>

ใช้เป็น State List Drawable (เปลี่ยนสีตามสถานะ)

res/drawable/checkmark_state.xml:

<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/checkmark_circle_green" />
    <item android:state_enabled="false" android:drawable="@drawable/checkmark_circle_gray" />
    <item android:drawable="@drawable/checkmark_circle_outline" />
</selector>

การใช้งาน

  • ImageView แสดงสถานะสำเร็จ
  • Checkbox/RadioButton custom
  • Button indicator
  • RecyclerView item decoration

ทดสอบ

รันแอป จะเห็นวงกลมสีเขียวพร้อมเครื่องหมายถูกสีขาวตรงกลาง ขนาด 100x100dp