วิธีการปรับขนาดของรูปภาพบนแอพ Android Studio

การเขียนแอพบน Android Studio มีทั้งข้อมูลการจัดตำแหน่งของวัตถุ บนหน้าจอ เช่น ภาพ หรือข้อความ สำหรับการจัดตำแหน่งและขนาดของภาพบนหน้าจอมือถือ สามารถกำหนดโดยเชียนภาษา XML ในการควบคุมการแสดงผลของภาพ แบบนี้
โดยศัพท์แสงที่นำมาใช้งานกันก็คือ Scale Type
จะมีการจัดตำแหน่งของภาพ เป็นกึ่งกลาง  กำหนดเป็น Scale Type center
และกึ่งกลางแบบตัดขอบให้พอดีหน้าจอ Scale Type center crop
การจัดลำดับหรือ Arrange ตำแหน่งของภาพ หรือข้อความบนหน้าจอ เพื่อให้สามารถเห็นข้อความตามต้องการ
ลองดูตัวอย่างการเขียนโค้ด สำหรับการจัดขนาดภาพตรงกลาง
android:src="@drawable/android_party"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>

สำหรับมือใหม่หรือผู้สนใจ หากต้องการเห็นความแตกต่างของการจัดภาพ ระหว่าง Scale Type center กับ Scale Type center Crop ก็แนะนำ ให้ทดสอบโค้ดทั้งสองแบบดู เพื่อดูความแตกต่างด้วยตนเอง

ทบทวนขั้นตอนสำหรับการออกแบบแอพ
1 การออกแบบมุมมอง เป็นข้อความ รูปภาพ ปุ่ม หรือ ฟอร์ม เป็นต้น
2 การจัดตำแหน่งของแต่ละรายการ
เช่น แนวนอน แนวตั้ง การกำหนดเป็นแถวเรียง  หรือแบบสัมพันธ์กัน
3 กำหนดสไตล์หรือรูปแบบ เช่นตัวหนา สีขาว หรือ ดำ เป็นต้น

การติดตั้งแอพที่พัฒนาบนมือถือ Android

หลังจากที่เราได้ดาวโหลดและติดตั้งโปรแกรม สำหรับการเรียนรู้การสร้างแอพบน Android ไปแล้วคือ โปรแกรม JAVA SDK และโปรแกรม Android Studio
และได้ทดลองสร้าง New Project แอพแรกของเรา ที่ชื่อว่า Hello World ไปแล้วนั้น
เนื้อหาการเรียนรู้ในบทต่อมา จะเป็นการทดลองนำแอพที่เราได้เขียนไว้ไปติดตั้งลงบนโทรศัพท์มือถือของเราจริงๆ ซึ่งจะมีวิธีการและขั้นตอน ดังนี้ครับ
สิ่งที่ต้องมีคือ
1 สายเชื่อมต่อสัญญาณ USB ระหว่างโทรศัพท์ กับ คอมพิวเตอร์
2 ดาวโหลด OEM Android Driver สำหรับเครื่องโทรศัพท์แต่ละรุ่น หรือแต่ละยี่ย้อ
3 ตั้งค่าโทรศัพท์ของเรา ให้รองรับโหมดการพัฒนา แอพพลิเคชั่น

ทิป
สำหรับการเชื่อมต่อสาย ขอให้มีสาย น่าจะต่อสายถูก
ส่วน Driver ของโทรศัพท์มือถือ ถ้าเป็นยี่ห้อ Samsung แนะนำให้โหลดโปรแกรม Kies ของซัมซุงมาติดตั้ง จะทำให้ Driver ตรงรุ่น และสามารถสื่อสารระหว่างคอมกับมือถือได้ชัวร์ๆ Admin ลองมาแล้ว
สำหรับการตั้งค่าโทรศัพท์ ก็ไม่ยาก
1 จากหน้า Home แตะไปการตั้งค่าหรือ Setting
2 เลื่อนลงไปจนแถวสุดท้าย จะเจอคำว่า About Device หรือ เกี่นวกับอุปกรณ์
ให้แท็บ 7 ครั้ง นับให้พอดี
จะได้เมนูคำสั่งเพิ่มขึ้นมา Developer Option
คลิกเข้าไป 1 ครั้ง
มองหาคำว่า USB debugging ให้แตะเลือกค่านี้ไว้

การติดตั้งแอพลงมือถือ
1 จากหน้าจอการเขียนแอพ Android Studio แตะไปที่เมนู Run
โปรแกรม ควรจะ Detect หามือถือที่เราเชื่อมต่อไว้อัตโนมัติ และจะถามว่าเราต้องการ Install แอพลงบนมือถือใ่ไหม ก็Yes ไป และคอยสักพักก็จะ Finish เป็นอันเรียบร้อย

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

