android导航页(欢迎页实现十分简单)

2023-11-01 11:20

本文主要是介绍android导航页(欢迎页实现十分简单),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  • 首先要弄明白原理,大致了解一下该流程


    1、创建一个类继承自SimplePagerFragment,实现对导航页面的页面循环的设置、背景颜色的设置以及页面监听事件的设置
    2、创建类定义每一个的页面(有多少页就创建多少个页面,当然布局文件是肯定需要的不再赘叙)
    3、在Activity中启动
  • 创建创建一个类继承自SimplePagerFragment代码如下:
        
    1. package com.cleveroad.slidingtutorial.sample;
    2. import android.graphics.Color;
    3. import android.support.annotation.ColorInt;
    4. import android.support.v4.content.ContextCompat;
    5. import android.view.View;
    6. import android.widget.Toast;
    7. import com.cleveroad.slidingtutorial.PageFragment;
    8. import com.cleveroad.slidingtutorial.SimplePagerFragment;
    9. //此处继承自SimplePagerFragment查看库文件代码发现SimplePagerFragment继承自CustomPresentationPagerFragment
    10. public class CustomPresentationPagerFragment extends SimplePagerFragment {
    11. //获取页面个数
    12. @Override
    13. protected int getPagesCount() {
    14. return 6;
    15. }
    16. //注意此处是背景上所添加的图案的循环出现的次数,运行安装后可以发现第一个页面(position=0)的图案和第四个(position=3)是相同的就是在此处设置的
    17. @Override
    18. protected PageFragment getPage(int position) {
    19. position %= 3;
    20. if (position == 0)
    21. return new FirstCustomPageFragment();
    22. if (position == 1)
    23. return new SecondCustomPageFragment();
    24. if (position == 2)
    25. return new ThirdCustomPageFragment();
    26. throw new IllegalArgumentException("Unknown position: " + position);
    27. }
    28. //设置背景颜色,现在越来越多的软件背景都是以颜色代替呈现一种扁平化的感觉,也可以自定义图片
    29. @ColorInt
    30. @Override
    31. protected int getPageColor(int position) {
    32. if (position == 0)
    33. return ContextCompat.getColor(getContext(), android.R.color.holo_orange_dark);
    34. if (position == 1)
    35. return ContextCompat.getColor(getContext(), android.R.color.holo_green_dark);
    36. if (position == 2)
    37. return ContextCompat.getColor(getContext(), android.R.color.holo_blue_dark);
    38. if (position == 3)
    39. return ContextCompat.getColor(getContext(), android.R.color.holo_red_dark);
    40. if (position == 4)
    41. return ContextCompat.getColor(getContext(), android.R.color.holo_purple);
    42. if (position == 5)
    43. return ContextCompat.getColor(getContext(), android.R.color.darker_gray);
    44. return Color.TRANSPARENT;
    45. }
    46. //是否循环滑动(true一直循环滑动不进入程序,false相反)
    47. @Override
    48. protected boolean isInfiniteScrollEnabled() {
    49. return true;
    50. }
    51. //监听事件(页面上左下角Skip的点击事件---布局代码都在库文件中不可修改但是如果需要自己定义点击图标以及事件可以继承其抽象类的抽象方法去实现
    52. @Override
    53. protected boolean onSkipButtonClicked(View skipButton) {
    54. Toast.makeText(getContext(), "Skip button clicked", Toast.LENGTH_SHORT).show();
    55. return true;
    56. }
    57. }
  • 设置单个页面(有多少个就设置多少个是不是很简单!):
        
    1. public class FirstCustomPageFragment extends PageFragment {
    2. //获取布局文件的ID
    3. @Override
    4. protected int getLayoutResId() {
    5. return R.layout.fragment_page_first;
    6. }
    7. /*为界面上的各个元素设置移动因素,包括方向和系数。一个TransformItem就是一个界面元素,其中它的第一个参数是界面元素对应的id,第二个参数是是否反向,true表示要,false表示不,第三个参数是移动系数。系数越大移动越慢,为一个界面上的不同元素设置不同的方向和系数,就能形成视差效果。**/
    8. @Override
    9. protected TransformItem[] provideTransformItems() {
    10. return new TransformItem[]{
    11. new TransformItem(R.id.ivFirstImage, true, 20),
    12. new TransformItem(R.id.ivSecondImage, false, 6),
    13. new TransformItem(R.id.ivThirdImage, true, 8),
    14. new TransformItem(R.id.ivFourthImage, false, 10),
    15. new TransformItem(R.id.ivFifthImage, false, 3),
    16. new TransformItem(R.id.ivSixthImage, false, 9),
    17. new TransformItem(R.id.ivSeventhImage, false, 14),
    18. new TransformItem(R.id.ivEighthImage, false, 7)
    19. };
    20. }
    21. }
  • 相对应的布局文件(此处使用的是百分比布局,如果要使用该形式的布局是需要导入百分比布局的库文件的否则编译不通过:'com.android.support:percent:22.2.0'):
        
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <android.support.percent.PercentRelativeLayout
    3. android:id="@+id/rootFirstPage"
    4. xmlns:android="http://schemas.android.com/apk/res/android"
    5. xmlns:app="http://schemas.android.com/apk/res-auto"
    6. xmlns:tools="http://schemas.android.com/tools"
    7. android:layout_width="match_parent"
    8. android:layout_height="match_parent"
    9. tools:ignore="ContentDescription"
    10. tools:background="@android:color/holo_orange_dark">
    11. <ImageView
    12. android:id="@+id/ivFirstImage"
    13. android:layout_width="wrap_content"
    14. android:layout_height="wrap_content"
    15. android:layout_centerInParent="true"
    16. android:src="@mipmap/s_0_1"
    17. app:layout_heightPercent="35%"
    18. app:layout_widthPercent="50%"/>
    19. <ImageView
    20. android:id="@+id/ivSecondImage"
    21. android:layout_width="wrap_content"
    22. android:layout_height="wrap_content"
    23. android:layout_alignParentEnd="true"
    24. android:layout_alignParentRight="true"
    25. android:src="@mipmap/s_0_2"
    26. app:layout_heightPercent="10%"
    27. app:layout_marginRightPercent="12%"
    28. app:layout_marginTopPercent="27%"
    29. app:layout_widthPercent="12%"/>
    30. <ImageView
    31. android:id="@+id/ivThirdImage"
    32. android:layout_width="wrap_content"
    33. android:layout_height="wrap_content"
    34. android:src="@mipmap/s_0_3"
    35. app:layout_heightPercent="25%"
    36. app:layout_marginLeftPercent="14%"
    37. app:layout_marginTopPercent="49%"
    38. app:layout_widthPercent="30%"/>
    39. <ImageView
    40. android:id="@+id/ivFourthImage"
    41. android:layout_width="wrap_content"
    42. android:layout_height="wrap_content"
    43. android:src="@mipmap/s_0_4"
    44. app:layout_heightPercent="15%"
    45. app:layout_marginLeftPercent="14%"
    46. app:layout_marginTopPercent="39%"
    47. app:layout_widthPercent="20%"/>
    48. <ImageView
    49. android:id="@+id/ivFifthImage"
    50. android:layout_width="wrap_content"
    51. android:layout_height="wrap_content"
    52. android:layout_centerHorizontal="true"
    53. android:src="@mipmap/s_0_5"
    54. app:layout_heightPercent="15%"
    55. app:layout_marginTopPercent="22%"
    56. app:layout_widthPercent="45%"/>
    57. <ImageView
    58. android:id="@+id/ivSixthImage"
    59. android:layout_width="wrap_content"
    60. android:layout_height="wrap_content"
    61. android:src="@mipmap/s_0_6"
    62. app:layout_heightPercent="6%"
    63. app:layout_marginLeftPercent="4%"
    64. app:layout_marginTopPercent="26%"
    65. app:layout_widthPercent="6%"/>
    66. <ImageView
    67. android:id="@+id/ivSeventhImage"
    68. android:layout_width="wrap_content"
    69. android:layout_height="wrap_content"
    70. android:src="@mipmap/s_0_7"
    71. app:layout_heightPercent="8%"
    72. app:layout_marginLeftPercent="14%"
    73. app:layout_marginTopPercent="25%"
    74. app:layout_widthPercent="9%"/>
    75. <ImageView
    76. android:id="@+id/ivEighthImage"
    77. android:layout_width="wrap_content"
    78. android:layout_height="wrap_content"
    79. android:src="@mipmap/s_0_8"
    80. app:layout_heightPercent="6%"
    81. app:layout_marginLeftPercent="77%"
    82. app:layout_marginTopPercent="38%"
    83. app:layout_widthPercent="8%"/>
    84. <TextView
    85. android:layout_width="wrap_content"
    86. android:layout_height="wrap_content"
    87. android:layout_alignParentBottom="true"
    88. android:layout_centerHorizontal="true"
    89. android:gravity="center"
    90. android:text="@string/text_web_ceo"
    91. android:textColor="@android:color/white"
    92. android:textSize="@dimen/text_size_large"
    93. app:layout_heightPercent="15%"
    94. app:layout_marginBottomPercent="11%"
    95. app:layout_widthPercent="45%"/>
    96. </android.support.percent.PercentRelativeLayout>
    此时导航页面是无限循环的如果需要判断用户是否是第一次启动该软件用savedInstanceState判断一下,MainActivity 中代码较少也简单主要是用了一个replaceTutorialFragment()方法。
  • 具体代码下载地址:https://github.com/Cleveroad/SlidingTutorial-Android.git
  • 如果下载总是中间停止可以用SVN下载无需用户名及密码
  • 如转载请标明转载地址,写的不好尽情谅解!
  • 如有问题可以加我qq:2915859312联系!

