โฆษณา
ส่วนประกอบกราฟิกสอดคล้องกับองค์ประกอบที่จะอนุญาตให้ผู้ใช้โต้ตอบกับระบบ เมื่อเราพูดถึง 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 ซึ่งจะทริกเกอร์เมื่อมีการเลือกองค์ประกอบของกลุ่ม (โปรดจำไว้ว่าการเลือกองค์ประกอบของกลุ่มบ่งชี้ถึงการยกเลิกการเลือกองค์ประกอบอื่น)
และนั่นคือส่วนประกอบกราฟิกพื้นฐานบางส่วนที่เราจะใช้ตลอดหลักสูตร ในโพสต์ถัดไป เราจะดำเนินการต่อด้วยส่วนประกอบหรือเลย์เอาต์อื่นๆ
นอกจากนี้ยังอาจสนใจคุณ
มีอะไรที่คุณต้องการเพิ่มหรือแสดงความคิดเห็นเกี่ยวกับรายการนี้หรือไม่? อย่าลังเลที่จะทำ….และถ้าคุณชอบมัน ... ฉันขอเชิญคุณแบ่งปัน วาย สมัครสมาชิกโดยคลิกที่ปุ่ม "เข้าร่วมไซต์นี้" เพื่อฟังโพสต์เพิ่มเติมเช่นนี้ 😉