BisonCreative & development notes

DEVELOPMENT NOTES · 48 articles

UIKit & graphics

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

  • 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

  • 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.

    SindriUITextField · input validation · Chinese text input

  • 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.

    SindriCore Animation · CABasicAnimation · CAAnimationGroup

  • 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.

    乔同XCADisplayLink · CAShapeLayer · wave animation

  • 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

  • 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.

    HenryChengCAShapeLayer · path animation · keyframe animation

  • 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.

    SindriCore Animation · CALayer · CAAnimation

  • 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.

    BisonLBLaunchImageAd · splash ads · SDWebImage

  • 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.

    SindrimaskView · fragment animation · UIView

  • 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.

    SindriCore Text · NSAttributedString · mixed text and images

  • 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

  • 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.

    SindriAuto Layout · layoutIfNeeded · login animation

  • 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.

    HenryChengcustom transitions · CALayer mask · Swift

  • 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.

    WzxJiangchat interface · UITableViewCell · bubble layout

  • 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

  • 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.

    SindriLinAuto Layout · NSLayoutConstraint · constraint animation

  • 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.

    BisonSwift 2.0 · SmallDay · LoveFreshBeen

  • 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

  • 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.

    bestswifterUIViewController transitions · interactive animation · UINavigationController

  • 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.

    SindriLinCGAffineTransform · keyframe animation · UIView

  • 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

  • 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.

    WzxJiangAuto Layout · xib · UIBarButtonItem

  • 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

  • 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.

    WzxJiangUITableView · contacts · grouped lists

  • 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.

    WzxJiangWeChat-style app · MVC · UITabBarController

  • 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.

    WzxJiangUITableView · parallax · cell reuse

  • 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.

    SindriLinUIView animation · animatable properties · spring animation

  • 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.

    WzxJiangparallax animation · clipsToBounds · view hierarchy

  • 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.

    WzxJiangUICollectionViewFlowLayout · card layouts · scroll positioning

  • 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.

    WzxJiangpop-up views · CATransform3D · overlays

  • 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.

    WzxJiangUIView animation · drag gestures · navigation bar

  • 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.

    HenryChengHWPopTool · pop-up views · overlays

  • 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.

    SindriLinUIResponder · responder chain · UITouch

  • 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.

    BisonUIView animation · frame · login screen

  • 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.

    BisonPCGestureUnlock · LBPersonalPage · SDCycleScrollView

  • 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.

    BisonmacOS · NSImageView · NSImage

  • 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.

    BisonBanner · CATransition · gesture interaction

  • 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.

    Bison3D Touch · UIApplicationShortcutItem · AppDelegate

  • 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.

    BisonUICollectionView · Swift · Alamofire

  • 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.

    BisonSwift · LBSwift_PersonalPage · profile screen

  • 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.

    BisonLBPersonalPage · profile screen · UITableView

  • 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.

    BisonSwift · UITabBarController · child view controllers

  • 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.

    BisonUINavigationController · back gesture · interactivePopGestureRecognizer

  • 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.

    BisonUIView · circular motion · trigonometry

  • 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.

    Bisontall images · text drawing · UIKit

  • 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.

    BisonGoogle Maps · GMSMapView · map markers

  • 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

  • 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