Giter Site home page Giter Site logo

htstateawarerasterimageview's Introduction

HotelTonight

HTStateAwareRasterImageView

has been RENAMED to HTRasterView, and continued here:

https://github.com/hoteltonight/HTRasterView

Overview

HTStateAwareRasterImageView is a rasterization system that caches rendered components based on state. The advantage over Core Animation's rasterization is that you only draw a component once for each unique state. Asynchronous drawing is also supported. Associated blog post at http://engineering.hoteltonight.com/asynchronous-state-aware-component-rasterizat

Installation

This library is dependent on the MSCachedAsyncViewDrawing class by Javier Soto of MindSnacks. The recommended installation method is cocoapods, which handles this dependency automatically. Add this line to your Podfile:

pod 'HTStateAwareRasterImageView'

http://cocoapods.org

Usage

Start by conforming to the HTRasterizableView protocol. A simple example is provided in the demo project (HTExampleRasterizableComponent). The single required method is:

- (NSArray *)keyPathsThatAffectState;

This is used for two purposes:

  • To key-value observe the specified key paths to trigger image regeneration
  • To generate a hash of the component's state

Initialize a HTStateAwareRasterImageView and set the rasterizableView property to your HTRasterizableView, like this snippet from the demo project:

_rasterizableComponent = [[HTExampleRasterizableComponent alloc] init];
_stateAwareRasterImageView = [[HTStateAwareRasterImageView alloc] init];
_stateAwareRasterImageView.rasterizableView = _rasterizableComponent;
_stateAwareRasterImageView.delegate = self;
[self addSubview:_stateAwareRasterImageView];

If your component can take advantage of UIImage caps (fixed-size corners and stretchable center), these two methods are optional on the HTRasterizableView protocol:

- (UIEdgeInsets)capEdgeInsets;
- (BOOL)useMinimumFrameForCaps;

You can specify if you want drawing to occur synchronously on the main thread:

@property (nonatomic, assign) BOOL drawsOnMainThread;

You can also turn off keypath observing if you want to manually regenerate images (use this for pre-rendering assets):

@property (nonatomic, assign) BOOL kvoEnabled; 
// For prerendering only
- (void)regenerateImage:(HTSARIVVoidBlock)complete;

A delegate property is also available to let you know when it's regenerating an image, and when it gets a new image back:

@property (atomic, assign) id<HTStateAwareRasterImageViewDelegate> delegate;

For debugging purposes, the cache key is available through this method.

- (NSString *)cacheKey;

Demo project

The demo project has four tabs:

  • A tableview taking advantage of HTStateAwareRasterImageView
  • A tableview that displays cache key, actual size and cell-height sized cached images
  • A tableview that uses the same component without rasterization
  • A tableview that uses the same component with Core Animation rasterization enabled

HotelTonight

HotelTonight

Limitations

Hashing

The cache key used to define the state of your component is generated by the NSObject+HTPropertyHash category. It is important that the hash method produces a string that is unique to the state of your properties, but not TOO unique by including things like pointer values. The exception for CGColorRef in that category is made because we only want the RGBA values described, not the pointer value plus the RGBA values.

Use it? Love/hate it?

Tweet the author @jakejennings, and check out HotelTonight's engineering blog: http://engineering.hoteltonight.com

Also, check out HotelTonight's other iOS open source:

htstateawarerasterimageview's People

Contributors

jacobjennings avatar russ-ht avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.