sử dụng layout weight trong android
DESCRIPTION
Hướng dẫn cách sử dụng thuộc tính layout weight trong android để thiết kế giao diện chính xác và đẹpTRANSCRIPT
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Android layout_weight
Thuộc tính android:layout_weight sẽ cho Linear Layout biết các thành
phần bên trong được phân bố như thế nào.
Giá trị của layout_weight mặc định là 0 và có thể tăng dần. Gán giá trị lớn hơn 0
cho layout_weight sẽ chia cắt khoảng trắng khả dụng trên phần tử View cha,
tương ứng với giá trị layout_weight của phần tử View và tỉ số của nó sẽ bao gồm
layout_weight tương ứng trên layout hiện hành và các thành phần View khác.
Ví dụ 1:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00" />
</LinearLayout>
Kết Quả:
Ở đây chúng ta mong đợi layout cha sẽ được phân chia thành
2 layout con với 2 màu xanh nước biển và xanh lá cây rõ rệt,
nhưng kết quả không như vậy.
Vậy làm sao để phân chia layout cha thành 2
layout con với 2 màu như mong muốn?
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 2:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0000FF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00FF00" />
</LinearLayout>
Kết Quả:
Trong ví dụ này chúng ta đã sử dụng thuộc tính
layout_weight được gán giá trị là 1. Giá trị này
đã chia đều khoảng trống khả dụng của layout
cha thành 2 phần đều nhau dành cho 2 layout
con.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 3:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#0000FF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00FF00" />
</LinearLayout>
Kết Quả:
Trong ví dụ trên, tổng layout_weight của 2 layout
con là 3, như vậy chúng ta muốn chia layout cha
thành 3 phần và layout một màu xanh nước biển
chiếm 2 phần, layout hai màu xanh lá cây chiếm
một phần. Nhưng kế quả lại hoàn toàn ngược lại
những gì chúng ta mong đợi.
Vấn đề nằm ở giá trị của
layout_height!!!!
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 4:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#0000FF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00FF00" />
</LinearLayout>
Kết Quả:
Bây giờ chúng ta đã chỉnh lại giá trị của
layout_height và kết quả đã như chúng ta
mong đợi.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 5:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:text="small"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_height="wrap_content"
android:text="A very very long text that needs to wrap."
android:layout_width="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Kết Quả:
Ở đây chúng ta mong rằng khoảng trắng của
layout cha sẽ được chia đều cho 2 dòng chữ theo
chiều ngang. Nhưng kết quả không như mong
đợi. Dòng chữ “A very very long text that needs
to wrap” đã chiếm nhiều khoảng trắng hơn dòng
chữ “small”.
Hãy chú ý chiều của layout cha lúc này là
chiều ngang chứ không còn là chiều dọc như
các ví dụ trên.!!!
Nguyên nhân là do Android đã tiến hành chia
khoảng trống đủ cho 2 dòng chữ theo giá trị
layout_width trước khi chia khoảng trống khả
dụng cho layout_weight. Do đó giá trị mà thuộc
tính layout_weight phân chia là khoảng trống khả
dụng sau khi đã chia cho 2 dòng chữ.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 6:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:text="small"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:layout_height="wrap_content"
android:text="A very very long text that needs to wrap."
android:layout_width="0dp"
android:layout_weight="1" />
</LinearLayout>
Kết Quả:
Sau khi tùy chỉnh giá trị của layout_width sẽ
kết quả đã như chúng ta mong đợi.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 7: Sử dụng thuộc tính weightSum.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:weightSum="4"
android:padding="5dp">
<LinearLayout
android:background="#0000FF"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="2" />
<LinearLayout
android:background="#00FF00"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
</LinearLayout>
Trong ví dụ này chúng ta sử dụng một thuộc tính là weightSum. Thuộc tính này
sẽ tự chia layout thành 4 phần bằng nhau. Sau đó theo giá trị thuộc tính weight
trong 2 layout con thì 2 layout này chiếm 3 phần của layout cha, vậy còn lại 1
phần của layout còn trống.
Kết Quả:
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Vấn đề 1:
Đây là giao diện được thiết kế với màn hình điện thoại
3.2’’, độ phân giải 320 X 480 mdpi.
Đây là kết quả khi giao diện trên chạy trên điện
thoại có màn hình 10.1” với độ phân giải
1280 X 800 mdpi.
Khi chúng ta thiết kế giao diện trên một màn hình
điện thoại có giao diện cố định, khi đem giao diện
đó sang màn hình điện thoại có kích thước khác
sẽ xảy ra hiện tượng giao diện bị vỡ hoặc bị teo
nhỏ lại như trên. Vậy làm sao giải quyết vấn đề
này?
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 8:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button" />
</LinearLayout>
Thuộc tính weightSum sẽ tự chia layout cha thành 2
phần bằng nhau.
Kết Quả:
Đây là giao diện được thiết kế trên màn hình 2.7”,
độ phân giải 240 X 320 ldpi.
Đây là kết quả sau khi
chuyển qua màn hình
10.1” độ phân giải
1280 X 800 mdpi.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 9:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:text="this is text" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button" />
</LinearLayout>
Đây là giao diện được thiết kế trên màn hình 3.7”, độ phân giải 480 x 800 hdpi.
Chúng ta thấy rằng chưa tận dụng được hết các
khoảng trống của layout cha dành cho EditText
và Button.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Tùy Chỉnh:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_weight="3"
android:text="this is text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button" />
</LinearLayout>
Chuyển giao diện qua màn hình độ phân giải 10.1” độ phân giải
1280 X 800 mdpi.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Ví dụ 10:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button" />
</LinearLayout>
Kết Quả:
Với không sử dụng thuộc tính weight chúng
ta được kết quả như hình bên.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Tùy chỉnh:
Sử dụng thuộc tính weightSum và weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button"
android:layout_weight="1"/>
</LinearLayout>
Chuyển đổi giao diện qua màn hình 3.7”, độ phân giải 480x854 hdpi.
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU
Link Tham Khảo:
http://blog.stylingandroid.com/archives/297
http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/
http://rlaenen.blogspot.com/2012/04/android-layoutweight-attribute-how-
to.html
http://muthumanict.wordpress.com/2012/03/05/androidlayout_weight/
http://blog.burakdede.com/how-android-layout_weight-works/
Nguyễn Anh Tiến Khoa CNTT – Đại Học Công Nghệ Sài Gòn - STU