Round Corner Progress Bar สำหรับคนบ้าขอบมน

อยู่ในระหว่างการปรับปรุงเนื้อหา

บทความวันนี้ขอแนะนำไลบรารีที่เจ้าของบล็อกเขียนขึ้นมาเอง ซึ่งเป็น Progress Bar ที่มีลักษณะมุมมนที่ปรับได้หรือจะเพิ่มภาพไอคอนที่ซ้ายมือของ Progress Bar ก็ได้ (และฝึกเขียน Custom View Library ไปในตัว)

สำหรับไลบรารีตัวนี้สามารถดาวน์โหลดได้ที่ Round Corner Progress Bar [GitHub] หรือถ้าใช้ Android Studio ก็สามารถดึงได้ง่ายๆผ่าน Maven Central ตามนี้

compile 'com.akexorcist:RoundCornerProgressBar:1.0.0'

ก็แค่ทำ Shape Drawable ให้มีขอบมนแล้วกำหนดลงใน XML เลยก็ได้ไม่ใช่หรอ?

ต้องบอกก่อนเลยว่าที่เจ้าของบล็อกทำไลบรารีตัวนี้ขึ้นมาก็เพราะว่า Progress Bar แบบเดิมที่ Custom Drawable เข้าไปนั้นมีปัญหา Progress ไม่ได้มีขอบมน หรือต้องบอกว่าขอบจะมนก็ต่อเมื่อ Progress เท่ากับ Max เท่านั้น

เพราะว่า Progress ที่อยู่ข้างในนั้นใช้เทคนิค Clip Layer ซึ่งจะเป็นการตัดส่วนที่ไม่ต้องการออกไป จึงทำให้ส่วนโค้งมนที่ฝั่งริมขวามือนั้นก็หายไปด้วยเช่นกัน

แต่ทว่าเจ้าของบล็อกอยากให้ Progress นั้นขอบมนอยู่ตลอดเวลา (เป็นติ่งขอบมน)

ลองหาไลบรารีคนอื่นมาใช้ก็ดันหาไม่เจอ ก็เลยเขียนเองเอาไว้ใช้งานเองซะเลย จึงเป็นที่มาของไลบรารีตัวนี้นั่นเอง โดยใช้หลักการง่ายๆคือเอา Linear Layout สองตัวมาซ้อนกันเพื่อทำเป็น Progress Bar แล้วกำหนดพื้นหลังเป็น Shape ที่กำหนดความโค้งมนได้ ส่วนแบบมีภาพไอคอนก็ประยุกต์เลย์เอาท์เพิ่มเติมเล็กน้อย มีการใส่ Image View เข้าไป และทำให้มันสามารถกำหนดภาพที่จะใช้

ซึ่งไลบรารีตัวนี้เจ้าของบล็อกก็ทำให้ Progress มันมีขอบที่โค้งมนอยู่ตลอดเวลา และสามารถเลือกได้ว่าจะให้เป็นแบบ Progress Bar ปกติ หรือจะให้มีภาพไอคอนอยู่ที่ซ้ายมือของ Progress Bar

โดยทำเป็น 2 คลาสด้วยกันคือ RoundCornerProgressBar กับ IconRoundCornerProgressBar (ชื่อยาวชะมัด) ซึ่งทั้งสองตัวมีการเรียกใช้งานใน Layout XML ที่สำคัญๆ ดังนี้

<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar android:layout_width="dimension" android:layout_height="dimension" app:backgroundPadding="dimension" app:backgroundRadius="dimension" app:backgroundColor="color" app:progressColor="color" app:progress="integer" app:max="integer" /> <com.akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar android:layout_width="dimension" android:layout_height="dimension" app:iconPadding="dimension" app:iconSize="dimension" app:iconSrc="drawable" app:backgroundPadding="dimension" app:backgroundRadius="dimension" app:backgroundColor="color" app:headerColor="color" app:progressColor="color" app:progress="integer" app:max="integer" />

สำหรับ app:xxx นั้นไม่จำเป็นต้องกำหนดทุกอัน เพราะเจ้าของบล็อกกำหนดค่า Default ไว้ให้ทุกอันแล้ว แต่ถ้าอยากแก้ไขก็ค่อยเพิ่มเข้าไปแล้วกำหนดค่าเองได้

และในการใช้งานจะต้องกำหนด Namespace สำหรับ app ที่ Root View ดังนี้

xmlns:app="https://schemas.android.com/apk/res-auto"

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" . . > . . <com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar . . /> . . </RelativeLayout>

