如何在 Android 中创建入职屏幕?
你好极客,今天我们将学习如何在 android studio 中将 Onboarding Screen 添加到我们的 android 应用程序中,以便我们可以为应用程序的用户提供更好的用户体验。
什么是入职屏幕?
入职屏幕可以理解为应用程序的虚拟拆箱。用户通过一系列屏幕,最终将用户引导至应用程序界面。入职屏幕的目标或目的:
- 欢迎用户并激发他们对未来应用的兴趣。
- 讲述应用程序的特性或功能。
- 允许用户注册或登录。
- 收集有关用户兴趣的信息(例如,当我们第一次打开 Spotify 应用程序时,它会要求用户选择他/她喜欢的歌手)。
我们将在本文中构建什么?
这是我们将在本文中创建的入职屏幕的示例视频。请注意,我们将使用Java语言来实现这个项目。
分步实施
第 1 步:创建一个新项目
- 打开一个新项目。
- 我们将使用Java语言处理 Empty Activity。保持所有其他选项不变。
- 您可以在方便时更改项目的名称。
- 将有两个名为activity_main.xml 和 MainActivity 的默认文件。Java。
如果您不知道如何在 Android Studio 中创建新项目,那么您可以参考如何在 Android Studio 中创建/启动新项目?
第 2 步:导航到 Build scripts -> build.gradle(module) 文件并在其中添加以下依赖项
implementation 'com.ramotion.paperonboarding:paper-onboarding:1.1.3'
添加此依赖项后,单击立即同步以保存所有更改。
步骤 3:使用 activity_main.xml 文件
导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。
XML
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 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 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;
}
}
第 4 步:使用MainActivity。 Java文件
转到主活动。 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 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 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;
}
}
恭喜,我们已经成功地为我们的应用程序制作了入职屏幕。最终输出如下所示。
输出: