使用 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#学习笔记（18）——C#构造函数中this和base的使用
说明(2017-7-21 10:29:44): 1. 关于构造函数里的this和base,在网上查了很多资料,但都没有讲的很清楚的,或者是能让我看懂的,感觉都是叽叽歪歪,罗里吧嗦,磨磨唧唧的,有的直接 ...
- Node.js学习笔记（4）--简单路由，老师学生id
说明(2017-5-2 17:57:23): 1. foo.js var http = require("http"); var url = require("url&q ...
- stdafx
Standard Application Fram Extend没有函数库,只是定义了一些环境参数,使得编译出来的程序能在32位的操作系统环境下运行. Windows和MFC的include文件都非常 ...
- JS自动关闭授权弹窗，并刷新父页面
echo "<script>window.opener.location.href='index.php'; window.close();</script>&quo ...
- 变量使用self.foo还是_foo
selfOR_html, body {overflow-x: initial !important;}html { font-size: 14px; } body { margin: 0px; pad ...
- 【Unity】使用Resources类管理资源
最近参考了各位大神的资源,初步学习了Unity的资源管理模式,包括在编辑器管理(使用AssetDatabase)和在运行时管理(使用Resources和AssetBundle).在此简单总结运行时用R ...
- WPF视频会议系统资料
Android和C#实现实时视频传输Demo 视频会议及流媒体十大开源项目 WinForm二三事(三)Control.Invoke&Control.BeginInvoke
- SQLServer 错误: 15404，无法获取有关 Windows NT 组
右击-属性-所有者改成sa 测试一下 右击 --- 作业开始步骤---执行成功
- 你真的理解devDependencies和dependencies区别吗?
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/achenyuan/article/details/80899783 网上统一的观念是 devDep ...
- R语言使用tryCatch进行简单的错误处理
最近在看<机器学习:实用案例解析>,做邮件过滤器的时候,参考书中的代码读取邮件文件进行分类器训练,在读取过程中会出现下面的错误: seq.default(which(text == & ...