iOS UI基礎-7.0 UIScrollView

概述

移動設備的屏幕大小是極其有限的,因此直接展示在用戶眼前的內容也相當有限.當展示的內容較多,超出一個屏幕時,用戶可通過滾動手勢來查看屏幕以外的內容,普通的UIView不具備滾動功能,不能顯示過多的內容。UIScrollView是一個能夠滾動的視圖控件,可以用來展示大量的內容,并且可以通過滾動查看所有的內容
  • UIScrollView的常見屬性
  • UIScrollView的常用代理方法
  • UIScrollView的縮放

UIScrollView使用

基本使用

UIScrollView的用法很簡單,將需要展示的內容添加到UIScrollView中

設置UIScrollView的contentSize屬性,告訴UIScrollView所有內容的尺寸,也就是告訴它滾動的范圍

界面設計

點擊滾動,圖片往下移。實現代碼:

#import "MJViewController.h"@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
- (IBAction)scroll;
@end@implementation MJViewController
- (void)viewDidLoad
{[super viewDidLoad];// 設置scrollView內容的尺寸(滾動的范圍)
//    self.scrollView.contentSize = CGSizeMake(892, 480);
//    self.scrollView.contentSize = self.minionView.image.size;self.scrollView.contentSize = self.minionView.frame.size; // 總體內容的范圍(滾動范圍)
}- (IBAction)scroll {CGPoint offset = self.scrollView.contentOffset;offset.x += 10;offset.y += 10;[self.scrollView setContentOffset:offset animated:YES];
}
@end

無法滾動的解決辦法

如果UIScrollView無法滾動,可能是以下原因:
  • 沒有設置contentSize
  • scrollEnabled = NO
  • 沒有接收到觸摸事件:userInteractionEnabled = NO
  • 沒有取消autolayout功能(要想scrollView滾動,必須取消autolayout)

常見屬性

@property(nonatomic) CGPoint contentOffset;
這個屬性用來表示UIScrollView滾動的位置
@property(nonatomic) CGSize contentSize;
這個屬性用來表示UIScrollView內容的尺寸,滾動范圍(能滾多遠)
@property(nonatomic) UIEdgeInsets contentInset;
這個屬性能夠在UIScrollView的4周增加額外的滾動區域
@property(nonatomic) BOOL bounces;
設置UIScrollView是否需要彈簧效果
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
設置UIScrollView是否能滾動
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
是否顯示水平滾動條
@property(nonatomic) BOOL showsVerticalScrollIndicator;
是否顯示垂直滾動條

?

代理delegate

很多時候,我們想在UIScrollView正在滾動 或 滾動到某個位置 或者 停止滾動 時做一些特定的操作
要想完成上述功能,前提條件就是能夠監聽到UIScrollView的整個滾動過程
當UIScrollView發生一系列的滾動操作時, 會自動通知它的代理(delegate)對象,給它的代理發送相應的消息,讓代理得知它的滾動情況
也就是說,要想監聽UIScrollView的滾動過程,就必須先給UIScrollView設置一個代理對象,然后通過代理得知UIScrollView的滾動過程

實現代理分三步:

第一步:就設置UIScrollView所在的控制器 為 UIScrollView的delegate

通過代碼(self就是控制器)
self.scrollView.delegate = self;
或者 通過storyboard拖線(右擊UIScrollView)
第二步:控制器應該遵守UIScrollViewDelegate協議

第三步:實現協議中定義的相關方法

常用的代理方法有:

// 用戶開始拖拽時調用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 滾動到某個位置時調用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
// 用戶結束拖拽時調用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

內容縮放

縮放實現步驟

  1. 設置UIScrollView的id<UISCrollViewDelegate> delegate代理對象
  2. 設置minimumZoomScale :縮小的最小比例
  3. 設置maximumZoomScale :放大的最大比例
  4. 讓代理對象實現下面的方法,返回需要縮放的視圖控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
跟縮放相關的其他代理方法
縮放完畢的時候調用
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
正在縮放的時候調用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView

實例代碼

