Return to Video

4 - The Stages SOL

  • 0:01 - 0:05
    Okay, Tôi sẽ bắt đầu trả lời
    cho
    các câu hỏitrước khi chuyển sang XML.
  • 0:05 - 0:07
    Đầu tiên đó là
    việc lựa chọn view.
  • 0:07 - 0:09
    Tôi vẽ mấy hộp xung quanh
    những cái tôi thấy ở đây.
  • 0:10 - 0:11
    vậy sẽ có năm view khác nhau,
  • 0:11 - 0:14
    không bao gồm viewgroup,
  • 0:14 - 0:18
    Nhưng dù sau, trong năm view
    ở đây có hai TextView,
  • 0:18 - 0:19
    theo sau đó là 3 Button
  • 0:19 - 0:24
    Và không có ImageViews nào, vì vậy
    tôi nói là không có ImageViews
  • 0:24 - 0:28
    Bây giờ bạn có thể tự hỏi tại sao
    có hai TextViews khác nhau,
  • 0:28 - 0:32
    vâng, trong sản phẩm cuối cùng,
    kiểu của teamAscore
  • 0:32 - 0:34
    trông rất khác nhau.
  • 0:34 - 0:38
    Vì vậy tôi quyết định giữ chúng
    như là 2 TextViews riêng biệt.
  • 0:38 - 0:40
    Chuyển sang bước 2,
    đâu là vị trí của các view.
  • 0:40 - 0:43
    Tôi bắt đầu lựa chọn viewgroup
    tôi muốn sử dụng ở đây
  • 0:43 - 0:47
    và cả hai đã ở trong
    đầu tôi là
    linear layout
  • 0:47 - 0:49
    relative layouts. Và đây là
    một cột thẳng đứng của các view.
  • 0:49 - 0:53
    Như vậy, những cái tôi muốn đã rõ ràng,
    và đây là linear layout.
  • 0:54 - 0:57
    Okay, Cuối cùng tôi chuyển sang bước 3,
    ở đây tôi tạo mẫu cho các view.
  • 0:57 - 1:00
    Và tôi sẽ giải quyết
    khi tôi làm việc với XML.
  • 1:00 - 1:03
    Okay, vậy nên chúng ta sẽ
    cùng chuyến sang XML.
  • 1:03 - 1:05
    Okay, Tôi muốn xem thanh Text.
  • 1:05 - 1:08
    vậy nên trước tiên tôi sẽ đến đây
  • 1:08 - 1:10
    chỉ để xóa những gì tôi không cần.
  • 1:10 - 1:12
    Vì vậy tôi sẽ lên bên trên và
    bắt đầu xóa TextView này.
  • 1:13 - 1:17
    Và tất cả paddingLeft,
  • 1:17 - 1:20
    paddingBottom
  • 1:20 - 1:23
    Hãy cẩn thận khi xóa những gì
    bạn không cần.
  • 1:23 - 1:25
    Okay.
  • 1:25 - 1:28
    Bây giờ tôi có thể nói rằng viewgroup
    chúng ta định sử dụng không phải là
  • 1:28 - 1:30
    relative layoutt mà là linear layout,
  • 1:31 - 1:35
    Và bên trong linear layout
    này
    Tôi sẽ tạo ra hai TextView
  • 1:35 - 1:36
    sau đó là ba Button.
  • 1:36 - 1:38
    Và tôi bắt đầu tạo chúng.
  • 1:38 - 1:40
    Bây giờ tôi chưa đi
    sâu vào chi tiết
  • 1:40 - 1:43
    như chiều rộng và chiều cao
    của TextView này.
  • 1:43 - 1:45
    Bây giờ tôi chỉ để nó
    như là một wrap_content,
  • 1:45 - 1:48
    nó sẽ đặt khung của
    TextView bao quanh văn bản.
  • 1:49 - 1:52
    Tôi sẽ quay lại bên trên để thiết
    lập
    văn bản cho TextView này.
  • 1:52 - 1:55
    Và đây là TextView đầu tiên
    được gọi là Team A.
  • 1:56 - 1:59
    Okay, hãy cũng xem nó trông
    thế nào qua phần Xem trước.
  • 1:59 - 2:02
    Okay, tôi có thể thấy một
    TextView
    nhỏ hiển thị Team A.
  • 2:02 - 2:04
    Bây giờ chúng ta sẽ xây
    dựng cái thứ hai
  • 2:04 - 2:07
    Và cái tiếp theo dưới đây là Score,
    và nó cũng là một TextView
  • 2:07 - 2:10
    Và chúng ta bắt
    đầu gõ vào Text.
  • 2:10 - 2:12
    Okay,tôi thấy TextView
    và tôi ấn Enter.
  • 2:12 - 2:16
    Và tôi cũng định tạo
    cho nó một wrap_content.
  • 2:16 - 2:18
    Và tôi bắt đầu thêm Text>.
  • 2:18 - 2:22
    Score luôn bắt đầu bằng 0,
    vì vậy tôi cho nó bắt đầu bằng 0.
  • 2:22 - 2:23
    Okay.
  • 2:23 - 2:23
    Bây giờ là các
    Button của tôi.
  • 2:23 - 2:26
    Và tôi bắt đâu gõ Button.
  • 2:26 - 2:28
    Tiếp tục tạo
    wrap_content cho nó.
  • 2:28 - 2:32
    Okay, và đây là nút đầu tiên
    được gọi là +3 Points
  • 2:32 - 2:35
    Tôi sao chép nó và
  • 2:35 - 2:40
    dán lần một,
  • 2:40 - 2:43
    Và chúng ta có một nút
    gọi là +2 Points
  • 2:43 - 2:45
    một nút gọi là Free Throw
  • 2:45 - 2:47
    Okay, Hãy cùng xem chúng như thế nào
    rồi qua màn hình xem trước.
  • 2:48 - 2:51
    Vâng, dường như tôi có 3 nút.
  • 2:51 - 2:54
    Và tôi có thể thấy Team A
    và số 0.
  • 2:54 - 2:56
    như vậy tôi đã có tất cả
    các view
  • 2:56 - 2:59
    Nhưng nó không thật sự giống
    mục tiêu cuối cùng được đặt ra.
  • 2:59 - 3:01
    Nhờ rằng,
    chúng đang ở dạng cột.
  • 3:01 - 3:03
    Vì vậy tôi nghĩ rằng tôi phải thay đổi
    hướng của layout của tôi,do đó
  • 3:03 - 3:05
    Tôi trở lại bên trên để làm điều đó.
  • 3:05 - 3:10
    Vì vậy tôi bắt đầu gõ orientation
    và tôi muốn nó là thẳng đứng
  • 3:10 - 3:12
    Okay, bây giờ nhìn nó
    tốt hơn một chút rồi.
  • 3:12 - 3:17
    Bây giờ những nút này phải trải dài ra
    để điền đầy chiều rộng của màn hình.
  • 3:17 - 3:20
    Vì vậy tôi có thể không thực sự
    muốn kiểu wrap_content
  • 3:20 - 3:23
    cho những nút này, thay vào đó
    tôi
    chuyển thành match_parent.
  • 3:23 - 3:24
    Vì vậy tôi sẽ thực hiện
    thay đổi này ngay.
  • 3:26 - 3:29
    Okay, vì vậy chiều rộng của tất cả
    các nút của tôi đã là match_parent.
  • 3:29 - 3:30
    Chúng ta hãy cùng Xem trước.
  • 3:31 - 3:33
    Okay, nhìn đã tốt hơn rồi đây,
    chúng đã trải rộng ra.
  • 3:33 - 3:34
    Được rồi.
  • 3:34 - 3:39
    Vâng, các Text
  • 3:39 - 3:44
    và để xử lý nó, tôi bắt đầu
    sử dụng một kiểu gọi là gravity.
  • 3:44 - 3:46
    Okay, Và tôi đang xử lý với
    Google Drawing
  • 3:46 - 3:49
    bây giờ chúng ta sẽ cùng tạo ra
    hộp văn bản với Google Drawing.
  • 3:50 - 3:52
    Okay, vì vậy nó giống như
    là các cạnh của view.
  • 3:52 - 3:54
    Tôi có thể gõ vào đó Team A,
  • 3:54 - 3:58
    và nó mặc định hiển thị
    ở phía góc trên bên trái.
  • 3:58 - 4:01
    Và điều này xảy ra tương tự với
    TextView,
  • 4:01 - 4:03
    khi bạn gõ văn bản vào đó,
    mặc định nó nằm ở góc trên bên trái.
  • 4:03 - 4:09
    Bây giờ, với Google Drawing, tôi
    có thể lựa chọn văn bản này và sử dụng
  • 4:09 - 4:14
    thuộc tính tương đương cơ bản,
  • 4:14 - 4:19
    theo chiều ngang bên trong hộp và ở giữa
    theo chiều thẳng đứng ở bên trong hộp.
  • 4:19 - 4:20
    Thật là tuyệt.
  • 4:20 - 4:24
    Giữ các thành phần của view
    và di chuyển xung quanh bên trong
  • 4:24 - 4:27
    giới hạn của view một cách chính
    xác
    là cái mà layout gravity có thể làm được
  • 4:27 - 4:30
    Và nếu bạn đang nghĩ nó có thể giống
    một vài phương thức alignment bạn
  • 4:30 - 4:34
    có thể sử dụng với relative layouts
    ,
    nhưng bạn có thể sử dụng thuộc tính
  • 4:34 - 4:37
    gravity
  • 4:37 - 4:39
    Chúng ta sẽ cùng nhìn vào code của nó.
  • 4:40 - 4:44
    Tôi bắt đầu vào TextView
    đầu tiên
    và tôi bắt đầu gõ gravity.
  • 4:45 - 4:47
    Okay.
    Với gravity,
    tôi có hai lựa chọn,
  • 4:47 - 4:49
    layout gravity
    gravity.
  • 4:49 - 4:51
    Tôi chỉ mới nói về
    thuộc tính gravity.
  • 4:51 - 4:53
    Vì đó là thuộc
    tính chúng ta đang dùng.
  • 4:53 - 4:56
    Okay.
    Và tiếp đó ta có một
    loạt lựa chọn ở đây,
  • 4:56 - 4:58
    và tôi nghĩ tôi muốn nó được đặt
    ở giữa theo chiều thẳng đứng
  • 4:58 - 5:00
    Vì vậy, đây là cái tôi định dùng.
  • 5:00 - 5:03
    Và tôi lại quay lên trên và
    Xem trước những gì tôi vừa làm.
  • 5:04 - 5:08
    Không giống những gì tôi vừa làm lắm,
  • 5:09 - 5:13
    Vì vậy nếu tôi ấn vào đây, và chúng
    ta
    thử phóng to đến khi khó có thể nhìn thấy.
  • 5:15 - 5:16
    Okay, vậy ở đây
    chúng ta có Team A
  • 5:16 - 5:21
    và bạn có thể thấy
    được
    loại đường bao quanh nó.
  • 5:21 - 5:25
    Vâng, nếu Tôi đã nói với bạn rằng,
    nó được đặt ở giữa của view,
  • 5:25 - 5:27
    Thì bạn không thể cãi lại tôi.
  • 5:27 - 5:32
    Nó thực sự nằm ở giữa view,
    nhưng view quá nhỏ.
  • 5:32 - 5:33
    Quay lại với Google Drawing
    của chúng ta,
  • 5:33 - 5:39
    Dường như sẽ tốt hơn nếu tôi giảm kích
    thước của nó bằng kích thước của văn bản.
  • 5:39 - 5:40
    Nó là trung tâm, nhưng
  • 5:40 - 5:45
    nó thực sự nhìn không khác mấy
    nếu được đẩy sang bên trái.
  • 5:45 - 5:47
    Okay, vậy
    Nếu tôi
    muốn để nó giữa điện thoại,
  • 5:47 - 5:50
    Tôi cần phải làm cho view mở rộng
    ra theo chiều dài điện thoại.
  • 5:50 - 5:52
    Nó đòi hỏi chúng ta
    phải thay đổi chiều rộng.
  • 5:54 - 5:56
    Okay, vậy thì
    quay trở lại đây,
    tôi sẽ đóng Xem trước.
  • 5:57 - 5:59
    Và tôi đến chỗ chiều rộng ở đây.
  • 6:00 - 6:05
    Thay vì dùng wrap_content
  • 6:05 - 6:06
    Okay, và chúng ta hãy
    Xem lại một lần nữa.
  • 6:07 - 6:08
    Thu nhỏ.
  • 6:09 - 6:11
    Okay.
    Nhìn có vẻ tốt hơn rồi đấy.
  • 6:11 - 6:12
    Nó dường như đã trung tâm hơn.
  • 6:12 - 6:14
    Và tôi cũng làm điều tương tự với
    score ở đây.
  • 6:16 - 6:19
    Okay, vậy thì Tôi thêm gravity
    vào và gravity
  • 6:19 - 6:20
    trong tất cả các
    layout gravity
  • 6:20 - 6:26
    center_horizontal và tôi
    thay
    đổi độ rộng trong match_parent.
  • 6:27 - 6:29
    Okay,
    và hãy cùng kiểm tra lại lần nữa.
  • 6:29 - 6:31
    Cool!
  • 6:31 - 6:32
    Trông khá tốt rồi đấy.
  • 6:32 - 6:34
    Ngoại trừ chúng thực
    sự quá sít vào nhau
  • 6:34 - 6:37
    Không có nhiều khoảng không
    giữa các thành phần
  • 6:37 - 6:41
    Tôi bắt đầu cho mỗi
    TextViews
    một padding
  • 6:41 - 6:46
    Tôi bắt đầu gõ padding
    = 4dp.
  • 6:47 - 6:48
    Bạn có nhớ dp?
    Và tôi chỉ sử dụng
  • 6:48 - 6:52
    padding, không phải
    padding bottom hoặc cái khác.
  • 6:52 - 6:54
    Và tất cả đều = 4
    dp
    xung quanh toàn bộ TextView.
  • 6:54 - 6:57
    Hãy cùng xem nó như thế nào
  • 6:58 - 7:01
    Okay.
    Nó đã cho tôi
    thêm một ít không gian.
  • 7:01 - 7:04
    Tôi thực hiện điều đó
    tương tự cho
    Score TextView.
  • 7:08 - 7:11
    Okay, bây giờ tôi áp dụng
    nó với
    tất cả các nút.
  • 7:16 - 7:19
    Hmm, vâng nó dường như
    không làm được gì nhiều
  • 7:19 - 7:24
    Liệu nó có khác gì hơn
    khi ta chuyển lên 8
  • 7:24 - 7:26
    hay 20?
  • 7:26 - 7:30
    Hmm, rất thú vị, và nó
    dường như làm Button lớn lên
  • 7:30 - 7:32
    Tôi lại không muốn các
    Button lớn lên
  • 7:32 - 7:34
    Tôi muốn khoảng không gian
    quanh Button lớn lên
  • 7:34 - 7:38
    và thực sự nó là sẽ được
    làm tốt hơn với,
    layout_margin.
  • 7:38 - 7:41
    Nhớ rằng, padding thực sự thêm
    paddingvào bên trong view,
  • 7:41 - 7:43
    trong khi đó margin thêm
    không gian xung quanh view.
  • 7:44 - 7:45
    Vì vậy chúng ta sẽ thay đổi
    layout_margin.
  • 7:45 - 7:47
    Tôi bắt đầu với 8dp.
  • 7:47 - 7:49
    Tuyệt, nó trông ổn hơn rồi đấy.
  • 7:49 - 7:53
    Bây giờ có thêm không gian
    xung quanh các view
  • 7:53 - 7:55
    Và hãy tiếp tục làm thế
    với các Button khác.
  • 7:56 - 8:00
    Margin, không phải padding,
    layout_margin.
  • 8:00 - 8:01
    Okay, vậy là đã trông tốt hơn rồi.
  • 8:01 - 8:04
    Bây giờ nếu bạn chọn thuộc
    tính khác tôi chọn,
  • 8:04 - 8:08
    ví dụ padding là 5 thay vì 4,
    nó vẫn ok.
  • 8:08 - 8:12
    Nhờ rằng, tại điểm này,
    tôi chỉ muốn làm mọi thứ dễ nhìn hơn.
  • 8:12 - 8:15
    Chúng ta sẽ tiếp tục với màu và
    phông chữ tại các bước sau.
  • 8:17 - 8:18
    Okay.
  • 8:18 - 8:19
    Và ta đã làm tốt.
  • 8:19 - 8:20
    Bạn đã hoàn thành bước này.
タイトル:
4 - The Stages SOL
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Vietnamese subtitles

改訂 Compare revisions