Androidstudio实现一个app引导页(超详细)

文章目录

    • 1. 功能需求
    • 2. 代码实现过程
      • 1. 创建布局文件
      • 2. 创建引导页的Adapter
      • 3. 实现引导页Activity
      • 4. 创建圆点指示器的Drawable
      • 5. 创建“立即体验”按钮的圆角背景
    • 2.效果图

1. 功能需求

在这里插入图片描述

1、需要和原型图设计稿对应的元素保持一致的样式。

2、引导页需要隐藏导航栏,有三张图片,从第一张图片可以向左滑动 到第二张图片;从第二张向左可以滑动的第三张照片,向右可以滑动 到第一张照片;从第三张照片可以向右滑动到第二张照片。

3、底部有三个小圆点,小圆点根据图片变动;显示第一张图片时,只 有第一个小圆点为红色;显示第二张图片时,只有第二个小圆点为红 色;显示第三张图片时,只有第三个小圆点为红色。

4、点击底部小圆点可以跳转到对应的图片。

5、第三张图片上面有一个圆角矩形的“立即体验”按钮。

6、点击【立即体验】按钮能切换页面至【Login】页面。

2. 代码实现过程

1. 创建布局文件

创建一个布局文件 activity_welcome.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"><!-- ViewPager 用于显示图片 --><androidx.viewpager.widget.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent" /><!-- 圆点指示器 --><LinearLayoutandroid:id="@+id/dotsLayout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="20dp"android:orientation="horizontal" /><!-- 立即体验按钮 --><TextViewandroid:id="@+id/btnExperience"android:layout_width="200dp"android:layout_height="40dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="40dp"android:background="@drawable/rounded_button"android:gravity="center"android:text="立即体验"android:textColor="@color/white"android:textSize="15sp"android:visibility="gone" />
</RelativeLayout>

2. 创建引导页的Adapter

public class WelcomePagerAdapter extends PagerAdapter {private Context context;private int[] imageResources;public WelcomePagerAdapter(Context context, int[] imageResources) {this.context = context;this.imageResources = imageResources;}@Overridepublic int getCount() {return imageResources.length;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {LayoutInflater inflater = LayoutInflater.from(context);View view = inflater.inflate(R.layout.item_welcome, container, false);ImageView imageView = view.findViewById(R.id.imageView);imageView.setImageResource(imageResources[position]);container.addView(view);return view;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}
}

对应的布局文件 item_welcome.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"><ImageViewandroid:id="@+id/imageView"android:layout_width="300dp"android:layout_height="400dp"android:src="@drawable/image1"android:layout_centerInParent="true" />
</RelativeLayout>

3. 实现引导页Activity

WelcomeActivity中,设置ViewPager和圆点指示器,并处理“立即体验”按钮的点击事件:

public class WelcomeActivity extends AppCompatActivity {private ViewPager viewPager;private LinearLayout dotsLayout;private TextView btnExperience;private int[] imageResources = {R.drawable.image1, R.drawable.image2, R.drawable.image2};private ImageView[] dots;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_welcome);//初始化控件viewPager = findViewById(R.id.viewPager);dotsLayout = findViewById(R.id.dotsLayout);btnExperience = findViewById(R.id.btnExperience);// 设置ViewPager的AdapterWelcomePagerAdapter adapter = new WelcomePagerAdapter(this, imageResources);viewPager.setAdapter(adapter);// 初始化圆点指示器createDots(0);// 监听ViewPager的滑动事件viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {createDots(position);// 显示或隐藏“立即体验”按钮if (position == imageResources.length - 1) {btnExperience.setVisibility(View.VISIBLE);} else {btnExperience.setVisibility(View.GONE);}}@Overridepublic void onPageScrollStateChanged(int state) {}});// 点击“立即体验”按钮跳转到登录页面btnExperience.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "跳转到登录页面", Toast.LENGTH_SHORT).show();}});}// 创建圆点指示器private void createDots(int currentPosition) {if (dotsLayout != null) {dotsLayout.removeAllViews();}dots = new ImageView[imageResources.length];for (int i = 0; i < imageResources.length; i++) {dots[i] = new ImageView(this);if (i == currentPosition) {dots[i].setImageResource(R.drawable.dot_selected);} else {dots[i].setImageResource(R.drawable.dot_unselected);}LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);//设置原点左右之间的间距params.setMargins(14, 0, 14, 0);dotsLayout.addView(dots[i], params);// 点击圆点跳转到对应的页面final int finalI = i;dots[i].setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {viewPager.setCurrentItem(finalI);}});}}
}

