Bài 7: Layout trong android

Trong các bài trước chúng ta cũng đã chạy thử một Project android và tìm hiểu qua về Activity rồi đúng không nào.Ở bài về Activity mình có nhắc đến phần khởi tạo giao diện của ứng dụng chắc các bạn còn nhớ chứ.Activity nào cũng phải có giao diện cả, và activity sẽ gọi file layout ra để khởi tạo giao diện, và hôm nay chúng ta sẽ tìm hiểu layout nhé, phần này không khó nhưng có rất nhiều cái để học đó các bạn.

Layout android là gì?

Là thành phần định nghĩa cấu trúc giao diện người dùng hay nói cách khác là thành phần quyết định đến giao diện của một màn hình trong ứng dụng Android.

Layout sẽ bao gồm nhiều ViewGroup, View… kết hợp lại với nhau để tạo nên một giao diện hoàn chỉnh.Một file layout sẽ được lưu dưới dạng tập tin xml và lưu trong thư mục layout, mà ở bài viết về cấu trúc của một project android mình đã có nói qua rồi.

Ở dưới đây là một file layout khi bạn tạo mới một Project trên android Studio, xem thử nó có gì nào?

Layout trong Android

Layout trong Android

Bây giờ chúng ta sẽ phân tích những cái liên quan đến layout trong ảnh phía trên nhé.Mặc định khi bạn tạo một dự án Android thì nó cũng tự tạo cho bạn một file layout tên là activity_main.xml trong thư mục layout .Đây chính là layout đó nhé mọi người.

Cấu trúc một file layout

Nhìn vào ảnh phía trên bạn đã hiểu gì chưa nhỉ? Một file layout sẽ được tạo từ các ViewGroup, View… với các thuộc tính bên trvvong để giúp bạn điều chỉnh được các thuộc tính như: chiều cao, chiều rộng, canh lề margin-padding, màu chữ… từ đó xây dựng nên được giao diện của một màn hình.

Vậy View với View Group là gì?

Khi bạn nhìn vào một ứng dụng mà thấy các nút Button, hình ảnh, văn bản, checkbox… thì đó chính là các View, và view là thành phần chính là thành phần để tạo nên một file Layout, bên cạnh đó có cả ViewGroup.

Trước mắt bạn phải xem qua các thuộc tính cơ bản của View, ViewGroup trước đã:

                      Thuộc tínhMô tả
layout_widthChiều rộng của View/ViewGroup
layout_heightChiều cao của View/ViewGroup
layout_marginTop/BottomKhoảng cách bên trên/dưới của View so với View khác or ViewGroup
layout_marginLeft/RightKhoảng trống bên trái/phải của View so với View khác or ViewGroup
paddingLeft/RightThêm khoảng không gian bên trái/phải bên trong thành phần
paddingTop/BottomThêm khoảng không gian bên trên/dưới bên trong thành phần
layout_gravityCách xếp đặt View (trái, phải, trên, dưới, giữa theo chiều dọc, giữa theo chiều ngang)

Còn rất nhiều các thuộc tính khác mà sau này bạn sẽ biết hết ngay thôi, ở trên mình chỉ nói quá những thuộc tính chính để mọi người nắm trước mắt cái đã.

ViewGroup

Được kết thừa từ lớp android.view.ViewGroup, ViewGroup chính là view cha, có thể bao bọc các View/ViewGroup khác ở bên trong.Mục đích của ViewGroup thì định dạng những thuộc tính mà các view chứa trong nó phải dựa vào đó mà tuỳ chỉnh theo và sẽ chịu ảnh hưởng theo.

Nó tương tự như thẻ div trong html vậy đó các bạn, khi một thẻ div đã định dạng css thì tất cả các thẻ khác nằm trong sẽ bị ảnh hưởng bở thẻ div ngoài cùng.

Ở ảnh trên <RelativeLayout>…</RelativeLayout> chính là một View Group:


Nhìn vào trên bạn có thể thấy nó đang định layout_width (chiều rộng) và layout_height (chiều cao) là : match_parent có nghĩa là chiều cao/rộng sẽ full màn hình,ngoài ra còn thuộc tính là wrap_content nghĩa là chiều rộng/cao sẽ tự co dãn theo đúng kích thước các view khác.

Các thuộc tính padding với kích thước là 16dp, điều ngày có nghĩa là các view con chứa trong sẽ cách ViewGroup này khoảng cách 16dp.Còn nhiều thuộc tính khác mình sẽ tìm hiểu sau nhé.

Sau đây là danh sách các ViewGroup chính và hay sử dụng nhất khi lập trình android và bài sau bạn sẽ bắt đầu tìm hiểu từng cái:

  • FrameLayout
  • LinearLayout
  • TableLayout
  • GridLayout
  • RelativeLayout
  • .v.v.
View

Nó  kế thừa từ lớp android.view.View, có thể nằm trong các ViewGroup tuy nhiên không thể chứa được các view khác giống như ViewGroup.Giao diện của ứng dụng được xây dựng chủ yêu bằng các View này.

Những View cơ bản mà thường hay sử dụng trong dự án đó là:

  • Button
  • ListView
  • TextView
  • EditText
  • ImageView
  • ImageButton
  • CheckBox
  • RadioButton
  • Spinner
  • .v.v.
  • View trong android

    View trong android

Đây là đoạn code của file layout trên:


Bạn có thẻ copy vào past vào trong file layout nào đó sẽ thấy ngay, bây giờ chung ra phân tích xem đâu là View? đâu là ViewGroup nhé.

Ở trên ViewGroup là :<LinearLayout>, còn view là ImageView, TextView, Button.

ViewGroup <LinearLayout> được sử dụng 2 lần và mình cũng đã nó là ViewGroup thương dùng để bọc các View hay ViewGroup khác.Ở đây ban có thấy ViewGroup <LinearLayout> đầu tiên nó bọc một <LinearLayout> và một View <Button> không?

Tiếp đến viewGroup <LinearLayout> thứ hai nó bọc 2 View là ImageViewTextView, như thế thì bạn thấy View nó thường tạo ra giao diện bạn có thể nhìn thấy được còn ViewGroup thường để thiết lập một chuẩn nào đó để các View khác phải tuân theo.

Dù là View hay ViewGroup thì đa phần các thuộc tính bên trong chúng cũng gần giống nhau, và trong các thứ đó thuộc tính ID là rất quan trọng nó sẽ giúp các bạn phân biện giữa các view với nhau mà không bị lẫn lộn và mình sẽ tìm hiểu ở bài sau nữa.

Về phần layout này mình chỉ giới thiệu tới đây cho các bạn hiểu và hãy iên tâm là mình sẽ có rất nhiều bài thực hành về phần này để sau đó bạn có thể thiết kết được bất kì giao diện này khi được khách hàng giao.Làm quen thì chỉ cần nhìn vào một màn hình là bạn biết đâu là Button, LinearLayout, RelativeLayout, GridView…

Và không ngoại lệ, để hiểu rõ hơn thì các bạn xem video bên dưới đây nhé.

Video hướng dẫn layout trong Android

Mọi ý kiến thắc mắc, đóng góp xin các bạn cứ comment bên dưới Blog.Xin chân thành cảm ơn mọi người.

Tiếp theo

Bài 7: Layout trong android
4.3 (85%) 4 votes

One Response

  1. thanks May 9, 2017

Add Comment

*