1. 程式人生 > >Swift基礎之實現一個鏤空圖片的小Demo

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);

展示結果: