使用 StoryBoard 实现左右按钮切换图片的浏览效果
关键技能：使用故事板进行布局时，点击选中控件（组件）并按住 control 键向某个方向拖动，产生一条实线，然后弹出的窗口可以设置控件（组件）的布局约束条件；从而实现自动布局 AutoLayout 效果。
效果如下：
iPhone 5s
iPhone 6
iPhone 6 Plus
ViewController.h
1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) IBOutlet UILabel *lblCurrentPage; 5 @property (strong, nonatomic) IBOutlet UILabel *lblDesc; 6 @property (strong, nonatomic) IBOutlet UIButton *btnLastPage; 7 @property (strong, nonatomic) IBOutlet UIButton *btnNextPage; 8 @property (strong, nonatomic) IBOutlet UIImageView *imgVCurrentImage; 9 @property (copy, nonatomic) NSArray *arrDesc; 10 @property (assign, nonatomic) NSUInteger currentPageIndex; 11 12 @end
ViewController.m
1 #import "ViewController.h" 2 3 @interface ViewController () 4 - (void)loadData; 5 - (void)changeImage; 6 @end 7 8 @implementation ViewController 9 10 - (void)viewDidLoad { 11 [super viewDidLoad]; 12 13 [self loadData]; 14 } 15 16 - (void)didReceiveMemoryWarning { 17 [super didReceiveMemoryWarning]; 18 // Dispose of any resources that can be recreated. 19 } 20 21 - (void)loadData { 22 _currentPageIndex = 0; 23 _arrDesc = @[@"我左摆摆，摆出人生精彩，跟我动起来，嗨嗨嗨，继续嗨嗨嗨", 24 @"我右摆摆，摆出人生活力，跟我跳起来，动次动次动次动次，切克闹切克闹切克闹切克闹", 25 @"运动完了，看看美好风景，人生就是一场说走就走的旅程，年轻的心态无极限，挑战自我"]; 26 27 [self changeImage]; 28 29 UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self 30 action:@selector(NextPageDidPush:)]; 31 [_imgVCurrentImage setUserInteractionEnabled:YES]; //设置是否允许用户交互，YES表示是；图片视图的此默认值为NO 32 [_imgVCurrentImage addGestureRecognizer:tapGesture]; 33 } 34 35 - (void)changeImage { 36 _lblCurrentPage.text = [NSString stringWithFormat:@"%lu / %lu", _currentPageIndex+1, (unsigned long)_arrDesc.count]; 37 _lblDesc.text = _arrDesc[_currentPageIndex]; 38 [UIView animateWithDuration:0.5 animations:^{ 39 [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp 40 forView:_imgVCurrentImage 41 cache:NO]; //从下往上翻页效果 42 43 _imgVCurrentImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"Animation%lu", _currentPageIndex+1]]; 44 }]; 45 46 BOOL isFirstPage = _currentPageIndex == 0; 47 BOOL isLastPage = _currentPageIndex == (_arrDesc.count-1); 48 49 _btnLastPage.enabled = !isFirstPage; 50 [_btnLastPage setImage:[UIImage imageNamed: (isFirstPage ? @"LastPageDisabled" : @"LastPageNormal")] 51 forState:UIControlStateNormal]; 52 _btnNextPage.enabled = !isLastPage; 53 [_btnNextPage setImage:[UIImage imageNamed: (isLastPage ? @"NextPageDisabled" : @"NextPageNormal")] 54 forState:UIControlStateNormal]; 55 } 56 57 - (IBAction)LastPageDidPush:(id)sender { 58 if (_currentPageIndex > 0) { 59 _currentPageIndex--; 60 [self changeImage]; 61 } 62 } 63 64 - (IBAction)NextPageDidPush:(id)sender { 65 if (_currentPageIndex < (_arrDesc.count-1)) { 66 _currentPageIndex++; 67 [self changeImage]; 68 } 69 } 70 71 @end
Main.storyboard
1 <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="vXZ-lx-hvc"> 3 <dependencies> 4 <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/> 5 <capability name="Constraints to layout margins" minToolsVersion="6.0"/> 6 </dependencies> 7 <scenes> 8 <!--View Controller--> 9 <scene sceneID="ufC-wZ-h7g"> 10 <objects> 11 <viewController id="vXZ-lx-hvc" customClass="ViewController" sceneMemberID="viewController"> 12 <layoutGuides> 13 <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/> 14 <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/> 15 </layoutGuides> 16 <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS"> 17 <rect key="frame" x="0.0" y="0.0" width="600" height="600"/> 18 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> 19 <subviews> 20 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="lblCurrentPage" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2rn-k5-nee"> 21 <rect key="frame" x="243" y="165" width="115" height="21"/> 22 <fontDescription key="fontDescription" type="system" pointSize="17"/> 23 <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> 24 <nil key="highlightedColor"/> 25 </label> 26 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0XW-Ld-DPn"> 27 <rect key="frame" x="36" y="278" width="44" height="44"/> 28 <state key="normal" image="LastPageNormal"> 29 <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> 30 </state> 31 <connections> 32 <action selector="LastPageDidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="sdH-bX-Wvo"/> 33 </connections> 34 </button> 35 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="F3M-ga-bbO"> 36 <rect key="frame" x="520" y="278" width="44" height="44"/> 37 <state key="normal" image="NextPageNormal"> 38 <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> 39 </state> 40 <connections> 41 <action selector="NextPageDidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="kBa-AG-rtr"/> 42 </connections> 43 </button> 44 <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="FSR-re-5VR"> 45 <rect key="frame" x="236" y="236" width="128" height="128"/> 46 <constraints> 47 <constraint firstAttribute="width" constant="128" id="A15-dk-tDT"/> 48 <constraint firstAttribute="height" constant="128" id="B2o-vf-9Kv"/> 49 </constraints> 50 </imageView> 51 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="lblDesc" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lPA-N4-07a"> 52 <rect key="frame" x="200" y="414" width="200" height="21"/> 53 <constraints> 54 <constraint firstAttribute="width" constant="200" id="abZ-zq-U1c"/> 55 </constraints> 56 <fontDescription key="fontDescription" type="system" pointSize="17"/> 57 <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> 58 <nil key="highlightedColor"/> 59 </label> 60 </subviews> 61 <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> 62 <gestureRecognizers/> 63 <constraints> 64 <constraint firstItem="lPA-N4-07a" firstAttribute="centerX" secondItem="FSR-re-5VR" secondAttribute="centerX" id="155-7w-BQh"/> 65 <constraint firstItem="2fi-mo-0CV" firstAttribute="top" secondItem="lPA-N4-07a" secondAttribute="bottom" constant="146" id="4Wu-OL-TUv"/> 66 <constraint firstAttribute="centerY" secondItem="FSR-re-5VR" secondAttribute="centerY" id="4gR-pT-H4v"/> 67 <constraint firstItem="FSR-re-5VR" firstAttribute="top" secondItem="2rn-k5-nee" secondAttribute="bottom" constant="50" id="4vq-aO-Z2w"/> 68 <constraint firstItem="2fi-mo-0CV" firstAttribute="top" secondItem="lPA-N4-07a" secondAttribute="bottom" constant="40" id="Fai-tf-2Y4"/> 69 <constraint firstAttribute="centerY" secondItem="0XW-Ld-DPn" secondAttribute="centerY" id="QDV-kk-L9x"/> 70 <constraint firstItem="0XW-Ld-DPn" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leadingMargin" constant="20" id="Vmi-Nf-8v9"/> 71 <constraint firstItem="2rn-k5-nee" firstAttribute="leading" secondItem="FSR-re-5VR" secondAttribute="leading" constant="43" id="WaO-yE-h9X"/> 72 <constraint firstAttribute="trailingMargin" secondItem="F3M-ga-bbO" secondAttribute="trailing" constant="20" id="Y7d-XF-JWj"/> 73 <constraint firstItem="lPA-N4-07a" firstAttribute="top" secondItem="FSR-re-5VR" secondAttribute="bottom" constant="50" id="aAu-Ke-dVL"/> 74 <constraint firstAttribute="centerX" secondItem="2rn-k5-nee" secondAttribute="centerX" id="hKO-vm-ZFm"/> 75 <constraint firstAttribute="centerX" secondItem="FSR-re-5VR" secondAttribute="centerX" id="rfi-os-Lij"/> 76 <constraint firstAttribute="centerY" secondItem="F3M-ga-bbO" secondAttribute="centerY" id="wrN-bf-NhM"/> 77 </constraints> 78 <variation key="default"> 79 <mask key="constraints"> 80 <exclude reference="WaO-yE-h9X"/> 81 <exclude reference="4Wu-OL-TUv"/> 82 <exclude reference="Fai-tf-2Y4"/> 83 </mask> 84 </variation> 85 </view> 86 <connections> 87 <outlet property="btnLastPage" destination="0XW-Ld-DPn" id="tyx-fE-SWP"/> 88 <outlet property="btnNextPage" destination="F3M-ga-bbO" id="2Lb-gz-dZr"/> 89 <outlet property="imgVCurrentImage" destination="FSR-re-5VR" id="BsF-QZ-AVi"/> 90 <outlet property="lblCurrentPage" destination="2rn-k5-nee" id="jyA-KO-wvh"/> 91 <outlet property="lblDesc" destination="lPA-N4-07a" id="Csv-k5-UNN"/> 92 </connections> 93 </viewController> 94 <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/> 95 </objects> 96 </scene> 97 </scenes> 98 <resources> 99 <image name="LastPageNormal" width="44" height="44"/> 100 <image name="NextPageNormal" width="44" height="44"/> 101 </resources> 102 </document>
感谢您的阅读，敬请关注我的后续博客文章
