sử dụng thuộc tính layout weight với android

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. [...]... android: weightSum="3"> ... 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 ... encoding="utf-8"?> ... 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-howto.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ệ... android :layout_ height="wrap_content" android :layout_ weight= "1" android: text="button" /> 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: . android :layout_ height="wrap_content" android: text="small" android :layout_ width="0dp" android :layout_ weight= "1" /> <TextView android :layout_ height="wrap_content". android: weightSum="2" > <Button android: id="@+id/button1" android :layout_ width="0dp" android :layout_ height="wrap_content" android :layout_ weight= "1". <LinearLayout android :layout_ width="match_parent" android :layout_ height="match_parent" android: background="#0000FF" /> <LinearLayout android :layout_ width="match_parent"