-
Notifications
You must be signed in to change notification settings - Fork 0
/
16496553058651.html
475 lines (304 loc) · 16 KB
/
16496553058651.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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Android 实现 FloatingActionButton 自定义大小 - MayGodBlessYou
</title>
<link href="atom.xml" rel="alternate" title="MayGodBlessYou" type="application/atom+xml">
<link rel="stylesheet" href="asset/css/foundation.min.css" />
<link rel="stylesheet" href="asset/css/docs.css" />
<script src="asset/js/vendor/modernizr.js"></script>
<script src="asset/js/vendor/jquery.js"></script>
<script src="asset/highlightjs/highlight.pack.js"></script>
<link href="asset/highlightjs/styles/github.css" media="screen, projection" rel="stylesheet" type="text/css">
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
function before_search(){
var searchVal = 'site:jackro.cn ' + document.getElementById('search_input').value;
document.getElementById('search_q').value = searchVal;
return true;
}
</script>
</head>
<body class="antialiased hide-extras">
<div class="marketing off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<section class="top-bar-section">
<div class="row">
<div style="position: relative;width:100%;"><div style="position: absolute; width:100%;">
<ul id="main-menu" class="left">
<li id=""><a target="_self" href="index.html">Home</a></li>
<li id=""><a target="_self" href="archives.html">Archives</a></li>
<li id=""><a target="_self" href="about.html">About</a></li>
<li id=""><a target="_self" href="https://github.com/JackRo">Github</a></li>
</ul>
<ul class="right" id="search-wrap">
<li>
<form target="_blank" onsubmit="return before_search();" action="https://google.com/search" method="get">
<input type="hidden" id="search_q" name="q" value="" />
<input tabindex="1" type="search" id="search_input" placeholder="Search"/>
</form>
</li>
</ul>
</div></div>
</div>
</section>
</nav>
<nav class="tab-bar show-for-small">
<a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
<span> MayGodBlessYou</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a target="_self" href="index.html">Home</a></li>
<li><a target="_self" href="archives.html">Archives</a></li>
<li><a target="_self" href="about.html">About</a></li>
<li><a target="_self" href="https://github.com/JackRo">Github</a></li>
<li><label>Categories</label></li>
<li><a href="Android.html">Android</a></li>
<li><a href="iOS.html">iOS</a></li>
<li><a href="dotNET.html">dotNET</a></li>
<li><a href="Java.html">Java</a></li>
<li><a href="Git.html">Git</a></li>
<li><a href="DB.html">DB</a></li>
<li><a href="Shell.html">Shell</a></li>
<li><a href="PHP.html">PHP</a></li>
</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
<section id="main-content" role="main" class="scroll-container">
<script type="text/javascript">
$(function(){
$('#menu_item_index').addClass('is_active');
});
</script>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="markdown-body article-wrap">
<div class="article">
<h1>Android 实现 FloatingActionButton 自定义大小</h1>
<div class="read-more clearfix">
<span class="date">2016/11/20</span>
<span>posted in </span>
<span class="posted-in"><a href='Android.html'>Android</a></span>
<span class="comments">
</span>
</div>
</div><!-- article -->
<div class="article-content">
<p>最近在项目中使用了<a href="https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">FloatingActionButton</a> ,但是为了让UI看起来留白不是那么多,需要对<a href="https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">FloatingActionButton</a> 进行自定义大小。</p>
<span id="more"></span><!-- more -->
<p>根据官方文档的说明,<a href="https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">FloatingActionButton</a> 仅仅支持设置app:fabSize="normal"来改变fab的大小,并且这个fabSize的大小提供了三个可选项(normal,mini和auto)来设置,可以在布局里设置也可以在代码里调用setSize方法进行设置。</p>
<p>这里一开始是想到通过在布局里改变layout_width和layout_height来改变控件的大小的,但是设置之后(两者均设置为100dp,fabSize设置为normal),效果如下所示:</p>
<p><img src="https://objectstorage.ap-tokyo-1.oraclecloud.com/n/nrql75upzuqs/b/bucket-liberty-blog-20240513/o/jackro_blog2016112001.png" alt="jackro_blog2016112001" /></p>
<p>并且当设置了fab的固定宽高再来改变它的fabSize属性(改为mini或auto)时,效果会是fab的图标被撑的很大,甚至边缘都看不到了,显然这样通过固定fab的宽高属性来改变其大小是行不通的。</p>
<p>翻阅FloatingActionButton的源码,其第三个构造函数如下</p>
<pre><code class="language-java">
public FloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
ThemeUtils.checkAppCompatTheme(context);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.FloatingActionButton, defStyleAttr,
R.style.Widget_Design_FloatingActionButton);
mBackgroundTint = a.getColorStateList(R.styleable.FloatingActionButton_backgroundTint);
mBackgroundTintMode = ViewUtils.parseTintMode(a.getInt(
R.styleable.FloatingActionButton_backgroundTintMode, -1), null);
mRippleColor = a.getColor(R.styleable.FloatingActionButton_rippleColor, 0);
mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, SIZE_AUTO);
mBorderWidth = a.getDimensionPixelSize(R.styleable.FloatingActionButton_borderWidth, 0);
final float elevation = a.getDimension(R.styleable.FloatingActionButton_elevation, 0f);
final float pressedTranslationZ = a.getDimension(
R.styleable.FloatingActionButton_pressedTranslationZ, 0f);
mCompatPadding = a.getBoolean(R.styleable.FloatingActionButton_useCompatPadding, false);
a.recycle();
mImageHelper = new AppCompatImageHelper(this);
mImageHelper.loadFromAttributes(attrs, defStyleAttr);
mMaxImageSize = (int) getResources().getDimension(R.dimen.design_fab_image_size);
getImpl().setBackgroundDrawable(mBackgroundTint, mBackgroundTintMode,
mRippleColor, mBorderWidth);
getImpl().setElevation(elevation);
getImpl().setPressedTranslationZ(pressedTranslationZ);
}
</code></pre>
<p>都是读取属性来设置一些自定义属性,看到最后三行,发现getImpl方法的调用,它的返回值是FloatingActionButtonImpl,原来fab都是通过FloatingActionButtonImpl来实现其自定义属性的,找到getImpl这个方法,源码如下:</p>
<pre><code class="language-java"> private FloatingActionButtonImpl getImpl() {
if (mImpl == null) {
mImpl = createImpl();
}
return mImpl;
}
private FloatingActionButtonImpl createImpl() {
final int sdk = Build.VERSION.SDK_INT;
if (sdk >= 21) {
return new FloatingActionButtonLollipop(this, new ShadowDelegateImpl(),
ViewUtils.DEFAULT_ANIMATOR_CREATOR);
} else if (sdk >= 14) {
return new FloatingActionButtonIcs(this, new ShadowDelegateImpl(),
ViewUtils.DEFAULT_ANIMATOR_CREATOR);
} else {
return new FloatingActionButtonGingerbread(this, new ShadowDelegateImpl(),
ViewUtils.DEFAULT_ANIMATOR_CREATOR);
}
}
</code></pre>
<p>上面创建FloatingActionButtonImpl每种情况都传递了ShadowDelegateImpl的一个实例,说明这个类对创建FloatingActionButtonImpl很重要,往下看这个类的源码,如下所示:</p>
<pre><code class="language-java"> private class ShadowDelegateImpl implements ShadowViewDelegate {
ShadowDelegateImpl() {
}
@Override
public float getRadius() {
return getSizeDimension() / 2f;
}
@Override
public void setShadowPadding(int left, int top, int right, int bottom) {
mShadowPadding.set(left, top, right, bottom);
setPadding(left + mImagePadding, top + mImagePadding,
right + mImagePadding, bottom + mImagePadding);
}
@Override
public void setBackgroundDrawable(Drawable background) {
FloatingActionButton.super.setBackgroundDrawable(background);
}
@Override
public boolean isCompatPaddingEnabled() {
return mCompatPadding;
}
}
</code></pre>
<p>这个类里有一个getRadius方法,字面意思理解就是获取半径的,终于柳暗花明,原来fab的大小(即半径)是这个方法来获取的,可以看到它调用了getSizeDimension,下面看这个getSizeDimension方法,源码如下:</p>
<pre><code class="language-java"> int getSizeDimension() {
return getSizeDimension(mSize);
}
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// If we're set to auto, grab the size from resources and refresh
final int width = ConfigurationHelper.getScreenWidthDp(res);
final int height = ConfigurationHelper.getScreenHeightDp(res);
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
</code></pre>
<p>原来这里google做的控件也是通过获取资源文件dimens.xml来获取dimen值的(废话,当然是了)。终于看到这里,我才恍然大悟,我可以通过自定义这个design_fab_size_normal来实现覆盖默认的dimen值呀(因为我的布局里是设置fabSize为normal的),自定义代码如下所示:</p>
<pre><code class="language-xml"><dimen name="design_fab_size_normal" tools:ignore="PrivateResource">80dp</dimen>
</code></pre>
<p>这样即完美搞定我的fab自定义大小的需求。上张效果图,如下所示:</p>
<p><img src="https://objectstorage.ap-tokyo-1.oraclecloud.com/n/nrql75upzuqs/b/bucket-liberty-blog-20240513/o/jackro_blog2016112002.jpg" alt="jackro_blog2016112002" /></p>
<p>和之前那个设置fab的固定宽高的效果比好多了。</p>
</div>
<div class="row">
<div class="large-6 columns">
<p class="text-left" style="padding:15px 0px;">
<a href="16496553059586.html"
title="Previous Post: Application windows are expected to have a root view controller at the end of application launch">« Application windows are expected to have a root view controller at the end of application launch</a>
</p>
</div>
<div class="large-6 columns">
<p class="text-right" style="padding:15px 0px;">
<a href="16496553058494.html"
title="Next Post: Android 实现 EditText 响应 drawableRight 点击事件">Android 实现 EditText 响应 drawableRight 点击事件 »</a>
</p>
</div>
</div>
<div class="comments-wrap">
<div class="share-comments">
</div>
</div>
</div><!-- article-wrap -->
</div><!-- large 8 -->
<div class="large-4 medium-4 columns">
<div class="hide-for-small">
<div id="sidebar" class="sidebar">
<div id="site-info" class="site-info">
<div class="site-a-logo"><img src="media/16496656235321/icon.png" /></div>
<h1>MayGodBlessYou</h1>
<div class="site-des"></div>
<div class="social">
<a target="_blank" class="github" target="_blank" href="https://github.com/JackRo" title="GitHub">GitHub</a>
<a target="_blank" class="rss" href="atom.xml" title="RSS">RSS</a>
</div>
</div>
<div id="site-categories" class="side-item ">
<div class="side-header">
<h2>Categories</h2>
</div>
<div class="side-content">
<p class="cat-list">
<a href="Android.html"><strong>Android</strong></a>
<a href="iOS.html"><strong>iOS</strong></a>
<a href="dotNET.html"><strong>dotNET</strong></a>
<a href="Java.html"><strong>Java</strong></a>
<a href="Git.html"><strong>Git</strong></a>
<a href="DB.html"><strong>DB</strong></a>
<a href="Shell.html"><strong>Shell</strong></a>
<a href="PHP.html"><strong>PHP</strong></a>
</p>
</div>
</div>
<div id="site-categories" class="side-item">
<div class="side-header">
<h2>Recent Posts</h2>
</div>
<div class="side-content">
<ul class="posts-list">
<li class="post">
<a href="16496553059675.html">Android 面试展示 iOS debug app 时闪退</a>
</li>
<li class="post">
<a href="16496553060588.html">mysql自定义function问题解决</a>
</li>
<li class="post">
<a href="16496553059414.html">Android Studio 中鼠标悬停 Fetching Documentation 很长时间</a>
</li>
<li class="post">
<a href="16496553060491.html">macOS 中 git 提交操作 .DS_Store 文件引发的问题解决</a>
</li>
<li class="post">
<a href="16496553060993.html">Safari 浏览器设置 Java 支持</a>
</li>
</ul>
</div>
</div>
</div><!-- sidebar -->
</div><!-- hide for small -->
</div><!-- large 4 -->
</div><!-- row -->
<div class="page-bottom clearfix">
<div class="row">
<p class="copyright">Copyright © 2015
Powered by <a target="_blank" href="http://www.mweb.im">MWeb</a>,
Theme used <a target="_blank" href="http://github.com">GitHub CSS</a>.</p>
</div>
</div>
</section>
</div>
</div>
<script src="asset/js/foundation.min.js"></script>
<script>
$(document).foundation();
function fixSidebarHeight(){
var w1 = $('.markdown-body').height();
var w2 = $('#sidebar').height();
if (w1 > w2) { $('#sidebar').height(w1); };
}
$(function(){
fixSidebarHeight();
})
$(window).load(function(){
fixSidebarHeight();
});
</script>
</body>
</html>