使用 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" ...
随机推荐
- testUrl
def ConnectTest(url): try: response = requests.get(url) return response.status_code except requests. ...
- JAVA-数据库之JDBC连接MySQL数据库
相关资料:<21天学通Java Web开发> JDBC连接MySQL数据库1.如果需要通过JDBC来连接MySQL数据库,还必须先在MySQL数据库服务器中创建数据库和表. Connect ...
- 轻松学习JavaScript二十七：DOM编程学习之事件模型
在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...
- ADO对Excel对象进行连接时的 两种方法区别
在通过ADO对Excel对象进行连接时(此时Excel则认为是一个数据源),需要配置对Excel数据源对应的连接串,这个连接串中包括了Provider信息(其实类似对数据库进行连接操作时,都需要指定连 ...
- windows C 盘大小异常增大并解决记录
前几天偶然看了一下 C 盘的大小,发现分配的 60 G 最后剩下 8G 可用.十分怀疑. 我先是下载 WizTree 工具进行查看C盘大小,有如下, pagefile.sys 是我修改后变为1G, 前 ...
- hive常用参数配置设置
hive.exec.mode.local.auto 决定 Hive 是否应该自动地根据输入文件大小,在本地运行(在GateWay运行) true hive.exec.mode.local.auto.i ...
- Linux系统中的以太网连接
1.在Linux中,以太网连接接口被命令为:eth0,eth1等,其中0,1表示网卡编号. 2.lspci来查看网卡硬件信息(USB则是lsusb) 3.ifconfig来查看接口信息 ifconfi ...
- R语言常用基础知识（入门）
data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...
- Java HashSet和HashMap源码剖析
转自: Java HashSet和HashMap源码剖析 总体介绍 之所以把HashSet和HashMap放在一起讲解,是因为二者在Java里有着相同的实现,前者仅仅是对后者做了一层包装,也就是说Ha ...
- Java如何暂停线程一段时间？
在Java编程中,如何暂停线程一段时间? 以下示例显示如何通过创建sleepThread()方法来暂停线程一段时间. package com.yiibai; public class Suspendi ...