UIScrollView(滾動(dòng)視圖)

UIScrollView(滾動(dòng)視圖)

滾動(dòng)視圖的基礎(chǔ)屬性川背,它繼承自UIView
UIScrollView:UIView
設(shè)置UIScrollView的frame屬性的時(shí)候UIScrollView和UIScrollView的內(nèi)容的frame的大小是一樣的;UIScrollView的坐標(biāo)就是設(shè)置的frame屬性的坐標(biāo)岁钓,UIScrollView的內(nèi)容的坐標(biāo)是(0,0)
UIScrollView可以滾動(dòng)的前提:UIScrollView內(nèi)容的大小要比UIScrollView的大小要大佃扼。當(dāng)UIScrollView內(nèi)容的寬度大于UIScrollView本身的寬度的時(shí)候偎巢,UIScrollView可以左右滾動(dòng);當(dāng)UIScrollView內(nèi)容的高度大于UIScrollView本身的高度的時(shí)候兼耀,UIScrollView可以上下滾動(dòng)


        //==========從UIView繼承下來的屬性==========
        //1.創(chuàng)建UIScrollView對(duì)象
        //這個(gè)時(shí)候UIScrollView內(nèi)容的大小和scrollView本身是一樣的
        let scrollView = UIScrollView.init(frame: self.view.bounds)
        //2.添加到界面上
        self.view.addSubview(scrollView)
        //3.設(shè)置背景顏色
        scrollView.backgroundColor = UIColor.yellowColor()
        //4.添加imageView
        //imageView的坐標(biāo)是(0,0),大小是圖片的大小
        /*
        let imageView = UIImageView.init(image: UIImage.init(named: "1092.jpg"))
        //在scrollView上添加子視圖,實(shí)質(zhì)是將子視圖添加到它的內(nèi)容上的
        scrollView.addSubview(imageView)
         */
        
        //創(chuàng)建多張圖片
        for item in 1...4 {
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item-1)*scrollView.bounds.width, 0, scrollView.bounds.width, scrollView.bounds.height))
            scrollView.addSubview(imageView)
            imageView.image = UIImage.init(named: "35_\(item).jpg")
        }
        
        
        
        //=========UIScrollView專有屬性======
        //核心屬性
        //!!!1.內(nèi)容大小
        //scrollView.contentSize = CGSizeMake(self.view.bounds.width * 2, self.view.bounds.height*2)
        //如果想要能夠通過滾動(dòng)將圖片內(nèi)容顯示全求冷,就將scrollView的內(nèi)容大小設(shè)置為和圖片一樣的大小
        scrollView.contentSize = CGSizeMake(4*scrollView.bounds.width, scrollView.bounds.height*3)
        
        //!!!2.內(nèi)容偏移量
        //scrollView默認(rèn)顯示的是內(nèi)容左上角的部分
        scrollView.contentOffset = CGPointMake(scrollView.bounds.width, 0)
        
        //3.設(shè)置是否可以分頁
        //true->每次滾動(dòng)的距離是一頁的距離
        //一頁的大小就是scrollView的frame的大小瘤运。如果分頁,那么每次橫向滾動(dòng)滾動(dòng)的距離是scrollView的寬度匠题,上下滾動(dòng)的距離是scrollView的高度
        scrollView.pagingEnabled = true
        
        
        //其他屬性
        //1.內(nèi)容邊距
        //設(shè)置scrollView內(nèi)容到scrollView本身上左下右的距離(默認(rèn)都是0)
        //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20)
    
        //3.設(shè)置是否鎖定一定方法(默認(rèn)false->同一時(shí)間既可以上下滾動(dòng)又可以左右滾動(dòng))
        scrollView.directionalLockEnabled = true  //true->同一時(shí)間只能上下滾動(dòng)或者左右滾動(dòng)
        
        //3.滑到內(nèi)容邊緣的時(shí)候是否可以滾動(dòng)一段距離再彈回去(默認(rèn)true)
        scrollView.bounces = false
        
        //4.設(shè)置是否可以滾動(dòng)(默認(rèn)true->可以滾動(dòng))
        scrollView.scrollEnabled = true
        
        //5.設(shè)置是否顯示滾動(dòng)條(默認(rèn)true->顯示)
        //是否顯示水平方向的滾動(dòng)條
        scrollView.showsHorizontalScrollIndicator = true
        //是否顯示垂直方向的滾動(dòng)條
        scrollView.showsVerticalScrollIndicator = true
        
        //6.設(shè)置滾動(dòng)條到上下左右的邊距
        //注意:這個(gè)結(jié)構(gòu)體中的值只有下和右有效拯坟。下->水平方向的滾動(dòng)條。右->垂直方向的滾動(dòng)條
        scrollView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 100, 10)
        
        //7.設(shè)置滾動(dòng)條的風(fēng)格
        scrollView.indicatorStyle = .Black
        
        //8.滾動(dòng)到指定區(qū)域(讓指定區(qū)域可見)
        //scrollView.scrollRectToVisible(CGRectMake(1000, 100, 100, 100), animated: true)
        
        
        //9.是否滾動(dòng)到頂部(點(diǎn)擊狀態(tài)欄是否可以自動(dòng)回到頂部)
        scrollView.scrollsToTop = true
        
    }

    


}