การลองแสดงผลแอพที่เขียนด้วย Android Studio บนมือถือจริงๆ น่าสนใจกว่า และแสดงผลได้ถูกต้องกว่าการแสดงผลโดยอาศัยการจำลองโทรศัพท์มือถือในคอมพิวเตอร์หรือที่เรียกว่า Emulator อย่างไรก็ตาม หากคุณมีปัญหาในการเชื่อมต่อ Driver ของมือถือกับคอมพิวเตอร์ จนทำให้การเชื่อมต่อมีปัญหา มองไม่เห็นอุปกรณ์ แต่คุณต้องการพรีวิวดูผลงานการออกแบบผ่านตัวจำลอง Emulator ก็สามารถทำได้เช่นกัน

1 บนเมนูโปรแกรม คลิกที่ Run

2 ในหน้าต่างตัวเลือก อุปกรณ์จำลองหรือ Virtual Devices

Hello World สวัสดีชาวโลก

Hello World สวัสดีชาวโลก
วลีนี้หลายคนอาจจะสงสัย ว่ามีที่มาอย่างไร โดยเฉพาะอย่างยิ่ง นักพัฒาโปรแกรมคอมพิวเตอร์หรือ โปรแกรมเมอร์มือใหม่ ทั้งหลาย การเรียนรู้การเขียนโปรแกรม ภาษาใดๆ ก็ตาม ก็จะเริ่มต้นจากบนพื้นฐานหรือเบสิกที่เรียกกันว่า Hello World สวัสดีชาวโลก! นั้นเอง
คล้ายๆ กับที่เด็กเล็กๆ หัดเรียนรู้การพูด หรือการสะกดคำนั้นเอง
Hello World สวัสดีชาวโลก เป็นการเขียนโปรแกรม แสดงข้อความ บอกว่า สวัสดี บนหน้าจอคอมพิวเตอร์ หรือ มือถือ นั้นเองครับ
ฟังดูไม่น่าจะยากใช่ไหม ? หรือมีใครคิดว่าง่ายเงินไปหรือเปล่า? สำหรับมือใหม่ หรือผู้เริ่มต้น หากสามารถเข้าใจหลักการ และเขียนข้อความแสดงออกมาแสดงบนหน้าจอได้ตามที่กำหนด ก็ือว่าผ่านด่านแรก พร้อมจะศึกษาและเรียนรู้บทต่อๆไป ซึ่งจะมีรายละเอียดมากกว่า
ขั้นตอน
1 เริ่มจากการสร้าง New Project ขึ้นมา
2 ระบุชื่อของแอพ ที่กำลังจะเขียน และระบุชื่อของ Website ถ้าเรามีเป็นของตนเอง ถ้าไม่มีสามารถใส่ของ android.example.com จากนั้นคลิก Next
3 ตัวเลือกอุปกรณ์แสดงผล ค่าจะเป็น Phone และ Tablet ให้เอาตามนั้น จากนั้นคลิก Next
4 เลือกทมเพลต เป็น Black activity จากนั้นคลิก Next
5 ในขั้นตอนต่อมา จะเป็นหน้าต่างการตั้งค่าของแอพ ใช้ค่า Default และคลิก Finish ได้เลย

จากตัวอย่างหน้าจอการเขียนโปรแกรม
จะมี 3 ส่วนหลักๆ คือ
ส่วนไฟล์และโฟลเดอร์
ส่วนตรงกลางแสดงข้อมูลและพื้นที่การเขียนโค้ดโปรแกรม
ส่วนที่ 3 เป็นส่วนที่เป็นการพรีวิวดูตัวอย่างหน้าจอ

หลักๆ ไฟล์ที่จะเปิดเข้าไปเขียนโค้ดอยู่ที่ไฟล์ชื่อว่า Layout
Activity_main.xml ครับ
ถ้าคลิกดูแล้วจะเห็นโค้ดในรูปแบบของ Text view หรือ รูปภาพวิว และมีแถว Attribute ในการเขียนภาษา XML แสดงตามลำดับ ที่เราได้ศึกษาผ่านมาในชั้นต้น

xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.thaifreewaredownload.happybirthday.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />


</RelativeLayout>

ทดลองเปลี่ยนข้อความ Hello World เป็น ข้อความอื่นๆ ดูได้และพรีวิวดูในขั้นต้น ได้
ในบทต่อไปจะเป็นการ นำเอาแอพแรก ที่ชื่อว่า Hello World ไป install ลงบนมือถือของเราจริงๆ

