#AndroidStudio ตอนที่ 6 การใช้ชื่อภาพแบบซีรี่กำหนดลำดับการแสดงภาพ
ผ่านคลาส TextUtils แทน String.join
<introduction>
นอกจากข้อมูล (String) ที่เล่าไปก่อนหน้านี้ ก็ตามด้วยเรื่อง ภาพ (Image) เข้ามาประกอบการนำเสนอ เคยเล่าในตอนที่ 4 แสดงข้อมูลธรรมดาผ่าน TextView กับตอนที่ 5 แสดงข้อมูลผ่าน NavigationView ที่ทำให้ข้อมูลดูลื่นไหลได้ก็ด้วยการใช้คลาส ScrollView เพื่อทำ Scrolling ได้ เมื่อไปค้นดูพบว่ามีนักพัฒนาเขียนอะไร ทิ้ง Question & Solution ไว้มากมายใน stackoverflow.com คำตอบส่วนใหญ่ผมก็ได้จากที่นั่นหละ
ค้นเรื่องภาพ ก็ไปอ่าน Blog ของ akexorcist.com เล่าเรื่อง Drawable Resource และแนะนำเรื่อง Android Drawable Importer ก็คงต้องหาโอกาสไปอ่านสักวัน แต่ตอนนี้จะเน้นการส่งภาพเข้า Android Studio และนำมาแสดงผลอย่างง่าย คำว่าง่าย ก็ต้องดูว่างง่ายแบบ Front-End หรือ Back-End ทีแรกว่าจะทำภาพ slide ง่าย ๆ แต่ผมตั้งโจทย์ไว้ว่าจะทำ Layout ให้ง่ายที่สุด
งานนี้เลยต้องปรับ Back-End ให้ Front-End ทำงานได้ง่าย สรุป คือ 1) เตรียมเฉพาะ TextView มาเก็บลำดับภาพ และ 2) ImageView มาเก็บภาพ เพียง 2 คลาส แล้วแทนที่ภาพใหม่ทับที่เดิมไปเรื่อย ดังนั้นจะทำงานนี้ให้สำเร็จต้องเข้าไปเขียน Java เยอะหน่อย ไปเจอปัญหาเรื่อง String.join ที่ไม่มีให้ใช้ กว่าจะยอมรับไปใช้ TextUtils.join ก็ไล่อ่าน Blog จนมั่นใจว่าเราต้องเปลี่ยนคำสั่งเชื่อมต่อ String กันแล้ว
</introduction>
<process>
กระบวนการในการพัฒนา APP
เพื่อคลิ๊กไปบนภาพ แล้วเปลี่ยนเป็นภาพต่อไป ไหลไปเช่นนี้วนไปไม่รู้จบ
มีขั้นตอน ดังนี้
1. สร้าง New Project แบบ Empty Activity
เพราะไม่ต้องการความเป็นอัตโนมัติมากนัก ปรับเองบ้าง เมื่อ Project พร้อมทำงานแล้ว
ก็เข้าไป Right Click ที่ res แล้ว New Folder ชื่อ drawable-mdpi
หลังจากนั้นในกรณีมีภาพในเครื่องคอมพิวเตอร์ที่พร้อมนำมาใช้
สำหรับผมเตรียมภาพ lp01.jpg ถึง lp05.jpg แล้ว
ภาพทุกภาพมีขนาด 480*640 เป็นภาพแนวตั้ง
ก็ให้ไปเปิดรายการภาพด้วย Windows Explorer
แล้ว Right Clip บนภาพที่เตรียมไว้ในเครื่องคอมพิวเตอร์ด้วย Windows Explorer
เลือก copy ซึ่งเลือกได้หลายภาพพร้อมกัน โดยใช้ปุ่ม ctrl หรือ shift เข้าช่วย
1.1 วิธีแรก เปิด Project ใน Android Studio แล้วส่งเข้าไป
โดยกลับไปกด Right Clip บน folder : drawable ใน Project
เลือก paste
จะมี Windows ขึ้นถามว่าลงในห้อง drawable หรือ drawable-mdpi
ก็ให้เลือก drawable-mdpi แฟ้มที่ลงไปในห้อง drawable จะมี (mdpi) ต่อท้าย
1.2 วิธีที่สอง เปิด Folder ด้วย Windows Explorer แล้วส่งเข้าไป
เพราะ Project ของ Android Studio ไม่ลึกลับ เห็น Folder Structure คล้ายกัน
ของผมเข้าไปที่ C:\Users\[User Name]
\AndroidStudioProjects\[Project Name]\app\src\main\res\drawable-mdpi
เคย copy ภาพมาแล้ว ก็ paste ได้เลย เมื่อกลับไปเปิดดูใน Android Studio
ก็เห็นว่าภาพเข้าไปอยู่เหมือนเรานำเข้าผ่าน Android Studio ในข้อ 1.1 นั่นหละ
2. เข้า activity_main.xml จะเห็น Layout ของแอพ มีเพียง TextView ตัวเดียว
เปลี่ยนคำว่า “Hello World!” เป็น “1” เตรียมใช้เก็บตำแหน่งภาพแบบซีรี่
แล้วเข้า Tab:Design ถ้าปัจจุบันอยู่ใน Tab:Text
มองหา Palette, Images, ImageView ลากไปวางไว้บนจอภาพ
เป็นการเพิ่มวัตถุลงไปในจอภาพของเราอีก 1 รายการ
จากนั้นจะมีหน้าต่างมาให้เลือกภาพ ก็คลิ๊กที่ภาพ lp01 แล้วกด OK
เท่านี้แอพของเราก็จะมีภาพมาแสดงผลแล้ว
3. เข้า Tab:Text ของ activity_main.xml แล้วปรับ code ดังนี้
– ลบ app:layout ใน TextView ออกทั้งหมด
– ลบ tools:layout ใน ImageView ออกทั้งหมด
– เพิ่ม android:id=”@+id/textview” ให้กับ TextView
– ย้าย code ImageView ขึ้นมาด้านบน อยู่ก่อน TextView น่าจะเห็นเลข 1 ทับภาพ
เท่านี้ก็จะเห็นภาพอยู่ข้างหลัง และมีตัวอักษร 1 ลอยเหนือภาพที่มุมบนซ้าย
4. ไปเพิ่ม Activity ใน MainActivity.java จะอธิบายเฉพาะที่พิเศษ
ส่วน code ทั้งหมด ดูภาพรวมได้จาก gist ด้านล่าง
สิ่งที่ทำคือ เพิ่ม import และ code ใต้ class และ method ดังนี้
4.1 การแสดงข้อความเหนือภาพ เมื่อคลิ๊กภาพ เหมือน Notification เลย
แต่ code 5 บรรทัดนี้
บรรทัดแรก แปลงตัวอักษรจาก TextView เป็น Integer แล้ว + 1 จะได้เลขสำหรับเลื่อนภาพ
บรรทัดที่สอง มีภาพเตรียมไว้ 5 ภาพคือ lp01 ถึง lp05 คุมว่า ถึงเลข 5 ก็วนมาที่ 1 อีก
บรรทัดที่สาม เตรียม List ไว้ทำงานคู่กับ TextUtils.join เพื่อต่อ String
บรรทัดที่สี่ ทำการต่อ String จะได้ข้อความที่ครบถ้วน
บรรทัดสุดท้าย ใช้คลาส Toast แสดงข้อความแบบ Notification ว่าตอนนี้ถึงภาพไหน
int getV = Integer.valueOf(mTextView.getText().toString()) + 1;
if(getV > 5) { getV = 1; }
String[] List1 ={“เลื่อนไปภาพต่อไป ภาพที่ “,String.valueOf(getV)};
String s = TextUtils.join(” “, List1);
Toast.makeText(MainActivity.this, s , Toast.LENGTH_LONG).show();
4.2 การเปลี่ยนภาพใน ImageView
บรรทัดแรก เตรียมข้อความใน List
บรรทัดที่สอง นำสิ่งที่อยู่ใน List มาต่อกันด้วย TextUtils.join เป็นชื่อภาพ
บรรทัดที่เหลือ นำชื่อภาพที่เป็น String ส่งให้กับ
String[] List2 ={“lp0”,String.valueOf(getV)};
s = TextUtils.join(“”, List2);
Resources res = getResources();
String mDrawableName = s;
int resID = res.getIdentifier(mDrawableName , “drawable”, getPackageName());
mImageView.setImageResource(resID);
4.3 สุดท้าย หลังแสดง Notification และเปลี่ยนภาพแล้ว ก็ต้องส่งเลขตัวใหม่ที่ +1 เข้า TextView มี method setText มาช่วย ตามตัวอย่างข้างล่างนี้เลย
mTextView.setText(String.valueOf(getV));
https://gist.github.com/thaiall/180de945ef049198d260a08ae20a47cf
</process>
<website_guide>
+ http://www.android-examples.com/set-onclicklistener-on-imageview-in-android-example/
+ http://www.akexorcist.com/2016/07/best-practice-for-android-drawable-resource-management.html
+ https://developer.android.com/guide/practices/screens_support.html
+ http://www.thaiabc.com/lovelampang/nw/index.php
+ https://www.javatpoint.com/java-string-join
+ https://developer.android.com/reference/android/text/TextUtils.html
</website_guide>
หมายเหตุ
ถ้าสนใจติดตามเนื้อหาในบล็อกนี้ สามารถ subscribe ด้วย email ที่อยู่ข้างขวา หรือ click here
