如何在Android中实现闪屏和介绍滑块

DebugUsery
324 阅读6分钟

在Android中实现闪屏和介绍滑块

飞溅屏是应用程序启动后的一个介绍屏幕。飞溅屏是至关重要的，因为它们是用户与应用程序的第一次互动。大多数闪屏都包含公司的标志、动画、图像或许多其他功能。

简介

闪屏是至关重要的，因为它允许有足够的时间来获取数据，同时也能识别一个应用程序。安卓应用程序中的介绍性滑块提供指示或显示应用程序所提供的功能。介绍滑块很有用，特别是在那些相当复杂和有许多功能的应用程序中。

闪屏和介绍滑块的用途

  • 闪屏为数据的获取提供了足够的时间。
  • 介绍滑块用于说明一个应用程序的功能。

有用的术语

  • 闪屏 - 这是指应用程序启动后的一个介绍屏幕。
  • 介绍滑块 - Android应用程序中的一个 "幻灯片"，它给出指示或显示一个应用程序提供的功能。
  • View pager - Android应用程序中的一个类，允许用户在应用程序中向左或向右翻转查看数据。
  • Pager Adapter - 这指的是一个基类，提供适配器来填充ViewPager 里面的页面。

先决条件

  • 请确保你已经安装了AndroidStudio。
  • 读者应该对Java和XML有一个基本的了解。
  • 读者应该对构建Android应用程序有一个基本的了解。

A) 闪屏

如前所述，闪屏是应用程序启动后的一个介绍屏幕。

创建闪屏的方法有很多。

  1. 使用启动器主题。(最好的)
  2. 使用带有闪屏活动的启动器主题。(还不错)
  3. 使用定时器。(不好的)
  4. 使用智能定时器。(丑陋）

在本节中，我们将使用启动器主题为我们的应用程序创建一个闪屏。

第1步 - 创建一个新的Android Studio项目

打开Android Studio，选择一个空的活动。我们将命名我们的项目为SplashnSlides。点击 "完成"，等待项目的构建。

Creating an Android Studio project

第2步 - 设计Splash屏幕

对于这个项目，我们将使用一张图片作为我们的闪屏。另外，也可以决定导入一个矢量资产或使用剪贴画。

首先，创建一个布局资源文件。右键点击res目录下的drawable文件夹，点击New - > Drawable Resource File。

我们将命名我们的文件为splash_image.xml。

点击确定。

这个文件将把我们的图像设置为drawable，它将作为我们的闪屏。

在splash_image.xml中添加以下代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/splash" android:gravity="center"/>
</layer-list>

注意：我们正在使用<layer-list> 标签，以指定一个人想要在他们的闪屏绘图中拥有的不同层。

第3步 - 更新themes.xml

在themes目录下的themes.xml中，我们将为我们的闪屏添加一个样式。在这个样式中，我们将设置windowbackground 为我们的drawable，状态栏的颜色与我们drawable的背景颜色相同。

在你的themes.xml中添加以下代码。

<style name="splashScreen" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:statusBarColor" tools:ignore="NewApi">@color/colorPrimary</item>
</style>

第4步--更新Android Manifest

打开AndroidManifest.xml，将<application> 标签下的主题更新为我们在themes.xml中创建的样式。

android:theme="@style/splashScreen">

第5步 - 更新MainActivity.java

最后，我们将在我们的theme.xml文件中设置主主题，使其在我们的MainActivity之前运行。在我们的onCreate 方法中，添加下面这行代码。

setTheme(R.style.Theme_SplashnSlides);

注意：这应该在setContentView语句之前完成。

就这样了。很简单吧？

让我们运行这个应用程序。我们有一个闪亮的屏幕。现在让我们努力获得介绍滑块。

Spash screen

B) 介绍性滑块

在Android应用程序中，介绍性滑块通常用于提供指示或显示应用程序所提供的功能。在本节中，我们将在我们的应用程序中实现介绍滑块。

第1步 - 为我们的介绍滑块设计用户界面

在我们的MainActivity布局资源文件中，我们将添加一个ViewPager ，使用户能够翻阅不同的滑块。我们还将添加一个linear layout ，它将包含显示不同幻灯片的圆点，最后，还有两个用于访问下一张或上一张幻灯片的按钮。

在 activity_main.xml 文件中添加以下代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:id="@+id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="22dp"
        android:gravity="center"
        android:orientation="horizontal">
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha=".5"
        android:layout_above="@id/layoutDots"
        android:background="@android:color/white" />
    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:text="NEXT"
        android:textColor="@android:color/white" />
    <Button
        android:id="@+id/btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@null"
        android:text="SKIP"
        android:textColor="@android:color/white" />
</RelativeLayout>

接下来，我们将为我们的滑块创建布局资源文件。右键单击res目录下的布局文件夹。选择新建->布局资源文件，将文件命名为slider_1.xml，然后选择ok。

对于滑块的UI布局，导入一个drawable，并将其设置为背景。

重复同样的过程，直到我们总共得到三个滑块。

这就是我们滑块布局资源文件中的代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/slider_1">
</androidx.constraintlayout.widget.ConstraintLayout>

第2步 - 创建一个Intromanager类