#import "MJViewController.h"@interface MJViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
@end
// 代理 \ 委托@implementation MJViewController- (void)viewDidLoad
{[super viewDidLoad];// 設置內容尺寸self.scrollView.contentSize = self.minionView.frame.size;// 設置self.scrollView.delegate = self;// 設置最大和最小的縮放比例self.scrollView.maximumZoomScale = 2.0;self.scrollView.minimumZoomScale = 0.2;
}/***  當用戶開始拖拽scrollView時就會調用*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{NSLog(@"開始拖拽-----");
}/***  只要scrollView正在滾動,就會調用*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{NSLog(@"----正在滾動--%@", NSStringFromCGPoint(scrollView.contentOffset));
}/***  當用戶使用捏合手勢的時候會調用**  @return 返回的控件就是需要進行縮放的控件*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{NSLog(@"----開始縮放");return self.minionView;
}/***  正在縮放的時候會調用*/
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{NSLog(@"----正在縮放");
}- (void)didReceiveMemoryWarning
{[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}@end

效果:

實踐-圖片輪播

UIPageControl分頁

只要將UIScrollView的pageEnabled屬性設置為YES,UIScrollView會被分割成多個獨立頁面,里面的內容就能進行分頁展示
一般會配合UIPageControl增強分頁效果,UIPageControl常用屬性如下:
一共有多少頁
property(nonatomic) NSInteger numberOfPages;
當前顯示的頁碼
@property(nonatomic) NSInteger currentPage;
只有一頁時,是否需要隱藏頁碼指示器
@property(nonatomic) BOOL hidesForSinglePage;
其他頁碼指示器的顏色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
當前頁碼指示器的顏色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

NSTimer定時器

NSTimer叫做“定時器”,它的作用如下
  • 在指定的時間執行指定的任務
  • 每隔一段時間執行指定的任務
調用下面的方法就會開啟一個定時任務
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTargetselector:(SEL)aSelectoruserInfo:(id)userInforepeats:(BOOL)yesOrNo;

每隔ti秒,調用一次aTarget的aSelector方法,yesOrNo決定了是否重復執行這個任務

通過invalidate方法可以停止定時器的工作,一旦定時器被停止了,就不能再次執行任務。只能再創建一個新的定時器才能執行新的任務
- (void)invalidate; //時鐘停止

實例代碼:

//
//  UYViewController.m
//  圖片輪播器
//
//  Created by jiangys on 15/5/23.
//  Copyright (c) 2015年 uxiaoyuan. All rights reserved.
//

#import "UYViewController.h"
#define kImageCount 5@interface UYViewController ()<UIScrollViewDelegate>@property (nonatomic,strong) UIScrollView *scrollView;
@property (nonatomic,strong) UIPageControl *pageControl;@property (nonatomic, strong) NSTimer *timer;@end@implementation UYViewController-(UIScrollView *)scrollView
{if (_scrollView==nil) {//如果為空,創建一個_scrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(10, 20, 300, 130)];_scrollView.backgroundColor=[UIColor redColor];//取消彈簧效果_scrollView.bounces=NO;// 取消水平滾動條_scrollView.showsHorizontalScrollIndicator = NO;_scrollView.showsVerticalScrollIndicator = NO;// 要分頁_scrollView.pagingEnabled = YES;// contentSize_scrollView.contentSize = CGSizeMake(kImageCount * _scrollView.bounds.size.width, 0);// 設置代理_scrollView.delegate = self;[self.view addSubview:_scrollView];}return _scrollView;}- (UIPageControl *)pageControl
{if (_pageControl == nil) {// 分頁控件,本質上和scrollView沒有任何關系,是兩個獨立的控件_pageControl = [[UIPageControl alloc] init];// 總頁數_pageControl.numberOfPages = kImageCount;// 控件尺寸CGSize size = [_pageControl sizeForNumberOfPages:kImageCount];_pageControl.bounds = CGRectMake(0, 0, size.width, size.height);_pageControl.center = CGPointMake(self.view.center.x, 130);// 設置顏色_pageControl.pageIndicatorTintColor = [UIColor redColor];_pageControl.currentPageIndicatorTintColor = [UIColor blackColor];[self.view addSubview:_pageControl];// 添加監聽方法/** 在OC中,絕大多數"控件",都可以監聽UIControlEventValueChanged事件,button除外" */[_pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];}return _pageControl;
}// 分頁控件的監聽方法
- (void)pageChanged:(UIPageControl *)page
{// 根據頁數,調整滾動視圖中的圖片位置 contentOffsetCGFloat x = page.currentPage * self.scrollView.bounds.size.width;[self.scrollView setContentOffset:CGPointMake(x, 0) animated:YES];
}- (void)viewDidLoad
{[super viewDidLoad];//設置圖片for (int i=0; i<kImageCount; i++) {NSString *imageName=[NSString stringWithFormat:@"img_%02d",i+1];UIImage *image=[UIImage imageNamed:imageName];UIImageView *imageView=[[UIImageView alloc] initWithFrame:self.scrollView.bounds];imageView.image=image;[self.scrollView addSubview:imageView];}//計算imageView[self.scrollView.subviews enumerateObjectsUsingBlock:^(UIImageView *imageView, NSUInteger idx, BOOL *stop) {// 調整x => origin => frameCGRect frame = imageView.frame;frame.origin.x = idx * frame.size.width;imageView.frame = frame;}];// 分頁初始頁數為0self.pageControl.currentPage = 0;// 啟動時鐘
    [self startTimer];}- (void)startTimer
{self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];// 添加到運行循環
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}- (void)updateTimer
{// 頁號發生變化// (當前的頁數 + 1) % 總頁數int page = (self.pageControl.currentPage + 1) % kImageCount;self.pageControl.currentPage = page;// 調用監聽方法,讓滾動視圖滾動
    [self pageChanged:self.pageControl];
}- (void)didReceiveMemoryWarning
{[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.s
    
}#pragma mark - ScrollView的代理方法
// 滾動視圖停下來,修改頁面控件的小點(頁數)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{// 計算頁數int page = scrollView.contentOffset.x / scrollView.bounds.size.width;self.pageControl.currentPage = page;
}/**修改時鐘所在的運行循環的模式后,抓不住圖片解決方法:抓住圖片時,停止時鐘,松手后,開啟時鐘*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{// 停止時鐘,停止之后就不能再使用,如果要啟用時鐘,需要重新實例化
    [self.timer invalidate];
}/***  停止滾動,開啟時鐘*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{[self startTimer];
}@end

效果:

源碼下載:點擊下載

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/287580.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/287580.shtml
英文地址,請注明出處:http://en.pswp.cn/news/287580.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【ArcGIS風暴】緩沖區分析、疊置分析綜合實驗案例:購房區域的選擇

實驗平臺:ArcGIS 9.3實驗目的:熟練掌握A rcGIS緩沖區分析和疊置分析操作,綜合利用各項空間分析工具解決實際問題。實驗要求:對每個條件進行緩沖區分析,運用空間疊置分析對多個圖層疊加,并分等級,確定合適的區域。實驗數據:ArcEx8實驗步驟打開ArcMap,加載數據ArcEx8,如…

[python opencv 計算機視覺零基礎到實戰] 四、了解色彩空間及其詳解

一、學習目標 了解什么是色彩空間了解opencv中色彩空間的轉換 目錄 [python opencv 計算機視覺零基礎到實戰] 一、opencv的helloworld [【python opencv 計算機視覺零基礎到實戰】二、 opencv文件格式與攝像頭讀取] 一、opencv的helloworld [[python opencv 計算機視覺零基…

java gui 按鍵 數組_java GUI分配數組值

好的,所以這是一個非常基本的例子.它需要更多的工作和優化,但應該讓你朝著正確的方向前進import java.awt.Color;import java.awt.Dimension;import java.awt.EventQueue;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Point;import java.awt.Shape;im…

Android之如何實現阿拉伯版本(RTL)的recycleView的網格布局

1 問題 比如正常的recycleView的網格布局效果如下 1 2 34 5 67 8 現在需要變成這樣的效果 3 2 16 5 48 7 2 思考過程和嘗試解決方法 1)從recycleView上直接分析,看有沒有相關的方法變成這個格式,網上百度了,基本上找不到 2)既然recycleView里面有常見的幾種布局設置,…

poj1189 簡單dp

http://poj.org/problem?id1189 Description 有一個三角形木板,豎直立放。上面釘著n(n1)/2顆釘子&#xff0c;還有(n1)個格子&#xff08;當n5時如圖1&#xff09;。每顆釘子和周圍的釘子的距離都等于d&#xff0c;每一個格子的寬度也都等于d&#xff0c;且除了最左端和最右端…

WPF|如何在 WPF 中設計漂亮的社交媒體信息儀表板

1. 效果展示先來直接欣賞效果&#xff1a;2. 準備創建一個WPF工程&#xff0c;比如站長使用 .NET 7[1] 創建名為 Dashboard3 的WPF項目&#xff0c;添加一些圖片資源&#xff0c;項目目錄如下&#xff1a;2.1 圖片資源可在網站 iconfont[2] 下載 關閉、最小化 圖標&#xff0c;…

CentOS 設置服務開機啟動的方法

為什么80%的碼農都做不了架構師&#xff1f;>>> CentOS設置服務開機啟動的兩種方法 1、利用 chkconfig 來配置啟動級別 在CentOS或者RedHat其他系統下&#xff0c;如果是后面安裝的服務&#xff0c;如httpd、mysqld、postfix等&#xff0c;安裝后系統默認不會自動啟…

【ArcGIS風暴】水文分析模塊實驗:山脊線和山谷線提取

實驗平臺:ArcGIS 9.3實驗目的:學習和掌握山脊線和山谷線提取的原理及方法實驗要求:利用ArcGIS水文分析模塊提取樣區的山脊線和山谷線實驗數據:Ex1實驗步驟:1.正負地形的提取 (1)打開Arcmap,加載數據EX1,如圖 (2)平滑處理(均值濾波)。加載Spatial Analyst模塊,單擊…

[python opencv 計算機視覺零基礎到實戰] 五、對象追蹤

一、學習目標 了解為什么色彩空間的轉換那么重要了解opencv中進行對象跟蹤的方法 目錄 [python opencv 計算機視覺零基礎到實戰] 一、opencv的helloworld [【python opencv 計算機視覺零基礎到實戰】二、 opencv文件格式與攝像頭讀取] 一、opencv的helloworld [[python op…

Android之用glide加載gif圖片靜態展示

1 問題 圖片是gif動圖&#xff0c;我們需要獲取第一幀的靜態圖片并且展示。 2 解決辦法 public void changeGifToPicture(NonNull Context context, NonNull String url, NonNull ImageView imageView) {Glide.with(context).asBitmap().load(url).into(new BitmapImageViewTa…

flex java框架_fleXive——JavaEE框架

fleXive——JavaEE框架fleXive是一個開源的JavaEE框架&#xff0c;基于LGPL許可證&#xff0c;最新版本3.0RC1&#xff0c;它基于EJB3&#xff0c;并帶有補充的JSF組件庫&#xff0c;具有靈活性和可擴展性。它主要致力于企業級(Enterprise-scale)內容建模、存儲和檢索&#xff…

【ArcGIS風暴】在ArcGIS中實現將一個圓16等分

本文實現在ArcGIS中畫一個圓,然后將其16等分。 步驟一:生成圓(多邊形圖層) (1)創建一個點圖層(圖名Center),如果需要精確定位該點,建議通過輸入坐標點的方式來創建,這一步比較簡單,不再詳述; (2)利用Buffer命令創建緩沖區(圖名Circle_2km),因為要處理的對象…

iOS UIViewContentMode 使用詳解

iOS在處理圖片的時候,會出現拉伸變形的情況,可以根據UIViewContentMode的屬性,來控制圖片 UIViewContentMode包含以下枚舉值 UIViewContentModeScaleToFill :拉伸自適應填滿整個視圖 UIViewContentModeScaleAspectFit :自適應打下比例顯示 UIViewContentModeScaleA…

二進制安裝mariadb-10.2.8

centos7.3上二進制安裝mariadb-10.2.8-linux-x86_641、查看是否安裝mariadbrpm -qa mariadb*如果已經安裝就卸載。2、下載mariadb最新版本yum info mariadb官網地址&#xff1a;http://mariadb.org 下載&#xff1a;mariadb-10.2.8-linux-x86_64.tar.gz3、創建mysql用戶rpm 安…

MiniAPI:.NET7 Preview4之MiniAPI更新總覽

一覺醒來&#xff0c;發現微軟帶來了.NET7 Preview4的更新&#xff0c;本次更新關于MiniAPI的還不少&#xff0c;難以掩飾的喜悅心情&#xff0c;促使我盡快把這個消息分享給大家&#xff0c;那下來我們看一下一共帶來了哪些關于MiniAPI的更新&#xff1a;返回值帶來了TypedRes…

[python opencv 計算機視覺零基礎到實戰] 六、圖像運算

一、學習目標 了解opencv中圖像運算的方法了解opencv中圖像運算的運用 如有錯誤歡迎指出~ 二、了解OpenCV中圖像運算的運用 目錄 [python opencv 計算機視覺零基礎到實戰] 一、opencv的helloworld [【python opencv 計算機視覺零基礎到實戰】二、 opencv文件格式與攝像頭…

Android之SubsamplingScaleImageView加載長圖不能放縮問題

1 問題 第三方開源框架用了這個第三方開源框架&#xff08;SubsamplingScaleImageView&#xff09;加載長圖&#xff0c;但是源代碼在有些手機上面不能進行放縮。 private void displayLongPic(Uri uri, SubsamplingScaleImageView longImg) {longImg.setQuickScaleEnabled(tr…

java barrier_Java并發類CyclicBarrier方法詳解

Cyclic是周期的意思&#xff0c;Barrier是關卡的意思。CyclicBarrier不僅有CountDownLatch的功能&#xff0c;還可以實現屏障等待&#xff0c;即階段性同步。因此適用于&#xff0c;需要循環地實現線程一起做任務的目標。CyclicBarrier允許一組線程相互等待&#xff0c;直到到達…

【ArcGIS風暴】實驗:公路建設成本的計算

實驗平臺:ArcGIS 9.3實驗目的:學習和掌握公路建設成本的計算方法實驗要求:熟練掌握如何生成通行成本層、計算成本距離,并學會計算最佳路徑,且對成本距離與直線距離進行比較。實驗數據:ArcEx7實驗步驟:生成通行成本層1.打開Arcmap,加載數據ArcEX7,如圖 2.執行spatial …

[leetcode]347. Top K Frequent Elements

Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2,2,3] and k 2, return [1,2]. Note: You may assume k is always valid, 1 ≤ k ≤ number of unique elements.Your algorithms time complexity must be better th…