使用 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" ...
随机推荐
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
- vue-router "path" is required in a route configuration
启用了动态路由,一直提示这个错误,页面打开也是空白,后来发现原来是component参数错误. 正确的写法为: component: () => import ('@/views/own-spa ...
- [转]操作MySQL数据库报出：Parameter index out of range (1 > number of parameters, which is
原文地址:https://blog.csdn.net/zdx_y/article/details/52072914 对MySQL进行insert操作,控制台抛出以下错误:Parameter index ...
- [转]java利用AES实现URL的参数加密
原文地址:http://h5566h.iteye.com/blog/1465426 很多时候需要在URL传参,希望URL参数能够加密,这里我结合了文章http://www.2cto.com/kf/20 ...
- Visual Studio无法导航到插入点下面的符号
Visual Studio2017编辑器按F12无法跳转到变量所属的类定义,弹窗提示[无法导航到插入点下面的符号],如下图: 解决办法: 方法一: 清理解决方案,重新生成. 方法二: 如果以上办法不行 ...
- [root]既然sudo 可以暂时获取root权限，那么为何还需要root这个用户呢
既然sudo 可以暂时获取root权限,那么为何还需要root这个用户呢 sudo 非root用户可以临时行使root权限,也就是非root用户可以操作该系统下的任何文件,仍然存在安全风险,怎么解释? ...
- iptables配置文件/etc/sysconfig/iptables内容详解
#头两行是注释说明# Firewall configuration written by system-config-securitylevel# Manual customization of th ...
- IEnumerable<T> 转换为数组
IEnumerable<User> userlist=xxxx; string[] ids=userlist.select(u=>u.id).toArray();
- openvpn之server配置篇
openvpn server的配置路径下有大约如下文件: [root@localhost server]# ll total -rw-r-----. nobody nobody Sep ca.crt ...
- centos 7 升级/安装 git 2.7.3
1.安装所需软件包 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel # yum instal ...