这篇关于android导航页(欢迎页实现十分简单)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/322585

相关文章

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

Python+FFmpeg实现视频自动化处理的完整指南

《Python+FFmpeg实现视频自动化处理的完整指南》本文总结了一套在Python中使用subprocess.run调用FFmpeg进行视频自动化处理的解决方案,涵盖了跨平台硬件加速、中间素材处理... 目录一、 跨平台硬件加速:统一接口设计1. 核心映射逻辑2. python 实现代码二、 中间素材处

Java数组动态扩容的实现示例

《Java数组动态扩容的实现示例》本文主要介绍了Java数组动态扩容的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1 问题2 方法3 结语1 问题实现动态的给数组添加元素效果,实现对数组扩容,原始数组使用静态分配

Python实现快速扫描目标主机的开放端口和服务

《Python实现快速扫描目标主机的开放端口和服务》这篇文章主要为大家详细介绍了如何使用Python编写一个功能强大的端口扫描器脚本,实现快速扫描目标主机的开放端口和服务,感兴趣的小伙伴可以了解下... 目录功能介绍场景应用1. 网络安全审计2. 系统管理维护3. 网络故障排查4. 合规性检查报错处理1.

Python轻松实现Word到Markdown的转换

《Python轻松实现Word到Markdown的转换》在文档管理、内容发布等场景中,将Word转换为Markdown格式是常见需求,本文将介绍如何使用FreeSpire.DocforPython实现... 目录一、工具简介二、核心转换实现1. 基础单文件转换2. 批量转换Word文件三、工具特性分析优点局

