เจ้า Switcher View มันดีจริงๆ นะ

Jedsada Tiwongvorakul
20Scoops CNX
Published in
1 min readFeb 17, 2017

เมื่อ Application ของเรามีการติดต่อกับ APIs ซึ่งแน่นอนเลยว่าอาจจะต้องใช้เวลาการในติดต่อพอสมควร จึงต้องมีสถานะอะไรสักอย่างเพื่อบอกให้กับผู้ใช้ว่ากำลังโหลดข้อมูลอยู่ หรือถ้าหากเกิดข้อผิดพลาดในการโหลด ล่ะก็ต้องมีการบอกผู้ใช้ว่าเกิดอะไรขึ้น เพื่อกันผู้ใช้ งง แล้วนำมาซึ่งการลบ App ของเรา เศร้าใจจริงๆ

ซึ่งเจ้าของบล็อคเจอปัญหา คือต้องมานั่งซ่อนหรือแสดงแต่สถานะของ View เลยลองหา Library เพื่อเข้ามาช่วยจัดการปัญหา พอมาเจอเจ้า Switcher ก็เห็นว่ามันน่าสนใจ และใช้งานง่ายเลยอยากจะเอามาแชร์ให้กับผู้ที่หลงเข้ามาอ่าน

เริ่มแรกก็ต้อง เพิ่ม Library เข้ามาใน Project ซะก่อน ดังนี้

build.gradle ระดับ Project

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

build.gradle ระดับ Module (App)

compile 'com.github.jkwiecien:Switcher:2.0.8'

จากนั้นก็กด Sycn ก็เป็นอันเสร็จพิธี

ความสามารถของเจ้า Switcher สามารถเพิ่มสถานะของ View ได้ 4 สถานะได้แก่

  1. Content View คือ วิวที่เราอยากจะแสดงเนื้อหา
  2. Progress View คือ วิวที่เราอยากจะแสดงเมื่อรอการโหลดข้อมูล
  3. Error View คือ วิวที่อยากจะแสดงเมื่อเกิดข้อผิดพลาด
  4. Empty View คือ วิวที่อยากจะแสดงเมื่อไม่มีข้อมูล

งั้นมาสร้าง Layout ให้กับทั้ง 4 สถานะก่อนเลยละกัน เนาะ

  1. ตัวอย่าง Progress View

2. ตัวอย่าง Error View

3. ตัวอย่าง Empty View

4. ตัวอย่าง Content View คือ element ที่อยู่ใน layout ของ Activity นั้น ก็ให้ทำการ include view ทั้ง 3 สถานะมาไว้ตรงนี้ ดังนี้

เมื่อ Resource ครบก็มาลุยโค้ดกันเลยครับ !!!

เริ่มจากการ add view ที่เรากำหนดจากด้านบนให้กับนาย Switcher ก่อนดังนี้

private Switcher switcher;@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

switcher = new Switcher.Builder(this)
.addContentView(findViewById(R.id.content))
.addErrorView(findViewById(R.id.error_view))
.addProgressView(findViewById(R.id.loading_view))
.addEmptyView(findViewById(R.id.empty_view))
.build();
}

วิธีการใช้งานก็ชั่งยากซะเหลือเกิน ดังนี้

// แสดงวิวของสถานะ Progress
switcher.showProgressView();
// แสดงวิวของสถานะ Content
switcher.showContentView();
// แสดงวิวของสถานะ Empty
switcher.showEmptyView();
// แสดงวิวของสถานะ Error
switcher.showErrorView();
// ตรวจสอบว่าแสดงสถานะ Error อยู่ไหม
switcher.isShowingError();

แค่นี้เจ้าของบล็อคก็สามารถควบคุมสถานะต่างๆของ View ผ่านคำสั่งด้านบนแทนวิธีการเดิมๆ คือ visible, invisible หรือ gone ได้แล้ว ดีงามพระงามแปด :)

สรุป เจ้า Switcher สามารถทำให้เรื่องที่น่าเบื่อของเจ้าของบล็อคเป็นเรื่องที่ง่าย และถ้าสังเกตดีก็จะเห็นว่ามันแอบใส่ Animation ในการ Fade in/out ของแต่ละ View ให้เองอย่างสวยงาม ซึ่งจุดนี้เจ้าของบล็อคคือชอบมาก ก็หวังว่าจะเป็น Library ที่น่าจะเป็นตัวเลือกที่น่าสนใจอีกตัวหนึ่งนะครับ

--

--