ตอนที่ 4 Android Studio Kotlin แนะนำ Views

30เม.ย. 2023 by รับทำแอพ สบายไอที

View เป็นองค์ประกอบสำคัญของส่วนต่อประสานผู้ใช้ของการทำแอพ Android อาจถูกมองว่าเป็นส่วนประกอบแต่ละอย่างที่ประกอบกันเป็นเลย์เอาต์โดยรวมของแอพ view มีหน้าที่ในการแสดงองค์ประกอบ UI ที่ผู้ใช้โต้ตอบด้วย เช่น ปุ่ม ช่องข้อความ และรูปภาพ ใน Android Studio view ถูกกำหนดโดยใช้ไฟล์เลย์เอาต์ XML และสามารถจัดการทางโปรแกรมโดยใช้โค้ด Kotlin หรือ Java

View ที่ใช้กันทั่วไปใน Android:
  1. TextView – view ที่แสดงข้อความ นี่เป็นหนึ่งใน view ที่ใช้บ่อยที่สุดใน Android เนื่องจากใช้เพื่อแสดงป้ายกำกับข้อความ ชื่อเรื่อง และคำอธิบาย
  2. EditText – view ที่อนุญาตให้ผู้ใช้ป้อนข้อความ view นี้ใช้สำหรับการป้อนข้อมูลของผู้ใช้ เช่น การป้อนข้อความลงในช่องค้นหาหรือการพิมพ์ชื่อผู้ใช้และรหัสผ่าน
  3. Button – view ที่แสดงปุ่มที่คลิกได้ view นี้ใช้สำหรับทริกเกอร์การดำเนินการต่างๆ เช่น การส่งแบบฟอร์มหรือการนำทางไปยังหน้าจออื่น
  4. ImageView – view ที่แสดงรูปภาพ view นี้ใช้เพื่อแสดงรูปภาพ เช่น รูปโปรไฟล์ โลโก้ หรือรูปภาพสินค้า
  5. RecyclerView – view ที่แสดงรายการที่เลื่อนได้ view นี้ใช้เพื่อแสดงรายการต่างๆ เช่น ฟีดบทความข่าว รายชื่อผู้ติดต่อ หรือตะกร้าสินค้า
  6. ProgressBar – view ที่ระบุความคืบหน้าของการดำเนินการ view นี้ใช้เพื่อแสดงแถบความคืบหน้า ตัวหมุนการโหลด หรือตัวบ่งชี้ความคืบหน้าประเภทอื่นๆ
  7. CheckBox – view ที่อนุญาตให้ผู้ใช้เลือกหนึ่งตัวเลือกหรือมากกว่า view นี้ใช้สำหรับตัวเลือกที่สามารถเลือกได้หลายรายการ เช่น การเลือกหลายรายการในรายการ
  8. RadioButton – view ที่อนุญาตให้ผู้ใช้เลือกหนึ่งตัวเลือกจากชุดตัวเลือก view นี้ใช้สำหรับตัวเลือกที่สามารถเลือกได้เพียงวิธีเดียว เช่น การเลือกวิธีการชำระเงิน
  9. Switch – view ที่แสดงถึงสวิตช์เปิด/ปิดไบนารี view นี้ใช้สำหรับสลับเปิดหรือปิดการตั้งค่า เช่น เปิดหรือปิดการแจ้งเตือนแบบพุช
  10. Spinner – view ที่แสดงรายการตัวเลือกแบบเลื่อนลง view นี้ใช้สำหรับเลือกหนึ่งตัวเลือกจากชุดตัวเลือก เช่น การเลือกประเทศหรือภาษา

view เป็นส่วนสำคัญในการรับทำแอพ Android และการทำความเข้าใจวิธีใช้งานอย่างมีประสิทธิภาพเป็นสิ่งสำคัญสำหรับการสร้างประสบการณ์ผู้ใช้ที่ดี เมื่อใช้ view ที่ถูกต้องใน UI ของแอป คุณจะสามารถสร้างอินเทอร์เฟซที่ใช้งานง่าย ซึ่งนำทางและใช้งานได้ง่าย

TextView

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

คุณสมบัติ TextView

