安卓 Day 23 ：利用视图翻页器实现引导项

已于 2022-07-12 21:07:12 修改
阅读量207 收藏
点赞数
文章标签： android android studio java
于 2022-07-11 19:15:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66295378/article/details/125715099
版权

一.基础知识

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

二.通过实训案例来了解

1.创建安卓项目

在这里插入图片描述

  • 将主界面MainActivity更名为SplashActivity，将activity_main.xml更名为activity_splash.xml
    在这里插入图片描述

在这里插入图片描述

2.准备图片资源

在这里插入图片描述

3.基于模板创建引导页界面

在这里插入图片描述

  • finish之后就会出现两个
    在这里插入图片描述

4.基于模板创建主界面

在这里插入图片描述
在这里插入图片描述

5.创建共享参数工具类

在这里插入图片描述

package net.yuanjing.guide;

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

public class ShareUtils {
    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 defaultValue) {
        sp = context.getSharedPreferences(NAME,MODE);//获取共享参数
        return sp.getBoolean(key, defaultValue);//如果键不存在，那么就返回缺省值defValue
    }
}

6.实现欢迎界面功能

（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）全屏显示欢迎界面

  • 在项目清单文件设置
    在这里插入图片描述
  • 此时运行结果
    在这里插入图片描述

（3）创建动画资源文件

在这里插入图片描述
在这里插入图片描述

<?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.java

package net.yuanjing.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);
    }
    /*
    判断是否第一次运行
    true 就是第一次运行，false就不是第一次运行
     */

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

  • 在设备文件浏览器的data/data目录里，查看
    在这里插入图片描述

  • 此时运行程序查看结果
    在这里插入图片描述
    在这里插入图片描述

  • 打开配置文件，查看内容

7.实现引导页界面

（1）三个引导页布局文件

在这里插入图片描述

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">
</LinearLayout>

（2）引导页布局资源文件

在这里插入图片描述

<?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）字符串资源文件

<resources>
    <string name="app_name">引导页演示</string>
    <string name="skip">跳过</string>
    <string name="start">开始使用</string>

</resources>

（4）创建背景配置文件

在这里插入图片描述

1.开始背景
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#aa00bb" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <stroke
        android:width="0.5dp"
        android:color="#787878" />
</shape>
2.结束背景
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#aaaaaa" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <stroke
        android:width="0.5dp"
        android:color="#787878" />
</shape>
3.跳过按钮背景配置文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00aadd" />
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <stroke
        android:width="0.5dp"
        android:color="#787878" />
</shape>
4.开始使用按钮背景配置文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#886688" />
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <stroke
        android:width="0.5dp"
        android:color="#787878" />
</shape>

（5）引导页界面代码

在这里插入图片描述

package net.yuanjing.guide;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

public class GuideActivity extends AppCompatActivity {
    private ViewPager pager;//视图翻页
    private List<View> views = new ArrayList<>();//三个引导页视图
    private View view1, view2, view3; // 三个引导页视图
    private ImageView point1,point2,point3;//三个圆点视图
    private Button btnSkip;//跳过按钮
    private Button btnStart;//开始按钮
    private GuideAdapter adapter;//引导页适配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //利用布局资源文件设置用户界面
        setContentView(R.layout.activity_guide);
        //初始化用户界面
        initView();
        //进行事件处理
        eventHandling();
    }

    /*
    设置圆点(当前圆点用shape_point_on)
    非当前圆点用shape_point_off
     */
    private void setPoint(int index) {
        point1.setBackgroundResource(R.drawable.shape_point_off);
        point2.setBackgroundResource(R.drawable.shape_point_off);
        point3.setBackgroundResource(R.drawable.shape_point_off);
        switch (index) {
            case 1://第一个引导页是当前引导页
                point1.setBackgroundResource(R.drawable.shape_point_on);
                break;
            case 2://第一个引导页是当前引导页
                point2.setBackgroundResource(R.drawable.shape_point_on);
                break;
            case 3://第一个引导页是当前引导页
                point3.setBackgroundResource(R.drawable.shape_point_on);
                break;
        }
    }
    private void initView() {
// 通过资源标识符获取控件实例
        point1 = findViewById(R.id.point1);
        point2 = findViewById(R.id.point2);
        point3 = findViewById(R.id.point3);
        btnSkip = findViewById(R.id.btn_skip);
        pager = findViewById(R.id.pager);
        // 设置默认图片
        setPoint(1);
        // 获取引导页视图
        view1 = View.inflate(this, R.layout.page1, null);
        view2 = View.inflate(this, R.layout.page2, null);
        view3 = View.inflate(this, R.layout.page3, null);
        btnStart = view3.findViewById(R.id.btn_start);
        // 添加到引导页容器
        views.add(view1);
        views.add(view2);
        views.add(view3);
        // 创建引导页适配器
        adapter = new GuideAdapter(this, views);
        // 设置适配器
        pager.setAdapter(adapter);

    }

    private void eventHandling() {
        //跳过按钮注册监听器
        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建意图，目标组件是主界面
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                //按意图启动主界面
                startActivity(intent);
                //关闭引导页界面
                finish();
            }
        });
        
        //给【视图翻页器】注册监听器
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                
            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0://第一个引导页是当前引导页
                        setPoint(1);
                        btnSkip.setVisibility(View.VISIBLE);
                        break;
                    case 1://第二个引导页是当前引导页
                        setPoint(2);
                        btnSkip.setVisibility(View.VISIBLE);
                        break;
                    case 2://第一个引导页是当前引导页
                        setPoint(3);
                        btnSkip.setVisibility(View.GONE);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        //给【开始使用】按钮注册监听器
        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建意图，目标组件是主界面
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                //按意图启动主界面
                startActivity(intent);
                //关闭引导页界面
                finish();
            }
        });
    }
}

