Scroll Views

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€95.03
List Price:  €133.05
You save:  €38.01
£79.15
List Price:  £110.82
You save:  £31.66
CA$139.67
List Price:  CA$195.55
You save:  CA$55.87
A$153.55
List Price:  A$214.98
You save:  A$61.42
S$134.39
List Price:  S$188.16
You save:  S$53.76
HK$778.22
List Price:  HK$1,089.54
You save:  HK$311.32
CHF 88.36
List Price:  CHF 123.71
You save:  CHF 35.34
NOK kr1,105.21
List Price:  NOK kr1,547.34
You save:  NOK kr442.12
DKK kr708.87
List Price:  DKK kr992.45
You save:  DKK kr283.57
NZ$170.45
List Price:  NZ$238.64
You save:  NZ$68.18
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,959.01
List Price:  ৳16,743.10
You save:  ৳4,784.08
₹8,452.40
List Price:  ₹11,833.70
You save:  ₹3,381.29
RM446.45
List Price:  RM625.05
You save:  RM178.60
₦168,042.19
List Price:  ₦235,265.79
You save:  ₦67,223.60
₨27,819.88
List Price:  ₨38,948.94
You save:  ₨11,129.06
฿3,466.55
List Price:  ฿4,853.31
You save:  ฿1,386.76
₺3,454.83
List Price:  ₺4,836.90
You save:  ₺1,382.07
B$580.99
List Price:  B$813.41
You save:  B$232.42
R1,812.36
List Price:  R2,537.39
You save:  R725.02
Лв185.85
List Price:  Лв260.20
You save:  Лв74.35
₩140,106.88
List Price:  ₩196,155.24
You save:  ₩56,048.35
₪373.41
List Price:  ₪522.79
You save:  ₪149.38
₱5,905.80
List Price:  ₱8,268.36
You save:  ₱2,362.56
¥15,438.71
List Price:  ¥21,614.81
You save:  ¥6,176.10
MX$2,034.25
List Price:  MX$2,848.03
You save:  MX$813.78
QR364.93
List Price:  QR510.92
You save:  QR145.98
P1,367.12
List Price:  P1,914.02
You save:  P546.90
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£4,964.56
List Price:  E£6,950.58
You save:  E£1,986.02
ብር12,476.97
List Price:  ብር17,468.25
You save:  ብር4,991.28
Kz91,223.61
List Price:  Kz127,716.70
You save:  Kz36,493.09
CLP$97,372.26
List Price:  CLP$136,325.06
You save:  CLP$38,952.80
CN¥724.09
List Price:  CN¥1,013.76
You save:  CN¥289.66
RD$6,035.83
List Price:  RD$8,450.41
You save:  RD$2,414.57
DA13,357.64
List Price:  DA18,701.23
You save:  DA5,343.59
FJ$226.99
List Price:  FJ$317.80
You save:  FJ$90.80
Q772.55
List Price:  Q1,081.60
You save:  Q309.05
GY$20,937.04
List Price:  GY$29,312.70
You save:  GY$8,375.65
ISK kr13,828.61
List Price:  ISK kr19,360.61
You save:  ISK kr5,532
DH999.72
List Price:  DH1,399.66
You save:  DH399.93
L1,820.82
List Price:  L2,549.22
You save:  L728.40
ден5,848.08
List Price:  ден8,187.54
You save:  ден2,339.46
MOP$802.33
List Price:  MOP$1,123.29
You save:  MOP$320.96
N$1,815.10
List Price:  N$2,541.22
You save:  N$726.11
C$3,682.57
List Price:  C$5,155.75
You save:  C$1,473.17
रु13,507.81
List Price:  रु18,911.48
You save:  रु5,403.66
S/379.77
List Price:  S/531.69
You save:  S/151.92
K402.86
List Price:  K564.02
You save:  K161.16
SAR375.38
List Price:  SAR525.55
You save:  SAR150.16
ZK2,769.51
List Price:  ZK3,877.43
You save:  ZK1,107.91
L472.94
List Price:  L662.13
You save:  L189.19
Kč2,407.85
List Price:  Kč3,371.09
You save:  Kč963.24
Ft39,078.98
List Price:  Ft54,712.13
You save:  Ft15,633.15
SEK kr1,102.90
List Price:  SEK kr1,544.10
You save:  SEK kr441.20
ARS$100,263.16
List Price:  ARS$140,372.43
You save:  ARS$40,109.27
Bs693
List Price:  Bs970.23
You save:  Bs277.22
COP$441,313.30
List Price:  COP$617,856.28
You save:  COP$176,542.97
₡50,820.06
List Price:  ₡71,150.12
You save:  ₡20,330.05
L2,528.86
List Price:  L3,540.51
You save:  L1,011.64
₲783,733.33
List Price:  ₲1,097,258.01
You save:  ₲313,524.68
$U4,278.05
List Price:  $U5,989.44
You save:  $U1,711.39
zł413.19
List Price:  zł578.49
You save:  zł165.29
Already have an account? Log In