ต่อไปนี้เป็นคุณสมบัติที่ใช้บ่อยที่สุดของ TextView:

  • text – ข้อความที่ต้องการจะแสดง
  • textSize – ขนาดของข้อความเป็นพิกเซลหรือพิกเซลที่ปรับขนาด
  • textColor – สีของข้อความ
  • textStyle – ลักษณะของข้อความ เช่น ตัวหนา ตัวเอียง หรือปกติ
  • typeface – แบบอักษรหรือตระกูลแบบอักษรที่ใช้สำหรับข้อความ
  • gravity – การจัดตำแหน่งของข้อความภายใน TextView
  • padding– จำนวน padding รอบข้อความภายใน TextView
  • background– สีพื้นหลังหรือวาดได้ของ TextView
ตัวอย่าง TextView ใน XML

ต่อไปนี้คือตัวอย่างวิธีใช้ TextView ในไฟล์เค้าโครง XML:

<TextView
    android:id="@+id/text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="20sp"
    android:textColor="#000000"
    android:textStyle="bold"
    android:gravity="center_horizontal"
    android:padding="8dp"
    android:background="#FFFFFF" />

ในตัวอย่างนี้ เราได้สร้าง TextView ด้วยคุณสมบัติต่อไปนี้:

  1. id – ตัวระบุเฉพาะสำหรับ TextView
  2. layout_width และ layout_height – ความกว้างและความสูงของ TextView ตั้งค่าเป็น wrap_content เพื่อปรับขนาดตามเนื้อหาข้อความ
  3. text – ข้อความที่ต้องการจะแสดง
  4. textSize – ขนาดของข้อความ ตั้งค่าเป็น 20sp (พิกเซลที่ปรับขนาด)
  5. textColor – สีของข้อความ กำหนดเป็นสีดำ (#000000)
  6. textStyle – สไตล์ของข้อความ กำหนดให้เป็นตัวหนา
  7. gravity – การจัดตำแหน่งของข้อความภายใน TextView ตั้งค่าเป็น center_horizontal
  8. padding – จำนวนของการเติมรอบข้อความภายใน TextView ตั้งค่าเป็น 8dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น)
  9. background – สีพื้นหลังของ TextView ตั้งค่าเป็นสีขาว (#FFFFFF)

ตัวอย่าง TextView ใน Kotlin

val textView = TextView(context)
textView.text = "Hello, World!"
textView.textSize = 20f
textView.setTextColor(Color.BLACK)
textView.setTypeface(null, Typeface.BOLD)
textView.gravity = Gravity.CENTER_HORIZONTAL
textView.setPadding(8, 8, 8, 8)
textView.setBackgroundColor(Color.WHITE)

ในตัวอย่างนี้ เราได้สร้าง TextView object และตั้งค่าคุณสมบัติโดยทางโปรแกรม

EditText

EditText เป็นองค์ประกอบอินเทอร์เฟซผู้ใช้ในการทำแอพ Android ที่อนุญาตให้ผู้ใช้ป้อนข้อความ เป็นคลาสย่อยของ TextView ซึ่งหมายความว่าสืบทอดคุณสมบัติและวิธีการทั้งหมดของ TextView และเพิ่มฟังก์ชันของตัวเองสำหรับการป้อนข้อความ

หากต้องการใช้ EditText ในแอป คุณต้องเพิ่มลงในไฟล์เค้าโครงโดยใช้โค้ด XML นี่คือตัวอย่าง:

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your name"/>

ในตัวอย่างนี้ เราได้สร้าง EditText ที่มี ID เป็น “editText” Layout_width ถูกตั้งค่าเป็น “match_parent” ซึ่งหมายความว่า EditText จะใช้ความกว้างเต็มของเลย์เอาต์พาเรนต์ layout_height ถูกตั้งค่าเป็น “wrap_content” ซึ่งหมายความว่า EditText จะปรับขนาดให้พอดีกับเนื้อหา คุณสมบัติคำใบ้ถูกตั้งค่าเป็น “ป้อนชื่อของคุณ” ซึ่งแสดงคำใบ้แก่ผู้ใช้เพื่อระบุว่าควรป้อนข้อมูลประเภทใด

เมื่อคุณเพิ่ม EditText ลงในเลย์เอาต์แล้ว คุณจะสามารถเข้าถึงได้ในโค้ด Java หรือ Kotlin โดยใช้ ID นี่คือตัวอย่าง:

EditText editText = findViewById(R.id.editText);
String text = editText.getText().toString();

ในตัวอย่างนี้ เราใช้ findViewById() เพื่อรับการอ้างอิงถึง EditText ด้วย ID เป็น “editText” จากนั้นเราใช้เมธอด getText() เพื่อรับข้อความที่ป้อนโดยผู้ใช้ และเมธอด toString() เพื่อแปลงเป็นสตริง

EditText ยังมีคุณสมบัติและวิธีการที่เป็นประโยชน์หลายอย่างที่คุณสามารถใช้เพื่อปรับแต่งรูปลักษณ์และลักษณะการทำงานของมัน นี่คือตัวอย่างบางส่วน:

InputType – ให้คุณระบุประเภทของอินพุตที่ต้องการ เช่น ข้อความ หมายเลขโทรศัพท์ อีเมล รหัสผ่าน ฯลฯ
MaxLength – อนุญาตให้คุณจำกัดจำนวนอักขระที่สามารถป้อนได้
TextChangedListener – ให้คุณตรวจจับการเปลี่ยนแปลงข้อความที่ผู้ใช้ป้อนและดำเนินการตามการเปลี่ยนแปลงเหล่านั้น
OnEditorActionListener – ให้คุณตรวจจับเมื่อผู้ใช้ป้อนข้อความเสร็จแล้วและดำเนินการตามเหตุการณ์นั้น

Button

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

องค์ประกอบปุ่มถูกกำหนดในคลาส android.widget.Button เป็นคลาสย่อยของคลาส TextView และสืบทอดคุณสมบัติและวิธีการทั้งหมด คอมโพเนนต์ปุ่มมีคุณสมบัติเพิ่มเติมบางอย่างสำหรับปุ่มโดยเฉพาะ เช่น แอตทริบิวต์ android:onClick ที่ใช้เพื่อระบุเมธอดที่จะถูกเรียกเมื่อผู้ใช้แตะที่ปุ่ม

หากต้องการใช้ส่วนประกอบปุ่มในแอปพลิเคชันของคุณ คุณต้องเพิ่มลงในไฟล์เลย์เอาต์ของคุณ ต่อไปนี้คือตัวอย่างไฟล์เค้าโครงอย่างง่ายที่มีส่วนประกอบของปุ่ม:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me!"
        android:onClick="onButtonClick" />

</LinearLayout>

ในตัวอย่างนี้ เรามี LinearLayout ที่มีส่วนประกอบของปุ่มเดียว คอมโพเนนต์ปุ่มมีรหัส “my_button” ที่เราสามารถใช้อ้างอิงในโค้ด Kotlin ของเรา เรายังระบุข้อความที่จะแสดงบนปุ่มโดยใช้แอตทริบิวต์ android:text สุดท้าย เราได้ระบุชื่อของเมธอดที่จะเรียกใช้เมื่อผู้ใช้แตะที่ปุ่มโดยใช้แอตทริบิวต์ android:onClick

ตอนนี้เราได้เพิ่มองค์ประกอบปุ่มลงในไฟล์เลย์เอาต์ของเราแล้ว เราจำเป็นต้องกำหนดวิธีการที่จะถูกเรียกใช้เมื่อผู้ใช้แตะที่ปุ่ม นี่คือตัวอย่างของคลาส Kotlin ที่กำหนดเมธอด onButtonClick():

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun onButtonClick(view: View) {
        // Do something when the user taps on the button
        Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show()
    }
}

