使用 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 (strong, 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>
时间: 2024-08-30 00:36:44

使用 StoryBoard 实现左右按钮切换图片的浏览效果的相关文章

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

Axure初体验:简单交互、通过按钮切换图片

从元件库中选择"动态面板”,作为切换图片的面板 拖出一个动态面板 双击动态面板弹出管理窗口,点击添加按钮添加若干状态(StateXXX) 双击对应State可跳转到指定页面,随便加张图片 拖个按钮选中,然后点击右上面板中的“添加用例”(默认是设置鼠标点击时的) 点击“设置面板状态”.选择要设置的动态面板的名字.选择要跳转到的状态 按F5可打开浏览器预览

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <script type="text/javascrip

JQuery移动动画实现点击按钮切换图片--JQuery基础

直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

使用animate()完成修改图片src切换图片的动画效果

如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow", null, function(){ $(".TopImg").attr("src","../images/2.jpg"); $(".TopImg").animate({opacity:'toggle'},"slow&

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

jQuery箭头切换图片 - 学习笔记

jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移向量的长度       z 代表Z轴移向量的长度 取值不可为百 scale() 缩放 transform-origin:0 50%:        top left | left top 等价于 0 0       top | top center | center top 等价于 50% 0   

小白自制按钮切换滚动的走马灯幻灯片脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Android:使用ViewPager实现左右滑动切换图片(图上有点点)

在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&