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);
展示結果: