WEBVTT

1
00:00.200 --> 00:01.190
ยินดีต้อนรับกลับมา

2
00:01.190 --> 00:05.270

เราได้ดำเนินการกับแหล่งข้อมูลระยะไกลและโมเดลมุมมองเสร็จเรียบร้อยแล้ว

3
00:05.270 --> 00:07.630
ตอนนี้เรามาดูส่วนของการแสดงผลกัน

4
00:07.640 --> 00:15.140

ในส่วนนี้เราจะออกแบบเลย์เอาต์ของกิจกรรมและแสดงข้อมูลลงในองค์ประกอบ
UI

5
00:15.140 --> 00:17.270
ฉันจะเริ่มด้วยกิจกรรมหลัก

6
00:17.270 --> 00:21.350

ดังนั้นไปที่กิจกรรมเลย์เอาต์ใต้เส้นขีดกลางหลัก

7
00:21.350 --> 00:23.870
และฉันจะไปที่โหมดแยกหน้าจอ

8
00:23.870 --> 00:26.660
และฉันจะเริ่มออกแบบเลย์เอาต์ของฉัน

9
00:26.660 --> 00:27.980
ในตัวอย่างนี้

10
00:27.980 --> 00:30.620
และในแอปนี้ฉันจะใช้การผูกข้อมูล

11
00:30.620 --> 00:34.280
ดังนั้น สำหรับสิ่งนี้
ฉันต้องเปิดใช้งานมันใน Build.gradle

12
00:35.180 --> 00:44.840
และที่นี่ในขอบเขตของ Android
ฉันจำเป็นต้องเพิ่มฟีเจอร์การ 빌드
และเปิดใช้งานการซิงค์การผูกข้อมูล

13
00:44.840 --> 00:48.050

ตอนนี้ให้ย้ายไปที่กิจกรรมใต้เส้นขีดเส้นใต้หลัก

14
00:48.050 --> 00:51.410
และที่นี่ฉันจะเริ่มเพิ่มแท็กเลย์เอาต์

15
00:51.410 --> 00:55.280

ดังนั้นให้ย้ายเลย์เอาต์นี้โดยย้ายแท็กเลย์เอาต์นี้

16
00:57.890 --> 00:59.310
และนี่ก็ดี

17
00:59.330 --> 01:04.160

ตอนนี้ฉันจะย้ายเนมสเปซเหล่านี้และเพิ่มเข้าไปที่นี่ในเลย์เอาต์

18
01:04.160 --> 01:11.960
และในส่วนหนึ่งของการจัดวางของเรา
ฉันจะสร้างภายใน drawable และไฟล์ทรัพยากร
drawable ใหม่

19
01:12.050 --> 01:15.980

นี่จะทำหน้าที่เป็นพื้นหลังสำหรับการจัดวางของเรา

20
01:15.980 --> 01:19.880
ดังนั้นฉันจะตั้งชื่อว่า gradient
underscore back

21
01:19.880 --> 01:25.670

และเราได้พูดคุยเกี่ยวกับรูปร่างที่สามารถวาดได้ซึ่งฉันแปลงมันให้เป็นรูปร่างนั้น

22
01:25.670 --> 01:32.220

และที่นี่ฉันจำเป็นต้องระบุคุณลักษณะรูปร่างของ
Android เป็นสี่เหลี่ยมผืนผ้า

23
01:32.240 --> 01:34.970
จากนั้นฉันต้องเพิ่มการไล่ระดับสี

24
01:45.940 --> 01:51.670
นี่คือสีไล่เฉดของฉัน และฉันจะใช้ที่มุม

25
01:56.800 --> 02:02.980
ฉันได้พูดถึงรูปทรงเหล่านี้ในวิดีโอที่แล้ว
ดังนั้นกรุณาไปที่บทเรียน

26
02:02.980 --> 02:03.520
Drawables เพื่อเรียนรู้เพิ่มเติม

27
02:03.550 --> 02:11.890
ฉันจะใช้พื้นหลังนี้ที่นี่
ดังนั้นฉันจะระบุแอตทริบิวต์พื้นหลังเพื่อเพิ่มการไล่ระดับสีที่สามารถวาดได้กลับเข้าไป

28
02:11.890 --> 02:12.780
และนี่ก็ดี

29
02:12.790 --> 02:16.200
ตอนนี้เรามาเริ่มออกแบบมุมมองของเรา

30
02:16.210 --> 02:22.080
ฉันจะเปลี่ยนข้อความ "Hello World"
นี้ให้เป็นชื่อเรื่อง
ดังนั้นฉันจะทำเป็นแอปแบบแบบทดสอบ

31
02:22.090 --> 02:32.500
ฉันจะให้มันเป็นมุมมองข้อความ ID ที่ขอบ 200
dpi ขนาด 72 SP และฉันจะลบปุ่มออกจากปุ่ม

32
02:32.530 --> 02:37.840
โอเค ดังนั้นนี่คือสไตล์แอปแบบทดสอบของเรา
ซึ่งจะใช้ตัวหนา

33
02:37.840 --> 02:39.040
และสีของข้อความ

34
02:39.070 --> 02:42.670
สีนี้โอเค นี่คือมุมมองข้อความแรกของเรา

35
02:42.670 --> 02:45.520
มุมมองที่สองคือมุมมองข้อความ

36
02:45.550 --> 02:46.330
ดังนั้น

37
03:02.300 --> 03:07.760

เนื่องจากแอปของเราเป็นแบบเลือกตอบหลายตัวเลือก
ฉันจะใช้กลุ่มวิทยุ

38
03:07.760 --> 03:14.330
ดังนั้นอีกครั้งนะครับทุกคน
หากคุณมีข้อสงสัยใด

39
03:14.330 --> 03:16.040
ๆ
กรุณาอ้างอิงไปยังส่วนก่อนหน้านี้เพื่อเรียนรู้เกี่ยวกับกลุ่มวิทยุและปุ่มวิทยุ

40
03:29.320 --> 03:38.500
ภายในกลุ่มวิทยุนี้
ฉันจะใส่ปุ่มวิทยุสี่ปุ่ม

41
03:38.500 --> 03:39.430

ซึ่งอนุญาตให้ผู้ใช้เลือกคำตอบที่ถูกต้องได้เพียงคำตอบเดียว

42
04:07.060 --> 04:14.860
จากนั้นนอกกลุ่มวิทยุนี้และภายใต้กลุ่มนี้
ฉันจะสร้างมุมมองอีกแบบหนึ่งที่เป็นปุ่มห่อเนื้อหา

43
04:14.860 --> 04:15.820
ห่อเนื้อหา

44
04:15.820 --> 04:19.150
รหัสของมันคือ btn button

45
04:19.150 --> 04:20.080
ถัดไป

46
04:30.660 --> 04:33.870
และวิดเจ็ตสุดท้ายคือมุมมองข้อความ

47
04:51.670 --> 04:52.810
และนี่ก็เริ่มแล้ว

48
04:52.810 --> 04:54.380
นี่คือรูปแบบของเรา

49
04:54.400 --> 04:55.880
ขอแสดงความยินดีด้วยครับ/ค่ะ

50
04:55.900 --> 05:03.430
นอกจากนี้ คุณสามารถรับไฟล์ XML
ของเลย์เอาต์ได้ในโฟลเดอร์ resources
ภายใต้ส่วนนี้

51
05:03.430 --> 05:07.930
ดังนั้น หากคุณต้องการข้ามเลย์เอาต์
ให้คัดลอกและวางได้เลย

52
05:07.930 --> 05:10.990
คุณสามารถทำได้โดยการรับโฟลเดอร์ทรัพยากร