Bài 10: Thiết kế layout Android bằng code Java

Ở bài 8 và bài 9 chúng ta đã học qua được các view hay còn gọi là layout cơ bản rồi đúng không nào, tuy nhiên lúc đó mình sử dụng code android đã định nghĩa sẵn trong xml, và từ nay về sau đây là cách mà các bạn dùng để tạo giao diện trong android.

Tuy nhiên để hiểu rõ bản chất nó hơn mình có thêm bài viết hướng dẫn các bạn tạo giao diện layout bằng code thuần Java với mục địch là nắm rõ hơn phần core của Java vì android là ngôn ngữ lập trình Java mà 😀 .Nếu tới đây bạn có khó hiểu quá thì nên xem qua loạt bài Java Swing ở anh Việt Ducky mà mình đã giới thiệu ở phần đầu của series này, xem xong bạn sẽ học android giỏi hơn nhiều đó.

Để tiếp tục xem bài này bạn quay lại bài trước là bài 9 mình có nói qua về LinearLayout và RelativeLayout và so sánh giữa chúng, khi nào dùng thằng nào chắc các bạn đã hiểu rõ rồi đúng không nào? Tuy nhiên đó là việc làm xây dựng giao diện trên file layout xml, nó trông rất dễ thế nhưng nếu không thiết kế giao diện bằng code xml thì bạn sẽ vẽ giao diện bằng code java thì không đơn giản lắm đâu.

Hôm nay mình sẽ hướng dẫn bạn làm lại giao diện y chang bài 9 tuy nhiên là sử dụng code Java để làm, bạn cùng xem lại hình ảnh layout bữa trước nào:

Ví dụ về LinearLayout

Ví dụ về LinearLayout

Qua mấy bài thực hành chắc giờ bạn code cái giao diện này trong chớp mắt đúng không nào? Bây giờ bạn hãy nhìn đoạn code java mình xây dựng file layout trên với LinearLayout trước nhé.

Giao diện LinearLayout với code Java


Bạn có thể copy đoạn code sau bỏ vào MainActivity của bạn để chạy thử xem nhé, nhớ để tên package mình bôi đỏ ở trên.Nó sẽ ra giao diện giống y chang hình ở trên đúng không nào mà bạn không cần phải viết code trong file layout.

Bây giờ mình sẽ giải thích vài thuộc tính, phương thức cho các bạn nắm nhé, nhìn vào 2 file Java code vs XML code bạn thấy có giống nhau không?

So sánh giữa Java code và XML code

So sánh giữa Java code và XML code

Các số thứ tự là các view tương ứng với nhau đó nhé các bạn, nếu bạn xem xuyên xuốt các video trong bài viết chắc đã biết để Activity kết nối với một file layout tạo nên một giao diện màn hình thì gọi phương thức setContentView(R.layout.tenlayout) đúng không nào? Đó là khi code layout bằng XML còn khi tạo bằng Java code thì bạn sẽ setContentView bằng view Group bao bọc ngoài cùng của layout đó, ở ví dụ trên LinearLayout số 1 là view bao ngoài cùng nhất nên mình set là setContentView(linearLayoutRoot) .

Thuôc tính:


Đây chính là thuộc tính set chiều rộng và chiều cao cho một View nhé, nếu trong XML nó sẽ là :


Bên cạnh đó là các thuộc tính tương đồng với nhau giữa XML vs Java code như:

XML CodeJava Code
android_orientation="horizontal"linearLayoutRoot.setOrientation(LinearLayout.VERTICAL);
android_src ()setImageResource()
android:layout_gravityLayoutParams.gravity = Gravity.VALUE
android:textsetText()

Video hướng dẫn về LinearLayout

Giao diện RelativeLayout với Java Code


Còn dưới đây là sự so sánh giữa hai đoạn code XML và Java trên RelativeLayout:

XML code và Java Code với ReleativeLayout

XML code và Java Code với RelativeLayout

Mình không đánh dấu số nữa để các bạn nhìn qua tự đoán xem những thuộc tính khi sử dụng xml với java code nó như thế nào nhé, mình đã code nó theo thứ tự như trong xml luôn nên bạn cứ dò từ trên xuống dưới là thấy.

Ở đây vì là RelativeLayout nên rất hay sử dụng ID để  canh vị trí cho các view nên bạn phải set ID cho view nào cần thiết thế nên bạn sẽ thấy thuộc tính setID như sau:

view.setID(R.id.tenID) : ở đây view chính là trên view bạn muốn thiết lập ID cho nó, còn tenID chính là tên ID bạn muốn đặt, ở đây bạn phải định nghĩa một file lưu ID có tên là ids.xml trong thư mục values nhé, như sau:


Với RelativeLayout thì có rất nhiều sự khác biệt so với LinearLayout đó các bạn, vì việc sắp xếp thằng này lúc nào cũng dài dòng hơn cả, chính vì thế code nó lúc nào cũng nhiều hơn.

Và trong video bên dứới mình sẽ nói nhiều hơn cho các bạn hiểu, chứ viết ra thì rất khó diễn dãi và cũng dài dòng nữa.

Video hướng dẫn về RelativeLayout


Mọi ý kiến thắc mắc các bạn cứ comment bên dưới Blog nhé, chúc các bạn thành công!

Download Source Code

Tiếp theo

Bài 10: Thiết kế layout Android bằng code Java
5 (100%) 1 vote

9 Comments

  1. Thanh March 19, 2017
    • trangchongcheng March 20, 2017
    • huyw May 9, 2017
  2. Tien May 28, 2017
    • trangchongcheng May 28, 2017
      • Tien May 29, 2017
    • trangchongcheng June 5, 2017
  3. Nha July 14, 2017
    • trangchongcheng July 20, 2017

Add Comment

*