ไม่เช่นนั้นจะเรียกใช้ Namespace ของ app ไม่ได้ (เปลี่ยน app เป็นชื่ออื่นก็ได้นะเออ)

สำหรับไลบรารีตัวนี้จะมี Attribute สำหรับการกำหนดค่าต่างๆดังนี้

app.max ค่าสูงสุดของ Progress (..integer..)
app:progress ค่า Progress เริ่มต้น (..integer..)
app:progressColor สีของ Progress (@color/….. หรือ #RRGGBB)
app:headerColor สีของพื้นหลังของไอคอน (@color/….. หรือ #RRGGBB)
app:backgroundColor สีพื้นหลังของตัว Progress Bar (@color/….. หรือ #RRGGBB)
app:backgroundRadius ค่าความโค้งมนของขอบ โดยกำหนดที่ Progress Bar ส่วนค่าความโค้งมนของขอบ Progress จะสัมพันธ์กับตัว Progress Bar อีกที (…..dp)
app:backgroundPadding ระยะ Padding ระหว่าง Progress กับ Progress Bar (…..dp)
app:iconPadding ระยะ Padding ระหว่างขอบ Progress (…..dp)
app:iconSrc ภาพของไอคอนที่จะให้แสดง (@drawable/…..)
app:iconSize ขนาดของภาพไอคอน (…..dp)

ในส่วนของการกำหนดขนาด Progress Bar สำหรับ RoundCornerProgressBar กับ IconRoundCornerProgressBar จะมีความต่างกันตรงวิธีกำหนดความสูงของ Progress Bar

เพราะว่า RoundCornerProgressBar จะกำหนดความสูงที่ android:layout_width ในขณะที่ IconRoundCornerProgressBar จะกำหนดความสูงที่ app:iconSize

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" > <com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar android:id="@+id/progress_1" android:layout_height="320dp" android:layout_width="40dp" app:backgroundPadding="5dp" . . /> <com.akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar android:id="@+id/progress_2" android:layout_height="320dp" android:layout_width="wrap_content" app:backgroundPadding="10dp" app:iconSize="50dp" app:iconPadding="5dp" . . /> </RelativeLayout>

โดยจะเห็นว่าการกำหนดขนาดสำหรับ IconRoundCornerProgressBar จะขยายขนาดเพิ่มจากการกำหนด Background Padding อีกทีหนึ่ง

ในการเรียกใช้งาน RoundCornerProgressBar และ IconRoundCornerProgressBar จะสามารถเรียกใช้งานได้เหมือน View ตัวอื่นๆเลย

RoundCornerProgressBar progress1 = (RoundCornerProgressBar) findViewById(R.id.progress_1);

สำหรับ RoundCornerProgressBar จะมีเมธอดหลักๆดังนี้

void setProgressColor(int color) int getProgressColor() void setBackgroundColor(int color) int getBackgroundColor() void setMax(float max) int getMax() void setProgress(float progress) int getProgress()

คงไม่ต้องอธิบายอะไรมั้ง เพราะว่ามันก็คือ Attribute ที่อยู่ใน Layout XML นั่นเอง

มาดู IconRoundCornerProgressBar กันบ้าง

IconRoundCornerProgressBar progress2 = (IconRoundCornerProgressBar) findViewById(R.id.progress_2);

จะมีเมธอดเพิ่มเข้ามาอีกเล็กน้อยซึ่งเป็นคำสั่งสำหรับกำหนดภาพไอคอนนั่นเอง

void setProgressColor(int color) int getProgressColor() void setBackgroundColor(int color) int getBackgroundColor() void setHeaderColor(int color) int getHeaderColor() void setMax(float max) int getMax() void setProgress(float progress) int getProgress() void setIconImageResource(int resource) void setIconImageBitmap(Bitmap bitmap) void setIconImageDrawable(Drawable drawable)

จากการที่สามารถกำหนดสีของ Progress ผ่านโค๊ดโปรแกรมได้ จึงทำให้สามารถประยุกต์ทำ Progress Bar ที่เปลี่ยนสี Progress ที่ค่าต่างกันออกไปได้

หรือจะทำให้ภาพไอคอนเปลี่ยนไปตามค่า Progress ก็ได้เหมือนกัน

ดังนั้นก็ขึ้นอยู่กับผู้ที่หลงเข้ามาอ่านแล้วล่ะ ว่าจะเอาไลบรารีตัวนี้ของเจ้าของบล็อกไปทำอะไร จะลองดาวน์โหลดแอพฯตัวอย่างการใช้งานมาดูก่อนก็ได้ Round Corner Progress Bar Demo [Google Play Store]