openplanning

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

  1. Android FrameLayout
  2. Ví dụ FrameLayout

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);
    }
}

Các hướng dẫn lập trình Android

Show More