นักผจญโค้ด (CODE HUNTER)

สร้างตัวจำลองสำหรับการทดสอบ

          การจะทำให้แอพฯ ที่เราพัฒนาขึ้นสามารถใช้งานได้อย่างมีประสทธิภาพ จำเป็นที่จะต้องทำให้แอพฯ นั้นๆ รองรับหน้าจอซึ่งมีขนาดแตกต่างกัน และในโลกนี้หน้าจอของมือถือ มีขนาดแตกต่างกันเยอะมาก 
          ดังนั้นเป็นไปไม่ได้ที่นักพัฒนาจะมีมือถือมากมายขนาดนั้น ทำให้เป็นปัญหาในการทดสอบประสิทธิภาพของแอพอย่างหนึ่ง 
          ทุกปัญหาย่อมมีทางออก ในเมื่อไม่สามามารถมีเครื่องจริงได้ ก็ใช้การจำลองมือถือขนาดหน้าจอต่างๆ ซึ่งมีผู้พัฒนาไว้หลายเจ้า ในวันนี้จะกล่าวถึงตัวที่มาพร้อมกับเจ้า android studio 
เริ่มต้น เข้าไปที่เมนู AVD Manager สัญลักษณ์ตามด้านล่าง


คลิ๊กที่เมนู Create Virtual Device


ผู้พัฒนาสามารถเลือกขนาดหน้าจอให้ตรงตามความต้องการได้


เลือก version ให้ตรงความตามต้องการ


ตั้งชื่อตามความต้องการ และกดปุ่ม finish 


หลังจากกดปุ่ม finish จะพบกับตัวจำลองที่เราพึ่งสร้างไปเมื่อสักครู่


ทดสอบการใช้งาน กดที่ปุ่ม Luanch this AVD in the emulator


พร้อมทำการทบสอบ



Share:

การเปิดใช้งานโหมดนักพัฒนา เพื่อทดสอบแอพฯ บนเครื่องจริง

สำหรับนักพัฒนาที่อยากทดสอบแอพฯ ที่ตนเองเขียนบนเครื่องจริง ก่อนที่จะใช้เครื่องจริงทดสอบได้ 
จำเป็นต้องเปิดโหมดนักพัฒนาในเครื่องนั้นๆ ก่อน ซึ่งวิธีการง่ายมาก เรามาเริ่มเรียนรู้วิธีเปิดกัน

ไปที่ setting ของเครื่องที่ต้องการเปิดใช้งาน เข้าไปที่เมนู About device


มองหาเมนู Build number กดต่อเนื่อง 7 ครั้ง


ระหว่างการกด จะมีข้อความแสดงให้เราทราบว่า ต้องกดอีกกี่ครั้ง


เมื่อกดครบแล้ว จะมีข้อความแจ้งเตือน


กลับมาที่หน้า setting อีกครั้ง จะพบเมนูที่ถูกเพิ่มเข้ามาใหม่ 
คือ developer options ให้เข้าไปในเมนูนี้ได้เลย


จากนั้นมองหาเมนู usb debugging ซึ่งอยู่ในหมวด Debugging


ทำการเปิดใช้งานให้เรียบร้อย เพียงเท่านี้ผู้พัฒนาก็สามารถทดสอบแอพบนเครื่องจริงได้แล้ว


Share:

เปลี่ยนสี TODO ให้มันเก๋ๆ สีสันสดใสกันเถอะ


          ในบทความนี้เจ้าของบล็อกจะพามาเปลี่ยนสีของเจ้า TODO กัน หลักๆ ก็เพื่อให้ดูง่ายและผลพลอยได้ของมันคือมันเก๋ ไม่ต้องพูดพร่ำทำเพลง มาเริ่มกันเลยดีกว่า



          เริ่มแรกเลยก็ไปที่ File->Settings-> ช่องค้นหาก็พิมพ์คำว่า TODO ตามภาพด้านล่าง


          
          วิธีแรกมันหลายขั้นตอน มาดูวิธีทีสองกันดีกว่า  มุมซ้ายล่างมองหาเมนู TODO เปิดมันขึ้นมา แล้วกดที่เมนู Filter TODO Item ตามรูปหมายเลขสองด้านล่างเลย  จากนั้นไปที่เมนู Edit Filters



          กดที่เครื่องหมาย + เพื่อสร้างรูปแบบใหม่



          ตั้งชื่อให้กับ TODO ของเรา โดยมีให้อยู่ในรูปแบบ \btodo....\b.* ( . จุด คือชื่อที่เราจะตั้ง) ในตัวอย่างเจ้าของบล็อกตั้งชื่อว่า -red ภาพด้านล่า คำที่ขีดเส้นใต้คือชื่อของ TODO


          ในห้วข้อ Use color scheme TODO default colors ให้เอาเครื่องหมายถูกออก เพื่อกำหนดสีให้เป็นสีของเราเอง



