openplanning

Hướng dẫn và ví dụ Android LinearLayout

Xem thêm các chuyên mục:

  1. Android LinearLayout
  2. android:layout_weight
  3. android:layout_gravity
  4. android:padding
  5. LinearLayout spacing
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Android LinearLayout

LinearLayout là một ViewGroup nó sắp xếp các View con theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang. Bạn có thể chỉ định hướng (orientation) của nó bằng cách sử dụng thuộc tính: android:orientation. 

<!-- Horizontal LinearLayout (Default) -->
<LinearLayout
    ...
    android:orientation="horizontal">

   ...
</LinearLayout>


<!-- Vertical LinearLayout -->
<LinearLayout
    ...
    android:orientation="vertical">

   ...
</LinearLayout>
Ví dụ: Sử dụng mã Java để tạo LinearLayout, và thêm các View con vào LinearLayout: 

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);

2- android:layout_weight

android:layout_weight là một thuộc tính quan trọng được sử dụng cho các View con của LinearLayout, nó chỉ định có bao nhiêu không gian mà View con sẽ chiếm trong View cha (LinearLayout) (Theo chiều ngang hoặc thẳng đứng). Một giá trị layout_weight lớn hơn 0 cho phép View con mở rộng để điền vào bất kỳ không gian còn lại trong View cha. Các View con có thể được chỉ định một giá trị layout_weight > 0, và sau đó bất kỳ không gian còn lại trong View cha sẽ được gán cho các View con theo tỷ lệ layout_weight của chúng.
Khi tất cả các View con có android:layout_weight=0, bạn sẽ nhìn thấy một không gian trống trong View cha (LinearLayout):
Các View con có android:layout_weight>0 sẽ chiếm lấy vùng không gian trống của View cha (LinearLayout):
Vùng không gian trống của View cha (LinearLayout) sẽ được phân bổ cho các View con theo theo tỷ lệ layout_weight của chúng.
Thuộc tính android:layout_weight cũng có ý nghĩa tương tự trong một LinearLayout thẳng đứng:

3- android:layout_gravity

Thuộc tính android:layout_gravity được áp dụng cho một View con để chỉ định vị trí tương đối của View con bên trong View cha (LinearLayout).
Constant in Java Value Description
Gravity.LEFT left  
Gravity.CENTER_HORIZONTAL center_horizontal  
Gravity.RIGHT right  
Gravity.CLIP_HORIZONTAL clip_horizontal  
Gravity.FILL_HORIZONTAL fill_horizontal  
     
Gravity.TOP top  
Gravity.CENTER_VERTICAL center_vertical  
Gravity.BOTTOM bottom  
Gravity.CLIP_VERTICAL clip_vertical  
Gravity.FILL_VERTICAL fill_vertical  
     
Gravity.START start  
Gravity.END end  
Gravity.CENTER center  
Gravity.FILL fill  

4- android:padding

Padding là khoảng không gian nằm trong LinearLayout (Nằm trong viền), và bao quanh 4 mặt của nội dung.
Bạn có thể sét đặt padding cho LinearLayout thông qua các thuộc tính sau:
  • android:padding
  • android:paddingTop
  • android:paddingRight
  • android:paddingBottom
  • android:paddingLeft

<LinearLayout
    ...
    android:orientation="horizontal"
    android:paddingTop="20dp"
    android:paddingRight="30dp"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />

</LinearLayout>

5- LinearLayout spacing

Đôi khi bạn muốn thiết lập khoảng không gian giữa các View con của LinearLayout, có một vài cách để bạn thực hiện điều này:
android:layout_margin
Áp dụng thuộc tính android:layout_margin cho tất cả các View con của LinearLayout sẽ giúp thiết lập khoảng cách giữa chúng.
* layout_margin (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                          LinearLayout.LayoutParams.WRAP_CONTENT, 0);
layoutParams.setMargins(30, 20, 30, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);
Space View
Android 4.0+ (API Level 14+) hỗ trợ một kiểu View mới đó là Space, nó giúp bạn thêm một không gian trống vào giao diện. Bạn có thể sử dụng Space để ngăn cách giữa các View con bên trong LinearLayout. 

<LinearLayout
    ...
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:background="#EFF6E7"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />

    <Space
        android:layout_width="10dp"
        android:layout_height="wrap_content"
        android:layout_weight="0" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Long Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
</LinearLayout>
* Add Space (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

LinearLayout.LayoutParams layoutParams2
        = new LinearLayout.LayoutParams(15,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

// Create a Space View.
Space space = new Space(this);
space.setLayoutParams(layoutParams2);
linearLayout.addView(space);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);
android:divider
Android 3.0+ (API Level 11+) cho phép bạn thêm một Divider (Giải phân cách) vào giữa 2 View con trong LinearLayout, thậm chí bạn có thể chỉ định kiểu dáng, mầu sắc cho Divider.
* Divider *

<LinearLayout
    ...
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
  
     <!-- Divider -->
    <View
        android:id="@+id/divider"
        android:layout_width="15dp"
        android:layout_height="match_parent"
        android:layout_weight="0"
        android:background="?android:attr/listDivider" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Long Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
</LinearLayout>
* Add Divider (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

LinearLayout.LayoutParams layoutParams2
        = new LinearLayout.LayoutParams(15,
        LinearLayout.LayoutParams.MATCH_PARENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

// Create a Divider.
View divider = new View(this);
// android:background="?android:attr/listDivider"
divider.setBackgroundResource(android.R.drawable.divider_horizontal_bright);
linearLayout.addView(divider, layoutParams2);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);
Xem thêm bài viết chi tiết về Divider, nó giúp bạn tùy biến Divider phù hợp với ứng dụng của bạn:
  • TODO Link?

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.