使用 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" ...
随机推荐
- java中ThreadExecutor使用注意
如果使用了submit(Runnable task) 就会出现这种情况,任何的错误信息都出现不了! 这是因为使用submit(Runnable task) 的时候,错误的堆栈信息跑出来的时候会被内部捕 ...
- 基于9款CSS3鼠标悬停相册预览特效
基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="albums&q ...
- 词袋模型bow和词向量模型word2vec
在自然语言处理和文本分析的问题中,词袋(Bag of Words, BOW)和词向量(Word Embedding)是两种最常用的模型.更准确地说,词向量只能表征单个词,如果要表示文本,需要做一些额外 ...
- css部分样式资料
1. css字体 Lato,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif
- InstallShield Build错误：Internal build error 6041
点击左侧菜单: Media-Release-选择release版本(例如Release1)-Build标签- keey unused directories 改为no(默认为yes)
- <悟道一位IT高管20年的职场心经>笔记
1. 你一定会在某个时候惊讶地发现,原来当初你曾经硬着头皮挨过来的日子对你是那么的珍贵.2. "'老板就是老板'.这一点,你可能会忘,他一定不会忘.'老板不会总是老板'.这一点,他可能会忘, ...
- [mount]linux 挂载时 mount: wrong fs type, bad option, bad superblock on /dev/sdb
原因:挂载时未格式化,使用的文件系统格式不对 解决方案:格式化 sudo mkfs -t ext4 /dev/sdb 再挂载 sudo mount /dev/sdb /xxx/ 用df -h检查,发现 ...
- PCL采样一致性算法
在计算机视觉领域广泛的使用各种不同的采样一致性参数估计算法用于排除错误的样本,样本不同对应的应用不同,例如剔除错误的配准点对,分割出处在模型上的点集,PCL中以随机采样一致性算法(RANSAC)为核心 ...
- Eclipse配置方法注释模板
Java-->Code Style-->Code Templates-->Comments
- MATLAB — axis
转至:http://blog.csdn.net/cs_zlg/article/details/8516463 axis中文为“轴”之意,在matlab中用于控制坐标轴的范围和样式(颜色等). axis ...