Swift基础之实现一个镂空图片的小Demo
前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏
首先,需要创建导航视图,然后创建两种展示方式的按钮
let vc = ViewController();
let nav = UINavigationController.init(rootViewController: vc);
window?.rootViewController = nav;
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.title = "两种镂空Demo";
self.view.backgroundColor = UIColor.whiteColor();
//创建两个按钮
let btn1 = UIButton.init(frame: CGRectMake(20, 100,screenWidth()-40, 50));
btn1.setTitle("滑块部分显示与背景不一样的图", forState: .Normal);
btn1.setTitleColor(UIColor.blueColor(), forState: .Normal);
btn1.addTarget(self, action:#selector(btn1Click), forControlEvents: .TouchUpInside);
self.view.addSubview(btn1);
let btn2 = UIButton.init(frame: CGRectMake(20, 180,screenWidth()-40, 50));
btn2.setTitle("滑块部分显示与背景不一样的图", forState: .Normal);
btn2.setTitleColor(UIColor.blueColor(), forState: .Normal);
btn2.addTarget(self, action:#selector(btn2Click), forControlEvents: .TouchUpInside);
self.view.addSubview(btn2);
}
//按钮1方法
func btn1Click(btn:UIButton) {
let showVC = ShowViewController();
showVC.typeInt = 1;
self.navigationController?.pushViewController(showVC, animated: true);
}
//按钮2方法
func btn2Click(btn:UIButton) {
let showVC = ShowViewController();
showVC.typeInt = 2;
self.navigationController?.pushViewController(showVC, animated: true);
}
//相当于#define
//返回屏幕宽
func screenWidth() -> CGFloat {
return UIScreen.mainScreen().bounds.size.width;
}
//返回屏幕高
func screenHeight() -> CGFloat {
return UIScreen.mainScreen().bounds.size.height;
}
我分成了两种展示方式
一种是:滑块部分显示与背景不一样的图
//背景图片
let backImage = UIImageView.init(frame: CGRectMake(0, 64, screenWidth(), screenHeight()-64));
backImage.image = UIImage.init(named: "background.jpg");
self.view.addSubview(backImage);
//背景视图
bgView = UIView.init(frame: self.view.bounds);
bgView.backgroundColor = UIColor.clearColor();
self.view.addSubview(bgView);
//移动视图
clipView = UIView.init(frame: CGRectMake(0, 64, 180, 180));
clipView.layer.cornerRadius = 90;
clipView.layer.masksToBounds = true;
//设置裁剪
clipView.clipsToBounds = true;
//设置交互
clipView.userInteractionEnabled = true;
bgView.addSubview(clipView);
//显示图片
showImgView = UIImageView.init(frame: CGRectMake(0, 0, screenWidth(), screenHeight()-64));
showImgView.image = UIImage.init(named: "star.jpeg");
clipView.addSubview(showImgView);
//添加拖动手势
let panGresture = UIPanGestureRecognizer.init(target: self, action: #selector(panGrestureView));
clipView.addGestureRecognizer(panGresture);
另一种是:滑块部分显示与背景不一样的图,背景是空白
bgView = UIView.init(frame: self.view.bounds);
bgView.backgroundColor = UIColor.lightGrayColor();
self.view.addSubview(bgView);
//移动视图
clipView = UIView.init(frame: CGRectMake(0, 64, screenWidth()-40, 120));
//设置裁剪
clipView.clipsToBounds = true;
//设置交互
clipView.userInteractionEnabled = true;
bgView.addSubview(clipView);
//显示图片
showImgView = UIImageView.init(frame: CGRectMake(0, 0, screenWidth(), screenHeight()-64));
showImgView.image = UIImage.init(named: "star.jpeg");
clipView.addSubview(showImgView);
//添加拖动手势
let panGresture = UIPanGestureRecognizer.init(target: self, action: #selector(panGrestureView));
clipView.addGestureRecognizer(panGresture);
展示结果:
源码下载:http://download.csdn.net/detail/hbblzjy/9622850
Swift基础之实现一个镂空图片的小Demo的更多相关文章
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- Swift基础之两指拉动图片变大变小
我们在使用APP的时候,有时会发现有些图片可以通过两指进行放大.缩小,今天就实现这样的一种效果,比较简单,不喜勿喷.... var imageVi:UIImageView! = nil var ...
- 一个iOS图片选择器的DEMO(实现图片添加,宫格排列,图片长按删除,以及图片替换等功能)
在开发中,经常用到选择多张图片进行上传或作其他处理等等,以下DEMO满足了此功能中的大部分功能,可直接使用到项目中. 主要功能如下: 1,图片九宫格排列(可自动设置) 2,图片长按抖动(仿苹果软件删除 ...
- 一个上传图片,预览图片的小demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS:自己写的一个星级评价的小Demo
重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a ...
- 一个基于node 的小demo
首先我们新建一个文件夹 demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...
- 一个JNI的helloworld小demo
最近想学习一下jni,在网上看了一些demo,自己也操作了一遍,首先我将我自己学习的demo网站贴出来:https://blog.csdn.net/lwcloud/article/details/78 ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- SpringMVC-拦截器做一个登录认证的小Demo
拦截器 拦截器的定义 处理器拦截器类似于servlet开发中的filter,用于对处理器进行预处理和后处理. 定义拦截器,实现HandlerInterceptor这个接口 接口的实现需要导入包impo ...
随机推荐
- 关于jsp中的文件下载
第一种采用转发的方式: package cn.jbit.download.servlet; import java.io.IOException; import javax.servlet.Reque ...
- day4 liaoxuefeng---面向对象编程、IO编程
一.面向对象编程 二.面向对象高级编程 三.IO编程
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
- 谈谈如何选择合适的MySQL数据类型
MySQL数据类型选择 一 .选择原则 更小的通常更好:一般情况下选择可以正确存储数据的最小数据类型.越小的数据类型通常更快,占用磁盘,内存和CPU缓存更小. 简单就好:简单的数据类型的操作通常需要更 ...
- 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转
一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...
- postgresql 安装使用
www.postgresql.org去下载你需要的版本,我下载的9.6.8 安装过程中会让你输入一次密码,其余的默认就ok 默认超级用户名postgres 打开 pgadmin4,我们将语言改为中文会 ...
- Linux下安装 mysql 5.7
安装环境:系统是 centos6.5 1.下载 下载地址:https://dev.mysql.com/downloads/file/?id=467556 下载版本:我这里选择的57.17,通用版,li ...
- WPF ListBox/ListView/DataGrid 虚拟化时的滚动方式
ListBox的滚动方式 分为像素滚动和列表项滚动 通过ListBox的附加属性ScrollViewer.CanContentScroll来设置.因此ListBox的默认模板中,含有ScrollVie ...
- NPOI给单元格加范围边框
HSSFWorkbook workbook2 = new HSSFWorkbook(); //XSSFWorkbook workbook2 = new XSSFWorkbook();// ...
- 0428css样式
CSS样式表|-引入的三种方式|--内联样式|----标签内部(空格style)|--内嵌样式|----<head></head>标签内部(<style></ ...