สร้างรูปภาพสามมิติใส่ในเอกสาร

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

ขั้นที่1 คลิกปุ่ม AutoShapes แล้วคลิกเลือกรูปภาพที่ต้องการ

ขั้นที่2 แดรกเมาส์สร้างรูปภาพลงในเอกสาร 

ขั้นที่ 3 คลิกที่ปุ่ม 3 D 

ขั้นที่4 เพิ่มสีตามต้องการ

แค่นี้เราก็จะได้ รูปภาพสามมิติ ตามที่เราต้องการแล้ว คับ 

แนะนำ Padding and margin

สำหรับการพัฒนาแอพด้วย Android Studio จะมี หลักๆ เกี่ยวกับโครงสร้างของแอพ หรือ Layout เป็นส่วนสำคัญ ของการพัฒนา
เวลาที่เรามีการกำหนดตำแหน่ง ขนาด และ ชนิดของ Layout แล้ว การใส่รายละเอียดของแต่ละวัตถุใน Parent View ก็ถือเป็นรายละเอียด ที่สำคัญ และช่วยขับให้แอพของคุณดูดี
การกำหนดระยะห่าง จากขอบจอ หรือ ขอบตัวอ้างอิง จะใช้คำสั่ง  Padding and margin
ตัวอย่างโค้ด
android:paddingLeft="8dp"
    android:paddingRight="80dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"

จากตัวอย่างเป็นการเขียนโค้ดโดยใช้ Padding
และกำหนดระยะห่าง ซ้าย-ขวา บน-ล่าง

สำหรับการเรียนฟรีเขียนแอพบน Android ในบทต่อไป ก็จะเป็นการแนะนำ แบบฝึกหัด การลงมือ และตัวอย่างการเขียนแอพง่ายๆ เช่น การสร้างบัตรอวยพรปีใหม่ หรือ ส.ค.ส.

ซึ่งการจะเริ่มต้นสร้างแอพได้นั้น เราก็ต้องมีคอมพิวเตอร์ที่มีแรม หรือหน่วยความจำขั้นต่ำ 4 Gb ถ้าจะให้ดีก็สัก 8 GB ไปเลย

และเราจำเป็นจะต้องติดตั้งโปรแกรม 2 ตัวด้วยกันคือ


JDK ย่อมาจาก Java SE Development Kit)

ดาวโหลดได้ฟรีจาก

http://www.oracle.com/technetwork/java/javase/downloads/index.html

และ โปรแกรม Android Studio
https://developer.android.com/studio/index.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

การจัดกลุ่มข้อมูลด้วย View group

สหรับการจัดกลุ่ม ข้อความ รูปภาพ และป่มคำสั่ง ให้รวมกันในหน้าจอเดียว สามารถทำไดเโดยอาศัยการเขียนคำสั่ง XML ที่เรียกว่า View group
ซึ่งจะพบว่ามีศัพท์แสงทางเทคนิคที่น่าสนใจในการเขียนแอพ ได้แก่

• ViewGroups 
• Root View
• Parent
• Child
• Sibling

View group จะเป็นรูปร่างแบบ 4 เหลี่ยมผืนผ้า มีด้านกว้าง x ยาว แสดงบนหน้าจอ จะเรียกว่า เป็นกล่องใส่ของหรือบรรจุของก้ได้ 

บางครั้งเราเรียกว่า Parents หรือพ่อแม่ 

ส่วนข้อความ หรือภาพ ที่บรรจุอยู่บน Parents เราเรียกว่าลูก หรือ Child

ส่วนความสัมพันธ์ของ Child ที่มีต่อกันเราเรียกว่า Sibling 

ในการเขียนแอพ Parent ก็สามารถที่จะกำหนดตำแหน่งที่อยู่ของลูกๆ ได้ เช่น ตรงกลาง ด้านข้าง หรือด้านบน เป็นต้น 

การจัดตำแหน่งด้วย  View group   จะสามารถแบ่งออกได้ 2 ลักษณะ คือ

LinearLayout
RelativeLayout

ทำความรู้จักกับการจัดกลุ่มข้อมูลแบบ  LinearLayout

ตัวอย่างโค้ด
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

            android:text="Guest List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

            android:text="Kunal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

            android:text="Sutee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

 android:orientation="vertical"
เป็นแถวที่บังคับมุมมองแบบแนวดิ่ง
กลับกันถ้าต้องการแนวราบ ก้เปลี่ยนเป็น horizontal
จัดเพิ่ม 1ตัว match_parent
สำหรับการบังคับให้ ขนาดของ child หรือตัวลูกปรับขนาดตามขนาด กว้าง x สูง ของตัวแม่

