Day 12 : Circular Progress Button

Day 12 : Circular Progress Button Cover Image

สวัสดีครับ บทความนี้เป็นบทความที่ 12 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

สำหรับวันนี้ขอนำเสนอเรื่อง Circular Progress Button ครับ

Circular Progress Button คืออะไร?

Circular Progress Button เป็น Library ที่เอาไว้ปรับแต่งให้โดยใส่ Progress ให้กับ Button เหมือนกับการเอา ProgressBar มารวมกับ Button ตัวอย่าง ก็แบบรูปข้างล่างเลยครับ

Circular Demo

สำหรับ Library อันนี้ การใช้งานง่ายมากๆครับ เริ่มด้วย

Installation

ขั้นตอนการติดตั้ง เปิด build.gradle จากนั้นก็เพิ่ม dependencies ข้างล้างนี้ลงไป

dependencies {
    compile 'com.github.dmytrodanylyk.circular-progress-button:library:1.0.5'
}

Circular Progress Button ใช้ MinSDK 14 เพราะฉะนั้นในโปรเจ็คของเรา ต้องตั้งอย่างน้อย 14 นะครับ

Layout

ตัว Circular Progress Button ในไฟล์ Layout จะใช้ View ชื่อ com.dd.CircularProgressButton แบบนี้นะครับ

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <com.dd.CircularProgressButton
        android:id="@+id/circular_button"
        android:layout_width="196dp"
        android:layout_height="64dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal"
        app:cpb_textComplete="@string/complete"
        app:cpb_textError="@string/error"
        app:cpb_textIdle="@string/upload" />

</LinearLayout>
  • cpb_textComplete : คือข้อความที่ต้องการ เมื่อ Progress Complete
  • cpb_textError : ใส่ข้อความที่ต้องการ หาก Progress Error
  • cpb_textIdle : ใส่ข้อความเริ่มต้นให้กับ Button

สำหรับไฟล์ res/values/strings.xml เพิ่ม String ไป 3 ชื่อ ดังนี้ครับ

<resources>
    <string name="complete">Completed</string>
    <string name="error">Error!</string>
    <string name="upload">Upload</string>
</resources>

Progress

ตัว Circular Progress Button จะแบ่ง State ออกเป็น 4 ส่วนคือ

  1. Normal State (มีค่าเป็น 0)

Progress 0

  1. Progress State (มีค่าตั้งแต่ 1 - 99)

Progress 50

  1. Success State (มีค่า 100)

Progress 100

  1. Error State (มีค่า -1)

Error

Custom

เราสามารถปรับแต่ง หน้าตาของ Button เพิ่มเติมได้ เช่น

  • rounded corner ให้กับ Button
app:cpb_cornerRadius="48dp"

Rounded

  • ใส่ icon ให้กับ Button ได้ โดยมี 2 state คือ iconComplete และ iconError
app:cpb_iconComplete="@drawable/ic_action_accept"

Complete

app:cpb_iconError="@drawable/ic_action_cancel"

Error

Usage

การใช้งาน ง่ายๆเลยครับ ทำการ binding View จากไฟล์ xml ก่อน ไฟล์ xml

<?xml version="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:orientation="vertical"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <com.dd.CircularProgressButton
        android:id="@+id/circular_button_simple"
        android:layout_width="196dp"
        android:layout_height="64dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:cpb_textComplete="@string/complete"
        app:cpb_textError="@string/error"
        app:cpb_textIdle="@string/upload" />

</LinearLayout>

ส่วนคลาส จาวา เป็นแบบนี้

public class CircularActivity extends ActionBarActivity {
    CircularProgressButton mCircularButtonSimple

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.day12_activity_circular);

        mCircularButtonSimple = (CircularProgressButton)
            findViewById(R.id.circular_button_simple);
    }
}

แล้วก็ setProgress() ให้กับ CircularProgressButton แบบนี้

mCircularButtonSimple.setProgress(50);

อันนี้คือตัวอย่าง โดยใช้ onClickListener เมื่อเวลา คลิก Button Progress ก็จะถูก set ค่าเป็น 50 ถ้ากดอีกที ก็จะเป็น 100 จะแสดง textComplete

mCircularButtonSimple.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (mCircularButtonSimple.getProgress() == 0) {
            mCircularButtonSimple.setProgress(50);
        } else if (mCircularButtonSimple.getProgress() == 100) {
            mCircularButtonSimple.setProgress(0);
        } else {
            mCircularButtonSimple.setProgress(100);
        }
    }
});

แล้วมันเอาไปใช้ทำอะไรได้ละ เราต้องมา setprogress ให้มันเอง แล้วมันจะมีประโยชน์อะไร? จริงๆ มันเอาไปใช้ร่วมกับ AsyncTask เวลาอัพโหลดหรือดาวน์โหลดไฟล์ก็ได้ครับ โดย implement ในส่วน doInBackground() แล้วก็คำนวณ ขนาดไฟล์ หรืออะไรก็ว่าไปครับ ในส่วนนี้ไม่ได้ทำตัวอย่างให้ดูนะครับ พอดีไม่มีเวลาเขียนเท่าไหร่ เดี๋ยวถ้ามีเวลาว่าง จะมาแก้ไขโพสนี้ โดยเพิ่มตัวอย่างการใช้งานจริงไปด้วย

ลองเอาไปเล่นกันดูนะครับ ส่วนรายละเอียดเพิ่มเติมก็อ่านจาก User Guide ได้เลย :D

สุดท้าย Source Code ทั้งหมด ก็อยู่ที่ Github ครับ

Reference

  • Circular Progress Button - รูปตัวอย่างทั้งหมด เอามาจากต้นฉบับครับ
Chai

Chai Phonbopit : Developer แห่งหนึ่ง • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด