Bài tập 7: Làm quen với các Layout trong Android


Để thiết kế giao diện tốt cho Android thì trước tiên các bạn phải biết sử dụng một số Layout cơ bản trong Android:

1) Cách tạo Layout và kết nối Layout vào Activity

2) Cách sử dụng HierarchyViewer 

3) Các Layout cơ bản:

  • FrameLayout
  • LinearLayout
  • TableLayout
  • RelativeLayout
  • AbsoluteLayout

*** Đồng thời bạn phải biết kết hợp các Layout này lại với nhau để cho ra được giao diện phức tạp như ý muốn.

– Tôi chỉ nêu ra một số đặc điểm, không thể nói hết ở đây. Các bạn sẽ từ từ cập nhập sau khi đã quen với Layout.

– Trước tiên bạn cần biết cách tạo một Layout mới và cách kết nối nó vào Activity như thế nào:

1) Cách tạo Layout và kết nối Layout vào Activity:

a) Layout mặc định đầu tiên khi bạn tạo một Android Project:

– Khi bạn tạo một Android Project thì mặc nhiên sẽ có một Activity được chỉ định chạy đầu tiên khi bạn thực thi ứng dụng:

7_Layout_0

– Bạn quan sát hình trên: Khi bạn tạo một ứng dụng Android thì mặc nhiên sẽ tạo luôn một Activity để thực thi đầu tiên khi bạn chạy ứng dụng. Ứng với một Activity thì nó sẽ có 1 Layout đi kèm. Trong hình trên thì MainActivity.java (số 1) sẽ có layout đi kèm là activity_main.xml (số 2 – và bạn nhớ luôn là activity_main này sẽ được tự động tạo ra trong thư mục gen của Android, dựa vào đây để ta kết nối Layout vào Activity).

– Như đã nói ở những bài tập trước: Mọi Activity muốn được triệu gọi thành công trong ứng dụng thì bắt buộc nó phải được khai báo trong AndroidManifest.xml (số 3). Bạn double click vào Manifest và nhìn vào vùng số 4, MainActivity được khai báo trong này đồng thời đăng ký là Activity sẽ khởi động lúc ứng dụng được thực thi (xem vùng Tôi bôi màu xanh phần intent-filter).

– Tiếp theo bạn Double – click vào tập tin MainActivity.java:

7_Layout_1

– Nhìn vào hàm onCreate, bạn thấy dòng lệnh : setContentView(R.layout.activity_main); chính là dòng lệnh dùng để kết nối Layout vào Activity. Bạn nhớ là activity_main phải được tự động tạo ra trong gen như hình bên dưới:

7_Layout_2

b) Đổi Layout mặc định bằng một Layout khác bất kỳ:

– Để tạo một Layout mới, bạn click chuột phải vào Project/ chọn New/ chọn Android XML File:

7_Layout_3

– Khi bạn chọn Android XML File thì màn hình bên dưới xuất hiện: Đặt tên cho Layout, chọn kiểu Layout rồi nhấn nút Finish:

7_Layout_4

– Ở trên Tôi đặt tên là : my_new_layout, sau khi nhấn nút Finish bạn quan sát Package Explorer:

7_Layout_5

– Bạn thấy Tôi double – click vào layout : my_new_layout và kéo thả một số control vào giao diện như hình bên trên (bạn nhớ là my_new_layout phải được tự động xuất hiện trong gen – bạn tự kiểm tra).

– Bây giờ bạn vào lại MainActivity.java. Sửa lại dòng lệnh setContentView thành:

7_Layout_6

– Khởi động chương trình và bạn thấy ứng dụng sẽ chạy cái Layout mới này chứ không phải Layout cũ nữa:

7_Layout_7

2) Cách sử dụng HierarchyViewer:

– Như bạn đã biết, một Layout phải được kết nối vào Activity nào đó thông qua hàm setContentView, Android sẽ có cơ chế dịch XML thành Java code:

7_Layout_8

– Ta có thể dùng HierarchyViewer để hiển thị cấu trúc UI của màn hình hiện tại trên emulator hoặc thiết bị thật:

Bạn vào thư mục SDK của bạn / vào thư mục Tools/ rồi chạy tập tin monitor.bat :

7_Layout_9

3) Các Layout cơ bản:

a) FrameLayout:

– Là loại Layout cơ bản nhất, đặc điểm của nó là khi gắn các control lên giao diện thì các control này sẽ luôn được “Neo” ở góc trái trên cùng màn hình, nó không cho phép chúng ta thay đổi vị trí của các control theo một Location nào đó.

– Các control đưa vào sau nó sẽ đè lên trên và che khuất control trước đó (trừ khi ta thiết lập transparent cho control sau):

– Bạn xem đoạn cấu trúc XML dưới này:

<?xml version=”1.0″ encoding=”utf-8″?>

