ส่วนประกอบพื้นฐานใน Android

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

ดังที่ได้กล่าวมาแล้ว เรามาเน้นที่องค์ประกอบกราฟิกที่ใช้จากไฟล์ XML มาดูคุณสมบัติบางอย่างที่กล่าวถึงข้างต้น

คุณสมบัติพื้นฐาน

มาดูคุณสมบัติพื้นฐานบางอย่างที่ใช้ในส่วนประกอบกราฟิก ซึ่งสามารถนำไปใช้กับส่วนประกอบใดก็ได้โดยไม่คำนึงถึงประเภทของส่วนประกอบ เนื่องจากตามที่กล่าวไว้ ส่วนประกอบทั้งหมดเป็น Views ดังนั้นพวกเขาจึงแบ่งปันคุณสมบัติเดียวกัน บางส่วนที่ใช้มากที่สุดคือ:

แอนดรอยด์: ID.

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

วิธีที่ถูกต้องในการสร้างตัวระบุมีดังนี้:

android:id="@+id/miTextField"

สัญลักษณ์ @+id/ หมายความว่ามีการสร้างตัวระบุใหม่ซึ่งจะทำให้คลาส ร. จากแพ็คเกจ gen ของโปรเจ็กต์ ให้สร้างการอ้างอิงถึงออบเจกต์นี้เพื่อให้โค้ดสามารถจัดการได้ในภายหลัง

ในตัวอย่าง ตัวระบุ “ฟิลด์ข้อความของฉัน” สำหรับส่วนประกอบ

android:layout_width.

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

• wrap_content (มันใช้พื้นที่ตามเนื้อหาของมัน)

• match_parent (ใช้พื้นที่ว่างทั้งหมด)

  ตัวอย่าง: android:layout_width="match_parent" ใดๆ android:layout_width="290dp"

android:layout_height.
กำหนดความสูงที่เกี่ยวข้องกับมุมมอง ซึ่งเป็นคุณสมบัติบังคับ และค่าของมันสามารถกำหนดเป็นค่าสัมบูรณ์หรือระบุค่าใดค่าหนึ่งจากสองค่าต่อไปนี้:

• wrap_content (มันใช้พื้นที่ตามเนื้อหาของมัน)

• match_parent (ใช้พื้นที่ว่างทั้งหมด)

  ตัวอย่าง: android:layout_height="wrap_content" ใดๆ android:layout_height="58dp"

android:layout_margin.

กำหนดระยะขอบสำหรับส่วนประกอบ อนุญาตให้สร้างช่องว่างด้านบน ด้านล่าง และด้านข้าง เป็นตัวแปรในกรณีที่คุณต้องการให้ช่องว่างอิสระ สามารถทำได้โดยใช้คุณสมบัติ marginLeft, marginRight, marginTop หรือ marginBottom (หรือทั้งหมด)

ตัวอย่าง: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"

แอนดรอยด์: คำใบ้

คุณสมบัตินี้อนุญาตให้แสดงข้อความในตัวควบคุมเป็นวิธีใช้ในขณะที่ผู้ใช้ยังไม่ได้ป้อนข้อมูล (ดีกว่าคุณสมบัติข้อความ)

ตัวอย่าง: android:hint="ป้อนชื่อ"

android:inputType.

กำหนดประเภทของอินพุตที่อนุญาตสำหรับกล่องข้อความ ซึ่งอนุญาตให้มีการตรวจสอบข้อมูลบางประเภท และยังบอกระบบปฏิบัติการว่าจะใช้แป้นพิมพ์ (เสมือน) ประเภทใด

ในบรรดาตัวเลือกต่างๆ ที่เราสามารถเชื่อมโยงกับพร็อพเพอร์ตี้นี้ ได้แก่:

• ข้อความ
• ตัวเลข
• พื้นผิว
• รหัสผ่านข้อความ
• โทรศัพท์
• การประชุม
• ข้อความอีเมลแอดเดรส

มีตัวเลือกอื่น ๆ อีกมากมายที่สามารถใช้ได้ขึ้นอยู่กับความต้องการ

ตัวอย่าง: android:inputType="ตัวเลข" | android:inputType="ข้อความอีเมลแอดเดรส"

android:textSize.

กำหนดขนาดสำหรับข้อความที่จะแสดงบนหน้าจอ หน่วยวัดจะต้องคำนึงถึงที่ใช้ sp สำหรับข้อความ

ตัวอย่าง: android:textSize="25sp"

android:styletext.

กำหนดสไตล์ให้กับข้อความ โดยสามารถกำหนดข้อความเป็นแบบปกติ ตัวหนา ตัวเอียง (หรือทั้งสองอย่าง)

