安卓案例：利用视图翻页器实现引导页
2024-06-30 08:18:53
文章目录
- 一、运行效果
- 二、涉及知识点
- 三、实现步骤
- （一）新建安卓应用
- （二）准备图片素材
- （三）基于模板创建引导页界面
- （四）基于模板创建主界面
- （五）创建共享参数工具类
- （六）实现欢迎界面功能
- 1、欢迎界面布局文件
- 2、全屏显示欢迎界面
- 3、创建动画资源文件
- 4、编写欢迎界面代码
- （七）创建引导页适配器
- （八）实现引导页功能
- 1、三个引导页布局文件
- （1）第一个引导页布局文件
- （2）第二个引导页布局文件
- （3）第三个引导页布局文件
- 2、主引导页布局资源文件
- 3、字符串资源文件
- 4、创建背景配置文件
- （1）当前引导页圆点背景
- （2）非当前引导页圆点背景
- （3）跳过按钮背景配置文件
- （4）开始使用按钮背景配置文件
- 5、编写引导页界面代码
- 6、全屏显示引导页界面
- （九）编写主界面代码
- 1、主界面布局资源文件
- 2、全屏显示主界面
- （十）运行程序，查看效果
一、运行效果
- 如果是第一次运行程序，欢迎画面结束后会显示引导页
- 可以通过左右手势滑动引导页
- 如果不是第一次运行程序，那么欢迎界面结束后不会进入引导页，而是直接跳到主界面。
二、涉及知识点
- 活动（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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="5"></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="0dp"android:layout_weight="1"android:gravity="center_vertical"><ImageViewandroid: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" ><alphaandroid:duration="3000"android:fromAlpha="0.0"android:toAlpha="1.0" /><rotateandroid: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; // 延迟时间@Overrideprotected 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() {@Overridepublic 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;}@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {((ViewPager) container).addView(views.get(position));return views.get(position);}@Overridepublic 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"><Buttonandroid: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.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="match_parent" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="15dp"android:gravity="center"android:orientation="horizontal"><ImageViewandroid:id="@+id/point1"android:layout_width="10dp"android:layout_height="10dp" /><ImageViewandroid:id="@+id/point2"android:layout_width="10dp"android:layout_height="10dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp" /><ImageViewandroid:id="@+id/point3"android:layout_width="10dp"android:layout_height="10dp"android:layout_marginEnd="10dp" /></LinearLayout><Buttonandroid: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）当前引导页圆点背景
- shape_point_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#aa00bb" /><cornersandroid:bottomLeftRadius="10dp"android:bottomRightRadius="10dp"android:topLeftRadius="10dp"android:topRightRadius="10dp" /><strokeandroid:width="0.5dp"android:color="#787878" />
</shape>
（2）非当前引导页圆点背景
- shape_point_off.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#aaaaaa" /><cornersandroid:bottomLeftRadius="10dp"android:bottomRightRadius="10dp"android:topLeftRadius="10dp"android:topRightRadius="10dp" /><strokeandroid:width="0.5dp"android:color="#787878" />
</shape>
（3）跳过按钮背景配置文件
- shape_skip.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#00aadd" /><cornersandroid:bottomLeftRadius="8dp"android:bottomRightRadius="8dp"android:topLeftRadius="8dp"android:topRightRadius="8dp" /><strokeandroid:width="0.5dp"android:color="#787878" />
</shape>
（4）开始使用按钮背景配置文件
- shape_start.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#886688" /><cornersandroid:bottomLeftRadius="8dp"android:bottomRightRadius="8dp"android:topLeftRadius="8dp"android:topRightRadius="8dp" /><strokeandroid:width="0.5dp"android:color="#787878" />
</shape>
5、编写引导页界面代码
- 引导页界面
GuideActivity
package net.huawei.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; // 引导页适配器@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_guide);// 初始化用户界面initView();// 进行事件处理eventHandling();}/*** 设置圆点（用于标识当前引导页）* 当前圆点用shape_point_on* 非当前圆点用shape_point_off** @param index*/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() {@Overridepublic void onClick(View v) {// 创建意图，目标组件是主界面Intent intent = new Intent(GuideActivity.this, MainActivity.class);// 按意图启动主界面startActivity(intent);// 关闭引导页界面finish();}});// 给【视图翻页器】注册监听器pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic 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;}}@Overridepublic void onPageScrollStateChanged(int state) {}});// 给【开始使用】按钮注册监听器btnStart.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 创建意图，目标组件是主界面Intent intent = new Intent(GuideActivity.this, MainActivity.class);// 按意图启动主界面startActivity(intent);// 关闭引导页界面finish();}});}
}
6、全屏显示引导页界面
- 在安卓项目清单文件里设置引导页界面的主题属性
- 运行程序，大家会发现，欢迎界面结束后，没有进入引导页，而是直接跳到了主界面
- 为了能够显示引导页，我们需要将共享参数配置文件删除掉
- 运行程序，查看结果
（九）编写主界面代码
1、主界面布局资源文件
- 主界面布局资源文件
activity_main.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/main_back"tools:context=".MainActivity"></LinearLayout>
2、全屏显示主界面
- 在安卓项目清单文件里设置引导页界面的主题属性
（十）运行程序，查看效果
- 先删除共享参数配置文件，再运行程序
安卓案例：利用视图翻页器实现引导页相关推荐
- html app启动页制作,APP引导页制作
原因: 在APP中经常见到,第一次启动的时候,有三张或者更多图片来回切换,介绍此APP的使用方法或做广告!点确定,进入APP后,第二次启动APP就不会出现了!这个使用WeX5也很简单就实现了 解决方案 ...
- android 启动页大小,android引导页大图
引导页图片一般采用本地图片打包在APK中,并且显示大小为整个屏幕,所以在显示引导页图片时有以下几点需要注意: 1. 最好使用多个尺寸的引导页来保证适配效果,比如在drawable-hdpi, draw ...
- 如何在一个APP中加入欢迎页，以及引导页
原文地址:http://blog.csdn.net/zhaozhiwen6140/article/details/50384535 喜欢的朋友去原文点个赞,我觉得这篇文章很不错~~ 我们知道,一般刚打 ...
- Vue 实现翻页器 下一页 处理显示多页面要下一页非表格
vue里面因为数据太多要弄多个页面,路由又不行,element ui的分页器用不了 我的环境是electron-vue,和vue通用的可以无视,这里采用了element ui 的走马灯当做容器翻页 首 ...
- 东方终焉组审核页可做引导页
简介: 一款审核申请页,包含一个简单的PHP,自适应,视频背景炫酷 网盘下载地址: http://kekewangLuo.cc/QQvNAviLsyy0 图片:
- app启动页html模板,APP引导页设计的五种常见表现方式
app引导页,想必大家都很熟悉.目前来说,APP引导页设计并不是每一个APP的必备设计环节啦.因为一款App是否需要引导页,取决于每一个APP出发点或者说是用途. 比如,在功能引导页和操作引导页上的设 ...
- uniapp启动图和引导页的处理逻辑
pages.js pages节点的第一项为应用入口页(即首页,这里作为启动页来使用), 可以在home.vue放如一张gif动图,动图时间位2秒,设置定时器在2.5秒后跳转. 如图所示,添加两个vue ...
- 获取项目版本号与设置引导页的判断条件
当我们首次安装软件打开后,会有5页左右的ScrollView滑动图片,来介绍这个软件的特色和功能,我们叫做引导页.这个引导页只有用户安装后第一次使用的时候才会加载,或者当用户进行版本升级后再次运行的首 ...
- UI设计实用干货素材|引导页模板
引导页设计原则 ①合理化原则.只做必要的内容引导,根据引导页的目的,出发点不同,大致可以将其分为产品说明类.使用说明类.推广类和问题解决类. 在设计之初就应该对需要设计的引导页进行充分分析,从而得出合 ...
- uniapp 引导页 启动页 闪屏页功能介绍及部分功能实现
启动页设置 uniapp自带的启动页是一个白底的页面,上面有个uni的logo,然后周围有个圆圈的进度条,这个是启动页. uniapp中可以自定义启动页,注意两点: 不要勾选"启动界面显示等 ...
最新文章
- 股市币市：数据分析与交易所最新公告（20190302）
- 关于Mobile Wireless Congress 颁发的一个奖项的联想(2)
- 申通快递机器人上岗_申通快速分拣机器人未来有70%人会失业
- 5分钟入门Lindorm SearchIndex
- 基于模型的系统工程MBSE软件工具（ModelCoder）
- Python面向对象高级编程
- python比javascript快多少_为什么Python比C++慢很多？
- 电影《你好，李焕英》进入全球票房榜前100
- 炒菜机器人放食材的顺序_2年要开1000家 碧桂园旗下千玺机器人餐厅开业
- 开源的“底线”在哪里？
- js获取验证码倒计时60s(超简单)
- MATLAB中改变默认工作路径的方法
- 国产操作系统之中兴新支点NewStartOS安装
- 莱维特LEWITT声卡驱动安装设置方法
- 云计算：吹尽狂沙始到金
- 蓝牙耳机排名前十：618性价比超高的真无线蓝牙耳机推荐！
- 物理定律告诉你：表白可能巨亏，分手一定血赚
- 工业互联网时代下橙色云CDS的商机直通车服务
- 住房公积金专办员考试多少分及格？考试难不难？
- 使用IR2101半桥驱动电机的案例
热门文章
- oracle常见单词_oracle认证考试中，常用单词汇总
- 翻译: AWS DeepRacer一步一步详细步骤的自定义航点更快地运行 自定义waypoints
- Spring Boot网上图书商城
- 地铁三号线 - 为什么哭的时候总是叫我带娃？
- 2022 第二届中国移动“梧桐杯”大数据应用创新大赛-基于移动大数据的网约车司机识别 线上0.95+ 方案
- [2019 icpc徐州] H.Yuuki and a problem 带修改的主席树(主席树+树状数组)
- Hinton介绍胶囊理论的论文
- 打开天窗：应用大脑科学提升两性之间的职场关系
- SpaceSyntax【空间句法】之DepthMapX学习：第一篇 数据的输入 与 能做哪些分析
- 跳跃表（SkipList）