AsyncDisplayKit/debug-tool-hit-test-slop.md at bfe89fddd630920cf078ee063e71a81859bf9e78

mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-22 02:35:10 +08:00

Files

Hannah Troisi d162141e18 # This is a combination of 44 commits.

# The first commit's message is:
# This is a combination of 30 commits.
# The first commit's message is:
Update nav_docs.yml

# This is the 2nd commit message:

Create node-containers-overview.md

# This is the 3rd commit message:

Update node-containers-overview.md

# This is the 4th commit message:

Update node-containers-overview.md

# This is the 5th commit message:

Update node-containers-overview.md

# This is the 6th commit message:

Update node-containers-overview.md

# This is the 7th commit message:

Update nav_docs.yml

# This is the 8th commit message:

Update nav_docs.yml

# This is the 9th commit message:

Update and rename node-containers-overview.md to containers-overview.md

# This is the 10th commit message:

Update and rename asviewcontroller.md to container-asviewcontroller.md

# This is the 11th commit message:

Update and rename astablenode.md to container-astablenode.md

# This is the 12th commit message:

Update and rename ascollectionnode.md to container-ascollectionnode.md

# This is the 13th commit message:

Update and rename aspagernode.md to container-aspagernode.md

# This is the 14th commit message:

Update and rename container-ascollectionnode.md to containers-ascollectionnode.md

# This is the 15th commit message:

Update and rename container-asviewcontroller.md to containers-asviewcontroller.md

# This is the 16th commit message:

Update containers-ascollectionnode.md

# This is the 17th commit message:

Update container-astablenode.md

# This is the 18th commit message:

Rename container-astablenode.md to containers-astablenode.md

# This is the 19th commit message:

Update and rename container-aspagernode.md to containers-aspagernode.md

# This is the 20th commit message:

Update containers-overview.md

# This is the 21st commit message:

Update containers-overview.md

# This is the 22nd commit message:

Update containers-overview.md

# This is the 23rd commit message:

Update containers-asviewcontroller.md

# This is the 24th commit message:

Update containers-asviewcontroller.md

# This is the 25th commit message:

Update containers-overview.md

# This is the 26th commit message:

Update containers-asviewcontroller.md

# This is the 27th commit message:

Update containers-asviewcontroller.md

# This is the 28th commit message:

Update containers-asviewcontroller.md

# This is the 29th commit message:

Update containers-overview.md

# This is the 30th commit message:

Update containers-overview.md

# This is the 2nd commit message:

Removing _site folder from repository (only needed to run locally)

# This is the 3rd commit message:

Update containers-overview.md

# This is the 4th commit message:

Update containers-overview.md

# This is the 5th commit message:

Update containers-asviewcontroller.md

# This is the 6th commit message:

Update debug-tool-pixel-scaling.md

# This is the 7th commit message:

Update debug-tool-pixel-scaling.md

# This is the 8th commit message:

Update debug-tool-pixel-scaling.md

# This is the 9th commit message:

Update debug-tool-pixel-scaling.md

# This is the 10th commit message:

Update debug-tool-pixel-scaling.md

# This is the 11th commit message:

Update debug-tool-pixel-scaling.md

# This is the 12th commit message:

Update debug-tool-pixel-scaling.md

# This is the 13th commit message:

Update debug-tool-hit-test-slop.md

# This is the 14th commit message:

Update debug-tool-hit-test-slop.md

# This is the 15th commit message:

Update nav_docs.yml

# This is the 16th commit message:

Update image-node.md

# This is the 17th commit message:

Update image-node.md

# This is the 18th commit message:

Update control-node.md

# This is the 19th commit message:

Update control-node.md

# This is the 20th commit message:

Update nav_docs.yml

# This is the 21st commit message:

Create batch-fetching-api.md

# This is the 22nd commit message:

Update batch-fetching-api.md

# This is the 23rd commit message:

Update debug-tool-hit-test-slop.md

# This is the 24th commit message:

Update debug-tool-pixel-scaling.md

# This is the 25th commit message:

Update debug-tool-hit-test-slop.md

# This is the 26th commit message:

Update debug-tool-pixel-scaling.md

# This is the 27th commit message:

Update containers-aspagernode.md

# This is the 28th commit message:

Update containers-aspagernode.md

# This is the 29th commit message:

Update containers-aspagernode.md

# This is the 30th commit message:

Update containers-aspagernode.md

# This is the 31st commit message:

Update containers-asviewcontroller.md

# This is the 32nd commit message:

Update containers-asviewcontroller.md

# This is the 33rd commit message:

Update containers-asviewcontroller.md

# This is the 34th commit message:

Update containers-asviewcontroller.md

# This is the 35th commit message:

Update containers-overview.md

# This is the 36th commit message:

Update containers-asviewcontroller.md

# This is the 37th commit message:

Update containers-astablenode.md

# This is the 38th commit message:

Update containers-astablenode.md

# This is the 39th commit message:

Update containers-astablenode.md

# This is the 40th commit message:

Update containers-astablenode.md

# This is the 41st commit message:

Update containers-astablenode.md

# This is the 42nd commit message:

Update containers-astablenode.md

# This is the 43rd commit message:

Update containers-astablenode.md

# This is the 44th commit message:

Update containers-astablenode.md

2016-04-19 00:54:31 -07:00

1.9 KiB

Executable File

Raw Blame History

title, layout, permalink, next

title	layout	permalink	next
Hit Test Visualization	docs	/docs/debug-tool-hit-test-slop.html	debug-tool-ASRangeController.html

##Visualize ASControlNode Tappable Areas## This debug feature adds a semi-transparent highlight overlay on any ASControlNodes containing a target:action: pair or gesture recognizer. The tappable range is defined as the ASControlNode’s frame + its .hitTestSlop UIEdgeInsets. Hit test slop is a unique feature of ASControlNode that allows it to extend its tappable range.

In the screenshot below, you can quickly see that

The tappable area for the avatar image overlaps the username’s tappable area. In this case, the user avatar image is on top in the view hierarchy and is capturing some touches that should go to the username.
It would probably make sense to expand the `.hitTestSlop` for the username to allow the user to more easily hit it.
I’ve accidentally set the hitTestSlop’s UIEdgeInsets to be positive instead of negative for the photo likes count label. It’s going to be hard for a user to tap the smaller target.

##Restrictions##

A green border on the edge(s) of the highlight overlay indicates that that edge of the tapable area is restricted by one of it's superview's tapable areas. An orange border on the edge(s) of the highlight overlay indicates that that edge of the tapable area is clipped by .clipsToBounds of a parent in its hierarchy.

##Usage## In your AppDelegate.m file,

import `AsyncDisplayKit+Debug.h`
add `[ASControlNode setEnableHitTestDebug:YES]` at the top of your `didFinishLaunchingWithOptions:` method

Make sure to call this method before initializing any ASControlNodes - including ASButtonNodes, ASImageNodes, and ASTextNodes.

1.9 KiB Executable File Raw Blame History Unescape Escape

1.9 KiB

Executable File

Raw Blame History