เราได้กำหนดคลาส MainActivity ที่ขยายคลาส AppCompatActivity เราได้ overridden เมธอด onCreate() เพื่อตั้งค่าเค้าโครง (layout) ของ Activity ของเราโดยใช้เมธอด setContentView() ในที่สุด เราได้กำหนดเมธอด onButtonClick() ที่จะถูกเรียกใช้เมื่อผู้ใช้แตะที่ปุ่ม ในตัวอย่างนี้ เราได้แสดงข้อความ Toast ที่แจ้งให้ผู้ใช้ทราบว่ามีการคลิกปุ่มแล้ว

Switch

วิดเจ็ตสวิตช์เป็นองค์ประกอบสำคัญใน Android Studio ที่ช่วยให้ผู้ใช้สามารถสลับระหว่างสองสถานะ – เปิดหรือปิด CompoundButton เป็นประเภทหนึ่ง ซึ่งหมายความว่าสามารถมี view หรือ widget อื่นๆ อยู่ภายในได้

วิดเจ็ตสวิตช์มี thumb แทร็ก และข้อความ thumb แสดงถึงสถานะปัจจุบันของสวิตช์ และแทร็กจะแสดงสถานะที่เป็นไปได้ เมื่อ thumb อยู่ทางด้านขวาของแทร็ก สวิตช์จะอยู่ในสถานะ “เปิด” และเมื่ออยู่ทางด้านซ้าย สวิตช์จะอยู่ในสถานะ “ปิด”

