Android - เค้าโครง UI

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

ViewGroup เป็นคลาสย่อยของ View และจัดเตรียมคอนเทนเนอร์ที่มองไม่เห็นซึ่งเก็บ Views อื่น ๆ หรือ ViewGroups อื่น ๆ และกำหนดคุณสมบัติเค้าโครง

ในระดับที่สามเรามีเลย์เอาต์ที่แตกต่างกันซึ่งเป็นคลาสย่อยของคลาส ViewGroup และเลย์เอาต์ทั่วไปจะกำหนดโครงสร้างภาพสำหรับอินเทอร์เฟซผู้ใช้ Android และสามารถสร้างได้ในขณะทำงานโดยใช้ View/ViewGroup วัตถุหรือคุณสามารถประกาศเค้าโครงของคุณโดยใช้ไฟล์ XML อย่างง่าย main_layout.xml ซึ่งอยู่ในโฟลเดอร์ res / layout ของโครงการของคุณ

พารามิเตอร์เค้าโครง

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

เมื่อสร้างเลย์เอาต์ของคุณแล้วคุณสามารถโหลดทรัพยากรเลย์เอาต์จากโค้ดแอปพลิเคชันของคุณในการใช้งานการเรียกกลับActivity.onCreate ()ดังที่แสดงด้านล่าง -

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

ประเภทเค้าโครงของ Android

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

ซีเนียร์ No เค้าโครงและคำอธิบาย
1 เค้าโครงเชิงเส้น

LinearLayout คือกลุ่มมุมมองที่จัดแนวเด็กทั้งหมดในทิศทางเดียวแนวตั้งหรือแนวนอน

2 เค้าโครงญาติ

RelativeLayout คือกลุ่มมุมมองที่แสดงมุมมองเด็กในตำแหน่งสัมพัทธ์

3 เค้าโครงตาราง

TableLayout คือมุมมองที่จัดกลุ่มมุมมองเป็นแถวและคอลัมน์

4 เค้าโครงแน่นอน

AbsoluteLayout ช่วยให้คุณสามารถระบุตำแหน่งที่แน่นอนของลูก ๆ

5 เค้าโครงกรอบ

FrameLayout เป็นตัวยึดบนหน้าจอที่คุณสามารถใช้เพื่อแสดงมุมมองเดียว

6 มุมมองรายการ

ListView คือกลุ่มมุมมองที่แสดงรายการที่เลื่อนได้

7 มุมมองตาราง

GridView คือ ViewGroup ที่แสดงรายการในตารางสองมิติที่เลื่อนได้

แอตทริบิวต์เค้าโครง

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

ซีเนียร์ No คุณสมบัติและคำอธิบาย
1

android:id

นี่คือรหัสที่ระบุมุมมองโดยไม่ซ้ำกัน

2

android:layout_width

นี่คือความกว้างของเค้าโครง

3

android:layout_height

นี่คือความสูงของเค้าโครง

4

android:layout_marginTop

นี่คือพื้นที่พิเศษที่ด้านบนของเค้าโครง

5

android:layout_marginBottom

นี่คือพื้นที่พิเศษที่ด้านล่างของเค้าโครง

6

android:layout_marginLeft

นี่คือพื้นที่พิเศษทางด้านซ้ายของเค้าโครง

7

android:layout_marginRight

นี่คือพื้นที่พิเศษทางด้านขวาของเค้าโครง

8

android:layout_gravity

ข้อมูลนี้ระบุว่ามุมมองลูกอยู่ในตำแหน่งอย่างไร

9

android:layout_weight

สิ่งนี้ระบุว่าควรจัดสรรพื้นที่เพิ่มเติมในเค้าโครงให้กับมุมมองเท่าใด

10

android:layout_x

สิ่งนี้ระบุพิกัด x ของโครงร่าง

11

android:layout_y

สิ่งนี้ระบุพิกัด y ของโครงร่าง

12

android:layout_width

นี่คือความกว้างของเค้าโครง

13

android:paddingLeft

นี่คือช่องว่างภายในด้านซ้ายที่เต็มไปด้วยเลย์เอาต์

14

android:paddingRight

นี่คือช่องว่างภายในที่ถูกต้องสำหรับการจัดวาง

15

android:paddingTop

นี่คือช่องว่างด้านบนที่เต็มไปด้วยเลย์เอาต์

16

android:paddingBottom

นี่คือช่องว่างด้านล่างที่เต็มไปด้วยเลย์เอาต์