เจ้าของบล็อกกำหนดค่าต่างๆ แบบนี้



         จากนั้นเวลาเรียกใช้ก็จะเป็นแบบนี้ //TODO-red สังเกตุหลังคำว่า TODO  จะตามด้วยชื่อที่เราได้ตั้งไว้นั่นเอง เพียงเท่านี้เราก็จะมี TODO  ที่เก๋ๆ แถมยังดูง่ายขึ้นอีกด้วย




Share:

.apk อยู่ไหน ??? how to get .apk file

          ในบทความนี้จะมาพูดถึงวิธีหาไฟล์ apk (เป็นตัว apk debug นะครับ ซึ่งจะไม่สามารถใช้อัพไปบน google plystore ได้) ว่าอยู่ที่ไหนกัน
วิธีการ คลิกขวาที่โฟลเดอร์ app เลือก show in Explorer


เข้าไปในโฟลเดอร์ app

เข้าไปในโฟลเดอร์ build

เข้าไปในโฟลเดอร์ outputs

เมื่อเข้ามาในโฟลเดอร์ outputs กรณีที่ยังไม่เคยรันโปรเจคเลย จะไม่มีโฟลเดอร์ apk ครับ สำหรับวิธีรันโปรเจค สามารถดูได้ที่บทความ  วิธีรันโปรเจคบท Android Studio

จะมีไฟล์ apk อยู่สองตัว ใช้ตัวไหนก็ได้ครับ ซึ่งความแตกต่างของ apk สองตัวนี้จะพูดถึงในโอกาสหน้าครับ

Share:

วิธีรันโปรเจคบน Android Studio

          บทความนี้เนื่องจากบทความ First Android Project การสร้างโปรเจคใน Android Studio กันนะครับ   สำหรับมือใหม่ที่ยังไม่ทราบว่า หลังจากที่สร้างโปรเจคได้แล้ว เราจะรันโปรแกรมกันอย่างไร 
ซึ่งวิธีก็ไม่ได้สับซ้อนอะไรครับให้มองหารูปสามเหลี่ยม สีเขียวๆ จะอยู่ในแถบเครื่องมือ 
ด้านหน้าปุ่มจะมีรูปหุ่นแอนดรอยเลือกเป็น app (โดย default มันจะเลือกให้อยู่แล้วครับ) จากกดปุ่มสามเลี่ยม

จะปรากฎไดอล็อก ให้เราเลือกอุปกรณ์ที่เราต้องการทดสอบครับ 


รอสักครู่ จนกว่า ในกล่องสี่เหลี่ยมด้านล่างจะหายไปครับ หลังจากที่หายแล้วสามารถดูผลการรันที่เครื่องทดสอบของเราได้เลย


Share:

มาทำความรู้จักกับ listview กันเถอะ



     ในบทความนี้เจ้าของบล็อกจะพามาเล่นกับ listview พอให้หอมปากหอมคอ

      ในไฟล์ activity_main.xml เจ้าของบล็อกประกาศ listview ขึ้นมาหนึ่งตัว
กำหนดความกว้างเป็น match_parent ความสูงเป็น match_parent และกำหนดชื่อให้มันว่า listview


     ต่อมาสร้างไฟล์เก็บไว้ที่โฟลเดอร์ layout  เจ้าของบล็อกตั้งชื่อว่า  list_item.xml ซึ่งไฟล์นี้เอาไว้สร้าง item ให้กับ listview ของเรานั่นเอง


  ในไฟล์ list_item.xml ประกาศ TextView ขึ้นมาหนึ่งตัว กำหนดความกว้างเป็น wrap_content ความสูงเป็น wrap_content ขนาดตัวหนังสือเป็น 20sp และตังชื่อให้มันว่า tvTextView

มาที่ไฟล์ MainActivity.java กัน 
          หมายเลข 1  เจ้าของบล็อกประกาศตัวแปรขึ้นมาหนึ่งตัวชื่อว่า data
          หมายเลข 2 ประกาศ ListView ขึ้นมา และทำการ findViewById ให้เรียบร้อย
          หมายเลข 3 เพิ่มข้อมูลเข้าไปในตัวแปร data จำนวน 99 ตัว
          หมายเลข 4 สร้าง adapter ในคำสั่ง CustomAdapter adapter = new CustomAdapter();
                             กำหนดค่าให้กับ adapter ในคำสั่ง adapter.setData(data);โดยการโยนตัวแปร data เข้าไป
                             ทำการ set adapter ให้กับ listview และโยน adapter ให้มันไป ในคำสั่ง listView.setAdpater(adpater);

โคดชุดนี้ยังไม่สามารถใช้งานได้ เพราะเรายังไม่ได้สร้าง Adapter นั่นเอง
                             


     ทำการประกาศ inner class ชื่อว่า CustomAdapter และทำการ สืบทอด (extends) มาจาก BaseAdapter และทำการ implement method ให้เรียบร้อย ซึ่งจะมี
     เมธอด getCount() ใช้นับจำนวน item
     เมธอด getItem(int position) ใช้หาตำแหน่งของ item
     เมธอด getItemId(int position) ใช้หา id ของ item
     เมธอด getView ใช้กำหนดค่าให้กับ item


จากนั้นประกาศตัวแปร List<String> data ขึ้นมาไว้ใช้งาน สร้างเมธอด setData ให้รับค่าตัวแปร List<String> data และกำหนดค่าให้กับ data ในคำสั่ง this.data = data ที่โยนเข้ามา

เมธอด getCount เราจะโยนขนาดของตัวแปร data ออกไปผ่านคำสั่ง return data.size();
เมธอด getItemId เราจะโดยน Object ออกไปผ่านคำสั่ง return data.get(position);
เมธอด getItemId เราจะโยน position ออกไป


ต่อมาเราสร้างคลาสขึ้นมาหนึ่งตัวชื่อว่า ViewHolder  ภายในคลาส ประกาศ TextView ขึ้นมาใช้งานหนึ่งตัว และสุดท้ายในประกาศ constructor ขึ้นมาหนึ่งตัว และให้รับค่า View เข้ามาด้วย
ทำการ findViewById ให้กับ TextView ในคอนสตัคเตอร์ 


กลับมาที่เมธอด getView
หมายเลข 1 ทำการเรียกใช้คลาส ViewHolder จากนั้นทำการเช็คว่า view เคยถูกสร้างขึ้นมาหรือยัง
ถ้ายังไม่เคยสร้าง ให้สร้างวิวขึ้นมาและกำหนด Tag ให้มันผ่านคำสั่ง setTag
แต่ถ้าวิวเคยถูกสร้างแล้วให้เรียกใช้งาน Tag เดิมผ่านคำสั่ง getTag

หมายเลข 2 กำหนดข้อความให้กับ TextView ผ่านคำสั่ง viewHolder.tvTextView.setText(data.get(position)); และ return view ออกไป


Share:

มาทำความรู้จักกับโครงสร้างของแอพฯ กันเถอะ

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

     หลังจากที่เปลี่ยนมุมมองเรียบร้อยแล้ว เรามาเริ่มทำความรู้จักโครงสร้างหลักๆ กันก่อน
หมายเลข 1  โฟลเดอร์ java จะเก็บไฟล์นามสกุล .java ทั้งหมดของโปรเจคไว้ที่นี่ ซึ่งไฟล์นามสกุลนี้ จะไม่สามารถเก็บไว้ที่โฟลเดอร์อื่นไม่ได้ เพราะจะทำให้คอมไพลไม่ผ่าน
หมายเลข 2 res จะเก็บไฟล์ นามสกุล .xml ต่างๆของโปรเจคไว้ ไว้จะอธิบายต่อไป
หมายเลข 3 AndroidManifest.xml เป็นไฟล์ควบคุมหลักของโปรเจค เช่น การขอสิทธิ์ต่างๆ ของแอพ
หมายเลข 4 assets จะเป็นไฟล์จากภายนอก เช่น font, database ฯลฯ
หมายเลข 5 build.gradle เป็นตัวกำหนดค่าต่างๆ ของแอพ เช่น เวอร์ชั่นของแอพ และการเรียกใช้ไลบรารี่ต่างๆ จากภายนอกผ่าน dependency

     หลักจากทำความรู้จักโครงสร้างหลักของแอพกันเรียบร้อยแล้ว ต่อไปเจ้าของบล็อกจะบล็อกจะพามาทำความรู้จักกับสิ่งที่อยู่ในโฟลเดอร์ java กัน
     เมื่อเปิดเข้ามาข้างในแล้ว จะเจอกับ packet ที่เป็นชื่อยาวๆ เช่นของเจ้าของบล็อกจะเป็น group.sniper.bmi ซึ่งจุด (.) หมายถึงการแบ่งชั้นของโฟลเดอร์ ยิ่งมีจุดมากเท่าไหร่แสดงว่าโปรเจคเรามีโฟลเดอร์ซ้อนๆ กันอยู่ลึกเท่านั้น และในชั้นในสุดเจ้าของบล็อกสร้าง packet หรือโฟลเดอร์ เพิ่มขึ้นมาอีก 4 ตัวได้แก่ activity, fragment, manager และ utils


     หลักจากที่รู้จักกับโฟลเดอร์ java กันเรียบร้อยแล้ว ต่อมาเจ้าของบล็อกจะพามารู้จักกับเจ้าโฟลเดอร์ res กัน ซึ่งสิ่งที่เจ้าของบล็อกจะอธิบายมีอยู่ 4 โฟลเดอร์ได้แก่ drawable , drawable-xhdpi, layout, และ values เรามาเริ่มกันเลย
โฟลเดอร์ drawable ใช้เก็บพวก selector ต่างๆ ที่สร้างจาก xml
โฟลเดอร์ drawable-xhdpi ใช้เก็บไฟล์รูปภาพต่างๆ ที่ใช้ภายในแอพ
โฟลเดอร์ layout ใช้เก็บหน้าออกแบบของแอพ
โฟลเดอร์ values ใช้เก็บข้อความ ขนาด style ต่างๆ ของแอพ


ภาพด้านล่างเป็นตัวอย่างไฟล์ในโฟเดอร์ layout  ที่เจ้าบล็อกบล็อกได้สร้าง



Share:

การสร้าง Drawer Menu & Hamburger Icon

เริ่มแรกเลย สร้างโปรเจคใหม่ขึ้นมา 
เจ้าของบล็อกขอตั้งชื่อว่า DrawerMenu เลยละกัน


เลือก Min SDK เวอร์ชั่น 15


เลือก Empty Activity


กด Finish ได้เลย


มาที่ไฟล์ activity_main.xml พิมพ์โคดตามด้านล่างนี้

เจ้าของบ็อกสร้าง DrawerLayout ครอบทุกสิ่งอย่าง 
และกำหนดไอดีให้มันว่า drawerLayout

สร้าง LinnearLayout สำหรับใช้ทำเมนู 
โดยเจ้าของบล็อกได้สร้าง Button ไว้สองตัวเพื่อให้ผู้อ่านเห็นภาพ

มาที่ไฟล์ MainActivity.java 
ประกาศตัวแปรชนิด DrawerLayout ขึ้นมาหนึ่งตัว 
และทำการ findViewById ให้เรียบร้อย
เมื่อลองรัน จะสามารถเลื่อนเมนูออกมาได้เเล้ว



ต่อมาเราจะใส่ปุ่ม Hamburger ให้กับแอพของเรา

ประกาศตัวแปรอีกตัว ชนิด ActionBarDrawerToggle
ทำการ new ActionBarDrawerToggle ส่ง 
Context , drawerLayout, ข้อความตอนเปิด และข้อความตอนปิด ให้มัน

ทำการผูก drawerLayout กับ Hamburger 
ด้วยคำสั่ง drawerLayout.setDrawerListner
และส่ง actionBarDrawerToggle ให้มันด้วย


ให้ทำการ Override method มา 3 ตัวด้วยกัน
onPostCreate, onConfigruationChanged, onOptionItemSelected

onPostCreate พิ่มพ์คำสั่ง actionBarDrawerToggle.synState();
onConfigruationChanged พิมพ์คำสั่ง actionBarDrawerToggle.onConfigruationChanged(newConfig); 
onOptionItemSelected ทำการเช็คว่าปุ่ม Hamburger ถูกกดหรือเปล่า ถ้าใช่ก็ให้ return true กลับไป





Share:

Recent Posts

Popular Posts

About Me

About Me