ตัวอย่าง: android:textStyle="ตัวหนา" | android:textStyle="ตัวเอียง" | android:textStyle="ตัวหนา|ตัวเอียง"

android:textColor.

กำหนดสีสำหรับข้อความโดยสามารถเพิ่มสีจากไฟล์คุณสมบัติ "สี" หรือค่าเลขฐานสิบหก

ตัวอย่าง: android:textColor="@color/teal_700" | android:textColor="#9C27B0"

android:backgroundTint.

กำหนดสีพื้นหลังสำหรับส่วนประกอบ คุณยังสามารถรับสีจากคุณสมบัติ "สี" หรือค่าเลขฐานสิบหก

ตัวอย่าง: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"

แอนดรอยด์: ข้อความ

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

ตัวอย่าง: android:text="เบียงเวนิโดส" | android:text="@string/title"

คุณสมบัตินี้พบได้ทั่วไปในมุมมองที่แสดงข้อความในส่วนติดต่อของอุปกรณ์ หน้าจอต่อไปนี้แสดงไฟล์รีซอร์ส strings.xml ที่มีการเพิ่มค่าต่างๆ สำหรับข้อความ

และต่อมาค่าเหล่านี้จะเข้าถึงได้จากมุมมอง

หลังจากล้างคุณสมบัติก่อนหน้านี้แล้ว เรามาดูกันว่าส่วนประกอบกราฟิกพื้นฐานคืออะไร

ปุ่ม.

ปุ่มเหล่านี้สอดคล้องกับปุ่มพื้นฐานที่เรารู้จัก เพียงแต่แสดงปุ่มที่มีข้อความภายในและระยะขอบที่กำหนด

ปุ่มจะทำหน้าที่พื้นฐานในการรอเหตุการณ์เมื่อกด

ปุ่มสลับ

ประเภท ToggleButton สอดคล้องกับประเภทของปุ่มที่สามารถเก็บไว้ในสถานะที่เป็นไปได้ 2 สถานะ คือกดหรือไม่กด เนื่องจากไม่ได้กำหนดคุณสมบัติข้อความเดียว แต่ 2 ขึ้นอยู่กับสถานะที่มีในขณะนี้ โดยใช้คุณสมบัติของ android:textOn และ android:textOff

เช่นเดียวกับปุ่มทั่วไป ปุ่ม ToggleButton สามารถตั้งโปรแกรมให้ตอบสนองต่อเหตุการณ์การคลิกได้ แต่คุณเพียงแค่ต้องรู้ว่าปุ่มนั้นอยู่ในสถานะใด ซึ่งสามารถทำได้โดยปรึกษาเมธอด isChecked() ซึ่งส่งคืนค่าจริงในกรณีที่ถูกกด และมิฉะนั้นจะเป็นเท็จ

การเดินทาง

ตัวควบคุมนี้สามารถจำลองสวิตช์ได้คล้ายกับวิธีการทำงานของ ToggleButton แต่มีลักษณะที่ปรากฏต่างกัน

โปรดจำไว้ว่าขึ้นอยู่กับเวอร์ชัน Android ที่เราใช้ ลักษณะที่ปรากฏของส่วนประกอบของเราสามารถเปลี่ยนแปลงได้ ในกรณีนี้ ตัวควบคุมสวิตช์สำหรับ Android เวอร์ชัน 5.0 และสูงกว่าจะมีลักษณะดังนี้:

ปุ่มรูปภาพ

ปุ่มประเภทนี้อนุญาตให้คุณเชื่อมโยงรูปภาพเพื่อแสดงต่อผู้ใช้แทนข้อความตามปกติ สำหรับสิ่งนี้ เราสามารถนำรูปภาพจากโฟลเดอร์ /res/drawable และโหลดโดยใช้คุณสมบัติ android:src ในกรณีนี้ เราจะใช้รูปภาพโดยตรงจากแหล่งข้อมูล Android

มุมมองข้อความ

สิ่งเหล่านี้สอดคล้องกับป้ายกำกับข้อความพื้นฐานที่แสดงให้ผู้ใช้เห็น ซึ่งในภาษาอื่นเรียกว่าป้ายกำกับและอนุญาตให้แสดงข้อความที่เกี่ยวข้องกับคุณสมบัติ android:text ป้ายกำกับเหล่านี้มีคุณสมบัติอื่นที่อนุญาตให้คุณจัดการขนาดพื้นหลัง สี, สีและประเภทตัวอักษร, สไตล์ ฯลฯ

