-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_2.html
775 lines (544 loc) · 33.8 KB
/
index_2.html
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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Begin Jekyll SEO tag v2.4.0 -->
<title>SuperTextView 开发参考文档 | temp_html</title>
<meta name="generator" content="Jekyll v3.7.3" />
<meta property="og:title" content="SuperTextView 开发参考文档" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="欢迎使用SuperTextView" />
<meta property="og:description" content="欢迎使用SuperTextView" />
<link rel="canonical" href="https://chenbingx.github.io/SuperTextView/develop_guide.html" />
<meta property="og:url" content="https://chenbingx.github.io/SuperTextView/develop_guide.html" />
<meta property="og:site_name" content="SuperTextView 开发参考文档" />
<script type="application/ld+json">
{"name":"SuperTextView 开发参考文档","description":"欢迎使用SuperTextView","@type":"WebSite","url":"https://chenbingx.github.io/SuperTextView/develop_guide.html","headline":"SuperTextView 开发参考文档","@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/temp_html/assets/css/style.css?v=98533bd94a7241f1b0719f2e2d7fa2f50a19f394">
<script src="https://code.jquery.com/jquery-3.3.0.min.js" integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4=" crossorigin="anonymous"></script>
<script src="/temp_html/assets/js/main.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<header>
<h1>SuperTextView 开发参考文档</h1>
<p>欢迎使用SuperTextView</p>
</header>
<div id="banner">
<span id="logo"></span>
<a href="https://github.com/chenBingX/SuperTextView" class="button fork"><strong>View On GitHub</strong></a>
</div><!-- end banner -->
<div class="wrapper">
<nav>
<ul></ul>
</nav>
<section>
<h1 id="supertextview-开发参考文档">SuperTextView 开发参考文档</h1>
<p>从 <strong>SuperTextView</strong> 诞生之初，便始终坚持一个愿景，即帮助 Android 开发者快速愉悦的去构建一个应用。</p>
<img src="http://ogemdlrap.bkt.clouddn.com/SuperTextView_yuan%202.png" width=130 height=130
align=right alt="SuperTextView"/>
<p><strong>SuperTextView</strong> 是一个高效的、全能的 <strong>Android</strong> 控件。通过 <strong>SuperTextView</strong> ，你可以快速实现圆角背景，设置渐变色背景，给控件和文字描边，为控件增加状态图，添加按压时文字或背景变色效果，通过 <strong>Adjuster</strong> 模块快速插入操作到控件绘制过程中，展示图片，甚至可以直接从网络上下载图片展示…基本上涵盖了 <strong>Android</strong> 日常开发中会用到的绝大部分效果。而实现这一切的代价，仅仅是给 <strong>SuperTextView</strong> 设置一个属性。<strong>SuperTextView</strong> 可以帮助开发者高效、便捷、优雅的完成需求开发。</p>
<p>本篇文档将详细的讲解目前 <strong>SuperTextView</strong> 的每一个功能，以便开发者能够快速上手。</p>
<h1 id="1-获取-supertextview">1. 获取 SuperTextView</h1>
<ul>
<li>Gradle下添加依赖：</li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> dependencies {
compile 'com.github.chenBingX:SuperTextView:v3.0.0'
}
</code></pre></div></div>
<ul>
<li>项目地址</li>
</ul>
<p><a href="https://github.com/chenBingX/SuperTextView">https://github.com/chenBingX/SuperTextView</a></p>
<p><strong>注：关注项目以优先获得最新版本。</strong></p>
<h1 id="2-supertextview-属性预览">2. SuperTextView 属性预览</h1>
<p><strong>SuperTextView</strong> 的绝大部分属性均支持在xml中配置，设置后即预览到效果。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <SuperTextView
//设置圆角。会同时作用于填充和边框(如果边框存在的话)。
//如果要设置为圆形，只需要把该值设置为宽或长的1/2即可。
app:corner="25dp"
//设置左上角圆角
app:left_top_corner="true"
//设置右上角圆角
app:right_top_corner="true"
//设置左下角圆角
app:left_bottom_corner="true"
//设置右下角圆角
app:right_bottom_corner="true"
//设置填充颜色
app:solid="@color/red"
//设置边框颜色
app:stroke_color="@color/black"
//设置边框的宽度。
app:stroke_width="2dp"
//放置一个drawable在背景层上。默认居中显示。
//并且默认大小为SuperTextView的一半。
app:state_drawable="@drawable/emoji"
//设置drawable的显示模式。可选值如下：
// left、top、right、bottom、center(默认值)、
//leftTop、rightTop、leftBottom、rightBottom、
//fill(充满整个SuperTextView，此时会使设置drawable的大小失效)
app:state_drawable_mode="center"
//设置drawable的height
app:state_drawable_height="30dp"
//设置drawable的width
app:state_drawable_width="30dp"
//设置drawble相对于基础位置左边的距离
app:state_drawable_padding_left="10dp"
//设置drawble相对于基础位置上边的距离
app:state_drawable_padding_top="10dp"
// boolean类型。是否显示drawable。
//如果你想要设置的drawable显示出来，必须设置为true。
//当不想让它显示时，再设置为false即可。
app:isShowState="true"
// 是否将state_drawable作为背景图
// 将state_drawable作为背景图可以让SuperTextView具备展示图片的能力
// 通过调节corner、stroke等属性，可以给图片设置圆角、边框等
app:drawableAsBackground="true"
//放置一个drawable在背景层上。默认居中显示。
//并且默认大小为SuperTextView的一半。
app:state_drawable2="@drawable/emoji"
//与state_drawable类似
app:state_drawable2_mode="center"
//与state_drawable_height类似
app:state_drawable2_height="30dp"
//与state_drawable_width类似
app:state_drawable2_width="30dp"
//与state_drawable_padding_left类似
app:state_drawable2_padding_left="10dp"
//与state_drawable_padding_top类似
app:state_drawable2_padding_top="10dp"
//与isShowState类似
app:isShow2State="true"
//是否开启文字描边功能。
//注意，启用这个模式之后通过setTextColor()设置的颜色将会被覆盖。
//你需要通过text_fill_color来设置文字的颜色。
app:text_stroke="true"
// 文字的描边颜色。默认为Color.BLACK。
app:text_stroke_color="@color/black"
// 文字描边的宽度。
app:text_stroke_width="1dp"
// 文字填充的颜色。默认为Color.BLACK。
app:text_fill_color="@color/blue"
// boolean类型。是否启用Adjuster功能。
//具体干什么，需要在Java中为SuperTextView实现一个Adjuster。
//当你启用这个功能而没有实现自己的Adjuster时，
//SuperTextView会启用默认的Adjuster。它会按照一定的规则调整文字大小。
app:autoAdjust="true"
// 必须设置为true才能启用渐变功能。这意味着你可以灵活的控制这一功能。
app:shaderEnable="true"
// 设置起始颜色。
app:shaderStartColor="@color/main_blue"
// 设置结尾颜色。
app:shaderEndColor="@color/pink"
// 设置渐变模式。如上图可见，一共支持4中模式：
// topTopBottom, bottomToTop, leftToRight, rightToLeft
app:shaderMode="rightToLeft"
// 设置按压时的背景色
app:pressBgColor="@color/red"
// 设置按压时的文字颜色
app:pressTextColor="@color/white"
/>
</code></pre></div></div>
<h1 id="3-supertextview-api">3. SuperTextView Api</h1>
<p><a href="https://chenbingx.github.io/SuperTextView/SuperTextView-doc/index.html">点击此处，查看详细的《SuperTextView Api文档》</a></p>
<h1 id="4-开发指南">4. 开发指南</h1>
<h2 id="41-supertextview中的层级">4.1 SuperTextView中的层级</h2>
<p>在 <strong>SuperTextView</strong> 中，有层级划分的概念。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%883.45.04.png" alt="" /></p>
<p><strong>1.Background层</strong>：View的<code class="highlighter-rouge">Background</code>背景层。</p>
<p><strong>2.背景层</strong>：即通过<code class="highlighter-rouge">app:solid</code>设置的纯色背景层。在 <code class="highlighter-rouge">SuperTextView</code> 中通常将该层视做背景层，而不是View的<code class="highlighter-rouge">Background</code>。</p>
<p><strong>3.Drawable层</strong>：<code class="highlighter-rouge">SuperTextView</code>的Drawable所在的层级。如果你希望通过 <code class="highlighter-rouge">SuperTextView</code> 来展示图片，就是在该层展示。</p>
<p><strong>4.文字层</strong>：即绘制文字的层级。</p>
<p>理解层级的概念对于后面将要讲述的 <strong>Adjuster</strong> 很有帮助。</p>
<h2 id="42-设置圆角">4.2 设置圆角</h2>
<p>圆角化功能是 <strong>SuperTextView</strong> 最基本的功能，你可以在xml文件或者Java中进行设置。</p>
<p>在xml中：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>app:corner="25dp"
</code></pre></div></div>
<p>在Java中：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.setCorner(25);
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%8812.57.49.png" alt="" /></p>
<p>圆角化的设置仅对 <strong>SuperTextView</strong> 的【背景层】，或者将<code class="highlighter-rouge">Drawble</code>用于展示图片（即：配置了<code class="highlighter-rouge">app:drawableAsBackground="true"</code>）时有效。</p>
<p>如果你需要一个圆形的效果，只需要将<code class="highlighter-rouge">corner</code>值设置为控件最大边长度的一半即可。比如：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>android:layout_width="80dp"
android:layout_height="80dp"
app:corner="40dp"
app:solid="#008673"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%883.59.41.png" alt="" /></p>
<p>将一张普通的图片圆角化：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>app:corner="15dp"
app:state_drawable="@drawable/avatar1"
app:drawableAsBackground="true"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%884.02.42.png" alt="" /></p>
<p>如果你希望实现圆形头像，或者圆角背景图的效果，那最适合不过了。</p>
<h1 id="43-控制每一个圆角">4.3 控制每一个圆角</h1>
<p>默认情况下，对 <strong>SuperTextView</strong> 设置<code class="highlighter-rouge">corner</code>会对控件的4个角都有效。当然也可以单独指定那些角需要圆角化。</p>
<p>在Xml</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//设置左上角圆角
app:left_top_corner="true"
//设置右上角圆角
app:right_top_corner="true"
//设置左下角圆角
app:left_bottom_corner="true"
//设置右下角圆角
app:right_bottom_corner="true"
</code></pre></div></div>
<p>在Java中</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//设置左上角圆角
stv.setLeftTopCornerEnable( boolean);
// 设置左下角圆角
stv.setLeftBottomCornerEnable() boolean);
//设置右上角圆角
stv.setRightTopCornerEnable() boolean);
//设置右下角圆角
stv.setRightBottomCornerEnable() boolean);
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-18%2008.15.59.png" alt="image" /></p>
<p>需要注意的时候，一旦指定了任何一个圆角，<code class="highlighter-rouge">app:corner</code> 将不再对4个角都有效了，你需要一个一个的去设置。</p>
<h1 id="44-边框">4.4 边框</h1>
<p><strong>SuperTextView</strong> 可以通过简单的配置给控件加上边框，实际开发中十分的便捷。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> app:solid="#78C3ED"
app:stroke_color="#5166ED"
app:stroke_width="5dp"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%884.46.13.png" alt="" /></p>
<p>只需要设置<code class="highlighter-rouge">app:stroke_width</code>大于0即开启了边框功能，如果没有设置<code class="highlighter-rouge">app:stroke_color</code>，会有默认的黑色边框。边框的圆角化也会受到<code class="highlighter-rouge">corner</code>属性的影响。</p>
<p>边框的效果同样能够在展示图片的时候有效。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%884.49.48.png" alt="" /></p>
<h1 id="45-文字描边">4.5 文字描边</h1>
<p>使用 <strong>SuperTextView</strong> 能够很轻松的实现文字描边的功能。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> # 开启文字描边功能
app:text_stroke="true"
# 设置文字填充颜色
app:text_fill_color="@color/white"
# 设置文字描边颜色
app:text_stroke_color="#461B50"
# 设置文字描边宽度
app:text_stroke_width="1dp"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%884.53.07.png" alt="" /></p>
<p>开启文字描边的功能后，文字颜色只能够通过<code class="highlighter-rouge">app:text_fill_color</code>来设置，不要使用<code class="highlighter-rouge">android:textColor</code> ！</p>
<p>如果想要实现空心文字的效果，只需要将<code class="highlighter-rouge">app:text_fill_color</code>设置为透明色，或者与背景色相同即可。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-18%20%E4%B8%8B%E5%8D%884.57.56.png" alt="" /></p>
<h1 id="46-状态图">4.6 状态图</h1>
<p><strong>SuperTextView</strong> 自带状态图功能，即Drawable、Drawable2，能够展示两个状态图。</p>
<p>与系统的原生TextView的Drawable不同，<strong>SuperTextView</strong> 的状态图能够准确的控制位置和大小。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># boolean类型。是否开启状态图1的功能。
app:isShowState="true"
# 设置状态图1的图片
app:state_drawable="@drawable/emoji"
# 设置状态图1的显示模式，决定了状态图1的基础位置
# 可选值如下：
# left、top、right、bottom、center(默认值)、
# leftTop、rightTop、leftBottom、rightBottom、
# fill(充满整个SuperTextView，此时会使设置drawable的大小失效)
app:state_drawable_mode="center"
# 设置状态图1的height
app:state_drawable_height="30dp"
# 设置状态图1的width
app:state_drawable_width="30dp"
# 设置状态图1相对于基础位置的左边的距离
app:state_drawable_padding_left="10dp"
# 设置状态图1相对于基础位置上边的距离
app:state_drawable_padding_top="10dp"
# boolean类型。是否开启状态图2的功能。
app:isShow2State="true"
# 设置状态图2的图片
app:state_drawable2="@drawable/emoji"
# 设置状态图2的显示模式，决定了状态图2的基础位置
# 可选值如下：
# left、top、right、bottom、center(默认值)、
# leftTop、rightTop、leftBottom、rightBottom、
# fill(充满整个SuperTextView，此时会使设置drawable的大小失效)
app:state_drawable2_mode="center"
# 设置状态图2的height
app:state_drawable2_height="30dp"
# 设置状态图2的width
app:state_drawable2_width="30dp"
# 设置状态图2相对于基础位置的左边的距离
app:state_drawable2_padding_left="10dp"
# 设置状态图2相对于基础位置上边的距离
app:state_drawable2_padding_top="10dp"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-18%2008.16.22.png" alt="image" /></p>
<p>上图是一些使用一个状态图实现的功能，可以看到，你可以轻松准确的控制状态图的位置和大小。</p>
<p>现在，看看两个状态图能够干什么。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-11-16%2001.46.23.png" alt="" /></p>
<ul>
<li><strong>示例一</strong></li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><com.coorchice.library.SuperTextView
android:layout_width="100dp"
android:layout_height="100dp"
...
app:corner="50dp"
app:state_drawable="@drawable/avatar1"
# 将状态图1作为控件背景，以展示图片
app:drawableAsBackground="true"
# state_drawable2的配置由此开始
app:isShowState2="true"
app:state_drawable2="@drawable/recousers"
app:state_drawable2_mode="rightTop"
app:state_drawable2_height="20dp"
app:state_drawable2_width="20dp"
...
/>
</code></pre></div></div>
<ul>
<li><strong>示例二</strong></li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><com.coorchice.library.SuperTextView
android:layout_width="100dp"
android:layout_height="100dp"
...
# 背景图
android:background="@drawable/avatar7"
# drawable1的配置由此开始
app:isShowState="true"
app:state_drawable="@drawable/triangle"
app:state_drawable_mode="leftTop"
app:state_drawable_width="20dp"
app:state_drawable_height="20dp"
# state_drawable2的配置由此开始
app:isShowState2="true"
app:state_drawable2="@drawable/recousers"
app:state_drawable2_mode="rightTop"
app:state_drawable2_height="20dp"
app:state_drawable2_width="20dp"
...
/>
</code></pre></div></div>
<h1 id="47-渐变效果">4.7 渐变效果</h1>
<p><strong>SuperTextView</strong> 支持通过配置简单的属性实现渐变色效果。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 必须设置为true才能启用渐变功能。这意味着你可以灵活的控制这一功能。
app:shaderEnable="true"
# 设置起始颜色
app:shaderStartColor="@color/main_blue"
# 设置结尾颜色。
app:shaderEndColor="@color/pink"
# 设置渐变模式。如上图可见，一共支持4中模式：
# topTopBottom, bottomToTop, leftToRight, rightToLeft
app:shaderMode="rightToLeft"
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E6%B8%90%E5%8F%98%E8%89%B2.png" alt="link" /></p>
<p>这些属性也支持在Java中设置。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 开启渐变色功能
stv.setShaderEnable(true);
// 设置起始颜色
stv.setShaderStartColor(Color.BLUE);
// 设置结束颜色
stv.setShaderEndColor(Color.RED);
// 设置模式
stv.setShaderMode(SuperTextView.ShaderMode.LEFT_TO_RIGHT);
</code></pre></div></div>
<p>渐变模式共有4种：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public static enum ShaderMode {
/**
* 从上到下
*/
TOP_TO_BOTTOM(0),
/**
* 从下到上
*/
BOTTOM_TO_TOP(1),
/**
* 从左到右
*/
LEFT_TO_RIGHT(2),
/**
* 从右到左
*/
RIGHT_TO_LEFT(3);
}
</code></pre></div></div>
<h2 id="48-按压变色">4.8 按压变色</h2>
<p><strong>SuperTextView</strong> 能够快速的支持按压变色效果，就像下图一样，文字和背景色都支持。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E6%8C%89%E5%8E%8B%E5%8F%98%E8%89%B2.gif" alt="image" /></p>
<p>只需配置简单的属性：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 设置按压时的背景色
app:pressBgColor="@color/red"
# 设置按压时的文字颜色
app:pressTextColor="@color/white"
</code></pre></div></div>
<p>在Java中：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> // 设置按压背景变色
stv.setPressBgColor(Color.RED);
// 取消按压文字变色
stv.setPressTextColor(-99);
</code></pre></div></div>
<ul>
<li>如果要取消按压背景变色，只需设置<code class="highlighter-rouge">PressBgColor</code>为透明色，<code class="highlighter-rouge">Color.TRANSPARENT</code>。</li>
<li>如果要取消按压文字变色，只需设置<code class="highlighter-rouge">PressTextColor</code>为-99。</li>
</ul>
<h2 id="49-展示图片">4.9 展示图片</h2>
<h3 id="491-展示本地图片">4.9.1 展示本地图片</h3>
<p>前面有提到过，<strong>SuperTextView</strong> 可以通过状态图1变成一个<code class="highlighter-rouge">ImageView</code>。在设置好状态图1后，只需开启图片展示功能即可。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><com.coorchice.library.SuperTextView
...
app:state_drawable="@drawable/avatar1"
# 开启图片展示功能
app:drawableAsBackground="true"
...
/>
</code></pre></div></div>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-05-20%2011.52.22.png" alt="" /></p>
<p>需要注意的是，当将状态图1用于展示图片后，状态图1将不再具备状态图的功能，直到你关闭了图片展示功能，通过<code class="highlighter-rouge">stv.setDrawableAsBackground(false)</code>。</p>
<h3 id="492-展示网络图片">4.9.2 展示网络图片</h3>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.setUrlImage(url);
</code></pre></div></div>
<p>在 <strong>SuperTextView</strong> 中，通过上面简单的一句即可将 <strong>SuperTextView</strong> 作为一个可以展示网络图片的ImageView。</p>
<p>调用上面的方法会默认开启 <strong>SuperTextView</strong> 的图片展示功能，因此，此时状态图1的状态图功能会被停用。你也可以通过以下方法，使得能够从网络中下载状态图1：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.setUrlImage(url, false);
</code></pre></div></div>
<p>第二个参数表示关闭图片展示功能。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD%E6%BC%94%E7%A4%BA2.gif" alt="" /></p>
<p>上图中，第一个例子是从网络中下载图片用作状态图，第二个例子是用作展示图片。</p>
<p><strong>SuperTextView</strong> 为了保持依赖库的纯净和尽可能小的体积，并没有内置任何的图片加载框架。所以默认情况，将使用内置的一个简易图片引擎去下载图片，确保开发者能够正常使用展示网络图片的功能。</p>
<p><strong>SuperTextView</strong> 具备兼容任意第三方图片下载框架的能力，建议开发者根据项目的具体情况，选择一个目前正在使用的图片加载框架，设置到 <strong>SuperTextView</strong> 中，以用来加载图片。 下面将通过几个的例子展示如何将现有的图片框架安装到 <strong>SuperTextView</strong> 中。</p>
<p><strong>第一步：实现图片引擎Engine</strong></p>
<p>在 <strong>SuperTextView</strong> 中，核心的图片加载引擎被抽象成接口 <strong>Engine</strong> ，开发者需要根据所用的图片框架，实现一个 <strong>Engine</strong>。</p>
<ul>
<li><strong>Glide图片加载框架</strong></li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public class GlideEngine implements Engine {
private Context context;
public GlideEngine(Context context) {
this.context = context;
}
@Override
public void load(String url, final ImageEngine.Callback callback) {
Glide.with(context).load(url).into(new SimpleTarget<GlideDrawable>() {
@Override
public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
// 主要是通过callback返回Drawable对象给SuperTextView
callback.onCompleted(resource);
}
});
}
}
</code></pre></div></div>
<ul>
<li><strong>Picasso图片加载框架</strong></li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public class PicassoEngine implements Engine {
private Context context;
public PicassoEngine(Context context) {
this.context = context;
}
@Override
public void load(String url, final ImageEngine.Callback callback) {
Picasso.with(context).load(url).into(new Target() {
@Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
// 主要是通过callback返回Drawable对象给SuperTextView
callback.onCompleted(new BitmapDrawable(Resources.getSystem(), bitmap));
}
@Override
public void onBitmapFailed(Drawable errorDrawable) {
}
@Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
}
});
}
}
</code></pre></div></div>
<p><strong>第二步：安装图片引擎Engine</strong></p>
<p>实现好 <strong>Engine</strong> 后，下一步就是要将其安装到 <strong>SuperTextView</strong> 中。</p>
<p>建议可以在 Application的<code class="highlighter-rouge">onCreate()</code>中进行安装，这样当需要使用 <strong>SuperTextView</strong> 加载显示网络图片的时候，就能够用到三方图片框架了。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public class STVApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// 安装图片引擎
ImageEngine.install(new GlideEngine(this));
// ImageEngine.install(new PicassoEngine(this));
}
}
</code></pre></div></div>
<p>一行代码，轻松安装。</p>
<p>需要注意的是，任何时候，后安装的 <strong>Engine</strong> 实例总是会替换掉先前安装的 <strong>Engine</strong> 实例，即 <strong>SuperTextView</strong> 只允许全局存在一个 <strong>Engine</strong> 实例。</p>
<p>只需简单两步，即可完成任意三方图片加载框架的适配。</p>
<h2 id="410-adjuster">4.10 Adjuster</h2>
<p><strong>Adjuster</strong> 被设计用来在 <strong>SuperTextView</strong> 的绘制过程中插入一些操作。这具有非常重要的意义。比如，实时的改变控件的状态，制作复杂的动画效果或者交互效果。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public class YourAdjuster extends SuperTextView.Adjuster {
@Override
protected void adjust(SuperTextView v, Canvas canvas) {
//do your business。
}
@Override
public boolean onTouch(SuperTextView v, MotionEvent event) {
//you can get the touch event.
//If want to get a series of touch event, you must return true here.
}
}
</code></pre></div></div>
<p>通过重写 <strong>Adjuster</strong> 的 <code class="highlighter-rouge">adjust()</code> 方法，可以获取每次绘制过程中控件的<code class="highlighter-rouge">Canvas</code>对象，这意味着可以在绘制过程中从外部插入一些新的元素。当然，单单通过 <strong>SuperTextView</strong> 的实例修改其状态也是可以的。</p>
<p>通过重写 <strong>Adjuster</strong> 的 <code class="highlighter-rouge">onTouch()</code> 方法，可以获取每一次控件的触摸事件，如果在该方法中返回true，表明该 <strong>Adjuster</strong> 需要获取后续的触摸事件，同时也会使得 <strong>SuperTextView</strong> 在整个控件树中回去拦截触摸事件。配合 <code class="highlighter-rouge">adjust()</code> 可以实现一些复杂的交互效果。值得注意的是，如果在 <strong>SuperTextView</strong> 之前，已经有控件拦截的触摸事件，那么其中的 <strong>Adjuster</strong> 将无法获取到触摸事件。</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/SuperTextView.gif" alt="link" /></p>
<p>当装载 <strong>Adjuster</strong> 到 <strong>SuperTextView</strong> 之后，需要调用以下方法来开启 <strong>Adjuster</strong> 的功能：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.setAutoAdjust(true);
</code></pre></div></div>
<p>当然，停止 <strong>Adjuster</strong> 只需要设置为false即可。</p>
<h3 id="4101-如何装载adjuster到supertextview">4.10.1 如何装载Adjuster到SuperTextView</h3>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.addAdjuster(mAdjuster);
</code></pre></div></div>
<p>通过上面方法可以将一个 <strong>Adjuster</strong> 添加到 <strong>SuperTextView</strong> 中，最多支持添加3个 <strong>Adjuster</strong> 。超过3个的部分，将会始终覆盖最后一个 <strong>Adjuster</strong>。</p>
<p>如果你想要移除一个 <strong>Adjuster</strong>，通过下面方法来实现。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.removeAdjuster(index)
</code></pre></div></div>
<h3 id="4102-设置adjuster的层级">4.10.2 设置Adjuster的层级</h3>
<p>前面有描述过 <strong>SuperTextView</strong> 的层级划分，<strong>Adjuster</strong> 可以通过配置，将其插入到指定的层级。</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mAdjuster.setOpportunity(opportunity);
</code></pre></div></div>
<p>层级定义了如下几个枚举变量：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>public enum Opportunity {
// 背景层和Drawable层之间
BEFORE_DRAWABLE,
// Drawable层和文字层之间
BEFORE_TEXT,
// 最上层
AT_LAST
}
</code></pre></div></div>
<p>分别对应如下几种场景，其中Emoji图是StateDrawable状态图，蓝色圆形就是一个 <strong>Adjuster</strong> ：</p>
<p><img src="http://ogemdlrap.bkt.clouddn.com/Opportunity.png" alt="image" /></p>
<h3 id="4103-开启动画">4.10.3 开启动画</h3>
<p>在 <strong>SuperTextView</strong> 中，可以通过以下方法触发 <strong>SuperTextView</strong> 的定时绘制：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.startAnim();
</code></pre></div></div>
<p>启动动画后， <strong>SuperTextView</strong> 将会以默认 <strong>60fps</strong> 的帧率进行刷新。配合 <strong>Adjuster</strong> 可以十分简单的实现动画效果。</p>
<p>当 <strong>SuperTextView</strong> 离开屏幕后，将会自动停止正在播放的动画，当在次进入屏幕时，又会自动启动。所以开发者可以无需担心动画在后台消耗资源。</p>
<p>当然，开发者也可以随时停止动画，通过调用以下方法：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>stv.stopAnim();
</code></pre></div></div>
<p>通过以下方法，开发者可以随时修改 <strong>SuperTextView</strong> 的刷新频率：</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 每秒30帧
stv.setFrameRate(30);
</code></pre></div></div>
<hr />
<blockquote>
<ul>
<li>如果你或你的团队正在使用 <strong>SuperTextView</strong>，可以通过邮箱 <a href="coorchice.cb@alibaba-inc.com"><code class="highlighter-rouge">coorchice.cb@alibaba-inc.com</code></a> 告知我。</li>
<li>如果你喜欢<strong> SuperTextView </strong>，希望能顺手在 <a href="https://github.com/chenBingX/SuperTextView"><strong> Github </strong></a> 点个<strong>star</strong>哦！</li>
</ul>
</blockquote>
<p><strong>文档结束。更多例子可以Clone项目到本地学习，祝你使用愉快！</strong></p>
</section>
<footer>
<p>Project maintained by <a href="https://github.com/chenBingX">chenBingX</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://twitter.com/michigangraham">mattgraham</a></small></p>
</footer>
</div>
</body>
</html>