Mục lục
Hướng dẫn và ví dụ Android FrameLayout
Xem thêm các chuyên mục:
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
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.TOP | top | |
| Gravity.CENTER_VERTICAL | center_vertical | |
| Gravity.BOTTOM | bottom | |
| Gravity.START | start | |
| Gravity.END | end | |
| Gravity.CENTER | center | |
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.
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);
}
}
*