Transcript

Okay, let's discuss this crawl view. A scroll view allows users to browse content, such as stacks in a document or a collection of images that's larger than the visible area. So you scroll you to give people access to large views, or to large numbers of views in a constrained space. Not that scrollview has no predefined appearance, except for the scroll bars appearing. As people swipe, Li crack, tap and pinch. A scroll view follows this gesture.

Revealing or zooming content in a way that feels natural scroll view itself has no appearance, but it does display transient scrolling indicators as people interact with it. A scroll view can also be configured to operate in Beijing, where scrolling reveals an entirely new page of content rather than moving around the current page. So the scroll view flashes transiting scroll indicators, also called scroll bars. When it first appears, and when users interact with the scroll view, as well. scroll bars are made visible as long as user is scrolling content. It responds to the speed and direction of gestures to reveal content in a way that feels natural.

For example, when users are slowly truck content in a scroll view, the content follows the touch. When users click content, on the other hand, the scroll view reveals content quickly and stops after some time. So this crawling needs to have inertia and friction. It also stops crawling when the user touches the screen, or when the end of the continent is reached. Also note that the iOS has this great little detail called a rubber band effect or elastic scrolling, which is my favorite thing when the end of scrollable areas and reached it lets you track the rubber a little bit The scroll view can also operate in a paging mode, in which each kragh a flick gesture reveals one up defined page of content. It's used often in the app walkthroughs together with the page control.

When you want to display content that's divided into pagers, screen polls or other chunks. You can use a pitch control to show users how many chunks are available and which one they're currently viewing. And when you do that, disable the scroll indicator that's on the same axis as the pitch control. Removing the scroll indicator as you understand focuses attention on the pitch control and gives people one unambiguous way to pitch through the content. If it makes sense in your app, lets users pinch or double tap to zoom into and out of a straw view. Here I am mentioning and then branching out of the image then I double top For the images, usually, the first double tap zooms in, and the next double tap zooms out.

Take a look at double tapping in Google Maps though. Each double tap just zooms for the up to the point, when there is nowhere to zoom into, and the zoom stops. I think it just starts taking you back. Just as with images, it should start as a mild when you hit the end, and zoom out you're starting low for example. When you enable zoom, you should also set the maximum and the minimum scale values that makes sense in the context of the users task. For example, letting users zoom in on text into one character feels This train is unlikely to make it easier for them to read the content.

So make sure the zoom levels make sense guys. Apple recommends to display just one scroll view at a time in general. guidelines claim that because people often make large swipe gestures when they scroll It can be difficult for them to avoid interacting with a neighboring scroll you on the same screen guidelines or command that if you decide to put two scroll views on one screen, consider allowing them to scroll in different directions so that one gesture is less likely to scroll both views. And yeah, the stocks app, for example does just that. As you see here, the top part is vertically scrollable. And the bottom part is horizontal scrollable in a paging mode, but take a look at Apple's own App Store app, which contradicts the guidelines of displaying only one scroll view at a time.

We have multiple scroll views here. And guess what people are completely fine using them. It does not hinder user experience. So you can do this as well. Lastly, don't place a scroll view inside of another strong view. Doing so creates an unpredictable interface that's difficult to control.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.