4. 创建圆点指示器的Drawable

res/drawable目录下创建两个XML文件,分别表示选中的圆点和未选中的圆点:
dot_selected.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="#FF0000" /><size android:width="10dp" android:height="10dp" />
</shape>

dot_unselected.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="#CCCCCC" /><size android:width="10dp" android:height="10dp" />
</shape>

5. 创建“立即体验”按钮的圆角背景

res/drawable目录下创建一个XML文件 rounded_button.xml,用于设置按钮的圆角背景:

<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#FF0000" /><corners android:radius="25dp" /></shape>

2.效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34145.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯省赛真题C++B组-小球反弹

一、题目 有一长方形&#xff0c;长为 343720 单位长度&#xff0c;宽为 233333 单位长度。在其内部左上角顶点有一小球(无视其体积)&#xff0c;其初速度如图所示且保持运动速率不变&#xff0c;分解到长宽两个方向上的速率之比为 dx:dy 15:17。小球碰到长方形的边框时会发生…

基于深度学习的多模态人脸情绪识别研究与实现(视频+图像+语音)

这是一个结合图像和音频的情绪识别系统&#xff0c;从架构、数据准备、模型实现、训练等。包括数据收集、预处理、模型训练、融合方法、部署优化等全流程。确定完整系统的组成部分&#xff1a;数据收集与处理、模型设计与训练、多模态融合、系统集成、部署优化、用户界面等。详…

AI 数字人短视频源码开发:开启虚拟世界的创意引擎

在当今数字化浪潮中&#xff0c;AI 数字人正以惊人的速度融入我们的生活&#xff0c;尤其是在短视频领域&#xff0c;AI 数字人凭借其独特的魅力吸引了无数目光。从虚拟偶像的舞台表演到智能客服的贴心服务&#xff0c;AI 数字人已成为推动短视频行业创新发展的重要力量。而这背…

Java 代理模式:从静态代理到动态代理

前言 代理模式是 Java 中常见的设计模式之一&#xff0c;它的核心思想是通过一个代理对象来控制对真实对象的访问。代理模式不仅可以扩展目标对象的功能&#xff0c;而且在不修改原目标对象的情况下&#xff0c;可以增加一些我们自定义的操作。 1. 代理模式简介 代理模式的核心…

PyCharm 2019.1.3使用python3.9创建虚拟环境setuptools-40.8.0报错处理

目录 前置&#xff1a; 一劳永逸方法&#xff08;缺最后一步&#xff0c;没有成行&#xff09; step one: 下载高版本的pip、setuptools、virtualenv的tar.gz包 step two: 进入PyCharm安装目录的 helpers 目录下 step three: 下载并安装grep和sed命令&#xff0c;然后执行 …

word处理控件Aspose.Words教程:使用 Python 删除 Word 中的空白页

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。 Aspose API支持流行文件格式处理&#xff0c;并…

C++数据结构1——栈结构详解

一、栈的基本概念与特性 1. 栈的定义与特点 栈&#xff08;Stack&#xff09;是一种遵循后进先出&#xff08;LIFO, Last In First Out&#xff09;原则的线性数据结构&#xff0c;其核心特征包括&#xff1a; 单端操作&#xff1a;所有操作仅通过栈顶进行 动态存储&#xf…

77.HarmonyOS NEXT ImageViewerView 组件深度剖析: Swiper容器与懒加载深度解析

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT ImageViewerView 组件深度剖析&#xff1a; Swiper容器与懒加载深度解析 一、组件基础结构 Component export struct ImageViewe…

向量数据库对比以及Chroma操作

一、向量数据库与传统类型数据库 向量数据库&#xff08;Vector Storage Engine&#xff09;与传统类型的数据库如关系型数据库&#xff08;MySQL&#xff09;、文档型数据库&#xff08;MongoDB&#xff09;、键值存储&#xff08;Redis&#xff09;、全文搜索引擎&#xff0…

