Как создать экран подключения на Android?

создать экран подключения на Android Изучение

Сегодня мы узнаем, как мы можем добавить экран подключения к нашему приложению для Android в студии Android, чтобы обеспечить лучший пользовательский интерфейс для пользователя приложения.

Что такое экран подключения?

Экран подключения можно понимать как виртуальную распаковку приложения. Пользователи проходят через серию экранов, которые, наконец, направляют пользователей к интерфейсу приложения. Цели или задачи экрана адаптации:

  • Приветствует пользователя и радует его предстоящим приложением.
  • Расскажите об особенностях или функциях приложения.
  • Разрешить пользователям регистрироваться или входить в систему.
  • Соберите информацию об интересах пользователя (например, когда мы открываем приложение Spotify в первый раз, оно просит пользователя выбрать певцов, которые ему нравятся).

Что мы собираемся построить в этой статье?

Вот пример видео экрана адаптации, который мы собираемся создать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

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

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

  • Откройте новый проект.
  • Мы будем работать над Empty Activity с языком Java. Остальные параметры оставьте без изменений.
  • Вы можете изменить название проекта по своему усмотрению.
  • По умолчанию будет два файла с именами xml и MainActivity.java.

Шаг 2. Перейдите к файлу Build scripts -> build.gradle (модуль) и добавьте в него следующую зависимость.

реализация ’com.ramotion.paperonboarding: paper-onboarding: 1.1.3′

После добавления этой зависимости нажмите «Синхронизировать» сейчас, чтобы сохранить все изменения.

Шаг 3. Работа с файлом activity_main.xml

Перейдите к приложению> res> layout> activity_main.xml и добавьте в этот файл приведенный ниже код. Ниже приведен код файла activity_main.xml.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Here frame layout is used so that different 
     fragments of our onboarding screen can be
     changed within the same layout-->
<FrameLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</FrameLayout>

Шаг 4: Работа с файлом MainActivity.java

Перейдите в файл MainActivity.java и ознакомьтесь со следующим кодом. Ниже приведен код файла MainActivity.java. Комментарии добавляются внутри кода для более подробного понимания кода.

Читайте также:  Как свести к минимуму отвлекающие факторы при работе из дома на удалёнке

Java

import android.graphics.Color;
import android.os.Bundle;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
 
import com.ramotion.paperonboarding.PaperOnboardingFragment;
import com.ramotion.paperonboarding.PaperOnboardingPage;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
    private FragmentManager fragmentManager;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        fragmentManager = getSupportFragmentManager();
 
        // new instance is created and data is took from an 
        // array list known as getDataonborading
        final PaperOnboardingFragment paperOnboardingFragment = PaperOnboardingFragment.newInstance(getDataforOnboarding());
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
 
        // fragmentTransaction method is used
        // do all the transactions or changes
        // between different fragments
        fragmentTransaction.add(R.id.frame_layout, paperOnboardingFragment);
 
        // all the changes are committed
        fragmentTransaction.commit();
    }
 
    private ArrayList<PaperOnboardingPage> getDataforOnboarding() {
 
        // the first string is to show the main title ,
        // second is to show the message below the
        // title, then color of background is passed ,
        // then the image to show on the screen is passed
        // and at last icon to navigate from one screen to other
        PaperOnboardingPage source = new PaperOnboardingPage("Gfg", "Welcome to GeeksForGeeks", Color.parseColor("#ffb174"),R.drawable.gfgimg, R.drawable.search);
        PaperOnboardingPage source1 = new PaperOnboardingPage("Practice", "Practice questions from all topics", Color.parseColor("#22eaaa"),R.drawable.practice_gfg, R.drawable.training);
        PaperOnboardingPage source2 = new PaperOnboardingPage("", " ", Color.parseColor("#ee5a5a"),R.drawable.gfg_contribute, R.drawable.contribution);
 
        // array list is used to store
        // data of onbaording screen
        ArrayList<PaperOnboardingPage> elements = new ArrayList<>();
 
        // all the sources(data to show on screens)
        // are added to array list
        elements.add(source);
        elements.add(source1);
        elements.add(source2);
        return elements;
    }
}

Поздравляем, мы успешно создали экран адаптации для нашего приложения.

Оцените статью
bestprogrammer.ru
Добавить комментарий