Ads Banner Header
  1. Ban quản trị chúng tôi sẽ tiến hành rà soát Spamer và các bài viết không đúng Box sẽ bị xóa sạch, Các spamer cố tình sẽ bị Block IP vĩnh viễn . Xin cảm ơn bạn Khách đã đọc. List Ban
    icon-thietkeweb Công ty thiết kế website chuyên nghiệp Megaweb
    icon-thietkeweb Dịch vụ thiết kế website chuyên nghiệp tại Hà Nội
    icon-thietkeweb Dịch vụ thiết kế website bán hàng chuyên nghiệp
    icon-thietkeweb Dịch vụ thiết kế website bất động sản chuyên nghiệp
    icon-thietkewebhaiphong Làm dịch vụ thiết kế website theo yêu cầu

Bài học các mẫu layout android

Thảo luận trong 'Tuyển sinh' bắt đầu bởi tuan11nguyen, 27/06/2017.

  1. tuan11nguyen

    tuan11nguyen Thành viên tích cực

    Bài viết:
    144
    Đã được thích:
    0
    Trong phần này chúng ta sẽ Tìm hiểu một số mẫu layout trong Android.

    Layout sẽ quy định kích thước cũng như sự xếp đặt của những View trên màn hình. Android với toàn bộ lớp layout, LinearLayout sẽ xếp đặt những View trên một hàng hoặc một cột, FrameLayout chỉ hiển thị một View, RelativeLayout xếp đặt những View theo mối quan hệ giữa chúng, GridLayout xếp đặt những View theo dạng bảng.

    Hiển thị ảnh với FrameLayout
    Bên trong thư mục res của project với những thư mục drawable để chúng ta đặt những file tài nguyên vào trong ngừng thi côngĐây và chúng ta với thể tham chiếu tới chúng trong file layout tiện lợi. chẳng hạn ở đây mình đặt một file ảnh với tên zamok.jpg trong thư mục drawable-hdpi.

    main.xml


    android:layout_width="match_parent"
    android:src="@drawable/zamok" />

    Trong file main.xml, chúng ta tiêu dùng FrameLayout làm cho ViewGroup chính, bên trong FrameLayout này chúng ta đặt một thẻ ImageView.



    tính chất layout_gravity sẽ xếp đặt FrameLayout ở những vị trí khác nhau, ở đây top tức thị đưa lên đầu màn hình, tuy nhiên còn với những trị giá khác như bottom, left, right, center... tính chất layout_width và layout_height với trị giá wrap_content sẽ quy định kích thước layout vừa đủ để bọc lấy những thành phần bên trong nó.



    android:layout_width="match_parent"
    android:src="@drawable/zamok" />
    Lớp ImageView sẽ hiển thị ảnh, tuyến phố dẫn tới file ảnh được truyền vào tính chất android:src.


    LinearLayout
    Trong ví dụ dưới đây, chúng ta sẽ thiết kế một hàng những Button.

    main.xml


    android:eek:rientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <>
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="Button2" />

    <>
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="Button3" />

    <>
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="Button4" />


    Lớp LinearLayout sẽ xếp đặt những View theo hàng hoặc theo cột.



    android:eek:rientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    tính chất width và height với trị giá match_parent tức thị vừa khít với kích thước của vật dụng.




    android:layout_width="wrap_content"
    android:text="Button1" />
    Mỗi Button với width và height là wrap_content, tức thị kích thước của chúng vừa đủ để bọc lấy đoạn text bên trong nó.

    Xem những bài lập trình android cơ bản
    Thiết kế bằng Java
    Ngoài việc thiết kế trong file layout, chúng ta cũng với thể thiết kế trong file Activity.

    MainActivity.java



    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.Button;
    import android.widget.LinearLayout;


    Ở đây chúng ta cũng thiết kế lại giống như ví dụ trước là đặt 4 Button nằm trên cùng một hàng.

    một
    hai
    Button btn1 = new Button(this);
    btn1.setText("Button");
    Để tạo Button thì chúng ta tiêu dùng tới lớp android.widget.Button, phương thức setText() sẽ thiết lập nội dung Button.






    Phương thức setContentView() sẽ nhận đối tượng LinearLayout thay vì nhận ID của file XML như trước.

    Kết hợp những Layout
    Chúng ta với thể lồng những layout vào nhau để phối hợp chúng lại.


    Trong ví dụ này chúng ta lồng LinearLayout vào bên trong Framelayout.


    FrameLayout với kích thước vừa đủ để bọc lấy những phần tử bên trong nó. những phần tử bên trong FrameLayout sẽ nằm chính giữa màn hình theo tính chất layout_gravity là center.


    LinearLayout bên trong FrameLayout đựng 4 Button được xếp đặt theo chiều dọc.



    RelativeLayout
    RelativeLayout xếp đặt những View dựa trên vị trí của chúng với nhau hoặc với View cha.


    Trong ví dụ này chúng ta hiển thị một EditText và hai Button.


    EditText sẽ với bề ngang chiếm toàn bộ màn hình, chiều cao chỉ vừa đủ bọc lấy đoạn text bên trong. tuy nhiên tính chất marginTop quy định EditText phương pháp cạnh trên của màn hình 10dp.



    Chúng ta với hai Button, trong chậm triển khai Button “Send” sẽ được đặt phía dưới EditText nhờ vào thuộc tính layout_below, thuộc tính này nhận id của EditText.



    Button “Clear” được đặt phía dưới EditText và nằm phía bên phải Button “Send”, ở đây chúng ta dùng thêm thuộc tính layout_toRightOf để chỉ định View nằm phía bên phải của View nào.

    GridLayout
    GridLayout sắp đặt các View con theo dạng bảng, bảng bao gồm nhiều hàng và cột, hàng và cột giao nhau tạo thành các ô, 1 View mang thể chiếm 1 hoặc nhiều ô. thuộc tính gravity cho biết View sẽ được đặt ở đâu trong bảng.

    main.xml



    Trong thí dụ này chúng ta mang 1 GridLayout cất 1 hàng ngũ các Button.


    thuộc tính layout_row biểu thị số hàng còn thuộc tính layout_column biểu thị số cột, ở đây hàng 0 cột 0 nghĩa là Button này nằm ở góc trái phía trên bảng.


    Button ở đoạn code trên nằm ở ô (0,1) nhưng mang chiều ngang dài thêm 2 ô do được thiết lập trong thuộc tính columnSpan nhưng chúng ta phải khai báo thêm thuộc tính layout_gravity là fill_horizontal, nếu không thì Button này vẫn sẽ mang kích thước như cũ.

    không những thế bạn mang thể Nhận định học lập trình online

    như vậy Button ở đoạn code trên nằm ở hàng 1 cột 0, thuộc tính layout_rowSpan quy định chiều cao của Button này dài thêm 3 hàng, thuộc tính columnSpan quy định Button này dãn kích thước theo chiều ngang thêm 5 cột nữa, thuộc tính layout_gravity là fill sẽ lấp đầy khoảng trống được dãn ra chậm triển khai.



    Button ở đoạn code trên nằm ở giữa cột nhờ vào thuộc tính layout_gravity là center_horizontal.
     
Đang tải...