深入解析对象存储及工作原理

在现代信息技术发展中&#xff0c;存储是一个永恒的话题。从最初的磁带、硬盘到现在的云存储&#xff0c;存储技术不断推陈出新。而其中&#xff0c;“对象存储”作为近年来备受关注的存储技术之一&#xff0c;凭借其高可扩展性和灵活性&#xff0c;逐渐成为企业级存储方案的首…

ctfshow-xxs-316-333-wp

316.反射型 XSS&#xff08;-326都是反射型&#xff09; js恶意代码是存在于某个参数中&#xff0c;通过url后缀进行get传入&#xff0c;当其他用户点进这个被精心构造的url链接时&#xff0c;恶意代码就会被解析&#xff0c;从而盗取用户信息。 来看题&#xff0c;先简单测试…

easypoi导入Excel兼容日期和字符串格式的日期和时间

问题场景 在使用easypoi导入Excel时&#xff0c;涉及到的常用日期会有yyyy-MM-dd HH:mm:ss、yyyy-MM-dd和HH:mm:ss&#xff0c;但是Excel上面的格式可不止这些&#xff0c;用户总会输入一些其他格式&#xff0c;如 如果在定义verify时用下面这种格式定义&#xff0c;那么总会…

基于yolo11+flask打造一个精美登录界面和检测系统

这个是使用flask实现好看登录界面和友好的检测界面实现yolov11推理和展示&#xff0c;代码仅仅有2个html文件和一个python文件&#xff0c;真正做到了用最简洁的代码实现复杂功能。 测试通过环境&#xff1a; windows x64 anaconda3python3.8 ultralytics8.3.81 flask1.1.…

R语言零基础系列教程-01-R语言初识与学习路线

代码、讲义、软件回复【R语言01】获取。 R语言初识 R是一个开放的统计编程环境&#xff0c;是一门用于统计计算和作图的语言。“一切皆是对象”&#xff0c;数据、函数、运算符、环境等等都是对象。易学&#xff0c;代码像伪代码一样简洁&#xff0c;可读性高强大的统计和可视…

AI重塑视觉艺术:DeepSeek与蓝耘通义万相2.1的图生视频奇迹

云边有个稻草人-CSDN博客 近年来&#xff0c;深度学习、计算机视觉和生成模型在多个领域取得了突破性进展。其中&#xff0c;DeepSeek与蓝耘通义万相2.1图生视频的结合为图像生成与视频生成技术提供了新的发展方向。DeepSeek作为一个图像和视频生成的工具&#xff0c;能够利用深…

ELK+Filebeat+Kafka+Zookeeper安装部署

1.安装zookeeper zookpeer下载地址:apache-zookeeper-3.7.1-bin.tar.gzhttps://link.csdn.net/?targethttps%3A%2F%2Fwww.apache.org%2Fdyn%2Fcloser.lua%2Fzookeeper%2Fzookeeper-3.7.1%2Fapache-zookeeper-3.7.1-bin.tar.gz%3Flogin%3Dfrom_csdn 1.1解压安装zookeeper软件…

历年云南大学计算机复试上机真题

历年云南大学计算机复试机试真题 在线评测&#xff1a;传送门&#xff1a;pgcode.cn 喝饮料 题目描述 商店里有 n 中饮料&#xff0c;第 i 种饮料有 mi 毫升&#xff0c;价格为 wi。 小明现在手里有 x 元&#xff0c;他想吃尽量多的饮料&#xff0c;于是向你寻求帮助&#x…

怎么有效降低知网AIGC率

在学术创作日益规范且数字化检测技术不断发展的当下&#xff0c;知网 AIGC 检测成为了众多创作者关注的焦点。许多人苦恼于如何有效降低知网 AIGC 率&#xff0c;让自己的作品在通过检测的同时&#xff0c;彰显出真实的创作水平与独特性。接下来&#xff0c;我们就深入探讨降低…

代码随想录day17 二叉树part05

654.最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。 递归地在最大值 左边 的 子数组前缀上 构建左子树。 递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回 nums …

【Python入门】一篇掌握Python中的字典(创建、访问、修改、字典方法)【详细版】

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;《Python/PyTorch极简课》_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目…