使用 StoryBoard 实现左右按钮切换图片的浏览效果
关键技能：使用故事板进行布局时，点击选中控件（组件）并按住 control 键向某个方向拖动，产生一条实线，然后弹出的窗口可以设置控件（组件）的布局约束条件；从而实现自动布局 AutoLayout 效果。
效果如下：
iPhone 5s
iPhone 6
iPhone 6 Plus
ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UILabel *lblCurrentPage;
@property (strong, nonatomic) IBOutlet UILabel *lblDesc;
@property (strong, nonatomic) IBOutlet UIButton *btnLastPage;
@property (strong, nonatomic) IBOutlet UIButton *btnNextPage;
@property (strong, nonatomic) IBOutlet UIImageView *imgVCurrentImage;
@property (copy, nonatomic) NSArray *arrDesc;
@property (assign, nonatomic) NSUInteger currentPageIndex; @end
ViewController.m
#import "ViewController.h" @interface ViewController ()
- (void)loadData;
- (void)changeImage;
@end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; [self loadData];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} - (void)loadData {
_currentPageIndex = ;
_arrDesc = @[@"我左摆摆，摆出人生精彩，跟我动起来，嗨嗨嗨，继续嗨嗨嗨",
@"我右摆摆，摆出人生活力，跟我跳起来，动次动次动次动次，切克闹切克闹切克闹切克闹",
@"运动完了，看看美好风景，人生就是一场说走就走的旅程，年轻的心态无极限，挑战自我"]; [self changeImage]; UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(NextPageDidPush:)];
[_imgVCurrentImage setUserInteractionEnabled:YES]; //设置是否允许用户交互，YES表示是；图片视图的此默认值为NO
[_imgVCurrentImage addGestureRecognizer:tapGesture];
} - (void)changeImage {
_lblCurrentPage.text = [NSString stringWithFormat:@"%lu / %lu", _currentPageIndex+, (unsigned long)_arrDesc.count];
_lblDesc.text = _arrDesc[_currentPageIndex];
[UIView animateWithDuration:0.5 animations:^{
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
forView:_imgVCurrentImage
cache:NO]; //从下往上翻页效果 _imgVCurrentImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"Animation%lu", _currentPageIndex+]];
}]; BOOL isFirstPage = _currentPageIndex == ;
BOOL isLastPage = _currentPageIndex == (_arrDesc.count-); _btnLastPage.enabled = !isFirstPage;
[_btnLastPage setImage:[UIImage imageNamed: (isFirstPage ? @"LastPageDisabled" : @"LastPageNormal")]
forState:UIControlStateNormal];
_btnNextPage.enabled = !isLastPage;
[_btnNextPage setImage:[UIImage imageNamed: (isLastPage ? @"NextPageDisabled" : @"NextPageNormal")]
forState:UIControlStateNormal];
} - (IBAction)LastPageDidPush:(id)sender {
if (_currentPageIndex > ) {
_currentPageIndex--;
[self changeImage];
}
} - (IBAction)NextPageDidPush:(id)sender {
if (_currentPageIndex < (_arrDesc.count-)) {
_currentPageIndex++;
[self changeImage];
}
} @end
Main.storyboard
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="ufC-wZ-h7g">
<objects>
<viewController id="vXZ-lx-hvc" customClass="ViewController" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/>
<viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<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">
<rect key="frame" x="243" y="165" width="115" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0XW-Ld-DPn">
<rect key="frame" x="36" y="278" width="44" height="44"/>
<state key="normal" image="LastPageNormal">
<color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="LastPageDidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="sdH-bX-Wvo"/>
</connections>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="F3M-ga-bbO">
<rect key="frame" x="520" y="278" width="44" height="44"/>
<state key="normal" image="NextPageNormal">
<color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="NextPageDidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="kBa-AG-rtr"/>
</connections>
</button>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="FSR-re-5VR">
<rect key="frame" x="236" y="236" width="128" height="128"/>
<constraints>
<constraint firstAttribute="width" constant="128" id="A15-dk-tDT"/>
<constraint firstAttribute="height" constant="128" id="B2o-vf-9Kv"/>
</constraints>
</imageView>
<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">
<rect key="frame" x="200" y="414" width="200" height="21"/>
<constraints>
<constraint firstAttribute="width" constant="200" id="abZ-zq-U1c"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<gestureRecognizers/>
<constraints>
<constraint firstItem="lPA-N4-07a" firstAttribute="centerX" secondItem="FSR-re-5VR" secondAttribute="centerX" id="155-7w-BQh"/>
<constraint firstItem="2fi-mo-0CV" firstAttribute="top" secondItem="lPA-N4-07a" secondAttribute="bottom" constant="146" id="4Wu-OL-TUv"/>
<constraint firstAttribute="centerY" secondItem="FSR-re-5VR" secondAttribute="centerY" id="4gR-pT-H4v"/>
<constraint firstItem="FSR-re-5VR" firstAttribute="top" secondItem="2rn-k5-nee" secondAttribute="bottom" constant="50" id="4vq-aO-Z2w"/>
<constraint firstItem="2fi-mo-0CV" firstAttribute="top" secondItem="lPA-N4-07a" secondAttribute="bottom" constant="40" id="Fai-tf-2Y4"/>
<constraint firstAttribute="centerY" secondItem="0XW-Ld-DPn" secondAttribute="centerY" id="QDV-kk-L9x"/>
<constraint firstItem="0XW-Ld-DPn" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leadingMargin" constant="20" id="Vmi-Nf-8v9"/>
<constraint firstItem="2rn-k5-nee" firstAttribute="leading" secondItem="FSR-re-5VR" secondAttribute="leading" constant="43" id="WaO-yE-h9X"/>
<constraint firstAttribute="trailingMargin" secondItem="F3M-ga-bbO" secondAttribute="trailing" constant="20" id="Y7d-XF-JWj"/>
<constraint firstItem="lPA-N4-07a" firstAttribute="top" secondItem="FSR-re-5VR" secondAttribute="bottom" constant="50" id="aAu-Ke-dVL"/>
<constraint firstAttribute="centerX" secondItem="2rn-k5-nee" secondAttribute="centerX" id="hKO-vm-ZFm"/>
<constraint firstAttribute="centerX" secondItem="FSR-re-5VR" secondAttribute="centerX" id="rfi-os-Lij"/>
<constraint firstAttribute="centerY" secondItem="F3M-ga-bbO" secondAttribute="centerY" id="wrN-bf-NhM"/>
</constraints>
<variation key="default">
<mask key="constraints">
<exclude reference="WaO-yE-h9X"/>
<exclude reference="4Wu-OL-TUv"/>
<exclude reference="Fai-tf-2Y4"/>
</mask>
</variation>
</view>
<connections>
<outlet property="btnLastPage" destination="0XW-Ld-DPn" id="tyx-fE-SWP"/>
<outlet property="btnNextPage" destination="F3M-ga-bbO" id="2Lb-gz-dZr"/>
<outlet property="imgVCurrentImage" destination="FSR-re-5VR" id="BsF-QZ-AVi"/>
<outlet property="lblCurrentPage" destination="2rn-k5-nee" id="jyA-KO-wvh"/>
<outlet property="lblDesc" destination="lPA-N4-07a" id="Csv-k5-UNN"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/>
</objects>
</scene>
</scenes>
<resources>
<image name="LastPageNormal" width="44" height="44"/>
<image name="NextPageNormal" width="44" height="44"/>
</resources>
</document>
使用 StoryBoard 实现左右按钮切换图片的浏览效果的更多相关文章
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- Axure初体验:简单交互、通过按钮切换图片
前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...
- JS解决通过按钮切换图片的问题
我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Unity UGUI暂停按钮切换图片代码
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- JQuery移动动画实现点击按钮切换图片--JQuery基础
直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...
随机推荐
- C#学习笔记（13）——传统方法读取XML
说明(2017-7-12 16:32:47): 1. LINQ的方法虽然很简单,但是有点不好理解,sql的写法总感觉很诡异,而且LINQ的本质也是用的传统方法,所以还是采用老办法吧! 2. 注释里的代 ...
- 3. DNN神经网络的正则化
1. DNN神经网络的前向传播(FeedForward) 2. DNN神经网络的反向更新(BP) 3. DNN神经网络的正则化 1. 前言 和普通的机器学习算法一样,DNN也会遇到过拟合的问题,需要考 ...
- 1. 感知机原理（Perceptron）
1. 感知机原理(Perceptron) 2. 感知机(Perceptron)基本形式和对偶形式实现 3. 支持向量机(SVM)拉格朗日对偶性(KKT) 4. 支持向量机(SVM)原理 5. 支持向量 ...
- Android MediaScanner 总纲
1. MediaScanner HEAD 2. 应用层 MediaProvider packages\providers\MediaProvider (1) MediaProvider package ...
- 为什么hash作为内存使用的经典数据结构?
听到这样说法:hash是内存中使用的经典数据结构.内存是典型的随机访问设备. 为什么hash这种数据结构很适合内存使用呢?如何理解内存是随机访问设备呢? 因为我想知其所以然,如何理解背后的原因,我花费 ...
- C#中的volatile关键字
volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时间呈现的都是最新的值. vo ...
- C语言 · 字串逆序
算法训练 字串逆序 时间限制:1.0s 内存限制:512.0MB 问题描述 给定一个字符串,将这个串的所有字母逆序后输出. 输入格式 输入包含一个字符串,长度不超过100,字符串中不 ...
- 区块链blockchina简述
区块链是比特币的底层技术和基础架构,本质上是一个去中心化的数据库.区块链是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一次比特币网络交易的信息,用于验证其信息的有效性(防伪)并生成下一个 ...
- Mask R-CNN详解和安装
Detectron是Facebook的物体检测平台,今天宣布开源,它基于Caffe2,用Python写成,这次开放的代码中就包含了Mask R-CNN的实现. 除此之外,Detectron还包含了IC ...
- Java编程的逻辑 (41) - 剖析HashSet
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...