ความกว้างและความสูงต่อไปนี้คือขนาดของเค้าโครง / มุมมองซึ่งสามารถระบุได้ในรูปแบบของ dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น), sp (พิกเซลที่ไม่ขึ้นกับมาตราส่วน), pt (จุดที่มีขนาด 1/72 ของนิ้ว), px ( พิกเซล), มม. (มิลลิเมตร) และสุดท้ายเป็น (นิ้ว)

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

  • android:layout_width=wrap_content บอกให้มุมมองของคุณปรับขนาดตามขนาดที่เนื้อหาต้องการ

  • android:layout_width=fill_parent บอกให้มุมมองของคุณใหญ่พอ ๆ กับมุมมองระดับบนสุด

แอตทริบิวต์แรงโน้มถ่วงมีบทบาทสำคัญในการวางตำแหน่งวัตถุมุมมองและอาจใช้ค่าคงที่ต่อไปนี้อย่างน้อยหนึ่งค่า (คั่นด้วย '|')

คงที่ มูลค่า คำอธิบาย
ด้านบน 0x30 ดันวัตถุไปที่ด้านบนสุดของภาชนะโดยไม่เปลี่ยนขนาด
ด้านล่าง 0x50 ดันวัตถุไปที่ด้านล่างของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
ซ้าย 0x03 ดันวัตถุไปทางซ้ายของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
ขวา 0x05 ดันวัตถุไปทางขวาของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
center_vertical 0x10 วางวัตถุไว้ตรงกลางแนวตั้งของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
Fill_vertical 0x70 ขยายขนาดแนวตั้งของวัตถุหากจำเป็นเพื่อให้เต็มภาชนะ
center_horizontal 0x01 วางวัตถุไว้ตรงกลางแนวนอนของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
Fill_horizontal 0x07 ขยายขนาดแนวนอนของวัตถุหากจำเป็นเพื่อให้เต็มภาชนะ
ศูนย์ 0x11 วางวัตถุไว้ตรงกลางภาชนะทั้งในแกนแนวตั้งและแนวนอนโดยไม่เปลี่ยนขนาด
เติม 0x77 ขยายขนาดแนวนอนและแนวตั้งของวัตถุหากจำเป็นเพื่อให้เต็มภาชนะ
clip_vertical 0x80 ตัวเลือกเพิ่มเติมที่สามารถตั้งค่าให้ขอบด้านบนและ / หรือด้านล่างของเด็กถูกตัดเข้ากับขอบเขตของคอนเทนเนอร์ คลิปจะขึ้นอยู่กับแรงโน้มถ่วงในแนวตั้ง: แรงโน้มถ่วงด้านบนจะหนีบขอบด้านล่างแรงโน้มถ่วงด้านล่างจะหนีบขอบด้านบนและจะไม่หนีบขอบทั้งสองด้าน
clip_horizontal 0x08 ตัวเลือกเพิ่มเติมที่สามารถกำหนดให้ขอบด้านซ้ายและ / หรือด้านขวาของเด็กถูกตัดติดกับขอบเขตของคอนเทนเนอร์ คลิปจะขึ้นอยู่กับแรงโน้มถ่วงในแนวนอน: แรงโน้มถ่วงด้านซ้ายจะตัดขอบด้านขวาแรงโน้มถ่วงด้านขวาจะตัดขอบด้านซ้ายและจะไม่หนีบขอบทั้งสอง
เริ่มต้น 0x00800003 ดันวัตถุไปที่จุดเริ่มต้นของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด
จบ 0x00800005 ดันวัตถุไปที่ส่วนท้ายของคอนเทนเนอร์โดยไม่เปลี่ยนขนาด

ดูการระบุ

ออบเจ็กต์มุมมองอาจมี ID เฉพาะที่กำหนดให้ซึ่งจะระบุมุมมองที่ไม่ซ้ำกันภายในโครงสร้าง ไวยากรณ์สำหรับ ID ภายในแท็ก XML คือ -

android:id="@+id/my_button"

ต่อไปนี้เป็นคำอธิบายสั้น ๆ ของเครื่องหมาย @ และ + -

  • สัญลักษณ์ at (@) ที่จุดเริ่มต้นของสตริงระบุว่าตัวแยกวิเคราะห์ XML ควรแยกวิเคราะห์และขยายสตริง ID ที่เหลือและระบุว่าเป็นทรัพยากร ID

  • เครื่องหมายบวก (+) หมายความว่านี่คือชื่อทรัพยากรใหม่ที่ต้องสร้างและเพิ่มให้กับทรัพยากรของเรา ในการสร้างอินสแตนซ์ของวัตถุมุมมองและจับภาพจากเค้าโครงให้ใช้สิ่งต่อไปนี้ -

Button myButton = (Button) findViewById(R.id.my_button);