Springboot3统一返回类设计全过程(从问题到实现)

《Springboot3统一返回类设计全过程(从问题到实现)》文章介绍了如何在SpringBoot3中设计一个统一返回类,以实现前后端接口返回格式的一致性,该类包含状态码、描述信息、业务数据和时间戳,... 目录Spring Boot 3 统一返回类设计:从问题到实现一、核心需求:统一返回类要解决什么问题?

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Java使用Spire.Barcode for Java实现条形码生成与识别

《Java使用Spire.BarcodeforJava实现条形码生成与识别》在现代商业和技术领域,条形码无处不在,本教程将引导您深入了解如何在您的Java项目中利用Spire.Barcodefor... 目录1. Spire.Barcode for Java 简介与环境配置2. 使用 Spire.Barco

Java利用Spire.Doc for Java实现在模板的基础上创建Word文档

《Java利用Spire.DocforJava实现在模板的基础上创建Word文档》在日常开发中,我们经常需要根据特定数据动态生成Word文档,本文将深入探讨如何利用强大的Java库Spire.Do... 目录1. Spire.Doc for Java 库介绍与安装特点与优势Maven 依赖配置2. 通过替换

Android使用java实现网络连通性检查详解

《Android使用java实现网络连通性检查详解》这篇文章主要为大家详细介绍了Android使用java实现网络连通性检查的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录NetCheck.Java(可直接拷贝)使用示例(Activity/Fragment 内)权限要求