<FrameLayout android:id=”@+id/mainlayout” android:layout_height=”fill_parent” android:layout_width=”fill_parent” android:orientation=”vertical” xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/blue“/>

<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/red“/>

</FrameLayout>

7_Layout_10– Bạn thấy đó, hình màu đỏ và màu xanh luôn được “neo” ở góc trái màn hình. Hình màu đỏ đưa vào sau sẽ đè lên trên hình màu xanh.

Chú ý 2 dòng lệnh bên dưới:

– android:src=”@drawable/blue

– android:src=”@drawable/red

Là do ta kéo 2 cái hình tên là blue red vào thư mục drawable của ứng dụng

b) LinearLayout

– Layout này cho phép sắp xếp các control theo 2 hướng trên giao diện: Hướng từ trái qua phải và hướng từ trên xuống dưới.

7_Layout_11

– Bạn có thể dùng margin, gravity, weight để hỗ trợ cho việc thiết kế. Ở đây Tôi không có thời gian nhiều nên chỉ nói đặc điểm chính của LinearLayout, các bạn tự tìm hiểu thêm.

– Ta có thể dùng Properties hỗ trợ sẵn trong Eclipse để thiết lập các thuộc tính cho control:

– Ví dụ như để căn lề các control trên giao diện ta dùng layout_gravity:

7_Layout_12

– hay để căn lề nội dung bên trong của control dùng gravity:

7_Layout_13

– Bạn cũng phải biết so sánh sự khác biệt giữa PaddingMargin:

7_Layout_14

– Ví dụ thay đổi Padding (internal spacing – khoảng cách giữa nội dung bên trong so với đường viền của control):

7_Layout_15

– Ví dụ về đổi Margin (external spacing – khoảng cách giữa control này với control khác):

7_Layout_16

c) TableLayout

-Cho phép sắp các control theo dạng lưới (dòng và cột)

– TableLayout sẽ xem dòng nào có số lượng control nhiều nhất để xác định rằng nó có bao nhiêu cột (lấy dòng có số lượng control nhiều nhất làm số cột chuẩn).

7_Layout_17

– Như vậy theo hình trên thì bạn phải nói là TableLayout này có 4 cột, 3 dòng.

– Dùng layout_span để trộn các cột:

7_Layout_19

– Dùng layout_column để di chuyển vị trí của control đến một cột nào đó trên 1 dòng:

7_Layout_20– Dùng stretchColumns để dãn đều các control, các cell (ta thường dùng dấu “*”):

7_Layout_21d) RelativeLayout:

– RelativeLayout cho phép sắp xếp các control theo vị trí tương đối giữa các control khác trên giao diện (kể cả control chứa nó). Thường nó dựa vào Id của các control khác để sắp xếp theo vị trí tương đối. Do đó khi làm RelativeLayout bạn phải chú ý là đặt Id control cho chuẩn xác, nếu sau khi Layout xong mà bạn lại đổi Id của các control thì giao diện sẽ bị xáo trộn (do đó nếu đổi ID thì phải đổi luôn các tham chiếu khác sao cho khớp với Id bạn mới đổi).

– Dưới đây là ví dụ về cách sử dụng RelativeLayout (bạn để ý những dòng tô đậm):

7_Layout_22– Ta có thể sử dụng công cụ trong Eclipse để thiết kế :

7_Layout_23e) AbsoluteLayout:

– Cho phép thiết lập các control giao diện theo vị trí tùy thích:

7_Layout_24

– Như vậy các Tôi đã giới thiệu sơ qua cách tạo Layout và cách sử dụng một số Layout cụ thể, tùy từng trường hợp mà các bạn ứng dụng vào. Thông thường ứng với mỗi một ứng dụng cụ thể thì bạn phải kết hợp nhiều loại Layout lại với nhau.

– Bạn cần hiểu rõ các loại Layout để giúp ích cho quá trình thiết kế giao diện

– Bài tập sau Tôi sẽ hướng dẫn các bạn cách sử dụng một số control cơ bản và cách viết sự kiến cho Button như thế nào.

Chúc các bạn thành công.

