-
Notifications
You must be signed in to change notification settings - Fork 21
Expand file tree
/
Copy path221 Creating Custom iOS User Interfaces [English].srt
More file actions
executable file
·4058 lines (3203 loc) · 77.7 KB
/
221 Creating Custom iOS User Interfaces [English].srt
File metadata and controls
executable file
·4058 lines (3203 loc) · 77.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1
00:00:11,078 --> 00:00:18,078
good afternoon
2
00:00:18,088 --> 00:00:20,161
my name is Brandon new and/or and I'm a
software engineer
3
00:00:21,061 --> 00:00:25,088
on iowa's and welcome to creating custom
I A West user interfaces
4
00:00:25,088 --> 00:00:29,171
if you take a look at Ohio West today it
is filled with really interesting
5
00:00:30,071 --> 00:00:34,136
engaging unique interfaces for our users
you can see that in things
6
00:00:35,036 --> 00:00:38,555
like the Notification Center which takes
a bit of a blur effect
7
00:00:38,879 --> 00:00:42,180
to give you a sense love being at a
different dept above the operating
8
00:00:42,018 --> 00:00:42,073
system
9
00:00:42,073 --> 00:00:45,158
Notification Center also uses affects
like vibrancy
10
00:00:46,058 --> 00:00:49,058
to create text that is highly legible at
all times
11
00:00:49,058 --> 00:00:53,114
you also see interesting interfaces like
what we call the suggestions view in
12
00:00:54,014 --> 00:00:54,071
Serie
13
00:00:54,071 --> 00:00:57,076
forget we have these pieces a text
better animating
14
00:00:57,076 --> 00:01:00,153
on and off screen at all times getting
the sense being polled on and off the
15
00:01:01,053 --> 00:01:01,102
screen
16
00:01:02,002 --> 00:01:06,029
we use a custom UI in a lot of places
across the system
17
00:01:06,029 --> 00:01:09,086
and you might be thinking to yourself I
want to build really cool stuff like
18
00:01:09,086 --> 00:01:09,152
this as well
19
00:01:10,052 --> 00:01:13,060
the same things that you should think
about there are questions we also like
20
00:01:14,032 --> 00:01:15,041
to ask ourselves
21
00:01:15,041 --> 00:01:18,053
when creating new cases the view I for
the operating system
22
00:01:18,053 --> 00:01:22,086
the first thing that you should think
about is where are you going to use this
23
00:01:22,086 --> 00:01:22,145
you why
24
00:01:23,045 --> 00:01:26,574
how does the students here ap and what
kind of purpose does it serve
25
00:01:26,979 --> 00:01:31,790
for users and your customers sometimes
you want to create you why
26
00:01:31,079 --> 00:01:35,097
that needs to represent multiple states
for example you might be creating
27
00:01:35,097 --> 00:01:38,115
a download control the need to have
states like an title
28
00:01:39,015 --> 00:01:42,059
odd downloading in progress cancelled
29
00:01:42,059 --> 00:01:45,138
and complete States so you want to think
about those and think about how to
30
00:01:46,038 --> 00:01:46,110
design
31
00:01:47,001 --> 00:01:50,630
and craft your control in a way that
supports those different states and six
32
00:01:50,729 --> 00:01:56,240
its intended for you also want to think
about what are you going to share this
33
00:01:56,024 --> 00:01:56,032
control
34
00:01:57,004 --> 00:02:01,193
or those peace and you I cross several
applications sorting and I'll essay
35
00:02:01,229 --> 00:02:05,200
you can create frameworks for your app
which are a great way to share code
36
00:02:05,002 --> 00:02:09,002
between naps that your team is creating
or even release it to the public
37
00:02:09,002 --> 00:02:12,008
to help other people use the same kind
of pieces if you I
38
00:02:12,026 --> 00:02:16,038
and in the last thing you might want to
think about
39
00:02:16,038 --> 00:02:19,079
or what pieces have a PI can you
leverage to make your job
40
00:02:19,079 --> 00:02:22,090
easier a lot of times we have you why
41
00:02:22,009 --> 00:02:26,020
or controls in UI kit that will make its
very easy for you to create custom
42
00:02:27,001 --> 00:02:27,050
things
43
00:02:27,005 --> 00:02:31,056
without having the subclass code so what
are some API is that you might find
44
00:02:32,001 --> 00:02:32,760
useful
45
00:02:32,769 --> 00:02:36,784
if you were to want to take Avengers
things we offering you like it
46
00:02:36,919 --> 00:02:41,150
what are those is the UI appearance
system you I appearance
47
00:02:41,015 --> 00:02:44,062
allows you to configure certain
characteristics up the default you like
48
00:02:44,062 --> 00:02:44,145
it controls
49
00:02:45,045 --> 00:02:49,294
without having to subclass them one of
the most popular leader uses for you I
50
00:02:49,699 --> 00:02:50,400
parents
51
00:02:50,004 --> 00:02:54,243
is the tent color which allows you to
configure the color of controls that we
52
00:02:54,639 --> 00:02:55,695
provide as part of you like it
53
00:02:56,199 --> 00:03:01,190
without having the subclass them one
particularly useful piece in the UAE
54
00:03:01,019 --> 00:03:01,112
appearance system
55
00:03:02,012 --> 00:03:06,094
is the UN image rendering mode this is
something we introduce an Iowa 7
56
00:03:06,094 --> 00:03:09,116
last year the lousy to provide a single
image
57
00:03:10,016 --> 00:03:13,100
into your application we take a look at
the alpha channel from that image
58
00:03:14,000 --> 00:03:17,078
and can apply to college to it so if you
would like to change the color this
59
00:03:17,078 --> 00:03:17,140
image
60
00:03:18,004 --> 00:03:22,043
during your apt life cycle orchid design
team would like to change the 10 color
61
00:03:22,079 --> 00:03:23,868
your application will it and development
62
00:03:24,579 --> 00:03:28,320
it's very very easy to apply universally
across your app
63
00:03:28,032 --> 00:03:32,171
we introduce dynamic type with I West
Sep
64
00:03:32,459 --> 00:03:36,130
which gives you a really great way to
respect your users request
65
00:03:36,013 --> 00:03:40,031
for larger or smaller type across the
system and it's important that you do
66
00:03:40,031 --> 00:03:41,031
the best you can
67
00:03:41,031 --> 00:03:44,037
to honor those preferences to help
things be more legible
68
00:03:44,091 --> 00:03:49,420
for users accessibility is a critical
part of Iowa's
69
00:03:50,239 --> 00:03:54,120
we care very deeply about making sure
our operating system is accessible to as
70
00:03:54,012 --> 00:03:55,441
many people as possible
71
00:03:55,549 --> 00:03:58,554
and this a very powerful APIs around
accessibility
72
00:03:59,049 --> 00:04:02,780
that are important for you to use if you
decide to build custom UI
73
00:04:02,078 --> 00:04:06,107
in your application there's no reason to
not support accessibility
74
00:04:07,007 --> 00:04:10,041
in your app and finally localization
75
00:04:10,041 --> 00:04:15,084
another very critical part abiola's we
rely localization to extend I West has
76
00:04:15,084 --> 00:04:16,633
many customers as possible
77
00:04:17,389 --> 00:04:21,850
and this a new localization tools and I
was 8 that make this even easier for you
78
00:04:21,085 --> 00:04:25,140
beyond those I like to introduce four
new topics today
79
00:04:26,004 --> 00:04:29,010
the first is we're going to talk about
spring animations
80
00:04:30,000 --> 00:04:35,069
which are a great way to make your
controls feel like a native party by OS
81
00:04:35,069 --> 00:04:39,075
the next thing are some new techniques
for vibrancy and blur
82
00:04:39,669 --> 00:04:42,800
after that we're going to talk about CA
shape layers
83
00:04:42,008 --> 00:04:45,014
CSA players are great way that you can
drop custom UI
84
00:04:45,086 --> 00:04:48,122
within your application and enemy
changes to it
85
00:04:49,022 --> 00:04:53,191
and then finally we're going to talk
about dynamic core animation behaviors
86
00:04:53,389 --> 00:04:56,810
and how you can make changes and have
even more control than you may realize
87
00:04:56,081 --> 00:05:00,100
over the behaviors and that coronation
provides today
88
00:05:01,000 --> 00:05:04,034
let's get started with spring animations
89
00:05:04,034 --> 00:05:07,543
the first thing to understand is you
need to understand what spring animation
90
00:05:07,849 --> 00:05:08,720
is
91
00:05:08,072 --> 00:05:11,115
and you probably think I'm a spring
animation as a balancing effect that
92
00:05:12,015 --> 00:05:14,083
mimics a springer a slinky in the real
world
93
00:05:14,083 --> 00:05:18,152
and will you can create very bouncy
effects like that with spring animations
94
00:05:19,052 --> 00:05:22,074
that's not the only thing you do with
springs
95
00:05:22,074 --> 00:05:25,973
really you can think about spring
animations as a new default I'm anchor
96
00:05:26,639 --> 00:05:29,770
for animations within your application
97
00:05:29,077 --> 00:05:32,126
in fact we use that these new timing
curves
98
00:05:32,819 --> 00:05:35,900
for nearly every system animation
starting in Iowa 7
99
00:05:36,629 --> 00:05:39,638
nearly everything you see that we
provide as part of my OS
100
00:05:39,719 --> 00:05:43,741
is built around spring in the nation's
now you can actually creates
101
00:05:43,939 --> 00:05:47,520
new animations a spring admissions in
your app with out the you said you like
102
00:05:47,052 --> 00:05:48,411
it dynamics
103
00:05:48,879 --> 00:05:51,976
dynamics is an incredibly powerful tool
for creating physics simulations within
104
00:05:52,849 --> 00:05:52,928
your app
105
00:05:53,639 --> 00:05:56,840
but there's easier ways to get at Spring
animations
106
00:05:56,084 --> 00:05:59,103
in fact the API for making a spring
animation in your app
107
00:06:00,003 --> 00:06:03,046
is nearly the same as using the enemy
with duration block
108
00:06:03,046 --> 00:06:06,102
that you're used to using today on you I
love you
109
00:06:07,002 --> 00:06:10,071
so what do spring animations look like
on the road
110
00:06:10,071 --> 00:06:13,650
up left side of the screen for you guys
i've a red box
111
00:06:14,289 --> 00:06:18,270
that's going to animate using the
default even is out timing kar
112
00:06:18,027 --> 00:06:21,256
on the right side we have a blue box
that's going to animate
113
00:06:21,499 --> 00:06:25,522
with the spring animation both
animations we use the same duration
114
00:06:25,729 --> 00:06:29,760
and they're moving the same distance but
when the animation start
115
00:06:30,039 --> 00:06:33,340
you'll notice that the spring animation
very quickly gets up to speed
116
00:06:33,034 --> 00:06:36,043
and then slowly tapers off as it reaches
its final position
117
00:06:36,043 --> 00:06:39,049
compared to the e-zine is out animation
118
00:06:39,049 --> 00:06:43,218
let's slow that down a little bit more
you can take a closer look
119
00:06:43,659 --> 00:06:46,664
you see when the animation begins
120
00:06:47,159 --> 00:06:50,090
the spring animation quickly moves up to
speed and then spent a considerable
121
00:06:50,009 --> 00:06:52,037
amount of its animation duration:
122
00:06:52,037 --> 00:06:55,055
reaching that final position its final
resting state
123
00:06:55,055 --> 00:06:58,112
compare this with these in is out where
it takes a little more time to get up to
124
00:06:59,012 --> 00:07:00,891
speed
125
00:07:00,999 --> 00:07:04,021
another way to visualize this is the
plot what that Kurt
126
00:07:04,219 --> 00:07:08,210
timing curve looks like overtime you can
see a default curve
127
00:07:08,021 --> 00:07:11,630
very slowly builds up its velocity and
then immediately starts to slow down its
128
00:07:11,819 --> 00:07:13,837
velocity for the end
129
00:07:13,999 --> 00:07:17,770
spring animations however launch up to
speed almost immediately
130
00:07:17,077 --> 00:07:20,686
and then spend the last third or so
other duration: reaching what we call
131
00:07:21,379 --> 00:07:22,383
the long tail
132
00:07:22,419 --> 00:07:26,650
or that slow bit where we finally
reached the the final position
133
00:07:26,065 --> 00:07:29,664
where do we use Spring animations and I
West today one place
134
00:07:30,249 --> 00:07:33,290
is watching aP's an opening and closing
folders
135
00:07:33,659 --> 00:07:37,360
you pay close attention to these
animations you see it feels like the
136
00:07:37,036 --> 00:07:40,395
the animation begins and very quickly
shows the user the content that they're
137
00:07:40,719 --> 00:07:41,735
about to see
138
00:07:41,879 --> 00:07:45,888
and then one closing very quickly pulls
the folder out on the way
139
00:07:46,779 --> 00:07:50,050
another place that we like to use fring
animations is in the default
140
00:07:50,005 --> 00:07:54,334
push and pop animations for navigation
controllers as well as presenting
141
00:07:54,379 --> 00:07:57,426
moral views on and off the screen
142
00:07:57,849 --> 00:08:01,680
and finally that serious suggestions you
that we looked at earlier
143
00:08:01,068 --> 00:08:05,457
is both with spring animations we use a
single spring animation to pull the text
144
00:08:06,069 --> 00:08:06,157
on-screen
145
00:08:06,949 --> 00:08:10,400
of the bottom and allowed to slowly
drift across the screen
146
00:08:10,004 --> 00:08:13,023
and then a second spring innovation to
quickly pull it out of the way
147
00:08:13,059 --> 00:08:17,318
making room for the next said it strings
148
00:08:17,849 --> 00:08:20,930
what is the OP I look like for spring
animations
149
00:08:20,093 --> 00:08:23,852
it's like I said is a single method on
you if you that makes us really
150
00:08:24,689 --> 00:08:26,761
straightforward for you to take
advantage of spring animations
151
00:08:27,409 --> 00:08:31,270
in your app many these parameters look
familiar to you
152
00:08:31,027 --> 00:08:34,125
but like to call out the two that are
unique to spring animations
153
00:08:35,025 --> 00:08:39,083
and those in the damping and the initial
spring velocity parameters
154
00:08:39,083 --> 00:08:43,412
damping takes a value from 0 to 1 and
controls how much resistance the spring
155
00:08:44,159 --> 00:08:44,910
has
156
00:08:44,091 --> 00:08:48,105
completing the animation at the end the
initial spring velocity
157
00:08:49,005 --> 00:08:52,098
is used to give the animation a kick to
push the object into the
158
00:08:52,098 --> 00:08:55,191
animation curve you can also use it to
synchronize the animation
159
00:08:56,091 --> 00:08:59,093
with something that's in flight today
let's take a look at how these different
160
00:09:00,011 --> 00:09:00,097
values
161
00:09:00,097 --> 00:09:03,194
have an effect on spring animations
162
00:09:04,094 --> 00:09:07,137
wanna start out with the same blue box
163
00:09:08,037 --> 00:09:11,126
and a damn thing a .1 and you can see
when the animation completes there's a
164
00:09:12,026 --> 00:09:13,725
lot of oscillation at the end
165
00:09:13,959 --> 00:09:17,610
it feels like you would expect a spring
to be in the real world
166
00:09:17,061 --> 00:09:20,113
you might want to subject but you might
not
167
00:09:21,013 --> 00:09:25,016
by stepping the damping up to something
like .5 you can see we considerably
168
00:09:25,016 --> 00:09:27,017
reduce how much isolation we get
169
00:09:27,017 --> 00:09:30,236
with this animation this still fair
amount about think the end
170
00:09:30,389 --> 00:09:35,230
but it's much more controlled bring the
damping up 2.8
171
00:09:35,023 --> 00:09:39,024
reduces most that damping effect you can
see there's a very small bounce back at
172
00:09:39,024 --> 00:09:40,072
the end of the animation
173
00:09:40,072 --> 00:09:44,751
but for the most part the animation a
smoothly reaches the end
174
00:09:45,399 --> 00:09:49,455
and finally bringing the damping up to
1.0 gives us know of elation at the end
175
00:09:49,959 --> 00:09:53,560
it just smoothly reaches that final
position getting a very nice
176
00:09:53,056 --> 00:09:56,143
fast feeling to the animation so it's
bring in
177
00:09:57,043 --> 00:10:01,069
the initial velocity parameter we're
going to leave damping the same
178
00:10:01,069 --> 00:10:04,125
but give our Spring a much stronger kick
to start the animation
179
00:10:05,025 --> 00:10:09,044
you can see almost immediately launch
the box passed its first position
180
00:10:09,269 --> 00:10:12,295
and actually overcomes the spring to
have it bounce back a little bit at the
181
00:10:12,529 --> 00:10:13,880
end
182
00:10:13,088 --> 00:10:17,094
and even stronger initial velocity can
blow even further past that final
183
00:10:17,094 --> 00:10:17,187
position
184
00:10:18,087 --> 00:10:22,046
but the damn thing value may quickly
posted in to rest
185
00:10:22,829 --> 00:10:26,829
and then finally we can combine these to
make their unique effects
186
00:10:26,829 --> 00:10:30,930
giving us a damping tell you that
resists oscillation an initial velocity
187
00:10:30,093 --> 00:10:34,118
to give a nice fast K to our Spring
188
00:10:35,018 --> 00:10:37,093
so where would you want to think about
using Spring animations in your
189
00:10:37,093 --> 00:10:38,138
application
190
00:10:39,038 --> 00:10:42,063
they're a fantastic substitute for
linear animations
191
00:10:42,063 --> 00:10:46,107
that you're used to using with the
current you have %um it with duration:
192
00:10:47,007 --> 00:10:51,646
in fact any place that you would like to
fit in to the native UI controls that we
193
00:10:51,709 --> 00:10:51,797
provide
194
00:10:52,589 --> 00:10:56,500
you should consider using Spring
animations instead because nearly every
195
00:10:56,005 --> 00:10:58,092
animation that's part if you like it
that's part of the OS
196
00:10:59,037 --> 00:11:03,049
is built around spring animations
197
00:11:03,049 --> 00:11:06,051
spring animations also give your
controls and your animations a more
198
00:11:06,069 --> 00:11:07,156
natural feeling to the user's
199
00:11:08,056 --> 00:11:11,895
because springs are something that are
part the real world around us
200
00:11:12,399 --> 00:11:15,407
it's also important to keep in mind that
we live show you examples with the
201
00:11:16,199 --> 00:11:17,238
position property
202
00:11:17,589 --> 00:11:22,230
you can use fring animations to apply to
any animal property in you like it
203
00:11:22,023 --> 00:11:25,038
that means if you want to have the Alpha
for your layers are for your views
204
00:11:25,038 --> 00:11:25,104
change
205
00:11:26,004 --> 00:11:29,042
you can do that on a springtime in her
206
00:11:29,042 --> 00:11:31,141
I have a demo application put together
and let's take a look at what spring
207
00:11:32,041 --> 00:11:34,125
animations can do for us there
208
00:11:35,025 --> 00:11:38,354
so this is my demo application I have
this very nice
209
00:11:38,579 --> 00:11:41,880
rainbow gradient background and then a
control bar at the bottom
210
00:11:41,088 --> 00:11:44,407
grab some custom controls that I can use
to configure
211
00:11:45,199 --> 00:11:48,231
that gradients rendering I can change
number of colors
212