Để thiết kế thật tốt giao diện trong Android, các bạn phải nắm chắc việc sử dụng các loại Layout cơ bản của nó. Các Layout cơ bản của Android bao gồm:
+
FrameLayout +
LinearLayout +
TableLayout +
RelativeLayout +
AbsoluteLayout Việc nắm vững các loại layout trên là rất cần thiết, và để có thể thiết kế được các giao diện phức tạp, các bạn cần kết hợp đồng thời nhiều loại layout với nhau. Trước tiên chúng ta cần tìm hiểu cách tạo một layout mới và cách kết nối chúng vào Activity.
1.Tạo mới layout và kết nối vào Activity
Khi bạn tạo mới một Android project, các bạn sẽ thấy một layout mặc định của nó là
activity_main.xml. Đó là layout được chỉ định chạy đầu tiên của chương trình. Bạn có thể tạo mới một layout khác và thay thế layout mặc định bằng layout bạn vừa tạo ra.
+Chuột phải vào thư mục project trong
Package Explorer chọn
New/Others... +Trong cửa sổ mới xuất hiện, mở thư mục
Android, và chọn
Android XML Layout Files rồi chọn
Next.
+Tại đây bạn có thể chọn loại layout mà bạn muốn tạo, đặt tên và click
finish. Ở đây mình sẽ chọn
LinearLayout và đặt tên là
new_
layout. Kéo một vài loại
View trong
Palette vào cho nó chuyên nghiệp
Như vậy trong thư mục
res/layout đã có một layout mới là
new_layout.xml. Mở file
MainActivity.java ra. (Các bạn nhớ xử lý một project android mới như mình đã hướng dẫn nhé)
>>>Giải quyết vấn đề với Fragment Layout Sau khi xử lý rắc rối với fragment layout thì trong MainActivity.java sẽ còn lại như sau:
package com.example.hellowolrd;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Các bạn chú ý dòng:
setContentView(R.layout.activity_main); Đây chính là dòng đặt activity được khởi tạo đầu tiên khi chạy ứng dụng. Các bạn chỉ cần thay
activiti_main bằng tên file xml mới của bạn và chạy thử trên Android emulator. Chắc chắn các bạn sẽ thấy kết quả sẽ là layout mới mà bạn vừa thiết kế. Chúc các bạn may mắn.
2. Các loại layout cơ bản:
a.
Framelayout:
- Đây là loại Layout cơ bản nhất trong Android. Đặc điểm của layout này là các view khi được đưa vào layout sẽ được "neo giữ" tai góc trái trên cùng của màn hình. Nó sẽ không cho phép chúng ta thay đổi vị trí của các view theo một vị trí nào hết.
- Khi các bạn đưa các view vào sau sẽ nằm đè lên và che khuất một phần hoặc che khuất hoàn toàn view trước đó. Các bạn tham khảo đoạn code trong android_main.xml nhé:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dòng này ở sau"
android:textSize="40sp"
android:textColor="#008000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dòng này ở trước "
android:textSize="30sp"
android:textColor="#000000"/>
</FrameLayout>
Các bạn lưu ý các dòng code sau và ý nghĩa của chúng:
+ android:layout_width="wrap_content" &
android:layout_height="wrap_content" : Dòng này định nghĩa chiều rộng và chiều dài của một View. Ở đây là mình lấy từ TextView. Các bạn có thể hiểu rằng độ rộng và độ dài của TextView này bằng các thành phần bên trong nó (wrap = bao bọc). Ở đây là dòng chữ hiển thị.
+
android:text="Dòng này ở sau" : Hiển thị một chuỗi ký tự ở TextView
+
android:textSize="40sp": Độ lớn của chuỗi ký tự
+
android:textColor="#008000" : Màu sắc của chuỗi ký tự.
Ngoài ra còn rất nhiều thuộc tính của TextView. Khi code, các bạn chỉ cần viết "and" và sử dụng tổ hợp phím
Ctrl+space. Sẽ có một loạt các phương thức sẵn có và các bạn có thể sử dụng để gợi ý, làm tăng tốc độ coding.
b.
LinearLayout:
- Layout này cho phép sắp xếp các view theo chiều ngang(từ trái sang phải) hoặc chiều dọc (Từ trên xuống dưới).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username:"
android:textSize="20sp"
android:textColor="#008000"/>
<EditText
android:id="@+id/edtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="5"/>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password:"
android:textSize="20sp"
android:textColor="#008000"/>
<EditText
android:id="@+id/edtPass"
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="5"/>
</LinearLayout>
</LinearLayout>
Kết quả:
Trong ví dụ trên, mình đã sử dụng kết hợp thêm 2
LinearLayout bên trong
LinearLayout gốc. Đây chính là cách các bạn kết hợp các loại Layout với nhau để có thể tạo ra một giao diện phức tạp.
Một vài thuộc tính mà các bạn cần lưu ý:
-Trong
LinearLayout:
+
android:orientation="vertical": Xác định việc LinearLayout sắp xếp các phần tử trong nó theo chiều nào. Ở đây
vertical để định nghĩa sắp xếp theo chiều dọc, còn
horizontal là định nghĩa theo chiều ngang
- Trong
EditText :
+ Đây là view cho phép người dùng nhập dữ liệu vào (Giống textbox). Các bạn phải định nghĩa id của nó với câu lệnh
android:id. Việc định nghĩa id sau này sẽ giúp các bạn lấy các view này ra để thực hiện các công việc trong phần code.
+
android:inputType="textPassword": định nghĩa loại dữ liệu nhập vào. Ở đây là loại dữ liệu password sẽ hiện dấu chấm thay vì các ký tự (che đi cho nó bảo mật). Ngoài ra ở đây cũng có nhiều loại dữ liệu inputType. Các bạn xóa chữ
textPassword đi và lại sử dụng tổ hợp phím kỳ diệu
Ctrl+space nhé
c.
TableLayout- Là dạng bảng, cho phép các view sắp xếp theo dạng lưới(dòng và cột)
**
*Chú ý: TableLayout sẽ xem dòng nào có số lượng view nhiều nhất để xác định rằng nó có bao nhiêu cột. Có nghĩa là nó sẽ lấy dòng có số View nhiều nhất là số cột chuẩnTheo hình trên thì TableLayout sẽ có 3 dòng và 4 cột. Các bạn cần phải chú ý điểm này khi code giao diện với TableLayout nhé.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username:"
android:textSize="20sp"
android:textColor="#008000"/>
<EditText
android:id="@+id/edtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="5"
android:layout_span="2"/>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password:"
android:textSize="20sp"
android:textColor="#008000"/>
<EditText
android:id="@+id/edtPass"
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="5"
android:layout_span="2"/>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"/>
<Button
android:id="@+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear"/>
<Button
android:id="@+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"/>
</TableRow>
</TableLayout>
Kết quả:
Các bạn chú ý một vài câu lệnh sau:
+
android:stretchColumns="*" dùng để dãn đều các cột và các view.
+
android:layout_span="2" trộn số cột với nhau, ở đây là trộn 2 cột. Các bạn thử xóa dòng này đi trong Editext, sẽ thấy nó ngắn lại, chỉ dài đúng bằng kết thúc của nút Clear. Không tin hả, làm thử coi =))
Ngoài ra các bạn dùng
layout_column để di chuyển vị trí các view đến một cột nào đó của dòng. Các bạn tự thực hành thêm về thuộc tính này nhé
d.Relative Layout:
- Cho phép sắp xếp các view theo một vị trí trương đối so với các view khác. Thường thì
Relative Layout sẽ dựa vào các ID của các view để sắp xếp nên các bạn phải thật sự đặt cẩn thận các ID của layout. Nếu không giao diện sẽ bị xáo trộn hoàn toàn.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:ems="10" >
<requestFocus />
</EditText>
<Button android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_alignParentRight="true"
android:text="OK"/>
</RelativeLayout>
Kết quả:
e. AbsoluteLayout:
-Cho phép thiết lập các giao diện các control tùy thích.
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:layout_x="150px"
android:layout_y="50px"/>
</AbsoluteLayout>
Kết quả:
Thường thì chúng ta sẽ ít sử dụng Layout này bởi lẽ khi bạn đưa ra vị trí kiểu như vậy sẽ khó phù hợp với các loại màn hình với độ lớn và độ phân giải khác nhau
Qua bài học này, các bạn đã hiểu rõ về các loại Layout và cách sử dụng chúng. Mình mong rằng các bạn sẽ tự thực hành nhiều hơn, code nhiều hơn để có thể nhớ và nắm vững kiến thức. Lý thuyết thì khó nhớ nhưng chỉ cần các bạn tự code lại, thực hành lại thì sẽ hiểu ngay. Chớ nên copy code rồi debug ra màn hình emulator rồi tự khâm phục mình giỏi nhé ^^
Chúc các bạn may mắn. Hẹn gặp lại trong các bài tiếp theo
>>>Bài 6: Làm quen với một số kiểu lập trình sự kiện trong android
