Android遮罩层引导页的实现

最新推荐文章于 2024-05-15 11:16:30 发布
最新推荐文章于 2024-05-15 11:16:30 发布
阅读量647 收藏
点赞数
分类专栏： Android移动开发 文章标签： 引导 遮罩 android 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renyuan1991/article/details/88339255
版权
实现遮罩层引导页可以通过以下几种方式，本文主要记录张洪洋HighLight的实现原理和过程。
思路1：在布局中添加对应的引导控件，在需要提示的时候显示否则就gone。这种方式可以很准确的定位控件的位置，但是扩展性太差，对程序改动太大。
思路2：在代码中通过xml的根布局获取系统创建的FrameLayout，然后添加引导图到这个布局下
。
思路3：获取要引导的控件的坐标传递给Activity，再Activity根据位置对用户展示引导图。

HightLight：
通过拿到根部的id，判断是不是FramLayout，如果不是就创建一个FramLayout把当前的根布局放到新创建的FramLayout中，如果是FramLayout那就直接再上面添加一层View就可以了。拿到需要高亮显示的控件的id，通过这个控件的坐标和四个角判断这个控件的具体位置，最后通过canvas生成一个遮罩的view，再通过之前记录的控件的坐标再这个view上挖洞。

具体代码分析：


洪洋的项目地址：https://github.com/hongyangAndroid/Highlight
renyuan1991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android遮罩层引导页showCaseView的扩展及解析
MrJarvisDong的博客
05-13 729
android遮罩层引导页showCaseView的扩展及解析 前言: 首先感谢showcase引导页的这个lib,本blog对此lib进行了扩展,可以输入自定义layout或者通过代码对引导层中的布局属性进行设置; 快捷入口为: MaterialShowcaseView 内容: 效果图 先来回顾下原lib中的亮点: 提供targetview的三种显示策略,CircleShape,N...
Android高亮新手引导蒙层实现
AMing_阿明
09-16 3216
市面上的 APP 大多都有这个功能，我们这次做的新手高亮引导蒙层有什么特殊之处呢？ 最基础的蒙层就是盖在页面的上方大概位置，不能精确定位。也不会随着 view 的变化蒙层的高亮区域和 tips 指示区域跟随底部 view 的位置变化而变化，也不能进行点击事件透传。一般都是点击蒙层后蒙层消失然后需要再次点击 view 我们这次开发的蒙层具备哪些功能，和解决了哪些技术难点，和市面上大多数蒙层博客有什么异同呢。 1 : 蒙层的高亮区域跟随底部目标 view ( 以下简称 targetView ) 我们的 AP..
【Android】实现新手引导遮罩蒙层效果
最新发布
full courage的博客
05-15 800
新功能引导页面，不是app启动时的启动页，而是对新功能页面的某一个按钮或者控件进行高亮，显示一些提示信息，直接在页面上层弹出遮罩蒙层，引导新手用户一步步地熟悉操作，可能一页也可能有多页，部分引导区域还需要做到事件的穿透，部分不穿透
android引导遮罩
weixin_40296676的博客
10-29 934
第一步：类的复制HighLightLayoutFang public class HighLightLayoutFang extends RelativeLayout { public HighLightLayoutFang(Context context) { super(context); init(); } public HighLi...
android 遮罩 框架,Android遮罩引导层
weixin_39622225的博客
06-04 361
第一次写还是有点不知所措，就将就着看吧您内话说APP，绝大多数会有新手引导层，需要遮罩的那种，类似这样的：很久很久之前的一个项目，在github上找了一个，用着不是很舒服，比较繁琐，而且基本不能定制，很蛋疼，于是乎(- - || 我去，怎么排版啊)。。好吧，那就这样吧，第一步，一般引导层在某个界面，也就是传说中的Activity，对吧。那么这个引导浮层就可以放在activity的DecorView...
Android-Android最简单最好用的遮罩引导库
08-13
Android 最简单最好用的遮罩引导库
Android多页蒙版遮罩引导功能(源码+解析)
KX興博客
09-03 3674
Android实现多层蒙版引导功能 需求:博主前段时间做的教育类型APP,需要引导用户(低龄化小朋友),播放器的播放,页面可以左右滑动,以及右上方进入答题卡入口(小朋友都是很聪明的,引导一次后基本都会使用) 效果图 本文以此来实现的效果图 实现方式有两种: 1,使用第三方库来实现该需求(聪明的读者GitHub) 2,根据实际需求自己实现该功能(本文概述该功能实现) ...
一分钟实现Android遮罩引导视图
08-26
"一分钟实现Android遮罩引导视图" 本文主要介绍了在 Android 中如何快速实现遮罩引导视图，旨在帮助开发者快速上手实现该功能。下面将对该知识点进行详细的解释。 1. GuideView 介绍 GuideView 是基于 ...
Android遮罩层高亮显示
12-26
总的来说，实现"Android遮罩层高亮显示"涉及到Android布局设计、自定义View、图形绘制、动画处理等多个知识点。在Eclipse环境下，这需要开发者具备扎实的Android基础知识和较强的代码编写能力。随着Android Studio的...
Android 新手引导蒙层效果实现代码示例
08-31
然而，如果应用有更多的引导页或者更复杂的交互，可能需要考虑使用更高级的库，如PageIndicatorView、WelcomeSlide等，这些库提供了更多的动画效果和易于管理的页面导航。 总之，Android新手引导蒙层效果的实现并不...
Android实现蒙版引导功能
09-03
安卓Android实现蒙版引导功能,自定义实现透明蒙版 需求:博主前段时间做的教育类型APP,需要引导用户(低龄化小朋友),播放器的播放,页面可以左右滑动,以及右上方进入答题卡入口
蒙版引导页
06-28
快速实现蒙版高亮效果，扩展性比较强，满足当前大多数人群的需求，使用的三方的NewbieGuide~
Android实现单页面浮层可拖动view的一种方法
08-29
本篇文章主要介绍了Android实现单页面浮层可拖动view的一种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android 倒计时引导页
01-13
在Android应用开发中，"Android 倒计时引导页"是一种常见的设计手法，用于吸引用户的注意力并提供一定的用户体验。这种页面通常会在用户首次打开应用或有新特性更新时出现，展示一些重要的信息或者功能介绍，同时...
Android透明指示层
01-14
在Android应用开发中，"透明指示层"是一种常见的设计元素，它被广泛应用于引导页或者交互提示中，目的是为了向用户展示新功能或操作流程，提高用户体验。这种设计手法通过半透明的遮罩层和清晰的指示元素，既不会...
android添加view遮层_Android自定义一个遮罩引导层 ~ 王诛魔
weixin_32723617的博客
01-15 1140
分析需求高亮显示指定的控件(1个或者多个)只有一个高亮控件,则直接绘制即可多个高亮控件,则分两种效果展示顺序展示每一个控件展示所有控件高亮部分的形状方形圆形展示与消失自动展示,自动消失点击消失点击指定部分消失实现方式遮罩层直接在本来的页面是添加,不用时消失使用DecorView的方式,添加view即可使用透明Activity覆盖选择第二种方式来实现第一种方便但是耗时耗力,并且不能通用第二种是大家都...
Android 遇坑【3】 - 导航栏遮挡问题
Hsy的博客
09-16 974
问题描述： 解决方法其实很简单，如果导航栏是固定宽度的那么直接设置被遮挡页面的 layout_margin 属性即可，建议直接在最外层的布局文件里加该属性 如果宽度不是固定的，那么就计算下导航栏的宽度嘛 部导航栏遮挡 android:layout_marginBottom =“导航栏宽度” 底部导航栏遮挡 android:layout_marginTop = “导航栏宽度...
App遮罩层引导操作
骑猪追大象
09-29 2957
当软件首次打开的时候或者有新功能，帮助用户快速熟悉操作时，使用遮罩层引导用户操作步骤或者功能说明。
android studio引导页实现
06-28
### 回答1： Android Studio引导页实现可以通过以下步骤完成： 1. 创建一个新的Android Studio项目。 2. 在项目中创建一个新的Activity，用于显示引导页。 3. 在引导页Activity中添加一个ViewPager控件，用于显示多个页面。 4. 创建一个PagerAdapter类，用于管理ViewPager中的页面。 5. 在PagerAdapter中添加需要显示的页面，可以使用布局文件或代码方式创建。 6. 在引导页Activity中添加一个指示器控件，用于显示当前页面的位置。 7. 在ViewPager的OnPageChangeListener中更新指示器的位置。 8. 在最后一个页面中添加一个按钮，用于跳转到主界面或登录界面。 9. 在按钮的点击事件中跳转到相应的界面。 以上就是Android Studio引导页实现的基本步骤，可以根据具体需求进行调整和扩展。 ### 回答2： 引导页在移动应用中是一个非常重要的组件，它可以帮助用户更好地了解应用程序的功能和使用，提高用户的体验和满意度。Android Studio提供了良好的支持来实现应用程序的引导页。 实现步骤如下： 1.创建一个新项目 在Android Studio中创建一个新项目。在创建项目的过程中，可以选择空白活动，在项目创建后再进行引导页的添加。 2.设计引导页 准备好需要展示的引导页图片，并按照设计图的要求进行切图、编辑等操作。 3.创建视图控件 打开activity_main.xml文件，并添加ViewPager和CircleIndicator视图控件，用于展示引导页和指示当前展示的引导页的位置。ViewPager需要用Adapter进行管理，并创建好相应的Fragment或者View视图。 4.创建引导页适配器 创建一个继承自PagerAdapter的适配器类，用于管理ViewPager中展示的引导页视图控件。在适配器中需要重写getCount()方法，返回需要展示的引导页数量；getItem()方法，返回某一个特定位置的引导页视图控件；以及isViewFromObject()方法，用于判断某个视图控件是否为某一视图。 5.添加动画效果 在不同的引导页之间需要添加相应的动画效果，以便让用户更加吸引和留意。可以使用Android中提供的Animator、ObjectAnimator等动画技术实现需要的动画效果。 6.完善引导页功能 在ViewPager中添加事件监听器，以便在规定条件下实现页面跳转和引导页的最终目标。 7.测试 在完成代码编写后需要进行测试，并检查引导页中的所有功能是否正常工作。以便在发布应用时达到最佳效果。 总之，通过上述步骤的操作，可以在Android Studio中很轻松地实现一个流畅、功能完备的引导页。这将有助于提高用户体验和应用程序的使用率。 ### 回答3： 在开发Android应用时，经常需要添加引导页来给用户介绍应用的基本功能和操作方法。本文将以Android Studio为例，介绍如何实现引导页。 一、创建项目 首先打开Android Studio，点击“Start a new Android Studio project”，选择“Empty Activity”，输入“App name”和“Package name”，点击“Finish”创建项目。 二、添加引导页 1、步骤一 在“app”文件夹下，右键点击“res”，选择“New”-“Android Resource File”，设置“Resource type”为“layout”，命名为“activity_main.xml”（这里取名为activity_main.xml是为了后面直接复制粘贴代码方便）。 2、步骤二 右键点击“res”文件夹，选择“New”-“Folder”-“Values Folder”，命名为“values-w820dp”（这个文件夹的作用是为了适配平板设备），在该文件夹下创建一个名为“dimens.xml”的布局文件，在该文件中添加以下代码： ``` <resources> <dimen name="tutorial_image_size">450dp</dimen> <dimen name="tutorial_image_padding">30dp</dimen> <dimen name="tutorial_title_size">20sp</dimen> <dimen name="tutorial_title_padding_top">30dp</dimen> <dimen name="tutorial_description_size">14sp</dimen> <dimen name="tutorial_description_padding_top">10dp</dimen> <dimen name="tutorial_button_padding_top">50dp</dimen> <dimen name="tutorial_button_size">50dp</dimen> </resources> ``` 3、步骤三 在“res”文件夹下创建一个名为“drawable”的文件夹，将要使用的引导页图片拷贝到该文件夹下。 4、步骤四 在“res”文件夹下创建一个名为“values”的文件夹，在该文件夹下创建一个名为“colors.xml”的布局文件，在该文件中添加以下代码： ``` <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="colorTutorialBackground">#FFFFFF</color> </resources> ``` 5、步骤五 在“res”文件夹下创建一个名为“drawable”的文件夹，在该文件夹下创建一个名为“gradient_tutorial_background.xml”的布局文件，在该文件中添加以下代码： ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@color/colorPrimary" android:endColor="@color/colorPrimaryDark" android:angle="135" /> </shape> ``` 6、步骤六 在“res”文件夹下创建一个名为“layout”的文件夹，在该文件夹下创建一个名为“item_viewpager_tutorial.xml”的布局文件，在该文件中添加以下代码： ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorTutorialBackground" android:orientation="vertical" android:padding="@dimen/tutorial_image_padding"> <ImageView android:id="@+id/imageViewPagerTutorial" android:layout_width="@dimen/tutorial_image_size" android:layout_height="@dimen/tutorial_image_size" android:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/tutorial_title_padding_top" android:src="@drawable/tutorial1" /> <TextView android:id="@+id/tvTitleViewPagerTutorial" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/tutorial_title_padding_top" android:text="Title" android:textColor="#000000" android:textSize="@dimen/tutorial_title_size" /> <TextView android:id="@+id/tvDescriptionViewPagerTutorial" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/tutorial_description_padding_top" android:text="Description" android:textColor="#000000" android:textSize="@dimen/tutorial_description_size" /> <Button android:id="@+id/btnSkipViewPagerTutorial" android:layout_width="@dimen/tutorial_button_size" android:layout_height="@dimen/tutorial_button_size" android:layout_gravity="right" android:background="@null" android:paddingTop="@dimen/tutorial_button_padding_top" android:text="Skip" android:textColor="#000000" /> </LinearLayout> ``` 7、步骤七 在“res”文件夹下创建一个名为“layout”的文件夹，在该文件夹下创建一个名为“activity_view_pager_tutorial.xml”的布局文件，在该文件中添加以下代码： ``` <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/gradient_tutorial_background"> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPagerTutorial" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> ``` 三、编写代码 1、步骤一 打开“MainActivity.java”文件，添加以下代码： ``` public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); boolean isFirstTime = MyPreferences.isFirst(MainActivity.this); if (isFirstTime) { startActivity(new Intent(MainActivity.this, ViewPagerTutorialActivity.class)); finish(); } } } ``` 2、步骤二 创建一个名为“MyPreferences”的Java类，在该类中添加以下代码： ``` public class MyPreferences { private static final String FIRST = "first"; private static SharedPreferences getSharedPreferences(Context context) { return context.getSharedPreferences("MyPreferences", MODE_PRIVATE); } public static void setFirst(Context context, boolean value) { SharedPreferences.Editor editor = getSharedPreferences(context).edit(); editor.putBoolean(FIRST, value).apply(); } public static boolean isFirst(Context context) { return getSharedPreferences(context).getBoolean(FIRST, true); } } ``` 3、步骤三 创建一个名为“ViewPagerTutorialActivity”的Java类，在该类中添加以下代码： ``` public class ViewPagerTutorialActivity extends AppCompatActivity { int[] tutorialImages = {R.drawable.tutorial1, R.drawable.tutorial2, R.drawable.tutorial3}; String[] titles = {"Title 1", "Title 2", "Title 3"}; String[] descriptions = {"Description 1", "Description 2", "Description 3"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager_tutorial); ViewPager viewPager = findViewById(R.id.viewPagerTutorial); TutorialViewPagerAdapter adapter = new TutorialViewPagerAdapter(this, tutorialImages, titles, descriptions); viewPager.setAdapter(adapter); Button btnSkip = findViewById(R.id.btnSkipViewPagerTutorial); btnSkip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { MyPreferences.setFirst(ViewPagerTutorialActivity.this, false); startActivity(new Intent(ViewPagerTutorialActivity.this, MainActivity.class)); finish(); } }); } } ``` 4、步骤四 创建一个名为“TutorialViewPagerAdapter”的Java类，在该类中添加以下代码： ``` public class TutorialViewPagerAdapter extends PagerAdapter { private Context context; private int[] images; private String[] titles; private String[] descriptions; private LayoutInflater layoutInflater; public TutorialViewPagerAdapter(Context context, int[] images, String[] titles, String[] descriptions) { this.context = context; this.images = images; this.titles = titles; this.descriptions = descriptions; layoutInflater = LayoutInflater.from(context); } @Override public int getCount() { return images.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = layoutInflater.inflate(R.layout.item_viewpager_tutorial, container, false); ImageView imageView = view.findViewById(R.id.imageViewPagerTutorial); TextView tvTitle = view.findViewById(R.id.tvTitleViewPagerTutorial); TextView tvDescription = view.findViewById(R.id.tvDescriptionViewPagerTutorial); Button btnSkip = view.findViewById(R.id.btnSkipViewPagerTutorial); imageView.setImageResource(images[position]); tvTitle.setText(titles[position]); tvDescription.setText(descriptions[position]); if (position == getCount()-1) { btnSkip.setText("Finish"); } container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } ``` 至此，Android Studio引导页的实现就完成了。在运行项目时，第一次打开应用会显示引导页，用户按下Skip按钮，或者直接滑到最后一页，点击Finish按钮进入主界面。之后再打开应用，就不会再显示引导页了，因为已经保存了用户的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值