Hướng dẫn sử dụng Android FrameLayout

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

1- Android FrameLayout

FrameLayout là bố cục (layout) đơn giản, nó có thể chứa một hoặc nhiều View con, và chúng có thể chồng chéo (overlap) lên nhau. bạn cần sử dụng thuộc tính android:layout_gravity cho các View con để định vị chúng.
Cụ thể FrameLayout có 9 vùng trọng lực (gravity) giống như hình minh họa dưới đây. Chú ý rằng: Đó là các vùng theo trí tưởng tượng, nó không có nghĩa là bề mặt của FrameLayout được chia làm 9 phần.
Khi một View được thêm vào FrameLayout, theo mặc định nó sẽ nằm tại vùng trọng lực "left|top". Hãy xem một ví dụ, tôi thêm 2 Button vào một FrameLayout, theo mặc định chúng sẽ nằm tại vùng trọng lực "left|top" và bạn sẽ nhìn thấy chúng chồng chéo lên nhau.
Sử dụng thuộc tính android:layout_gravity cho button để điều chỉnh vị trí của nó.
Giá trị của android:layout_gravity là sự kết hợp của một trong các giá trị sau:
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  
Dưới đây là hình ảnh minh họa việc đặt một VideoView và một MediaController vào một FrameLayout, nó tiết kiệm không gian của ứng dụng và mang lại trải nghiệm tốt cho người dùng.

2- Ví dụ FrameLayout

Trong ví dụ này tôi sẽ đặt một ImageView và 2 TextView vào trong một FrameLayout, sau đó sét đặt vị trí cho chúng thông qua thuộc tính android:layout_gravity.
Xem trước ví dụ:
Show in Portraint screen
Show in Landscape screen
OK. Trên Android Studio tạo mới một project:
  • File > New > New Project > Empty Activity
    • Name: FrameLayoutExample
    • Package name: org.o7planning.framelayoutexample
    • Language: Java
Chuẩn bị một file ảnh:
halong.png
Copy file ảnh trên vào thư mục "drawable" của project:
Thiết kế giao diện của ứng dụng:
Sét đặt các giàng buộc (constraint) cho FrameLayout:
Sét đặt các thuộc tính quan trọng cho ImageView để đảm bảo nó lấp đầy FrameLayout.
* imageView *
<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    app:srcCompat="@drawable/halong" />
Sét đặt thuộc tính android:layout_gravity cho các TextView:
Sét đặt text, textColor cho các TextView:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/halong" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|left"
            android:text="Halong Bay, Vietnam"
            android:textColor="#FFFFFF" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:text="Photo by intrepidtravel.com"
            android:textColor="#FFFFFF" />

    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.framelayoutexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Gravity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

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