# UIKit & graphics

Language: en
Canonical: [UIKit & graphics](<https://allluckly.cn/en/journal/topics/uikit-graphics/>)
中文：[中文 HTML](<https://allluckly.cn/journal/topics/uikit-graphics/>)
English: [English HTML](<https://allluckly.cn/en/journal/topics/uikit-graphics/>)

DEVELOPMENT NOTES · 48 articles

A visual effect often depends on layout, events and drawing at the same time. These historical notes start with concrete controls and record how lists, rich text, transitions and animations were built. Pick the article closest to the problem in front of you.

## How to read this collection

1. Begin with the control or interaction involved: list heights, event delivery, text input or popovers. That gives animation code a useful context.
2. For animations, separate the initial state, final state, duration and coordinate transforms. Then compare UIView animations, keyframes and Core Animation.
3. For Core Text, Core Graphics and wave effects, check the coordinate system, drawing bounds and Swift version before reusing visual parameters.

These notes date from 2015–2017. Their examples have not been rerun for this archive update. Check the dates and version notes before applying the ideas to a current project.

## Articles in this topic

48 articles · newest first

- 2016-11-14 

  ### [Custom iOS Transitions with a Two-Line API](<https://allluckly.cn/en/journal/2016-11-14-custom-ios-transitions-with-a-two-line-api/>)

   

  Introduces WTKTransitionAnimate, selecting transitions through a navigation delegate and factory methods. It combines drag gestures with percentage-based progress to implement an interactive back transition and explains the organization behind the wrapper.

   

  逆流丶而上 WTKTransitionAnimate · navigation transitions · interactive animation
- 2016-10-09 

  ### [Practical UITextField Input Rules and Keyboard Handling](<https://allluckly.cn/en/journal/2016-10-09-practical-uitextfield-input-rules-and-keyboard-handling/>)

   

  Addresses text length, numeric and currency input, Chinese input composition, and keyboard overlap. Categories and runtime features organize extensible input rules, while keyboard notifications are used to adjust the interface position.

   

  Sindri UITextField · input validation · Chinese text input
- 2016-09-20 

  ### [Animating iOS Buttons with Core Animation](<https://allluckly.cn/en/journal/2016-09-20-animating-ios-buttons-with-core-animation/>)

   

  Builds on Core Animation fundamentals to animate button gradients and shapes with CALayer, CABasicAnimation, and animation groups. It explains layer properties, timing, and the organization of cooperating animations.

   

  Sindri Core Animation · CABasicAnimation · CAAnimationGroup
- 2016-09-09 

  ### [Recreating the Profile Avatar Wave Animation in Baidu Waimai](<https://allluckly.cn/en/journal/2016-09-09-recreating-the-profile-avatar-wave-animation-in-baidu-waimai/>)

   

  Breaks down the waves around a profile avatar: CADisplayLink drives updates, trigonometric functions generate the curves, and CAShapeLayer draws them. It explains the components needed for a continuous wave animation.

   

  乔同X CADisplayLink · CAShapeLayer · wave animation
- 2016-07-12 

  ### [iOS game development with UIKit: Hardest](<https://allluckly.cn/en/journal/2016-07-12-ios-game-development-with-uikit-hardest/>)

   

  Introduces the structure of the Hardest mini-game built with Objective-C and UIKit, including level selection, game state, score calculation, sound effects and saved data. It also distinguishes this exercise from work better suited to a dedicated game engine.

   

  维尼的小熊 UIKit · mini-games · level management
- 2016-07-04 

  ### [Breaking Down a Complex iOS Animation: Objective-C and Swift](<https://allluckly.cn/en/journal/2016-07-04-breaking-down-a-complex-ios-animation-objective-c-and-swift/>)

   

  Breaks a welcome-screen animation into circular scaling, elliptical compression, edge bulges, rotation, and a wave fill. The article sequences layer and path changes to show how a visual effect can be translated into implementable animation steps.

   

  HenryCheng CAShapeLayer · path animation · keyframe animation
- 2016-06-19 

  ### [An introduction to Core Animation on iOS](<https://allluckly.cn/en/journal/2016-06-19-an-introduction-to-core-animation-on-ios/>)

   

  Introduces Core Animation through CALayer, CAAnimation and CAAction, explaining the relationship between layers and animation objects, timing control and action lookup. Examples distinguish the organisation of implicit and explicit animations.

   

  Sindri Core Animation · CALayer · CAAnimation
- 2016-06-12 

  ### [Adding a launch advertisement to an iOS app](<https://allluckly.cn/en/journal/2016-06-12-adding-a-launch-advertisement-to-an-ios-app/>)

   

  Wraps a launch-ad view with full-screen and bottom-logo layouts. SDWebImage fetches the ad image, while opacity animation and block callbacks handle presentation, taps and dismissal.

   

  Bison LBLaunchImageAd · splash ads · SDWebImage
- 2016-05-12 

  ### [iOS animation: a fragment-based reveal](<https://allluckly.cn/en/journal/2016-05-12-ios-animation-a-fragment-based-reveal/>)

   

  Explains how UIView's maskView affects which content is visible, then divides the mask into regions and animates them separately. These steps build a fragmented reveal and an image-carousel transition.

   

  Sindri maskView · fragment animation · UIView
- 2016-04-29 

  ### [Rich text with hyperlinks on iOS](<https://allluckly.cn/en/journal/2016-04-29-rich-text-with-hyperlinks-on-ios/>)

   

  Draws attributed strings with Core Text, inserts images into reserved text positions and adds hyperlink interaction, then compares the approach with TextKit. The examples connect the basic steps needed for chat emoji and mixed text-and-image layout.

   

  Sindri Core Text · NSAttributedString · mixed text and images
- 2016-04-15 

  ### [Building a Pomodoro timer app for iOS](<https://allluckly.cn/en/journal/2016-04-15-building-a-pomodoro-timer-app-for-ios/>)

   

  Connects timers, notification reminders, music playback and a Today Widget in a Pomodoro app. It identifies implementation entry points for card layouts, transitions, xib files and URL Schemes, helping readers follow how the features fit together in the project.

   

  威權在B612等着那阵温柔的风 Pomodoro timer · NSTimer · Today Widget
- 2016-03-23 

  ### [iOS animation: a closer look at layout animation](<https://allluckly.cn/en/journal/2016-03-23-ios-animation-a-closer-look-at-layout-animation/>)

   

  Uses an expanding account list and a shrinking button on a login page to demonstrate animating top, height and horizontal-margin constraints. It examines how the view hierarchy and constraint changes work together to produce a continuous transition.

   

  Sindri Auto Layout · layoutIfNeeded · login animation
- 2016-03-17 

  ### [A circular expanding transition in Swift, inspired by Gewara](<https://allluckly.cn/en/journal/2016-03-17-a-circular-expanding-transition-in-swift-inspired-by-gewara/>)

   

  Moves from an ordinary navigation push to an expanding circular transition, using a CALayer mask to control the revealed area. Gesture-driven animation extends the example, which is explained in Swift with an Objective-C implementation for comparison.

   

  HenryCheng custom transitions · CALayer mask · Swift
- 2016-03-15 

  ### [Building a WeChat-style iOS app, part 7](<https://allluckly.cn/en/journal/2016-03-15-building-a-wechat-style-ios-app-part-7/>)

   

  Breaks down the chat input bar and message cells, using blocks to send submission and visibility events to the controller. Message ownership determines avatars and stretchable bubble backgrounds, while model-side sizing accommodates messages of different lengths.

   

  WzxJiang chat interface · UITableViewCell · bubble layout
- 2016-03-04 

  ### [Core Graphics for Swift developers: an in-depth introduction](<https://allluckly.cn/en/journal/2016-03-04-core-graphics-for-swift-developers-an-in-depth-introduction/>)

   

  Starts with obtaining a drawing context and constructing paths, then draws rectangles, circles, curves, text and images in Swift. Further examples cover linear and radial gradients, blend modes, coordinate transforms, and bitmap and PDF output.

   

  大石头布 Core Graphics · Quartz 2D · Bézier curves
- 2016-02-28 

  ### [A first look at Auto Layout animation on iOS](<https://allluckly.cn/en/journal/2016-02-28-a-first-look-at-auto-layout-animation-on-ios/>)

   

  Introduces constraints through text layouts in portrait and landscape, then breaks down an interface that animates as a list scrolls. Changing constraint values controls element positions and sizes, demonstrating the basics of combining Auto Layout with animation.

   

  SindriLin Auto Layout · NSLayoutConstraint · constraint animation
- 2016-02-22 

  ### [GitHub source-code picks, February 22: SmallDay and LoveFreshBeen in Swift 2.0](<https://allluckly.cn/en/journal/2016-02-22-github-source-code-picks-february-22-smallday-and-lovefreshbeen-in-swift-2-0/>)

   

  Selects two Swift 2.0 recreation projects, SmallDay and LoveFreshBeen. Repository links and an introduction to their author let readers inspect complete projects to study screen organisation and UI implementation.

   

  Bison Swift 2.0 · SmallDay · LoveFreshBeen
- 2016-02-17 

  ### [A custom pull-to-refresh control in Swift](<https://allluckly.cn/en/journal/2016-02-17-a-custom-pull-to-refresh-control-in-swift/>)

   

  Creates a text view in a xib file to cover UIRefreshControl's default appearance, then rotates, recolours and scales the letters in stages. Simulated loading and row insertion connect the beginning and end of the custom refresh workflow.

   

  威權在B612等着那阵温柔的风 Swift · UIRefreshControl · xib
- 2016-02-15 

  ### [Custom iOS view-controller transitions in practice](<https://allluckly.cn/en/journal/2016-02-15-custom-ios-view-controller-transitions-in-practice/>)

   

  Distinguishes the roles of from, to and presenting controllers, then implements custom modal and navigation transitions. Interactive animations and the transition coordinator extend the examples and explain how to organise reusable animation logic.

   

  bestswifter UIViewController transitions · interactive animation · UINavigationController
- 2016-02-15 

  ### [iOS animation: transforms and keyframes](<https://allluckly.cn/en/journal/2016-02-15-ios-animation-transforms-and-keyframes/>)

   

  Uses changing seasonal text and falling leaves to explain affine transforms and keyframe animation. Scaling, translation and rotation are combined step by step, showing how transform parameters and animation stages affect the resulting motion.

   

  SindriLin CGAffineTransform · keyframe animation · UIView
- 2016-02-05 

  ### [Core Text layout in Swift 2.0, continued](<https://allluckly.cn/en/journal/2016-02-05-core-text-layout-in-swift-2-0-continued/>)

   

  Builds on basic Core Text layout by examining baselines, ascenders, descenders and other font metrics. Drawing line by line gives Chinese text and emoji consistent line heights, before extending the rich-text interaction to links and mentions.

   

  大石头布 Core Text · CTLineDraw · font metrics
- 2016-02-01 

  ### [Building a WeChat-style iOS app, part 3](<https://allluckly.cn/en/journal/2016-02-01-building-a-wechat-style-ios-app-part-3/>)

   

  Continues the main interface by exposing constraints from xib files and adjusting their constant values for the screen. It also refines navigation-bar button positions and loads images with SDWebImage placeholders.

   

  WzxJiang Auto Layout · xib · UIBarButtonItem
- 2016-01-31 

  ### [Core Text layout in Swift 2.0: an in-depth introduction](<https://allluckly.cn/en/journal/2016-01-31-core-text-layout-in-swift-2-0-an-in-depth-introduction/>)

   

  Begins with attributed-text properties such as fonts, colours and ranges, then introduces Core Text's layout and drawing steps. Combining text and images illustrates the basic objects needed for more complex text interfaces.

   

  大石头布 Swift 2.0 · Core Text · NSAttributedString
- 2016-01-30 

  ### [Building a WeChat-style iOS app, part 2](<https://allluckly.cn/en/journal/2016-01-30-building-a-wechat-style-ios-app-part-2/>)

   

  Builds the Contacts, Discover and profile screens using grouped UITableViews and a custom personal-information cell. Sorting and grouping the contact data demonstrates the initial interface structure shared by several pages.

   

  WzxJiang UITableView · contacts · grouped lists
- 2016-01-29 

  ### [Building a WeChat-style iOS app, part 1](<https://allluckly.cn/en/journal/2016-01-29-building-a-wechat-style-ios-app-part-1/>)

   

  The opening instalment organises the project and its MVC folders, introduces shared view controllers, and creates the feature pages and UITabBarController. It establishes the common navigation structure that later screens will use.

   

  WzxJiang WeChat-style app · MVC · UITabBarController
- 2016-01-28 

  ### [Moving cell images as a table view scrolls](<https://allluckly.cn/en/journal/2016-01-28-moving-cell-images-as-a-table-view-scrolls/>)

   

  Adjusts an image's position using the offset between the cell's centre and its parent view's centre, creating parallax during UITableView scrolling. It records the custom cell and visible-item updates, with adapted code and a link to the original project.

   

  WzxJiang UITableView · parallax · cell reuse
- 2016-01-22 

  ### [iOS animation: starting with UIView animations](<https://allluckly.cn/en/journal/2016-01-22-ios-animation-starting-with-uiview-animations/>)

   

  Uses a login screen's arriving text fields and appearing button to introduce animatable UIView properties, duration and options. Adding spring animations shows how position, opacity and transforms can be combined into a continuous sequence.

   

  SindriLin UIView animation · animatable properties · spring animation
- 2016-01-22 

  ### [Understanding parallax animation in iOS](<https://allluckly.cn/en/journal/2016-01-22-understanding-parallax-animation-in-ios/>)

   

  Explains parallax through the positions of several view layers. Dragging the middle layer, compensating for the text layer's offset and clipping overflow keeps the text stationary relative to the bottom layer, showing how occlusion and movement combine.

   

  WzxJiang parallax animation · clipsToBounds · view hierarchy
- 2016-01-19 

  ### [A League of Legends skin-selection animation with UICollectionViewFlowLayout](<https://allluckly.cn/en/journal/2016-01-19-a-league-of-legends-skin-selection-animation-with-uicollectionviewflowlayout/>)

   

  Builds a character-skin selection effect with a custom UICollectionViewFlowLayout. It adjusts layout attributes and the final scroll position, then integrates the layout subclass into the collection view to keep the selected card centred.

   

  WzxJiang UICollectionViewFlowLayout · card layouts · scroll positioning
- 2016-01-17 

  ### [Recreating pop-up effects from Jianshu and Taobao on iOS](<https://allluckly.cn/en/journal/2016-01-17-recreating-pop-up-effects-from-jianshu-and-taobao-on-ios/>)

   

  Separates the effect into content, a dimming overlay and the presented view. Two-stage layer transforms and dismissal animation make the background appear to recede, while the article explains the stacking order when adding views to a window.

   

  WzxJiang pop-up views · CATransform3D · overlays
- 2016-01-14 

  ### [Recreating an animation from the National Geographic iOS app](<https://allluckly.cn/en/journal/2016-01-14-recreating-an-animation-from-the-national-geographic-ios-app/>)

   

  Breaks down a National Geographic-inspired pop-up page animation into status-bar hiding, view dragging and spring-back, navigation-bar coordination and back-button colour changes. The implementation follows how several interface layers move together.

   

  WzxJiang UIView animation · drag gestures · navigation bar
- 2016-01-13 

  ### [Building a custom pop-up view with HWPopTool](<https://allluckly.cn/en/journal/2016-01-13-building-a-custom-pop-up-view-with-hwpoptool/>)

   

  Introduces HWPopTool integration and its controls for the content view, background overlay and close button. It also explains how to handle closing after the component changed its callback mechanism from a delegate to a block.

   

  HenryCheng HWPopTool · pop-up views · overlays
- 2016-01-13 

  ### [Event delivery and the responder chain in iOS](<https://allluckly.cn/en/journal/2016-01-13-event-delivery-and-the-responder-chain-in-ios/>)

   

  Uses UIResponder, UIEvent and UITouch to explain how touch events reach views. Custom views reveal the relationship between the responder chain and gestures, followed by discussion of how event-delivery behaviour can be used in an interface.

   

  SindriLin UIResponder · responder chain · UITouch
- 2016-01-04 

  ### [A Windows AliWangWang-style login screen with a paper-feed animation](<https://allluckly.cn/en/journal/2016-01-04-a-windows-aliwangwang-style-login-screen-with-a-paper-feed-animation/>)

   

  Recreates the printer-paper login animation from Windows AliWangWang. Keeping the view's horizontal position and width fixed while gradually adjusting its height creates the unfolding effect; the LBPrinterPaper project supplies the example.

   

  Bison UIView animation · frame · login screen
- 2015-12-07 

  ### [GitHub source-code picks, December 25: gesture unlock, a profile SDK and an image carousel](<https://allluckly.cn/en/journal/2015-12-07-github-source-code-picks-december-25-gesture-unlock-a-profile-sdk-and-an-image-carousel/>)

   

  Collects three open-source components for gesture unlocking, a profile page and an infinite image carousel. Download links and selected integration code help readers identify the component that matches an interface requirement.

   

  Bison PCGestureUnlock · LBPersonalPage · SDCycleScrollView
- 2015-11-23 

  ### [Mac development series: NSImageView](<https://allluckly.cn/en/journal/2015-11-23-mac-development-series-nsimageview/>)

   

  Demonstrates creating an NSImageView, assigning an image and adding it to a macOS interface. Enabling its backing layer and configuring corner radius and border then produces a circular avatar style.

   

  Bison macOS · NSImageView · NSImage
- 2015-10-24 

  ### [Integrating an endlessly flipping 3D banner in one minute](<https://allluckly.cn/en/journal/2015-10-24-integrating-an-endlessly-flipping-3d-banner-in-one-minute/>)

   

  Combines left and right swipe gestures with transition animations to cycle through banner images in 3D. It covers component import and tap delegation, while explicitly noting that the effect uses a private animation API and is retained as a technical experiment.

   

  Bison Banner · CATransition · gesture interaction
- 2015-10-19 

  ### [iOS 9 3D Touch quick actions, with a Swift update](<https://allluckly.cn/en/journal/2015-10-19-ios-9-3d-touch-quick-actions-with-a-swift-update/>)

   

  Explains iOS 9 Home Screen quick actions: defining icons, titles and types in Info.plist, then dispatching selections through AppDelegate. Both Objective-C and Swift implementations illustrate the configuration and callback flow.

   

  Bison 3D Touch · UIApplicationShortcutItem · AppDelegate
- 2015-09-19 

  ### [Building a UICollectionView programmatically in Swift](<https://allluckly.cn/en/journal/2015-09-19-building-a-uicollectionview-programmatically-in-swift/>)

   

  Starts with data-source and delegate setup, then builds UICollectionView cells, loads network data and adds reusable headers. These steps bring together the structure of a collection-view interface implemented entirely in Swift code.

   

  Bison UICollectionView · Swift · Alamofire
- 2015-09-07 

  ### [A Swift profile page with a simple integration](<https://allluckly.cn/en/journal/2015-09-07-a-swift-profile-page-with-a-simple-integration/>)

   

  Shows how to integrate the Swift version of a profile-page component. Importing LBSwift\_PersonalPage and inheriting from its controller reuses the interface, while the example code demonstrates the relationship between the wrapper and its callers.

   

  Bison Swift · LBSwift\_PersonalPage · profile screen
- 2015-08-31 

  ### [An iOS profile page in one minute](<https://allluckly.cn/en/journal/2015-08-31-an-ios-profile-page-in-one-minute/>)

   

  Introduces integration of the LBPersonalPage\_VC profile-page component. Importing its files, inheriting from the base controller and adding configuration lets a project reuse the page's visual behaviour; the example project provides the implementation details.

   

  Bison LBPersonalPage · profile screen · UITableView
- 2015-08-25 

  ### [Exploring Swift: building a tab bar entirely in code](<https://allluckly.cn/en/journal/2015-08-25-exploring-swift-building-a-tab-bar-entirely-in-code/>)

   

  Builds a Zhe800-inspired tab bar using early Swift syntax. It creates child view controllers, assigns titles and icons, and adds them to the system tab bar, illustrating how to organise a navigation structure programmatically.

   

  Bison Swift · UITabBarController · child view controllers
- 2015-08-17 

  ### [Disabling the system swipe-back gesture on iOS](<https://allluckly.cn/en/journal/2015-08-17-disabling-the-system-swipe-back-gesture-on-ios/>)

   

  Addresses an embedded game unexpectedly revealing navigation and tab bars during a swipe. The article shows where to control the navigation controller's built-in back gesture and records how that interaction was disabled for a particular screen.

   

  Bison UINavigationController · back gesture · interactivePopGestureRecognizer
- 2015-07-29 

  ### [Animating a view around another view on iOS](<https://allluckly.cn/en/journal/2015-07-29-animating-a-view-around-another-view-on-ios/>)

   

  Explains how to move a view around the centre of an image. Trigonometric functions calculate points on a circle, and updating the view coordinates produces an orbiting animation without a complex animation framework.

   

  Bison UIView · circular motion · trigonometry
- 2015-07-15 

  ### [Creating long-form Weibo images in an iOS app](<https://allluckly.cn/en/journal/2015-07-15-creating-long-form-weibo-images-in-an-ios-app/>)

   

  Turns a long passage of text into an image for a long-form Weibo post. The code works through text width, font size, required height and image drawing, demonstrating an early UIKit approach to generating a tall image at a fixed width.

   

  Bison tall images · text drawing · UIKit
- 2015-06-21 

  ### [Google Maps on iOS: markers and route playback](<https://allluckly.cn/en/journal/2015-06-21-google-maps-on-ios-markers-and-route-playback/>)

   

  Records a Google Maps integration intended to make map presentation consistent across iOS and Android. It includes the main code for map initialisation, markers and route lines, along with the setup entry point for obtaining a maps API key.

   

  Bison Google Maps · GMSMapView · map markers
- 2015-06-15 

  ### [A small iOS scrolling demo inspired by Zhe800](<https://allluckly.cn/en/journal/2015-06-15-a-small-ios-scrolling-demo-inspired-by-zhe800/>)

   

  Uses a Zhe800-style scrolling interaction to demonstrate recording contentOffset when dragging begins and comparing offsets in scroll callbacks to determine direction. An example project shows how the interface elements respond together.

   

  UIScrollView · contentOffset · scroll direction
- 2015-05-17 

  ### [Calculating label heights automatically in a table view](<https://allluckly.cn/en/journal/2015-05-17-calculating-label-heights-automatically-in-a-table-view/>)

   

  Calculates the height a label needs from its font, constrained width and measured text, then adds spacing in the UITableView row-height callback. The code illustrates manual sizing of multiline labels and table-view cells.

   

  UITableView · UILabel · text measurement