创建一个新的Java类，并将其命名为**Intomanager。**这个类将使用SharedPreferences ，该类保持偏好名称和一个布尔状态'true'，如果应用程序首次启动，则显示介绍滑块。

在Intromanager.java中添加以下代码

public class Intromanager {
    SharedPreferences pref;
    SharedPreferences.Editor editor;
    Context context;
    public Intromanager(Context context)
    {
        this.context=context;
        pref=context.getSharedPreferences("first",0);
        editor = pref.edit();
    }
    public void setFirst(boolean isFirst)
    {
        editor.putBoolean("check",isFirst);
        editor.commit();
    }
    public boolean Check()
    {
        return pref.getBoolean("check",true);
    }
}

第3步--为我们的介绍性滑块添加功能

在我们的MainActivity中，我们将添加几行代码来执行以下任务。

  • 导入我们的Intromanager 类，它将检查一个应用程序是否首次启动。
  • 为导航按钮（上一页和下一页）添加功能。
  • 创建一个addBottomDots 方法，为我们的介绍滑块的点设置功能。
  • 创建getItem 方法，我们将在其中为每张幻灯片指定一些功能。
  • 扩展一个PagerAdapter 类，在ViewPager 内填充页面。

在MainActivity.java中添加以下代码。

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private Intromanager intromanager;
    private ViewPagerAdapter viewPagerAdapter;
    private TextView[] dots;
    Button next,skip;
    private LinearLayout dotsLayout;
    private int[] layouts;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(R.style.Theme_SplashnSlides);
        setContentView(R.layout.activity_main);

    // Importing the intromanager class, which will check if this is the first time the application has been launched.
        intromanager = new Intromanager(this);
        if(!intromanager.Check())
        {
            intromanager.setFirst(false);
            Intent i = new Intent(MainActivity.this,Home.class);
            startActivity(i);
            finish();
        }
        if(Build.VERSION.SDK_INT>=21)
        {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }
        setContentView(R.layout.activity_main);

    //Objects
        viewPager = (ViewPager)findViewById(R.id.view_pager);
        dotsLayout=(LinearLayout)findViewById(R.id.layoutDots);
        skip=(Button)findViewById(R.id.btn_skip);
        next = (Button)findViewById(R.id.btn_next);
        layouts = new int[]{R.layout.slider_1,R.layout.slider_2,R.layout.slider_3};
        addBottomDots(0);
        changeStatusBarColor();
        viewPagerAdapter = new ViewPagerAdapter();
        viewPager.setAdapter(viewPagerAdapter);
        viewPager.addOnPageChangeListener(viewListener);

    //For the next and previous buttons
        skip.setOnClickListener(view -> {
            Intent i = new Intent(MainActivity.this,Home.class);
            startActivity(i);
            finish();
        });

        next.setOnClickListener(view -> {
            int current = getItem(+1);
            if(current<layouts.length)
            {
                viewPager.setCurrentItem(current);
            }
            else
            {
                Intent i = new Intent(MainActivity.this,Home.class);
                startActivity(i);
                finish();
            }
        });

    }

    //Giving the dots functionality
    private void addBottomDots(int position)
    {

        dots = new TextView[layouts.length];
        int[] colorActive = getResources().getIntArray(R.array.dot_active);
        int[] colorInactive = getResources().getIntArray(R.array.dot_inactive);
        dotsLayout.removeAllViews();
        for(int i=0; i<dots.length; i++)
        {
            dots[i]=new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(colorInactive[position]);
            dotsLayout.addView(dots[i]);
        }
        if(dots.length>0)
            dots[position].setTextColor(colorActive[position]);
    }

    private int getItem(int i)
    {
        return viewPager.getCurrentItem() + i;
    }
    ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener()
    {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

            addBottomDots(position);
            if(position==layouts.length-1)
            {
                next.setText("PROCEED");
                skip.setVisibility(View.GONE);
            }
            else
            {
                next.setText("NEXT");
                skip.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    private void changeStatusBarColor()
    {
        if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP)
        {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }
    //PagerAdapter class which will inflate our sliders in our ViewPager
    public class ViewPagerAdapter extends PagerAdapter
    {
        private LayoutInflater layoutInflater;

        @Override
        public Object instantiateItem(ViewGroup myContainer, int mPosition) {
            layoutInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View v = layoutInflater.inflate(layouts[mPosition],myContainer,false);
            myContainer.addView(v);
            return v;
        }

        @Override
        public int getCount() {
            return layouts.length;
        }

        @Override
        public boolean isViewFromObject(View mView, Object mObject) {
            return mView==mObject;
        }

        @Override
        public void destroyItem(ViewGroup mContainer, int mPosition, Object mObject) {
            View v =(View)mObject;
            mContainer.removeView(v);
        }
    }

注意：人们可以通过点击Alt+Enter并选择实现方法来实现所需的方法。

这就是了!让我们运行我们的应用程序。

Introduction sliders

总结

我们已经了解了闪屏，对滑块进行了介绍，以及如何在Android应用程序中实现它们。我们已经了解了两者的用途和重要性。阅读更多内容并练习如何在移动应用中实现闪屏和介绍滑块。

avatar
文章
阅读
粉丝