關于FAB、CardView、Snackbar、TextInputLayout...

rept6259 8年前發布 | 6K 次閱讀安卓開發 Android開發移動開發

1、FloatingActionButton

FAB用來表示一個APP最主要的操作（ promoted action），它主要有以下幾個屬性：

屬性：

elevation：正常顯示時陰影的大小（FAB在Z軸方向的高度）
pressedTranslationZ：按下時陰影的大小（按下時，在Z軸的偏移量）
layout_anchor：錨點
layout_anchorGrav：相對于錨點的位置
backgroundTint：背景色，默認的是theme中的colorAccent
rippleColor：按下時的顏色，默認的是theme中的colorControlHighlight
fabSize：FAB的大小，normal、mini

</li> </ul>

代碼實現

<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"/>

FloatingActionButton

注意：

為FAB添加點擊事件，才有ripple的效果

樣式

在屏幕上只能有一個FAB
圖標：默認，56X56dp；最小40X40dp，用來和屏幕中的其他元素創造視覺的連續性
icon: 24 x 24dp

</li> </ul>

Floating action button

參考：

Android Reference FloatingActionButton

Android 設計文檔，FAB

2、Snackbar

Snackbar提供了一個可以回調的消息；可以滑出；一個只能同時顯示一個Snackbar；高度：48dp (single-line), 80dp (multi-line)

使用的時候，最好將Snackbar與一個CoordinatorLayout關聯，這樣的話：

可以手動滑出
在Snackbar出現的時候，一些ui元素會被移動

在Snackbar出現的時候，一些ui元素會被移動

Snackbar.make(coordinatorLayout, "floatingActionButton ", Snackbar.LENGTH_LONG).setAction("ok", null).show();

Android training Snackbar

Android Reference Snackbar

Android Snackbar 設計文檔

3、CardView

卡片非常適合展示有不同元素組成的內容，比如帶有長標題的圖片

特點：

有圓角
有多個Action
可以被重新排列、取消

</li> </ul>

Card的粒子

屬性

cardElevation：cardView的高度（投影）
cardCornerRadius：圓角半徑，2dp
contentPadding：內邊距
cardUseCompatPadding：Add padding in API v21+ as well to have the same measurements with previous versions，不明白
cardPreventCornerOverlap：為API 20及以前的版本添加padding，防止CardView的內容（ImageView）和CardView的圓角交叉，效果如下

</li> </ul>

API 19，cardPreventCornerOverlap為true

API 19，cardPreventCornerOverlap為false

API 23

以上contentPadding="0dp"

代碼如下

<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>

API 21 以上有效，點擊cardView

如果要實現如圖點擊的效果，添加 stateListAnimator 屬性，它在API 21以上有效

state_list_animator_selector，代碼如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns: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> 
  
注意：為cardView添加點擊事件，才有上面這個動畫效果 
  參考： 
  Android 設計文檔，Card 
  Android Reference cardview 
  4、TextInputLayout 
  提供一個顯示在EditText上方的浮動標簽，效果如下 
   
  TextInputLayout ，EditText 校驗 
  代碼如下 
  <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> 

<style name="MyTextColor" parent="AppTheme">
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <item name="android:textColorHint">@color/colorPrimary</item>
    </style> 
  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> 

注意：TextInputLayout只能包含一個子View 
   
    TextInputLayout會在左下角生成一個TextView用來顯示錯誤信息這個效果是怎么實現的呢？
 需要借助 setErrorEnabled() 方法，如果傳入true，TextInputLayout會在左下角生成一個TextView用來顯示錯誤信息，之后調用setError() 方法，設置錯誤信息；如果傳入false，則移除TextView從而不顯示錯誤信息。
  
    如何統計輸入的字數？
 使用 app:counterEnabled="true"，app:counterMaxLength="10"
  
   
   
  統計輸入的字數 
    
    
  來自：http://www.jianshu.com/p/8e9a11783fde


                    
                         本文由用戶 rept6259 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1473216644751.html
                         安卓開發 Android開發 移動開發

關于FAB、CardView、Snackbar、TextInputLayout...

1、FloatingActionButton

2、Snackbar

3、CardView

4、TextInputLayout

相關經驗

相關資訊

相關文檔

目錄