关于FAB、CardView、Snackbar、TextInputLayout...
rept6259
8年前
<h2><strong>1、FloatingActionButton</strong></h2> <p>FAB用来表示一个APP最主要的操作（ promoted action），它主要有以下几个属性：</p> <ul> <li>属性： <ul> <li>elevation：正常显示时阴影的大小（FAB在Z轴方向的高度）</li> <li>pressedTranslationZ：按下时阴影的大小（按下时，在Z轴的偏移量）</li> <li>layout_anchor：锚点</li> <li>layout_anchorGrav：相对于锚点的位置</li> <li>backgroundTint：背景色，默认的是theme中的colorAccent</li> <li>rippleColor：按下时的颜色，默认的是theme中的colorControlHighlight</li> <li>fabSize：FAB的大小，normal、mini</li> </ul> </li> </ul> <p>代码实现</p> <pre> <code class="language-java"><android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_tick" app:elevation="8dp" app:fabSize="normal" app:borderWidth="0dp" app:pressedTranslationZ="10dp" app:backgroundTint="#c96449" app:rippleColor="#dfe7ab" app:layout_anchor="@id/collapsingToolbarLayout" app:layout_anchorGravity="bottom|right" app:useCompatPadding="true"/></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3d5339c34aa07c77e575371e10286ade.gif"></p> <p style="text-align:center">FloatingActionButton</p> <p>注意：</p> <p>为FAB添加点击事件，才有ripple的效果</p> <ul> <li>样式 <ul> <li>在屏幕上只能有一个FAB</li> <li>图标：默认，56X56dp；最小40X40dp，用来和屏幕中的其他元素创造视觉的连续性</li> <li>icon: 24 x 24dp</li> </ul> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/9812945f918028e06997c59bf536ca4f.png"></p> <p style="text-align:center">Floating action button</p> <p>参考：</p> <p><a href="/misc/goto?guid=4959714475927512950" rel="nofollow,noindex">Android Reference FloatingActionButton</a></p> <p><a href="/misc/goto?guid=4959714476036294364" rel="nofollow,noindex">Android 设计文档，FAB</a></p> <h2><strong>2、Snackbar</strong></h2> <p>Snackbar提供了一个可以回调的消息；可以滑出；一个只能同时显示一个Snackbar；高度：48dp (single-line), 80dp (multi-line)</p> <p>使用的时候，最好将Snackbar与一个CoordinatorLayout关联，这样的话：</p> <ul> <li>可以手动滑出</li> <li>在Snackbar出现的时候，一些ui元素会被移动</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/797724349fd7f8c73bcea9e9042a3672.gif"></p> <p style="text-align:center">在Snackbar出现的时候，一些ui元素会被移动</p> <pre> <code class="language-java">Snackbar.make(coordinatorLayout, "floatingActionButton ", Snackbar.LENGTH_LONG).setAction("ok", null).show();</code></pre> <p><a href="/misc/goto?guid=4959714476129442453" rel="nofollow,noindex">Android training Snackbar</a></p> <p><a href="/misc/goto?guid=4959714476224828458" rel="nofollow,noindex">Android Reference Snackbar</a></p> <p><a href="/misc/goto?guid=4959714476319448066" rel="nofollow,noindex">Android Snackbar 设计文档</a></p> <h2><strong>3、CardView</strong></h2> <p>卡片非常适合展示有不同元素组成的内容，比如带有长标题的图片</p> <ul> <li>特点： <ul> <li>有圆角</li> <li>有多个Action</li> <li>可以被重新排列、取消</li> </ul> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/ef0c5a0f50f0a2dac65011fced1e27aa.png"></p> <p style="text-align:center">Card的粒子</p> <ul> <li>属性 <ul> <li>cardElevation：cardView的高度（投影）</li> <li>cardCornerRadius：圆角半径，2dp</li> <li>contentPadding：内边距</li> <li>cardUseCompatPadding：Add padding in API v21+ as well to have the same measurements with previous versions，不明白</li> <li>cardPreventCornerOverlap：为API 20及以前的版本添加padding，防止CardView的内容（ImageView）和CardView的圆角 交叉，效果如下</li> </ul> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/08df987e4c3ced9416a21ad53a52c710.jpg"></p> <p style="text-align:center">API 19，cardPreventCornerOverlap为true</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b3f67c558ae22bf5d8759d41f8c02ef1.jpg"></p> <p style="text-align:center">API 19，cardPreventCornerOverlap为false</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c3cf02cbb011a4ca480c81ad9977b6b4.png"></p> <p style="text-align:center">API 23</p> <p>以上contentPadding="0dp"</p> <p>代码如下</p> <pre> <code class="language-java"><android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:contentPadding="4dp" app:cardElevation="2dp" app:cardUseCompatPadding="true" app:cardCornerRadius="2dp" app:cardPreventCornerOverlap="true" android:stateListAnimator="@drawable/state_list_animator_selector"> ... </android.support.v7.widget.CardView></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/31f9b8b58b5c5ad79422144c5bdd03f6.gif"></p> <p style="text-align:center">API 21 以上有效，点击cardView</p> <p>如果要实现如图点击的效果，添加 <strong>stateListAnimator</strong> 属性，它在API 21以上有效</p> <p>state_list_animator_selector，代码如下</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="16dp" android:valueType="floatType" /> </set> </item> <item android:state_pressed="false"> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </set> </item> </selector></code></pre> <p>注意：为cardView添加点击事件，才有上面这个动画效果</p> <p>参考：</p> <p><a href="/misc/goto?guid=4959714476407958898" rel="nofollow,noindex">Android 设计文档，Card</a></p> <p><a href="/misc/goto?guid=4959714476505186261" rel="nofollow,noindex">Android Reference cardview</a></p> <h2><strong>4、TextInputLayout</strong></h2> <p>提供一个显示在EditText上方的浮动标签，效果如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/545e875ac8dac2a08c5fa9d38aaabb4a.gif"></p> <p style="text-align:center">TextInputLayout ，EditText 校验</p> <p>代码如下</p> <pre> <code class="language-java"><android.support.design.widget.TextInputLayout android:layout_margin="30dp" android:id="@+id/passwordTextInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:counterEnabled="true" app:counterMaxLength="10" app:counterTextAppearance="@style/MyTextColor" app:counterOverflowTextAppearance="@android:color/holo_red_dark"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="password" android:inputType="number"/> </android.support.design.widget.TextInputLayout></code></pre> <pre> <code class="language-java"><style name="MyTextColor" parent="AppTheme"> <item name="android:textColor">@android:color/holo_red_dark</item> <item name="android:textColorHint">@color/colorPrimary</item> </style></code></pre> <pre> <code class="language-java">passwordTextInputLayout.getEditText().addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { if(passwordTextInputLayout.getEditText().getText().toString().length()<6){ passwordTextInputLayout.setErrorEnabled(true); passwordTextInputLayout.setError("密码长度小于6位"); }else { passwordTextInputLayout.setErrorEnabled(false); } } });</code></pre> <p>注意：TextInputLayout只能包含一个子View</p> <ul> <li> <p>TextInputLayout会在左下角生成一个TextView用来显示错误信息这个效果是怎么实现的呢？</p> <p>需要借助 <strong>setErrorEnabled()</strong> 方法，如果传入true，TextInputLayout会在左下角生成一个TextView用来显示错误信息，之后调用setError() 方法，设置错误信息；如果传入false，则移除TextView从而不显示错误信息。</p> </li> <li> <p>如何统计输入的字数？</p> <p>使用 app:counterEnabled="true"，app:counterMaxLength="10"</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/130f03ebabe0b4ae6ada7adfe869d967.gif"></p> <p style="text-align:center">统计输入的字数</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/8e9a11783fde</p> <p> </p>