แก้ไขข้อความ

มุมมอง EditText ของ Android เทียบเท่ากับ ASP และ C# Textbox หรือ JAVA JTextField ซึ่งเป็นตัวควบคุมที่อนุญาตให้บันทึกข้อความที่ผู้ใช้พิมพ์ขณะรันไทม์

กล่องเลือก

ตัวควบคุมช่องทำเครื่องหมายใช้เพื่อตรวจสอบหรือยกเลิกการเลือกตัวเลือกในแอปพลิเคชัน วิธีกำหนดในอินเทอร์เฟซและคุณสมบัติที่มีให้สำหรับการจัดการด้วยโค้ดนั้นคล้ายคลึงกับความคิดเห็นในการควบคุม ToogleButton

การควบคุมนี้สืบทอดมาจากการควบคุม TextView ดังนั้นตัวเลือกการจัดรูปแบบทั้งหมดที่กล่าวถึงแล้วสำหรับการควบคุมนี้จะใช้ได้กับกล่องกาเครื่องหมายด้วย

ในรหัสแอปพลิเคชัน คุณสามารถตรวจสอบว่าการควบคุมนี้ถูกเลือกหรือไม่ผ่านเมธอด isChecked() ที่ส่งกลับค่าของ จริง หากคุณได้รับเลือกหรือ เท็จ มิฉะนั้น คุณสามารถใช้เมธอด setChecked(value) เพื่อตั้งค่าสถานะเฉพาะสำหรับตัวควบคุม โดยที่ค่า จริง จะถูกเลือกและ เท็จ โดยไม่ได้เลือก

เหตุการณ์ที่โดยปกติจะตั้งโปรแกรมไว้สำหรับการควบคุมนี้และที่ดำเนินการทุกครั้งที่สถานะเปลี่ยนแปลง (เลือก / ไม่ได้เลือก) เป็น onCheckedChanged

ปุ่มตัวเลือก

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

RadioGroups สามารถตั้งค่าคุณสมบัติ android:orientation เป็น "แนวตั้ง" หรือ "แนวนอน" เพื่อกำหนดว่าจะเรียงลำดับ RadioButtons ที่มีอยู่อย่างไร

ในทางกลับกัน นอกเหนือจากความกว้างและความสูงแล้ว RadioButton จะต้องกำหนดคุณสมบัติ android:text เพื่อเชื่อมโยงข้อความของตัวเลือกที่แสดง และ android:id เพื่อเชื่อมโยงโค้ดกับตัวควบคุมเพื่อให้สามารถจัดการได้จากตรรกะของแอปพลิเคชัน

เพื่อจัดการกับการควบคุมจากตรรกะของแอปพลิเคชัน สามารถใช้วิธีการต่างๆ ได้ ซึ่งเราพบว่าตรวจสอบ (ฉันจะไป) ซึ่งใช้เพื่อตั้งค่า radiobutton ที่ระบุด้วย id ที่ส่งผ่านเป็นพารามิเตอร์ตามที่เลือก เมธอด clearCheck() ใช้เพื่อยกเลิกการเลือก radiobuttons ทั้งหมดในกลุ่ม และเมธอด getCheckedRadioButtonId() ใช้สำหรับรับ id ของ radiobutton ที่อยู่ในกลุ่มที่เลือกหรือค่า -1 ถ้าไม่ได้เลือกรายการ

เหตุการณ์ที่สำคัญที่สุดของการควบคุมนี้ก็คือ onCheckedChanged ซึ่งจะทริกเกอร์เมื่อมีการเลือกองค์ประกอบของกลุ่ม (โปรดจำไว้ว่าการเลือกองค์ประกอบของกลุ่มบ่งชี้ถึงการยกเลิกการเลือกองค์ประกอบอื่น)

และนั่นคือส่วนประกอบกราฟิกพื้นฐานบางส่วนที่เราจะใช้ตลอดหลักสูตร ในโพสต์ถัดไป เราจะดำเนินการต่อด้วยส่วนประกอบหรือเลย์เอาต์อื่นๆ

นอกจากนี้ยังอาจสนใจคุณ

มีอะไรที่คุณต้องการเพิ่มหรือแสดงความคิดเห็นเกี่ยวกับรายการนี้หรือไม่? อย่าลังเลที่จะทำ….และถ้าคุณชอบมัน ... ฉันขอเชิญคุณแบ่งปัน วาย สมัครสมาชิกโดยคลิกที่ปุ่ม "เข้าร่วมไซต์นี้" เพื่อฟังโพสต์เพิ่มเติมเช่นนี้ 😉