Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)

简介: Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)

需要源码或图片集请点赞关注收藏后评论区留言~~~

App引导启动页

翻页视图的应用范围很广,当用户安装一个新应用时,首次启动大多出现欢迎页面,这个引导页面通常要往右翻好几页,才会进入应用主页,这种启动引导页就是通过翻页视图实现的。下面就来动手打造一个属于你的第一个App启动欢迎页把。

它的核心在于页面项的XML布局以及适配器,因此首先要设计页面项的布局,一般来说,引导页由两部分组成,一部分是背景图,一部分是页面下方的一排圆点,其中高亮的圆点表示当前位于第几页。除了背景图与一排圆点之外,最后一页往往有个按钮,它便是应用主页的入口,也是页面项的XML文件至少包含三个控件

1:引导页的背景图

2:底部的一排圆点

3:最后一页的入口按钮

写好了页面项的XML布局,还得编写启动引导页得适配器代码 主要完成三项工作

1:根据页面项得XML文件构造每页的视图

2:让当前页码的圆点高亮显示

3:如果翻到了最后一页,就显示中间的入口按钮

效果如下

最后 代码如下

Java类代码

package com.example.chapter08;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.example.chapter08.adapter.LaunchSimpleAdapter;
public class LaunchSimpleActivity extends AppCompatActivity {
    // 声明引导页面的图片数组
    private int[] lanuchImageArray = {R.drawable.guide_bg1,
            R.drawable.guide_bg2, R.drawable.guide_bg3, R.drawable.guide_bg4};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_launch_simple);
        // 从布局视图中获取名叫vp_launch的翻页视图
        ViewPager vp_launch = findViewById(R.id.vp_launch);
        // 构建一个引导页面的翻页适配器
        LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(this, lanuchImageArray);
        vp_launch.setAdapter(adapter); // 设置翻页视图的适配器
        vp_launch.setCurrentItem(0); // 设置翻页视图显示第一页
    }
}

适配器代码

package com.example.chapter08.adapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import androidx.viewpager.widget.PagerAdapter;
import com.example.chapter08.R;
import java.util.ArrayList;
import java.util.List;
public class LaunchSimpleAdapter extends PagerAdapter {
    private List<View> mViewList = new ArrayList<View>(); // 声明一个引导页的视图列表
    // 引导页适配器的构造方法,传入上下文与图片数组
    public LaunchSimpleAdapter(final Context context, int[] imageArray) {
        for (int i = 0; i < imageArray.length; i++) {
            // 根据布局文件item_launch.xml生成视图对象
            View view = LayoutInflater.from(context).inflate(R.layout.item_launch, null);
            ImageView iv_launch = view.findViewById(R.id.iv_launch);
            RadioGroup rg_indicate = view.findViewById(R.id.rg_indicate);
            Button btn_start = view.findViewById(R.id.btn_start);
            iv_launch.setImageResource(imageArray[i]); // 设置引导页的全屏图片
            // 每个页面都分配一个对应的单选按钮
            for (int j = 0; j < imageArray.length; j++) {
                RadioButton radio = new RadioButton(context); // 创建一个单选按钮
                radio.setLayoutParams(new LayoutParams(
                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                radio.setButtonDrawable(R.drawable.launch_guide); // 设置单选按钮的图标
                radio.setPadding(10, 10, 10, 10); // 设置单选按钮的四周间距
                rg_indicate.addView(radio); // 把单选按钮添加到页面底部的单选组
            }
            // 当前位置的单选按钮要高亮显示,比如第二个引导页就高亮第二个单选按钮
            ((RadioButton) rg_indicate.getChildAt(i)).setChecked(true);
            // 如果是最后一个引导页,则显示入口按钮,以便用户点击按钮进入主页
            if (i == imageArray.length - 1) {
                btn_start.setVisibility(View.VISIBLE);
                btn_start.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 这里要跳到应用主页
                        Toast.makeText(context, "欢迎您开启美好生活",
                                Toast.LENGTH_SHORT).show();
                    }
                });
            }
            mViewList.add(view); // 把该图片对应的页面添加到引导页的视图列表
        }
    }
    // 获取页面项的个数
    public int getCount() {
        return mViewList.size();
    }
    // 判断当前视图是否来自指定对象
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    // 从容器中销毁指定位置的页面
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }
    // 实例化指定位置的页面,并将其添加到容器中
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }
}

XML文件如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_launch"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

item_launchXML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 这是引导图片的图像视图 -->
    <ImageView
        android:id="@+id/iv_launch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />
    <!-- 这里容纳引导页底部的一排圆点 -->
    <RadioGroup
        android:id="@+id/rg_indicate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:paddingBottom="20dp" />
    <!-- 这是最后一页的入口按钮 -->
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="立即开始美好生活"
        android:textColor="#ff3300"
        android:textSize="22sp"
        android:visibility="gone" />"
</RelativeLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

相关文章
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
959 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
287 0
|
7月前
|
存储 Java PHP
轻量化短视频电商直播带货APP源码全解析:核心功能与设计流程​
在电商直播热潮下,开发专属直播带货APP成为抢占市场关键。本文详解原生开发轻量化APP的核心功能与全流程设计,涵盖用户登录、商品浏览、直播互动、购物车、订单及售后功能,并介绍安卓端Java、苹果端Object-C、后台PHP的技术实现,助力打造高效优质的直播电商平台。
|
6月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
9月前
《仿盒马》app开发技术分享-- 个人中心页面(19)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口
150 4
|
9月前
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
654 8
|
8月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
486 0
不封号的外卖抢单神器,美团抢单辅助器app,autojs版本源码
这个代码提供了基础框架,包含主循环、订单检测和点击功能。实际使用时需要根据美团骑手AP
|
5月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
1041 139

热门文章

最新文章