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 ที่ชัดเจน ใช้งานได้จริง

การเขียนโค้ดเพิ่มขนาดฟอนต์ในภาษา XML

ตัวอย่างการเขียนแอพสำหรับแอนดอยน์
แถวหรือ Attribute สำหรับการเพิ่มหรือกำหนดขนาดของฟอนต์ หรือข้อความในรหัสภาษา XML ก็คือ ใช้ชื่อเป็น android:textSize="45sp"
ทดลองพรีวิวดูในหน้าต่างการแสดงผลบนหน้าจอคอมพิวเตอร์หรือโทรศัพท์มือถือ ก็จะได้ข้อความมีขนาดที่ใหญ่ขึ้นตามที่เรากำหนด

โดยหน่วยที่ใช้สำหรับฟอนต์คือ sp ซึ่งย่อมาจากคำว่า Scale Independent Pixels
ทั้งนี้ sp จะใช้สำหรับข้อความเท่านั้น
สำหรับการออกแบบแอพนั้นผู้พัฒนา ควรจะกำหนดให้มีตัวเลือกในการเลือกขนาดของฟอนต์ให้ง่ายและอ่านง่ายสำหรับสายตาของผู้ใช้งานแต่ละคนด้วย ถือเป็นความลเอียดและ detail ที่นักพัฒนาแอพจะต้องให้ความสำคัญด้วยเช่นกัน โดยจะมีตัวเลือกขนาดเป็น เล็ก กลาง ใหญ่ และ ใหญ่มาก เป็นต้น
ซึ่งผู้พัฒนาอาจจะต้องจำเป็นศึกษาเพิ่มเติมจากบนเรียน เกี่ยวกับหลักการออกแบบให้สอดคล้องกับอุปกรณื เช่นเครื่องโทรศัท์ หรือหน้าจอแท็บเล้ต เป็นต้น
รวมทั้งหลักการเลือกใช้งานแบบฟอนต์ให้ดูสวยงามด้วย
แบ่งเป็น หัวข้อหลัก ชื่อเรื่องหลัก รอง ข้อความธรรมดา เป็นต้น

ซึ่งจะบอกขนาดของฟอนต์และแสดงตัวอย่างให้เราดูได้ 

ดูเพิ่มเติมขนาดฟอนต์ได้ที่ 

https://material.io/guidelines/style/typography.html#typography-typeface

    android:text="Excited for the gift you'll surprise me with."
    android:background="@android:color/darker_gray"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp" />

นอกจากการเขียนโค้ดโดยใช้ textsize แล้ว ในXML ยังสามารถใช้การเขียนอีกแบบคือ
แบบ  textAppearance
android:textAppearance="?android:textAppearanceLarge" />

โดยสามารถเปลี่ยนตรงท้ายให้เป็น small หรือ medium ได้

สำหรับการเปลี่ยนสีพื้นสามารถเปลี่ยนได้ โดยระบุชื่อสี เช่น red ,white,green เป็นต้น
นอกจากนั้นยังสามารถระบุได้โดยใช้รหัสสีที่เรียกว่่า HEX color
ดูเพิ่มเติมรสหัสสี
http://www.google.com/design/spec/style/color.html#color-color-palette

ส่วนการเปลี่ยนสีฟอนต์ก็ทำได้โดยการเขียนโค้ดเพิ่มอีก 1 แถว
android:textColor="#9ACD32"

รู้จักกับ Behaviors ในการตัดต่อวีดีโอด้วย Camtasia

Behaviors  หมายถึงลักษณะหรือความประพฤติ ซึ่งมีทั้งดีและไม่ดี แต่ว่า Behaviors ในการตัดต่อวิดีโอ หมายถึงลักษณะหรือรูปร่างของวัตถุในโปรแกรม ที่จะมีการกระทำ เปลี่ยนแปลงไปในรูปแบบต่างๆ
ในแถบเครื่องมือของ Camtasia จะมีปุ่มคำสั่ง Behaviors ให้ผู้ใช้งานได้เลือกใช้งานได้
โดยสามารถแดรกลาก Behaviors ที่ต้องการลงในหน้าต่างแสดงผลของโปรแกรม Display หรือจะแดรก Behaviors ไปวางลงในแทรกของมีเดียแต่ละชนิด ก็ทำได้เช่นกัน


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

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

การปรับแต่งหรือ Custom ของ Behaviors  คลิกเลือกและปรับรูปแบบทิศทาง และลักษณะลูกเล่นต่างๆ ได้เพิ่มเติม

บทสรุป 

หากมีโอกาสตัดต่อวีดีโอด้วย Camtasia ก็อย่าลืมทดลองใช้งาน เจ้า Behaviors ดูนะครับ โดยฝึก



การนำเอา behaviors มาใส่ใน timeline หรือ canvas

ฝึกการปรับแต่ง behavior

ฝึกลองใช้ behaviors หลายๆตัวในวัตถุเดียวกัน