Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    Đây là hình ảnh của
    ứng dụng court counter, hoặc
  • 0:04 - 0:06
    ít nhất là ta muốn nó trông thế nào.
  • 0:06 - 0:10
    Bây giờ, tôi sẽ theo lời khuyên của mình
    và bắt đầu với XML trước.
  • 0:10 - 0:13
    Bây giờ, hãy suy nghĩ về
    dạng xem.
  • 0:13 - 0:18
    Chúng ta vẫn có tất cả các dạng xem này,
    các dạng xem này đều theo chiều dọc và
  • 0:18 - 0:19
    bố trí tuyến tính.
  • 0:19 - 0:23
    Ta có một bố trí tuyến tính cho đội B
    và một bố trí tuyến tính cho đội A.
  • 0:23 - 0:27
    và bạn không thể có hai
    dạng xem gốc thêm nữa,
  • 0:27 - 0:31
    chúng được ngắt dòng trong một bố trí
    tuyến tính vô tình theo chiều ngang
  • 0:31 - 0:35
    nên hai bố trí tuyến tính con này
    có thể đặt cạnh nhau.
  • 0:35 - 0:38
    Bây giờ chúng ta muốn thêm
    một nút đặt lại tại đây.
  • 0:38 - 0:41
    Vì bộ não của bạn, đừng
    suy nghĩ quá về tất cả những
  • 0:41 - 0:45
    bố trí khác nhau này, tôi muốn bạn
    nghĩ về mọi thứ bên trong
  • 0:45 - 0:48
    bố trí tuyến tính ngang này
    như một dạng xem đơn lẻ.
  • 0:48 - 0:53
    Bây giờ bạn cố gắng sắp đặt
    bố trí tuyến tính ngang này ngay tại đây
  • 0:53 - 0:54
    và nút đặt lại này.
  • 0:54 - 0:57
    Bạn đang thử bố trí hai dạng xem.
  • 0:57 - 1:02
    Một dạng xem là ở đầu và dạng xem kia
    ở dưới cùng của màn hình.
  • 1:02 - 1:06
    Câu hỏi lúc này là nhóm dạng xem
    nào sẽ cho phép bạn có
  • 1:06 - 1:09
    một dạng xem ở đây, ngay trên đầu và
    một dạng ở phía dưới của màn hình?
  • 1:09 - 1:13
    Xem ra một bố trí tương đối
    có vẻ phù hợp.
  • 1:13 - 1:17
    Tôi có thể để bố trí tuyến tính ngang
    của mình tại đây, phù hợp với dạng xem mẹ
  • 1:17 - 1:20
    về chiều rộng, và
    ngắt dòng nội dung với chiều cao.
  • 1:21 - 1:24
    Tôi có thể đặt nút đặt lại của tôi ngay
    ở đây, căn chỉnh trung tâm và
  • 1:24 - 1:26
    dưới cùng của ghép cặp.
  • 1:26 - 1:29
    Bạn đã có một Bố trí tương đối, và
  • 1:29 - 1:33
    Bố trí tương đối đó có một lớp con Nút
    và một lớp con Bố trí tuyến tính.
  • 1:33 - 1:36
    Lớp con Nút chính là
    nút Đặt lại này, và
  • 1:36 - 1:40
    Bố trí tuyến tính chính là Bố trí
    tuyến tính ở đây, theo chiều ngang.
  • 1:40 - 1:44
    Hơn nữa, bố trí tuyến tính ngang này
    có hai lớp con, và
  • 1:44 - 1:47
    các lớp con này cũng là bố trí tuyến tính.
  • 1:47 - 1:50
    Chúng là bố trí tuyến tính cho
    đội A và bố trí tuyến tính cho
  • 1:50 - 1:52
    đội B mà bạn thấy ở đây.
  • 1:52 - 1:57
    Bố trí tuyến tính cho đội A có
    hai dạng xem văn bản và ba nút.
  • 1:57 - 2:00
    Điều này cũng đúng với
    bố trí tuyến tính cho đội B.
  • 2:00 - 2:03
    Năm dạng xem con, hai dạng xem
    văn bản và ba nút.
  • 2:03 - 2:05
    Phần này của bố trí
    bạn đã tạo,
  • 2:05 - 2:09
    nên bạn chỉ cần thêm cái này,
    được rồi, hãy làm nào.
  • 2:09 - 2:13
    Tôi đang ở trong mã XML của mình và
    điều đầu tiên tôi sẽ làm là
  • 2:13 - 2:18
    Tôi sẽ tạo Bố trí tương đối gốc
    cái mà bạn đã thấy trong sơ đồ.
  • 2:18 - 2:24
    Ở đây tôi sẽ gõ RelativeLayout,
    và tôi sẽ
  • 2:24 - 2:28
    cắt và dán hai dòng này bởi vì
    chúng phải nằm trong bố trí gốc.
  • 2:28 - 2:34
    Tôi cắt chúng và dán chúng
    ở đây, trong bố trí gốc của tôi.
  • 2:34 - 2:37
    Giờ tôi sẽ đóng
    RelativeLayout tại đây và
  • 2:37 - 2:44
    Tôi sẽ di chuyển thẻ đóng này
    xuống tận dưới cùng.
  • 2:46 - 2:49
    Tốt rồi, những gì tôi đang có lúc này
    là một phần của sơ đồ.
  • 2:49 - 2:53
    Vâng,
    có vẻ như tôi cũng có cả lỗi nữa.
  • 2:53 - 2:57
    Hãy xem nào, tôi chưa xác định chiều cao
    hoặc chiều rộng, vậy hãy làm thế nào.
  • 2:59 - 3:02
    Giờ bố trí tương đối của tôi đã có nút
    ở giữa dưới cùng của màn hình.
  • 3:02 - 3:05
    Để làm được điều đó, có thể sẽ
    cần phải lấp đầy toàn bộ màn hình.
  • 3:05 - 3:07
    Tôi sẽ khớp với các dạng xem mẹ
    về cả chiều rộng và chiều cao.
  • 3:09 - 3:12
    Bây giờ tôi cần thêm nút.
  • 3:12 - 3:18
    Tôi sẽ kéo xuống, ngay tại đây,
    đến nơi bố trí tuyến tính đóng,
  • 3:18 - 3:23
    nhưng tôi vẫn ở trong bố trí tương đối,
    và tôi sẽ thêm một nút.
  • 3:23 - 3:27
    Và tôi sẽ tiếp tục và
    ngắt dòng nội dung cho nút đó,
  • 3:27 - 3:30
    bởi vì nó không phải là nút
    mở rộng để lấp đầy toàn bộ đáy
  • 3:30 - 3:33
    màn hình hay
    mở rộng để lấp đầy toàn bộ màn hình.
  • 3:34 - 3:37
    Và bây giờ lớp mẹ của nút này
    là RelativeLayout, và
  • 3:37 - 3:40
    chúng ta sẽ thiết lập văn bản
    cho nút này thành Đặt lại.
  • 3:40 - 3:43
    Hãy xem trông nó như thế nào.
  • 3:43 - 3:47
    Nút đặt lại của tôi ở đây,
    đó không phải vị trí chính xác tôi muốn
  • 3:47 - 3:52
    nhưng lớp mẹ của nó trải ra tương đối,
    lấp đầy toàn bộ màn hình.
  • 3:52 - 3:54
    Nên tôi có thể căn chỉnh nó theo lớp mẹ.
  • 3:54 - 3:57
    Tôi muốn căn chỉnh nó đến
    dưới cùng của lớp mẹ, và
  • 3:57 - 4:01
    Tôi muốn nó nằm ở trung tâm của
    lớp mẹ, theo chiều ngang.
  • 4:01 - 4:04
    Tuyệt, nút của tôi dường như
    đã được đặt đúng vị trí.
  • 4:04 - 4:06
    Tôi sẽ chọn tất cả mọi thứ ở đây.
  • 4:06 - 4:10
    Và tôi sẽ thực hiện
    một lựa chọn lệnh L trên Mac.
  • 4:10 - 4:14
    Tương tự với Control-Alt-L
    trên Windows để định dạng lại mã và
  • 4:14 - 4:16
    làm nó trông đẹp hơn.
  • 4:16 - 4:19
    Hãy quay trở lại mã Java của chúng ta.
  • 4:19 - 4:23
    Bây giờ tôi đã có nút rồi nhưng
    nó không làm gì cả.
  • 4:23 - 4:26
    Bắt đầu bằng cách tạo phương thức cho nó.
  • 4:26 - 4:32
    Tôi sẽ làm cái này ngay trên phương thức
    hiển thị, ở đây, không trả về giá trị.
  • 4:32 - 4:35
    Tôi sẽ gọi phương thức
    này là resetScore,
  • 4:35 - 4:38
    bởi vì đó là ý định của tôi
    muốn nó hoạt động như thế.
  • 4:38 - 4:43
    Di chuyển lên, tôi sẽ làm cho nó
    khớp với các phương thức khác
  • 4:43 - 4:47
    với Dạng xem v, rồi dấu ngoặc nhọn.
  • 4:47 - 4:50
    Tôi không lo ngại về điều gì
    sẽ đi ở đây ngay bây giờ.
  • 4:50 - 4:53
    Tôi sẽ quay lại mã XML của mình Và
  • 4:53 - 4:57
    Tôi sẽ làm phần thứ hai của
    việc móc nút vào mã Java
  • 4:57 - 5:02
    bằng cách thêm một thuộc tính
    onClick vào đây cho resetScore.
  • 5:02 - 5:06
    Được rồi, bây giờ khi tôi nhấp vào nút này
    mã ở đây sẽ chạy, nhưng
  • 5:06 - 5:08
    không có mã nào ở đây.
  • 5:08 - 5:09
    Hãy tìm xem tôi cần phải thêm những gì.
  • 5:11 - 5:14
    Chúng ta hãy quay trở lại
    phần thảo luận về Mã giả.
  • 5:14 - 5:17
    Khi tôi nhấn nút Đặt lại,
    tôi muốn điều gì xảy ra?
  • 5:17 - 5:21
    Vâng, tôi muốn cả hai
    điểm số sẽ hiển thị 0.
  • 5:21 - 5:24
    Hơn nữa, tôi muốn các biến cho
    điểm đội A và cho
  • 5:24 - 5:27
    điểm đội B quay lại bằng không.
  • 5:27 - 5:30
    Hãy nhớ rằng, khi tôi bấm vào bất kỳ
    nút nào trong các nút này, tôi thêm hai
  • 5:30 - 5:32
    sau đó hiển thị biến.
  • 5:32 - 5:34
    Nên nếu tôi không đặt
    biến lại bằng không,
  • 5:34 - 5:36
    nó sẽ hiển thị một số không chính xác.
  • 5:36 - 5:39
    Đây là thứ tôi có được với
    Mã giả.
  • 5:39 - 5:43
    Điều đầu tiên tôi muốn làm là
    đặt điểm số cho Đội A về không.
  • 5:43 - 5:46
    Sau đó, tôi muốn làm điều tương tự với
    Đội B.
  • 5:46 - 5:50
    Bây giờ cả hai điểm số đều là không, nhưng
    vẫn không có gì được hiển thị, đó là
  • 5:50 - 5:55
    lý do ở Bước 3 tôi hiển thị điểm số cho
    Đội A, vốn đã được thiết lập bằng không.
  • 5:56 - 6:00
    Để cụ thể hơn,
    tôi sẽ hiển thị điểm số cho
  • 6:00 - 6:04
    Đội A ở đây, sau đó tôi sẽ hiển thị
    điểm số cho Đội B ở đây.
  • 6:04 - 6:08
    Và bởi vì trong Bước 1 và 2, tôi chắc
    rằng chúng được thiết lập về không,
  • 6:08 - 6:10
    nên chúng sẽ hiển thị không ở đây và đây.
  • 6:10 - 6:14
    Khi tôi nhấp vào bất kỳ nút nào trong
    các nút này để cập nhật ScoreForTeamA hoặc
  • 6:14 - 6:18
    ScoreForTeamB, nó sẽ được cập nhật
    nhưng bắt đầu với điểm số bằng không.
  • 6:20 - 6:24
    Vậy trong điểm số thiết lập lại, tôi sẽ
    nhập mã giả của tôi như là đoạn mã, mã.
  • 6:24 - 6:29
    Điều đầu tiên tôi sẽ làm là
    lấy điểm A và đặt giá trị của nó
  • 6:29 - 6:34
    bằng không sử dụng một toán tử gán
    ở đây và giá trị số không.
  • 6:34 - 6:36
    Ồ,
    đừng quên dấu chấm phẩy.
  • 6:37 - 6:39
    Tôi sẽ làm tương tự cho điểm B.
  • 6:42 - 6:49
    Sau đó, tôi sẽ hiển thị trong
    vị trí của đội A, điểm số cho đội A.
  • 6:49 - 6:53
    Rồi tôi sẽ hiển thị trong
    vị trí của đội B, điểm số cho đội B.
  • 6:55 - 6:57
    Tôi cũng sẽ tiếp tục và
    thêm một chú thích.
  • 6:59 - 7:00
    Được rồi, trông có vẻ hợp lý.
  • 7:00 - 7:04
    Cũng đã được một lúc
    tôi chạy trên điện thoại, nên
  • 7:04 - 7:07
    Tôi sẽ nhấn vào nút Chạy,
    ổn rồi.
  • 7:07 - 7:08
    Tôi đã có nút ĐẶT LẠI.
  • 7:08 - 7:09
    Hãy xem nó có hoạt động không.
  • 7:13 - 7:15
    Tốt, nó đặt về không.
  • 7:15 - 7:16
    Hãy nhấp thêm chút nữa,
  • 7:16 - 7:19
    để đảm bảo rằng
    mọi thứ vẫn hoạt động tốt.
  • 7:24 - 7:28
    Tốt rồi, trông nó giống như mong đợi.
  • 7:28 - 7:30
    Bây giờ, cái này trông hơi đánh đố
    một chút.
  • 7:30 - 7:34
    Hãy để tôi chỉ cho bạn điều gì sẽ xảy ra
    nếu bạn đổi trật tự,
  • 7:34 - 7:35
    hãy làm điều gì đó khác đi.
  • 7:36 - 7:39
    Nếu tôi thay đổi hai cái này thì sao?
  • 7:39 - 7:41
    Hãy xem điều gì xảy ra.
  • 7:42 - 7:46
    Đây rồi,
    hãy xem nó là gì.
  • 7:46 - 7:48
    Tôi sẽ thêm vài điểm.
  • 7:49 - 7:53
    Bây giờ, nói thật,
    nút Đặt lại.
  • 7:53 - 7:56
    hừm, dường như không làm gì cả.
  • 7:56 - 7:59
    Hãy thử nhấp vào, hừ, hay thật đó.
  • 7:59 - 8:01
    Nó khá khó nhìn,
  • 8:01 - 8:05
    nhưng điểm số lúc trước thể hiện 19,
    tôi ấn nút đặt lại, không có gì thay đổi.
  • 8:05 - 8:08
    Nhưng sau đó khi tôi ấn nút ném phạt,
    nó hiển thị một.
  • 8:10 - 8:12
    Cùng thử với phía bên kia,
    nếu tôi nhấn cộng hai điểm.
  • 8:12 - 8:14
    Ồ, nó hiển thị hai.
  • 8:14 - 8:18
    Cùng xem lại đoạn mã lần nữa để
    biết tại sao lại có điều đó.
  • 8:18 - 8:21
    Tôi đã chuyển đổi hiển thị
    và thiết lập điểm số.
  • 8:21 - 8:25
    Để xem tôi có thể gặp
    hành vi lỗi loại nào.
  • 8:25 - 8:30
    Biết rằng Đội A có điểm số là 30 và
    Đội B có điểm số là 40.
  • 8:30 - 8:33
    Khi tôi cho biết displayForTeamA
    nó sẽ hiển thị 30 và
  • 8:33 - 8:37
    khi tôi cho biết displayForTeamB
    nó sẽ hiển thị 40.
  • 8:37 - 8:41
    Ngay sau đó, nó sẽ
    thiết lập các giá trị này về không.
  • 8:41 - 8:46
    Nhưng do nó đã hiển thị trước, nó sẽ
    không hiển thị giá trị không.
  • 8:46 - 8:48
    Nhưng biến số sẽ là không.
  • 8:48 - 8:53
    Nên khi tôi nhấn vào cái gì đó như
    addThreeForTeamB, nó sẽ lấy
  • 8:53 - 9:00
    giá trị không mà tôi đã đặt ở đây,
    thêm ba, rồi hiển thị ba.
  • 9:00 - 9:06
    Đối với chúng ta, trông như kiểu Đội B
    đi từ chỗ có số điểm là 30,
  • 9:06 - 9:12
    sau khi nhấn nút đặt lại, đến điểm số
    là ba, thật là một bước nhảy lạ lùng.
  • 9:12 - 9:15
    Có một cách tôi có thể khắc phục điều này
    ngoài đảo nó trở lại như vốn dĩ ban đầu
  • 9:15 - 9:19
    là tôi có thể đặt hiển thị không ở đây.
  • 9:19 - 9:22
    Và bạn có thể tự mình kiểm tra điều này,
    nhưng nó thực sự hiệu quả đấy.
  • 9:22 - 9:24
    Nó chỉ hơi khác thường một chút.
  • 9:25 - 9:29
    Tôi thích đưa ra ví dụ như thế này
    bởi vì nó cho thấy vẻ đẹp và
  • 9:29 - 9:31
    tính chủ quan của mã.
  • 9:31 - 9:34
    Trong trường hợp này, tôi chợt nghĩ
    rằng cách đầu tiên mà
  • 9:34 - 9:36
    Tôi có đoạn mã là tốt hơn.
  • 9:36 - 9:39
    Nhưng bạn có thể bắt đầu xem các kịch bản
    mà có thể có hai cách
  • 9:39 - 9:43
    khác nhau để viết mã, và
    cả hai đều đúng kỹ thuật.
  • 9:43 - 9:45
    Vì không phải lúc nào cũng chỉ có
    một câu trả lời đúng,
  • 9:45 - 9:49
    bạn không nên thiển cận
    để thực hiện nó chính xác theo cách đúng.
  • 9:49 - 9:53
    Hãy thử mã hóa thứ gì đó hoạt động theo
    cách của bạn, xem cách người khác làm,
  • 9:53 - 9:58
    rồi so sánh, ai hiệu quả hơn,
    mã của ai rõ ràng hơn.
  • 9:58 - 10:01
    Những kiểu thảo luận này đều có thể là
    một kinh nghiệm học tập hữu ích.
  • 10:01 - 10:04
    Được rồi, tôi sẽ phục hồi mã trở lại
    trạng thái của nó khi trước
  • 10:04 - 10:05
    vốn hoạt động tốt và
  • 10:05 - 10:10
    Tôi đã có tất cả chức năng của ứng dụng
    nhưng nó không được đẹp, hãy sửa lại.
Cím:
07-42 Add the Reset Button
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
UD837 - Android for Beginners
Duration:
10:11

Vietnamese subtitles

Felülvizsgálatok Compare revisions