ตัวอย่างวิธีใช้วิดเจ็ต Switch ในการทำแอพ Android มีดังนี้

1. เพิ่มวิดเจ็ต Switch ลงในไฟล์เลย์เอาต์ของคุณ:

<Switch
    android:id="@+id/my_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Switch"
    android:checked="true" />

ใน Activity หรือแฟรกเมนต์ของคุณ ให้อ้างอิงวิดเจ็ต Switch และตั้งค่า OnCheckedChangeListener เพื่อจัดการการเปลี่ยนแปลงสถานะ:

val mySwitch = findViewById<Switch>(R.id.my_switch)
mySwitch.setOnCheckedChangeListener { buttonView, isChecked ->
    if (isChecked) {
        // Switch is on
    } else {
        // Switch is off
    }
}

เราสร้างวิดเจ็ต Switch ด้วยข้อความ “Switch” และตั้งค่าสถานะเริ่มต้นเป็น “เปิด” จากนั้นเราจะเพิ่ม OnCheckedChangeListener ให้กับสวิตช์และจัดการการเปลี่ยนแปลงสถานะในการเรียกกลับ เมื่อสวิตช์เปิดอยู่ ข้อความ “สวิตช์เปิดอยู่” จะปรากฏขึ้น และเมื่อปิดสวิตช์ ข้อความ “สวิตช์ปิดอยู่” จะปรากฏขึ้น

นอกจาก OnCheckedChangeListener แล้ว วิดเจ็ต Switch ยังรองรับคุณสมบัติและวิธีการอื่นๆ อีกหลายอย่าง เช่น setOnCheckedChangeListener

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

ใน Android Studio view จะถูกจัดเรียงในโครงสร้างแบบลำดับชั้น โดยแต่ละ view จะมี view พาเรนต์และ view รองเป็นศูนย์หรือมากกว่านั้น view สามารถซ้อนกันภายใน view อื่นๆ เพื่อสร้างเค้าโครงที่ซับซ้อนและอินเทอร์เฟซผู้ใช้

view ที่ใช้บ่อยที่สุดใน Android ได้แก่ TextView, ImageView, Button, EditText, CheckBox, RadioButton และ Spinner แต่ละ view มีคุณสมบัติและวิธีการเฉพาะที่ให้คุณปรับแต่งลักษณะที่ปรากฏและลักษณะการทำงานให้เหมาะกับความต้องการของการทำแอพของคุณ

นอกจากนี้ ViewGroups ยังเป็นส่วนประกอบที่สำคัญของอินเทอร์เฟซผู้ใช้ Android Studio ที่ช่วยให้คุณสามารถจัดเรียงและจัดการตำแหน่งของ view ภายในเค้าโครงของแอปได้ ViewGroups ใน Android มีหลายประเภท ได้แก่ LinearLayout, RelativeLayout, ConstraintLayout, FrameLayout, GridLayout, TableLayout และ CardView

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

เขียนแอพ Android Studio

ตอนที่ 3 Android Studio Kotlin แนะนำ Layouts
ตอนที่ 5 Android Studio Kotlin ควบคุม input และ event