มาลองทำแอปบล็อกของตัวเองกันดีกว่า ตอนที่ 3 : การดึง content มาแสดงใน custom chrome tab

หลังจากที่เราได้ blogger json api มาใช้ร่วมกับ Retrofit กับ Gilde กันไปแล้ว
ต่อมาเราก็จะมาใช้ custom chrome tab เพื่อมาอ่านบทความที่เราเขียนกัน
โดยกดที่ listview แล้วเข้ามาที่หน้า custom chrome tab
ในที่นี้เราจะลองทำสองแบบ คือ แบบเปิดหน้าเว็บขึ้นมา กับการใช้ getContent() ที่เป็น html ขึ้นมาแสดง

แต่ละแอปที่เราใช้กัน เช่น facebook google แม้กระทั่ง line เอง ก็ใช้ custom chrome tab ซึ่งมันโหลดหน้าเว็บไวมาก แถมยังใช้ feature จากใน chrome เช่น save password หรือการแชร์เว็บไปยังแอปอื่น

 

แหล่งข้อมูล
- Chrome Custom Tabs
- Android Chrome Custom Tabs Android Tutorial with Example
- Exploring Chrome Customs Tabs on Android
- [Android Code] Chrome Custom Tabs ของเล่นใหม่สำหรับ In-app Browser

- [Android] ยังใช้ Webview กันอยู่หรือ Chrome custom tabs เร็วกว่า 2 เท่านะ รู้ยัง
- Is there any way to load html content in chrome custom tab

ก่อนอื่นเลย add dependencies ก่อนเลยจ้า

dependencies {
compile 'com.android.support:customtabs:23.3.0'
}

จากนั้นปรับ minSdkVersion เป็น 15 และเครื่องที่ใช้ จะต้องมี chrome version 45 ด้วยนะจ๊ะ

เรามาเริ่มในส่วน UI กันก่อนเลยจ้า
เอ๊ะ เดี๋ยวนะ
เท่าที่อ่านก็ไม่ได้ใช้อะไรกับหน้า UI เลยนี่นา
มีแต่ส่วน implement code

เรามาลองการ implement custom chrome tab กันดีกว่า ไปที่ MainActivity.java ซึ่งเราได้ทำ onListItemClick ไว้ก่อนแล้ว เพราะเราใช้ fragment ในการทำแอปนี้ด้วย ดังนั้น เราลองใส่เปิด chrome tab ไปดังนี้

ผลเป็นดังนี้

ต่อมาเราก็ปรับเปลี่ยนแถบด้านบนให้สวยงาม โดยเพิ่ม เข้าไปดังนี้

- setToolbarColor : set สีแถบ toolbar ด้านบน โดยสีที่ใส่ เป็นค่า int นะ อาจจะดูงงๆว่า เฮ้ย ใส่ไปยังไงหว่า เอาง่ายๆ เราใส่ getTitleColor() คือใส่สี tab ตามหน้าเว็บจริง หรือ getResources().getColor(R.color.xxx); ใส่สีที่เราต้องการลงไปได้

- setShowTitle : ถ้าเราต้องการให้หัวข้อขึ้นมา ใส่ true (default เป็น false)

- setCloseButtonIcon : เปลี่ยนภาพปุ่มปิดของ custom chrome tab เป็นภาพที่เราต้องการ ใส่เป็น bitmap [แต่อันนี้ไม่เปลี่ยนให้เราแหะ ไม่รู้ทำไม]

- setActionButton : เพิ่มเมนูตรงจุดสามจุดด้านข้าง เช่น เราเมนู shared ลงไป (แก้ด้วย)

- addMenuItem : เพิ่มปุ่ม ที่ action bar เข้าไป แต่อันนี้เราไม่ได้ใส่ไป

และเราสามารถใส่ animation เพิ่มได้ด้วยนะเออ แต่ R.anim.silde_in_right กับ R.anim.silde_out_left เราต้องใส่ resource เพิ่มเองนะ

ถ้าเราต้องการให้ chrome custom tab ของเราโหลดเร็วขึ้น ต้องใส่ warmup ไปด้วย แต่ใส่ลงไปเปล่าๆปลี้ๆไม่ได้ ต้องเปิด browser service ของ chrome custom tab ขึ้นมาก่อน แล้วใส่ลงไปข้างใน

และเราสามารถ track traffic ว่าบล็อกตอนนี้เปิดจากแอปนี้นะ แต่รองรับ API 17 ขึ้นไปนะเออ

intent.putExtra(Intent.EXTRA_REFERRER, Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

ดังนั้น ผลที่ออกมา จะเป็นประมาณนี้

ถ้าเครื่องที่ API ถึง แต่ไม่มี Chrome จะออกมาเป็นประมาณนี้ คือถ้าเราไม่ได้ implement ในกรณีที่ไม่มี Chrome ดังนั้นหน้าเว็บจะไปเปิดที่ default browser แทน

ในเมื่อจบกรณีแรกแล้ว กรณีถัดมา นำส่วน content มาแสดง
พบว่า มันไม่รองรับเลยแหะ จะทำยังไงดีน๊ออ

ถ้าจะดึง content เรามาใส่เหมือน loaddata ใน webview พบว่า custom chrome tab ยังไม่รองรับนะ

อาจจะต้องใช้ webview เพื่อเอาส่วน content มาใส่เพื่อแสดงผลแทน

แต่มันใช่เหรอะ!!

อีกวิธีนึงที่สามารถทำได้ คือ เรียกอ่านจากไฟล์ html ที่มีอยู่นั่นเอง
แต่ที่เรามีคือ ส่วน content ที่ดึงมาจาก json นั่นเอง เอาไปบันทึกลงไฟล์ html ในโฟลเดอร์ภายในแอปของเรา ในส่วนของ internal storage

แล้วตอน lunch url เปลี่ยนเป็น customTabsIntent.launchUrl(this, Uri.fromFile(file)); แทน
ผลที่ได้ เนื่องจากอ่านจากไฟล์ แถบด้านบนเหมือนอ่านไฟล์เลย แล้วก็เด้ง เข้าใจว่า เราเขียนโค้ดส่วน custom chrome tab ไป

ดังนั้นถ้าจะแสดง content เพียวๆ น่าจะเป็น webview นะที่สามารถทำได้

เนื้อหาทั้งหมด
ตอนที่ 1 : blogger json api
ตอนที่ 2 : มาทำ push to refresh กันเถอะ
ตอนที่ 4 : ทำ push notification เมื่อบล็อกเรามีการอัพเดตบทความใหม่
ตอนที่ 5 : การ publish application ของเรา ลง play store