安卓案例：利用视图翻页器实现引导页

Posted 2022-07-29 howard2005

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了安卓案例：利用视图翻页器实现引导页相关的知识，希望对你有一定的参考价值。

文章目录

一、运行效果
二、涉及知识点
三、实现步骤

一、运行效果

如果是第一次运行程序，欢迎画面结束后会显示引导页
可以通过左右手势滑动引导页
如果不是第一次运行程序，那么欢迎界面结束后不会进入引导页，而是直接跳到主界面。

二、涉及知识点

活动（Activity）
按钮（Button）
图像视图（ImageView）
视图翻页器（ViewPager）
消息处理器（Handler）
线性布局（LinearLayout）
补间动画（Tween Animation）

三、实现步骤

（一）新建安卓应用

基于Empty Activity创建安卓应用 - GuidePage
单击【Finish】按钮
将MainActivity更名为SplashActivity，将activity_main.xml更名为activity_splash.xml

（二）准备图片素材

将项目所需图片素材拷贝到mipmap-xhdpi目录

（三）基于模板创建引导页界面

基于Empty Activity创建GuideActivity
单击【Finish】按钮

（四）基于模板创建主界面

基于Empty Activity创建MainActivity
单击【Finish】按钮

（五）创建共享参数工具类

在net.huawei.guide包里创建SharedUtils类

package net.huawei.guide;

import android.content.Context;
import android.content.SharedPreferences;

/**
 * 功能：共享参数工具类
 * 作者：华卫
 * 日期：2022年07月11日
 */
public class SharedUtils 
    private static final String NAME = "config"; // 文件名
    private static final int MODE = Context.MODE_PRIVATE; // 访问模式
    private static SharedPreferences sp; // 共享参数
    private static SharedPreferences.Editor editor; // 编辑器

    public static void putBoolean(Context context, String key, boolean value) 
        sp = context.getSharedPreferences(NAME, MODE); // 获取共享参数对象
        editor = sp.edit(); // 获取编辑器对象
        editor.putBoolean(key, value); // 写入数据到指定文件 (config.xml)
        editor.commit(); // 提交，确认写操作
    

    public static boolean getBoolean(Context context, String key, boolean defValue) 
        sp = context.getSharedPreferences(NAME, MODE); // 获取共享参数对象
        return sp.getBoolean(key, defValue); // 如果键不存在，那么就返回缺省值defValue

（六）实现欢迎界面功能

1、欢迎界面布局文件

欢迎界面布局文件activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@mipmap/splash_back"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".SplashActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5">
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center_vertical">
        <ImageView
            android:id="@+id/iv_car"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginBottom="20dp"
            android:background="@mipmap/car" />
    </LinearLayout>
</LinearLayout>

运行程序，欢迎界面是有活动栏的，可以看到标题，其实，我们不想看到活动栏的

2、全屏显示欢迎界面

在项目清单文件AndroidManifest.xml文件里设置SplashActivity的属性
此时，运行程序，看看欢迎界面是否全屏显示

3、创建动画资源文件

在res里创建anim目录，然后在里面创建animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha
        android:duration="3000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>

4、编写欢迎界面代码

在SplashActivity里编写代码

package net.huawei.guide;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class SplashActivity extends AppCompatActivity 
    private Animation animation; // 动画对象
    private ImageView ivCar; // 小车图像视图
    private final int DELAY_TIME = 4000; // 延迟时间

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_splash);
        // 通过资源标识符获取控件实例
        ivCar = findViewById(R.id.iv_car);
        // 创建动画
        animation = AnimationUtils.loadAnimation(this, R.anim.animator);
        // 启动动画
        ivCar.startAnimation(animation);

        // 利用消息处理器实现延迟跳转
        new Handler().postDelayed(new Runnable() 
            @Override
            public void run() 
                Intent intent = null;
                // 根据安卓应用是否是第一次运行，决定跳转到不同界面
                if (isFirstRunning()) 
                    // 创建意图，目标组件是引导页界面
                    intent = new Intent(SplashActivity.this, GuideActivity.class);
                 else 
                    // 创建意图，目标组件是主界面
                    intent = new Intent(SplashActivity.this, MainActivity.class);
                
                // 按照意图跳转到目标组件
                startActivity(intent);
                // 关闭启动界面
                finish();
            
        , DELAY_TIME);
    

    /**
     * 判断安卓应用是否第一次运行
     *
     * @return true - 第一次运行；false - 不是第一次运行
     */
    private boolean isFirstRunning() 
        // 从配置文件里获取变量值（如果按键没有取到值，那么肯定是第一次运行，因此第三个参数defValue应该设置为true）
        boolean isFirstRunning = SharedUtils.getBoolean(this, "isFirstRunning", true);
        // 判断安卓应用是否是第一次运行
        if (isFirstRunning) 
            // 已经运行了第一次，写入数据到共享参数配置文件里（注意：isFirstRunning = false）
            SharedUtils.putBoolean(this, "isFirstRunning", false);
            return true;
         else 
            return false;

在设备文件浏览器的data/data目录里，查看当前项目net.huawei.guide
运行程序，因此是第一次运行，欢迎界面结束后跳转到引导页界面
此时，查看设备文件浏览器里的当前项目
导出共享参数配置文件config.xml
打开配置文件，查看其内容

（七）创建引导页适配器

创建引导页适配器GuideAdapter

package net.huawei.guide;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;

import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.List;

/**
 * 功能：引导页适配器
 * 作者：华卫
 * 日期：2022年07月11日
 */
class GuideAdapter extends PagerAdapter 

    private Context context;
    private List<View> views;

    public GuideAdapter(Context context, List<View> views) 
        this.context = context;
        this.views = views;
    

    @Override
    public int getCount() 
        return views.size();
    

    @Override
    public boolean isViewFromObject(View view, Object object) 
        return view == object;
    

    @Override
    public Object instantiateItem(ViewGroup container, int position) 
        ((ViewPager) container).addView(views.get(position));
        return views.get(position);
    

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) 
        ((ViewPager) container).removeView(views.get(position));

（八）实现引导页功能

1、三个引导页布局文件

三个引导页布局文件：page1.xml、page2.xml、page3. xml

（1）第一个引导页布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/page1">
</LinearLayout>

（2）第二个引导页布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/page2">
</LinearLayout>

（3）第三个引导页布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/page3"
    android:gravity="bottom|center">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:background="@drawable/shape_start"
        android:text="@string/start"
        android:textColor="@color/white"
        android:textSize="20sp" />
</LinearLayout>

2、主引导页布局资源文件

引导页布局资源文件activity_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/point1"
            android:layout_width="10dp"
            android:layout_height="10dp" />

        <ImageView
            android:id="@+id/point2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp" />

        <ImageView
            android:id="@+id/point3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginEnd="10dp" />
    </LinearLayout>

    <Button
        android:id="@+id/btn_skip"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="25dp"
        android:background="@drawable/shape_skip"
        android:text="@string/skip"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</RelativeLayout>

3、字符串资源文件

字符串资源文件里定义两个变量

以上是关于安卓案例：利用视图翻页器实现引导页的主要内容，如果未能解决你的问题，请参考以下文章 
 vue翻页器，包括上一页，下一页，跳转
 QT QTableView 翻页实现
 swift+UIPageViewController 纯代码实现引导页
 iOS利用UIScrollView的pagingEnabled自定义翻页宽度
 安卓案例：利用URLConnection下载图片
 安卓案例：利用URLConnection下载图片