FrameLayout в Android

Опубликовано: 10 Января, 2023

Android Framelayout — это подкласс ViewGroup, который используется для указания положения нескольких представлений, размещенных друг над другом для представления одного экрана просмотра. Как правило, мы можем сказать, что FrameLayout просто блокирует определенную область на экране для отображения одного представления. Здесь все дочерние представления или элементы добавляются в формате стека, что означает, что последний добавленный дочерний элемент будет отображаться в верхней части экрана. Но мы можем добавить несколько дочерних представлений и управлять их положением только с помощью атрибутов гравитации в FrameLayout.

FrameLayout можно определить с помощью кода ниже:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    // Add items or widgets here
</FrameLayout>

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». Код для этого был предоставлен как на Java, так и на языке программирования Kotlin для Android.

Шаг 2: Работа с файлами XML

Далее переходим к файлу activity_main.xml , представляющему UI проекта. Ниже приведен код файла activity_main.xml . Комментарии добавляются внутри кода, чтобы понять код более подробно. В этом файле мы объявляем FrameLayout и начинаем добавлять несколько представлений, таких как textView, editText, Button и т. д. Все представления размещаются друг на друге, но мы смещаем их в соответствии с нашими требованиями. Во-первых, мы добавляем изображение на задний план и добавляем другие виджеты сверху. На экране мы видим красивую страницу входа с фоновым изображением.

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">
  
    <TextView
        android:id="@+id/txtvw1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="10dp"
        android:background="#286F24"
        android:padding="10dp"
        android:text="Login Details"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />
  
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:background="#ECEEE8"
        android:hint="Enter your email"
        android:padding="10dp" />
  
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:background="#ECEEE8"
        android:hint="Enter password"
        android:padding="10dp" />
  
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="110dp"
        android:layout_marginTop="240dp"
        android:text="Submit" />
</FrameLayout>

Шаг 3: Работа с файлом MainActivity

Перейдите в файл MainActivity и обратитесь к следующему коду. Ниже приведен код файла MainActivity. Комментарии добавляются внутри кода, чтобы понять код более подробно. Когда мы создали макет, нам нужно загрузить ресурс макета XML из нашего метода обратного вызова onCreate() и получить доступ к элементу пользовательского интерфейса из XML с помощью findViewById .

Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.EditText
import android.widget.TextView
  
class MainActivity : AppCompatActivity() {
  
    private lateinit var textView: TextView
    private lateinit var editText1: EditText
    private lateinit var editText2: EditText
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // finding the UI elements
  
        textView = findViewById(R.id.txtvw1)
        editText1 = findViewById(R.id.editText1);
        editText2 = findViewById(R.id.editText2);
    }
}

Java

import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    TextView textView;
    EditText editText1, editText2;
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // finding the UI elements
  
        textView = findViewById(R.id.txtvw1);
        editText1 = findViewById(R.id.editText1);
        editText2 = findViewById(R.id.editText2);
    }
}

Выход:

Нам нужно запустить с помощью виртуального устройства Android (AVD), чтобы увидеть результат.

Java

FrameLayout в Android

FrameLayout можно определить с помощью кода ниже:

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Шаг 2: Работа с файлами XML

XML

Шаг 3: Работа с файлом MainActivity

Kotlin

Java

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