31 responses

  1. Thầy ôi…những bài lập trình thiết bị di động mà thầy post lên hay quá à…hix..em học ở cs2 , em rất thích học lập trình thiết bị di động nhưng trên này k có dạy….ò…Thầy có thể tạo 1 loạt những video dạy môn này cho những sv thiếu điều kiện như em cùng học, Thầy nha!tks Thầy rất nhiều.

  2. Phạm Minh Ánh | Reply

    Cảm ơn thầy rất nhiều .bài viết của thầy em thấy rất hay .

  3. thank thay.em thay day la bai viet bo ich.de hieu va chi tiet.em cung doc rat nhieu bai roi nhung cua thay ka hay nhat,sau sac hon. e mog thay co nhieu bai hon nua.va mog thay day em mot bai ve su dung eclipse de lap trinh cac ohim tat.va cac loi hay gap khi lap trinh va cach khac phuc

  4. Thưa Thầy, tại sao em kéo thả control vào layout thì nó không tự động xuất hiện trong gen (em toàn phải insert trong main activity khi code báo lỗi). Mình khắc phục lỗi không tự động xuất hiện trong gen bằng cách nào?

  5. Cám ơn thầy, bài giảng rất chi tiết và dễ hiểu. Chúc thầy và gia đình luôn mạnh khỏe và thành công !

  6. Thầy ơi em muốn sắp xếp các edittext thẳng hàng từ trên xuống thì phải làm sao ạ

  7. cám ơn thầy bài viết rất hữu ích

  8. bài viết bá đạo quá 😀

  9. Thầy ơi, cho em xin thắc mắc :
    – Em tạo project thì nó mặc định là Relative Layout -> thế có cách nào thay đổi không ạ?
    – Em kéo thả 1 button vào , sau đó đổi id của nó trên giao diện luôn -> nhưng kết quả là trong file R.java thì hoàn toàn không thấy cái tên button đó ( kết quả là khi em dùng findViewById( R.id.tênbutton) thì nó báo là cái button đó không xuất hiên trong R.id ?

    Xin thầy giải đáp giúp e !
    Em xin cám ơn ạ !

    1. 1) Để chuyển Layout em bấm chuột phải vào màn hình chọn Change Layout
      2) Kiểm tra lại đặt tên hợp lệ hay chưa, nếu không thì xem lại cách sửa lỗi ở bài tập 4

  10. thưa thầy, em bị 3 lỗi như thế này :
    Syntax error on token “(“, ; expected
    Syntax error on token “)”, ; expected
    void is an invalid type for the variable btn_tong2so
    ở dòng lệnh này
    public void btn_tong2so (View v) {
    mong thầy sửa giúp em, em cảm ơn thầy nhiều!

    1. Em kiểm tra lại cú pháp gõ lệnh đúng chưa?

    2. bị y chang lỗi bạn vẫn chưa sửa đc

  11. cảm ơn thầy đẹp trai cho e xin sdt tối rủ thầy di nhậu nha :3

  12. khi em kéo cái table layout vào nó chỉ có rows mà ko có column vậy thầy…!!
    thanks bài viết của thầy.

    1. – TableLayout sẽ xem dòng nào có số lượng control nhiều nhất để xác định rằng nó có bao nhiêu cột (lấy dòng có số lượng control nhiều nhất làm số cột chuẩn).

  13. cho e hỏi trộn cột bằng layout_span. Thế trộn dòng bằng gì, vì trộn dòng cũng rất hay dùng

    1. hình như mình phải sử dụng một layout khác thì phải

  14. Thầy ơi khi em kích vô file monitor.bat thì xuất hiện lỗi này ạ “Could not open Selected VM debug port (8700). Make sure you do not have another instance of DDMS or of the eclipse plugin running. If it’s being used by something else, choose a new port number in the preferences.”. Thầy giúp em với !

  15. hay qua hihi

  16. bài viết của thầy rất rất hay giúp em rất nhiều. em cám ơn thầy rất nhiều

  17. BeginerAndroid | Reply

    Thưa thầy trong các layout đó thì hay sử dụng layout nào nhất ạ. Nếu có thể thầy chỉ cho em khi nào thì chọn layout nào.
    Em cảm ơn thầy ^^

  18. thầy ơi em hỏi chút ạ ! em mới học về android .
    em hỏi : tại sao khi em kéo thả các EditText trong TextFields nó lại bị đen màn hình ảo .xml đó ạ . Và nó thông báo lỗi là
    ” Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V
    Exception details are logged in Window > Show View > Error Log”

    1. mình khắc phục đc lỗi này r. bạn phải xóa bản 4.4.W đi là đc

      1. em mới tự mò mò chưa biết nhiều, xóa 4.4W ntn đấy bác :))

  19. Cảm ơn thầy rất nhiều, bài viết rất hay và cụ thể.

  20. Em muốn tạo trong file xml có 1 ảnh ở giữa màn hình và ở bên dưới góc trái,phải của ảnh có 2 button thì tạo ntn ạ?

  21. Em xin share một số bài cơ bản về giao diện Android
    http://histudycode.com/tag/android-xml/

  22. Em cảm ơn Thầy nhiều nhé, chúc Thầy sức khỏe tốt để làm ra nhiều bài hay nữa!

  23. Thầy ơi! e bị một lỗi như sau mà chưa thể khác phục, thầy và các bạn có thể giúp e không ạ.
    error: No resource identifier found for attribute ‘layout_columns’ in package ‘android’

  24. Cảm ơn thầy rất nhiều ạ! Em mới học lập trình android, em có đọc nhiều sách tiếng Anh nhưng không hiểu, đọc bài viết trên blog của thầy rất dễ hiểu, dễ tiếp thu. Cảm ơn thầy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s