（6）全局显示

  • 将这个文件删除
    在这里插入图片描述

（7）运行，查看效果

在这里插入图片描述

勇敢牛牛
关注
滑动向导页
weixin_44810052的博客
04-20 120
ViewFlipper实现滑动翻页 1,为viewFlipper添加view的两种方法 （1）静态导入 <?xml version="1.0" encoding="utf-8"?> <ViewFlipper android:id="@+id/flipper" android:layout_width="match_parent" android:layou...
Android学习|视图翻页——ViewPager
weixin_52551903的博客
02-28 1178
PagerAdapter的方法 getCount() 获得viewpager中有多少个view instantiateltem() 1.将给定位置的view添加到viewGroup(容器)中,创建并显示出来 2返回一个代表新增页面的object(key),通常都是直接返回view本身就可以了,当然你也可以自定义自己的key,但是key和每个view要一—对应的关系 isViewFromObject() 判断instantiateltem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是
Android实现的三种翻页功能原理
weixin_34167043的博客
02-13 710
本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理，希望能够对开发者有实际的帮助价值！ 　　第一种翻页效果如下： 　　 　　实现原理： 　　当前手指触摸点为a，则 a点坐标为(ax,ay)， 由三角形acb与三角形cmb为对称三角形并且直线cp为am垂直平分线，则 B点坐标为(ax/2,ay/2)。 　　作gf垂直于om且cb垂直于am， 三角...
安卓基础学习 Day 20|安卓高级控件---翻页视图
m0_64018773的博客
07-05 940
安卓高级控件---翻页视图
Android移动开发之【Android实战项目】DAY15-翻页效果原理
李响
02-19 447
在《自定义控件其实很简单》系列的前半部分中我们用了整整六节近两万字两百多张配图讲了Android图形的绘制，虽然篇幅很巨大但仍然只是图形绘制的冰山一角，旨在领大家入门，至于修行成果就看各位的了……那么这个些列主要是通过前面学习到的一些方法来尝试完成一个翻页的效果。 对于我个人来说，我是不太建议大家在没自己去尝试前看本文的，因为你看了别人的思路就会有个惯性思维朝着别人的思路去靠，实际上如果你自己尝试...
安卓入门项目-模仿某商城day01-ViewPager实现轮播图
qq_32919451的博客
08-23 426
在公司是经常用到安卓的，所以我一有空就会自学，并把学到的记下来。下面介绍的是我自己练手的一个模仿某商城的小项目，用到的都是安卓很基础的知识点，今天要说的是轮播图涉及到的知识点-ViewPager（也可以用Banner实现），同时会涉及到一些其他的基础知识。先看看界面： ViewPager简介： 视图翻页工具，可以切换多个页面。我们使用的是最新的androidx包下的。用...
Android自定义控件之3D上下翻页效果的倒计时控件
gongwq的博客
04-22 5786
这是一个自定义的倒计时控件，具有3D上下翻页翻转效果。最近项目中需要做一个倒计时控件，需要和iOS端的效果保持一样。大致效果是这样的，如下图所示： 由于暂时还不会怎么样制作gif动态图，所以想看具体效果的，可以在下面的源码中下载运行查看。 废话不说了，开干吧。那么是怎么实现呢？我们首先得找到3D翻页的效果，这个效果我是参考的一个github项目，https://github.com/e
记录学习Android基础的心得08：常用控件（中级篇）P2
YQYUN的博客
10-17 1392
文章目录三、翻页类视图1.翻页视图四、对话框1.提醒对话框2.进度对话框3.日期选择对话框4.时间选择对话框五、视频视图六、表面视图和纹理视图1.表面视图2.纹理视图总结 三、翻页类视图 1.翻页视图 （1）作用和外观 翻页视图ViewPager允许用户在屏幕上左右滑动来切换显示的页面项，相当于一种横向显示的列表，它的默认外观是一片空白区域，ViewPager装载页面项之后如图： 显然，为了降低资源使用，Android只需要预先生成三个页面项（前一个，当前，后一个）就可以了，用户 左右滑动会预览前后的页面
安卓实现一个记账本（SQLite存储数据）
m0_56308072的博客
06-18 841
注意，上方的账单列表和添加账单字样时tools:text的效果，程序启动时并不会携带上去，仅作为当前效果预览展示，所以在使用的时候需要手动为这两个部分设置内容，因为添加账单页和账单列表使用的是同一个条目，所以这样设计。是Android提供的一个用于存储一组键值对数据的类。在数据库操作中，它通常用于存储要插入或更新到数据库表中的数据。我们来创建一个数据库的SQLiteOpenHelper类，用于创建和管理数据库以及进行数据库操作。我们的添加单信息是组成了一个对象的形式进行保存的，故我们需要一个账单实体类。
Android中用CalendarView实现日历的显示样式
12-19
综上所述，通过合理配置和监听`CalendarView`，开发者可以在Android应用中实现具有上下翻页功能的日历视图，并且可以根据需求自定义其样式和交互行为。这使得`CalendarView`成为一个强大且灵活的组件，满足各种日历...
【Android 14源码分析】WMS-窗口显示-流程概览与应用端流程分析
隔壁小王的博客
09-30 659
WMS 负责管理设备上所有的 Window ，所以应用想显示一个 Window 则要通过 WMS 来完成。而 WMS 毕竟还是上层，窗口的内容要显示到屏幕上，还需要 SurfaceFlinger 来处理。应用端: 控制其内部的窗口的添加及 UI 绘制逻辑WMS 模块: 作为系统窗口管理模块，处理应用端的窗口显示逻辑应用端与 WMS 通信通过匿名 Binder -> Session 完成。
windows10使用bat脚本安装前后端环境之msyql5.7安装配置并重置用户密码
风吹淡了悲伤
09-27 473
mysql-user-init.sql：重置root密码（并新增zhangsan用户授予权限）adserver-simple.sql：创建数据库sql脚本。5.启动并修改root密码（新增用户初始化授予权限）2.新增data文件夹与my.ini配置文件。1.下载mysql5.7 zip格式安装包。4.安装mysql windows服务。
【AndroidStudio】关于AndroidStudio的常见控件TextView和Button
PleaSure乐事的博客
09-26 399
AndroidStudio中TextView和Button控件的使用
PHP反序列化2（OC绕过.wakeup绕过）
2302_81328699的博客
09-26 503
PHP反序列化2（OC绕过.wakeup绕过）
Android常用C++特性之std::unique
Android-Graphics&Display
09-27 348
你可以通过提供自定义的谓词来定义 "相等" 的标准。// 使用自定义谓词来移除相邻绝对值相等的元素});// 使用 erase 减少容器大小// 打印结果return 0;是一个用于移除相邻重复元素的算法。它通过重新排列容器中的元素，将不需要的重复元素移动到末尾，并返回新的末尾位置。如果想要实际移除元素，需要结合erase函数。如果容器中存在非相邻的重复元素，通常需要先使用std::sort对容器进行排序。
Android 已经过时的方法用什么新方法替代?
赵星海的博客
09-25 414
【代码】Android 已经过时的方法用什么新方法替代?
从android-webview播放video标签黑屏谈起
yeshen.org
09-27 372
webview video 黑屏
Android Camera2 与 Camera API技术探究和RAW数据采集
最新发布
乐学吧
10-01 726
Android Camera2 API 是从 Android 5.0（Lollipop）开始引入的，相对Camera API，优势非常明显，如果需要通过Android平台采集视频数据，在设备支持的前提下，建议尽可能用Camera2做数据采集。
iOS日历翻页动画实现教程：UICollectionView驱动
实现iOS的日历翻页动画需要对日期处理、视图控制器和手势识别有深入理解，并能灵活运用UIKit提供的动画工具。通过结合这些技术，你可以打造出既美观又实用的日历功能，提升应用的整体交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值