滾動(dòng)視圖的委托調(diào)用

//6.設(shè)置代理
        self.scrollView.delegate = self
        //8.設(shè)置縮放倍數(shù)
        self.scrollView.maximumZoomScale = 3
        self.scrollView.minimumZoomScale = 0.5
        //MARK: UIScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //============滾動(dòng)相關(guān)============
    //1.在scrollView滾動(dòng)的時(shí)候?qū)崟r(shí)調(diào)用
    func scrollViewDidScroll(scrollView: UIScrollView){
    
        print("正在滾動(dòng)")
        print(scrollView.contentOffset)
    }
    
    //2.在scrollView將要開始拖動(dòng)的時(shí)候調(diào)用
    func scrollViewWillBeginDragging(scrollView: UIScrollView){
    
        print("將要開始拖拽")
    }
    
    //3.停止減速的時(shí)候會(huì)調(diào)用(實(shí)質(zhì)就是停止?jié)L動(dòng)的時(shí)候會(huì)調(diào)用)
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        print("停止減速")
    }
    
    
    //4.將要停止拖拽的時(shí)候調(diào)用(手將要松開的時(shí)候韭山,不代表停止?jié)L動(dòng))
    //參數(shù)2:手松開時(shí)候在x方向上和在y方向的速度
    //參數(shù)3:預(yù)判的滾動(dòng)停止時(shí)候的偏移量
    func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>){
    
        print("將要停止拖拽")
        print(targetContentOffset)
    }
    
    
    //5.手將要停止拖拽的時(shí)候調(diào)用
    func scrollViewWillBeginDecelerating(scrollView: UIScrollView){
    
        print("將要開始減速")
    }
    
    //6.已經(jīng)停止?jié)L動(dòng)動(dòng)畫的時(shí)候調(diào)用
    //只有在通過setContentOffset的方法使用動(dòng)畫效果讓scrollView滾動(dòng)郁季,在停止?jié)L動(dòng)的時(shí)候才會(huì)調(diào)用這個(gè)方法
    func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView){
        
        print("停止?jié)L動(dòng)動(dòng)畫")
    }
    
    
    //7.只有在通過點(diǎn)擊狀態(tài)欄自動(dòng)滾動(dòng)到頂部的時(shí)候才會(huì)調(diào)用
    func scrollViewDidScrollToTop(scrollView: UIScrollView){
    
        print("已經(jīng)滾動(dòng)到頂部")
    }
    
    
    //============縮放相關(guān)=============
    //UIScrollView已經(jīng)實(shí)現(xiàn)了縮放功能
    //想要讓UIScrollView上的內(nèi)容進(jìn)行縮放必須滿足以下條件:
    //a.設(shè)置縮放的最大倍數(shù)和最小倍數(shù)(默認(rèn)都是1)
    //b.通過協(xié)議方法告訴UIScrollView縮放對(duì)象
    //1.正在縮放的時(shí)候會(huì)實(shí)時(shí)調(diào)用
    func scrollViewDidZoom(scrollView: UIScrollView){
    
        print("正在縮放")
    }
    
    //2.告訴UIScrollView在縮放的時(shí)候,對(duì)哪個(gè)視圖進(jìn)行縮放(設(shè)置縮放對(duì)象)
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView?{
    
        return scrollView.subviews[0]
    }
    

