iOS开发添加新手引导效果

往往项目中经常出现此类需求

用户通过点击引导按钮可响应页面附带按钮的点击事件。

//
// gzhGuideView.h
// GuideView
//
// Created by 郭志贺 on 2020/5/29.
// Copyright © 2020 郭志贺. All rights reserved.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface gzhGuideView : UIView

-(void)showGuide:(UIView*)view;//显示引导
-(void)dismissGuide;//移除

@end

NS_ASSUME_NONNULL_END
//
// gzhGuideView.m
// GuideView
//
// Created by 郭志贺 on 2020/5/29.
// Copyright © 2020 郭志贺. All rights reserved.
//

#import "gzhGuideView.h"

@implementation gzhGuideView
-(instancetype)initWithFrame:(CGRect)frame{

  if (self = [super initWithFrame:frame]) {

    self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.6];
    //主要代码 添加路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    // 这里添加第二个路径 需要扣除的部分
    [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 150, 40) cornerRadius:5] bezierPathByReversingPath]];

    //渲染
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [self.layer setMask:shapeLayer];

    //根据需求添加按钮 实现点击事件
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(100, 100, 150, 40);
    [button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
    button.layer.cornerRadius = 5.0f;
    button.layer.masksToBounds = YES;
    [self addSubview:button];
  }

  return self;
}

-(void)showGuide:(UIView *)view{//添加

  [view.window addSubview:self];
  [view.window bringSubviewToFront:self];
  self.alpha = 1;

}
-(void)dismissGuide{//移除

  [self removeFromSuperview];

}
-(void)buttonClick{
  [self dismissGuide];
  NSLog(@"引导状态可点击");

}
@end

相应页面直接添加

gzhGuideView * guide = [[gzhGuideView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];

dispatch_async(dispatch_get_main_queue(), ^{

[guide showGuide: self .view]; 

});

可根据不同需求进行不同的布局,核心代码就是添加路径

总结

到此这篇关于iOS开发添加新手引导的实例代码的文章就介绍到这了,更多相关ios新手引导内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-05-28

基于mootools插件实现遮罩层新手引导

插件代码 复制代码 代码如下: /* --- name: UserGuider authors: - Garland Yang requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions] version: - 1.0 ... */ var UserGuider = new Class({ Implements: [Options, Events], options: { UserG

Android实现新手引导半透明蒙层效果

本文实例为大家分享了Android实现新手引导半透明蒙层效果的具体代码,供大家参考,具体内容如下 效果图: 其中的文字和我知道啦是ui切得两张透明图片 自定义View: package com.cymobi.library.view.widget; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas;

Android 新手引导蒙层效果实现代码示例

先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe

Unity实现新手引导镂空效果

本文实例为大家分享了Unity实现新手引导镂空效果的具体代码,供大家参考,具体内容如下 一.实现思路 创建有8个顶点的Mesh,内外边界都是四边形(矩形).只生成内.外边之间的Mesh,内层矩形就产生了镂空部分,外层的4个顶点,是组件自身RectTransform的四个顶点,内层的4个顶点,使用镂空目标(_target)RectTransform的四个顶点.确定内层的顶点的时候需要注意,多数情况下_target和HollowOutMask都不在同一个本地坐标空间,所以需要使用CalculateR

Unity shader实现消融效果

本文实例为大家分享了Unity shader实现消融效果的具体代码,供大家参考,具体内容如下 效果图: shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/EdgeColo" { Properties { _MainTex ("Texture", 2D) = "white" {} _N

iOS 引导页的镂空效果实例

初衷 最近项目新功能更改较大,产品童鞋要求加入新功能引导,于是一口气花了两天的时间做了一个引导页,当然加上后面的修修补补的时间,就不只两天了,不过这事情其实是一劳永逸的事情,值得做.同时为了能够更好的复用,我把它做成了pod库,项目地址在这里:EAFeatureGuideView. EAFeatureGuideView能做什么 EAFeatureGuideView是UIView的一个扩展,用来做新功能引导提示,达到这样的效果: 局部区域高亮(可以设置圆角) 有箭头指向高亮区域 可以设置一段介绍文

Unity shader实现遮罩效果

本文实例为大家分享了Unity shader实现遮罩效果的具体代码,供大家参考,具体内容如下 效果: shader代码: Shader "Custom/Mask" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {}//目标图片,即需要被遮罩的图片 _MaskLayer("Culling Mask",2D) = "white"{}//混合的图片,设置

iOS中一行代码实现 UIView 镂空效果

这是一种实现 UIView 镂空效果的方案,可以快速实现任意形状的镂空.文字的镂空.带镂空的毛玻璃效果等.本质上是 UIView 的 maskView 效果. 前言 首先来复习一下遮罩效果的实现.如果我们有一张图片,又恰好有一个圆,当我们把圆设置为图片的遮罩时,会得到这样的结果. 代码实现看上去像是这样: view.maskView = maskView; 那么问题来了,如果我们希望得到下面的结果,该怎么做呢?这看起来像是图层的相减,即原来的图层减去遮罩的部分. 可惜苹果爸爸不够贴心,没有提供方

Unity实现UI光晕效果(发光效果)

Unity中,我们怎么制作UI物体发光的渐隐渐现的效果呢? 比如说我们有一张月亮光晕的精灵图片 我们可以给它添加一个CanvasGroup组件 我们可以发现,组件上的Alpha值可以控制图片的透明度,从0到1 那么我们可以在代码中通过控制Alpha值循环的变化实现发光的光晕效果 以下是代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public class MoonFlash :

Winform实现鼠标可穿透的窗体镂空效果

今天找到一个名叫LICEcap的录屏软件,录制界面是这样的: 这个炫酷的空心窗口就是镜头,调整好大小,然后对准需要录制的地方按下Record就可以生成gif了. 卧槽太NB了我也要做一个! 根据StackOverflow站的提示(在这里),我们需要使用一个在Windows2000及之后平台可用的,用以实现不规则窗体的分层窗口API (SetLayerWindowAttributes).根据百度我们先需要使用一个名为SetWindowLong的Win32 API来把窗体设定为分层窗体. 为了在.N

Unity Shader实现序列帧动画效果

本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

Unity实现跑马灯抽奖效果

Unity 跑马灯抽奖效果实现代码,供大家参考,具体内容如下 这边用到插件是NGUI+Dotween,思路简单说下:先排版,通过移动图片蒙版来实现效果. 下面是排版和文件目录. 代码部分是通过余数去确认停的位置,boxlist通过unity拖拉加入数据,chooseBoxList直接通过余数判断添加. 代码量很少,稍微看下就明白了. 直接上代码了: using System; using System.Collections; using System.Collections.Generic;

iOS Mask属性的详细介绍及应用实例

前言: 在开发过程中,类似android和其他平台的UI开发方法,需要通过一个mask图显示部分UI或者Icon资源.ios的控件自带alpha的值,但是这个值都是整个icon或者UI的透明效果,不能做到自定义的透明或者镂空效果.我们必须借助于mask资源图. Mask属性介绍 Mask平时用的最多的是masksToBounds 吧. 其实除此以外Mask使用场景很多,看完之后你会发现好真是好用的不要不要的... 先来了解下Mask属性到底是什么? Mask 英文解释是蒙板/面罩,平时我们称为蒙

Android开发之利用Activity实现Dialog对话框

前言 在Android中经常要使用Dialog来实现一些提示以及一些特殊的效果,而且样式也不一样,每次都得查一大堆资料,还不一定能解决.对话框是个好东西,创建简单有实用.当下的开发中,很多的开发者反而更喜欢使用activity来代替对话框,至少笔者的团队中,类似于升级提示或者指示页及其他一些交互的地方,大量的把Dialog替换成activity,好处是显而易见的,activity具有更灵活的操作和布局,另外很重要一点是,一些容易涉及内存泄漏的代码放在activity中执行比放在Dialog中执行