เพิ่มอีก 2 ตัวคือ เกี่ยวกับการแสดงผลบนหน้าจอแบบ แนวตั้ง กับแนวราบ
portrait mode แนวดิ่ง
กับ
Landscape mode แนวราบ
ดูเพิ่มเติม การจัดตำแหน่งของวัตถุบนหน้าจออุปกรณ์
https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

รูปแบบหนึ่งที่สามารถกำหนดโค้ด การจัดตำแหน่งของ ลูกๆ ในแต่ละจุดบนพ่อแม่ได้ ก็คือ การแบ่งพื้นที่ว่างๆ เท่ากันหรือ evenly
มีหลักการเขียน ได้แก่
android:layout_weight

ใส่ค่าตัวเลขเป็น 0 หรือ 1 เป็นต้น 

ตัวอย่างโค้ด 

        android:src="@drawable/ocean"

        android:layout_width="match_paent"       

        android:layout_height="0dp"

        android:layout_weight="1"

        android:scaleType="centerCrop" />

ลองดูอีกแบบคือการจัดตำแหน่งของลูกๆ โดยใช้การการจัดแบบ อ้างอิง Parent
ตัวอย่าง

android:text="I’m in this corner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />

คำสั่งที่ใช้คือ android:layout_alignParentLeft="true

สามารถจัดให้อยู่มุมบน ขวา ซ้าง และเช่นกัน ล่าง ซ้าย หรือ ขวา เป็นต้น

การจัดตำแหน่งโดยอาศัยอ้างอิงตัวลูก หรือ Relative Layout View
การจัดตำแหน่งแบบนี้จะต้องมีการกำหนด id ให้กับแต่ละคน หรือกล่องข้อความหรือรูปภาพ เพื่อใช้อ้างอิง โดยคำสั่งที่ใช้กันก็คือ
ตัวอย่างโค้ด

            android:id="@+id/ben_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:text="Ben" />

ตัวอย่างโค้ด
         android:id="@+id/photo"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ocean" />

            android:id="@+id/Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/photo"
        android:text="Pebble Beach"
        android:textAppearance="?android:textAppearanceMedium" />

ตั้งชื่ออ้างอิง ภาพเป็น photo

และอีกอันตั้ง id เป็น Name
การทดสอบเขียนโปรแกรม ให้ข้อความ id=Name อยู่ด้านขวาของรูปภาพหรือ Photo

การเขียนโค้ด XML เพื่อแสดงข้อมูลรูปภาพ

เป็นแบบเริ่มต้นสำหรับผู้สนใจเรียกการเขียนแอพบนแอนดอยน์
ตัวอย่าง code

    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"/>
จะเห็นว่าจะเริ่มจาก tag เปิด มุมมองภาพ
และตามด้วยรายละเอียดแต่แถว
แสดงแหล่งข้อมูลของภาพหรือ scr="ชื่อแหล่ง/ชื่อไฟล์"
จะเห็นว่าชื่อไฟลภาพ ไม่จำเป็นต้องระบุนามสกุลของภาพ เช่น jpg,png เป็นต้น
แถวต่อมา ก็จะเป็นการกำหนดขอบเขต กว้าง x ยาว ของกล่องบรรจุภาพ
และแถวสุท้ายจะเป็นการจัดตำแหน่งภาพ เป็น ตรงกลาง / ซ้าย / ขวา
โดยใช้คำสั่งเป็น scaleType="center" หรือ
scaleType="centercrop" จะตัดขนาดภาพให้อยู่ตรงกลาง และย่อขนาดภาพให้เล็กลงด้วย

NOTE: การเขียนโค้ดแอพ ควรจะต้องมีการเตรียมภาพที่จะใช้งานให้เรียบร้อย ถ้าอ้างถึงแหล่งภาพที่ไม่มีอยู่จริงจะเกิดข้อผิดพลาดในโปรแกรมทันที

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

https://developer.android.com/reference/android/widget/TextView.html

ยกตัวอย่างการค้นหาวิธีการกหนดข้อความ ตัวหนา เอียง หรือปกติ

android:textStyle

Style (bold, italic, bolditalic) for the text.
สำหรับการออกแบบแอพจริงๆ แล้ว ต้องมีการวางแผนการออกแบบ และมีความรู้ด้านงานศิลปการออกแบบให้สวยงามและเป็นเนื้อเดียวกัน หากไม่มีทีมออกแบบ จำเป็นจะต้องหาความรู้เพิ่มเติมด้านการออกแบบ และออกแบบให้ง่ายและสบายตาที่สด มีปุ่มนำทางหรือ Navigate ที่ชัดเจน ใช้งานได้จริง