UIPageControl

//屏幕寬度
let Screen_W = UIScreen.mainScreen().bounds.size.width

class ViewController: UIViewController {
    
    //MARK: - 屬性
    let scrollView = UIScrollView()
    var pageControl: UIPageControl? = nil
    

    //MARK: - 方法
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.設(shè)置frame
        self.scrollView.frame = CGRectMake(0, 0, self.view.bounds.width, 250)
        
        //2.添加到界面上
        self.view.addSubview(self.scrollView)
        
        //3.添加圖片
        for item in 1...6 {
            
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item-1)*Screen_W, 0, Screen_W, 250))
            imageView.image = UIImage.init(named: "21_\(item).jpg")
            self.scrollView.addSubview(imageView)
        }
        
        //4.設(shè)置內(nèi)容大小
        self.scrollView.contentSize = CGSizeMake(CGFloat(scrollView.subviews.count)*Screen_W, 250)
        //5.設(shè)置分頁
        self.scrollView.pagingEnabled = true
        
        //6.設(shè)置代理
        self.scrollView.delegate = self
        
    
        //7.添加pageControl
        self.creatPageControl()
        
    }


}

//MARK: - ScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //停止?jié)L動(dòng)
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        //拿到當(dāng)前是第幾頁
        let page = scrollView.contentOffset.x / scrollView.bounds.width
        
        //更新pageControl
        self.pageControl?.currentPage = Int(page)
    }
}


//MARK: - PageControl
extension ViewController{

    func creatPageControl() {
        
        //1.創(chuàng)建UIPageControl對(duì)象
        self.pageControl = UIPageControl.init(frame: CGRectMake(0, 230, Screen_W, 20))
        //2.添加到界面上
        self.view.addSubview(self.pageControl!)
        //3.設(shè)置背景顏色
        //self.pageControl?.backgroundColor = UIColor.yellowColor()
        
        //4.核心屬性
        //設(shè)置總的頁數(shù)
        self.pageControl?.numberOfPages = self.scrollView.subviews.count
        //設(shè)置當(dāng)前頁(從0開始)
        self.pageControl?.currentPage = 0
        
        //5.設(shè)置圓點(diǎn)的顏色
        self.pageControl?.pageIndicatorTintColor = UIColor.yellowColor()
        self.pageControl?.currentPageIndicatorTintColor = UIColor.redColor()
        
        //6.添加事件
        self.pageControl?.addTarget(self, action: "pageControlAction:", forControlEvents: .ValueChanged)
    }
    
    //值改變事件發(fā)生調(diào)用的方法
    func pageControlAction(pageControl:UIPageControl) {
        
        let offsetX = CGFloat(pageControl.currentPage) * Screen_W
        self.scrollView.setContentOffset(CGPointMake(offsetX, 0), animated: true)
    }
}

圖片的循環(huán)

//屏幕寬度
let Screen_W = UIScreen.mainScreen().bounds.size.width

class ViewController: UIViewController {
    
    //MARK: - 屬性
    let scrollView = UIScrollView()
    var pageControl: UIPageControl? = nil
    

    //MARK: - 方法
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.設(shè)置frame
        self.scrollView.frame = CGRectMake(0, 0, self.view.bounds.width, 250)
        
        //2.添加到界面上
        self.view.addSubview(self.scrollView)
        
        //3.添加圖片
        //a.先添加最后一張圖片
        let lastImageView = UIImageView.init(frame: CGRectMake(0, 0, Screen_W, 250))
        lastImageView.image = UIImage.init(named: "21_6.jpg")
       self.scrollView.addSubview(lastImageView)
        
        //b.創(chuàng)建中間的圖片
        for item in 1...6 {
            
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item)*Screen_W, 0, Screen_W, 250))
            imageView.image = UIImage.init(named: "21_\(item).jpg")
            self.scrollView.addSubview(imageView)
        }
        //c.在最后再放第一張圖片
        let first = UIImageView.init(frame: CGRectMake(7*Screen_W, 0, Screen_W, 250))
        first.image = UIImage.init(named: "21_1.jpg")
        self.scrollView.addSubview(first)
        
        
        //4.設(shè)置內(nèi)容大小
        self.scrollView.contentSize = CGSizeMake(CGFloat(scrollView.subviews.count)*Screen_W, 250)
        //5.設(shè)置分頁
        self.scrollView.pagingEnabled = true
    
        
        //6.設(shè)置代理
        self.scrollView.delegate = self
        
        //8.設(shè)置默認(rèn)偏移量(默認(rèn)顯示真正的第一張圖片)
        self.scrollView.contentOffset = CGPointMake(Screen_W, 0)
        
    
        //7.添加pageControl
        self.creatPageControl()
        
    }


}

//MARK: - ScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //停止?jié)L動(dòng)
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        //拿到當(dāng)前是第幾頁
        let page = scrollView.contentOffset.x / scrollView.bounds.width
        
        //1.判斷是否滑到最后钱磅,如果滑到最后就切換到真正的第一張圖片的位置
        if page == 7 {
            
            scrollView.contentOffset = CGPointMake(Screen_W, 0)
            self.pageControl?.currentPage = 0
            
            return
        }
        if page == 0 {
            
            scrollView.contentOffset = CGPointMake(6*Screen_W, 0)
            self.pageControl?.currentPage = 5
            
            return
        }
        
        
        //更新pageControl
        self.pageControl?.currentPage = Int(page-1)
    }
    
    
}


//MARK: - PageControl
extension ViewController{

    func creatPageControl() {
        
        //1.創(chuàng)建UIPageControl對(duì)象
        self.pageControl = UIPageControl.init(frame: CGRectMake(0, 230, Screen_W, 20))
        //2.添加到界面上
        self.view.addSubview(self.pageControl!)
        //3.設(shè)置背景顏色
        //self.pageControl?.backgroundColor = UIColor.yellowColor()
        
        //4.核心屬性
        //設(shè)置總的頁數(shù)
        self.pageControl?.numberOfPages = 6
        //設(shè)置當(dāng)前頁(從0開始)
        self.pageControl?.currentPage = 0
        
        //5.設(shè)置圓點(diǎn)的顏色
        self.pageControl?.pageIndicatorTintColor = UIColor.yellowColor()
        self.pageControl?.currentPageIndicatorTintColor = UIColor.redColor()
        
        //6.添加事件
        self.pageControl?.addTarget(self, action: "pageControlAction:", forControlEvents: .ValueChanged)
    }
    
    //值改變事件發(fā)生調(diào)用的方法
    func pageControlAction(pageControl:UIPageControl) {
        
        let offsetX = CGFloat(pageControl.currentPage) * Screen_W
        self.scrollView.setContentOffset(CGPointMake(offsetX, 0), animated: true)
    }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末梦裂,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子盖淡,更是在濱河造成了極大的恐慌年柠,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件褪迟,死亡現(xiàn)場離奇詭異冗恨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)味赃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門掀抹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人心俗,你說我怎么就攤上這事傲武。” “怎么了另凌?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵谱轨,是天一觀的道長。 經(jīng)常有香客問我吠谢,道長土童,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任工坊,我火速辦了婚禮献汗,結(jié)果婚禮上敢订,老公的妹妹穿的比我還像新娘。我一直安慰自己罢吃,他們只是感情好楚午,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著尿招,像睡著了一般矾柜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上就谜,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天怪蔑,我揣著相機(jī)與錄音,去河邊找鬼丧荐。 笑死缆瓣,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的虹统。 我是一名探鬼主播弓坞,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼车荔!你這毒婦竟也來了渡冻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤夸赫,失蹤者是張志新(化名)和其女友劉穎菩帝,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茬腿,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡呼奢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了切平。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片握础。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖悴品,靈堂內(nèi)的尸體忽然破棺而出禀综,到底是詐尸還是另有隱情,我是刑警寧澤苔严,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布定枷,位于F島的核電站,受9級(jí)特大地震影響届氢,放射性物質(zhì)發(fā)生泄漏欠窒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一退子、第九天 我趴在偏房一處隱蔽的房頂上張望岖妄。 院中可真熱鬧型将,春花似錦、人聲如沸荐虐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽福扬。三九已至腕铸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間忧换,已是汗流浹背恬惯。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留亚茬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓浓恳,卻偏偏與公主長得像刹缝,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子颈将,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容