关于FAB、CardView、Snackbar、TextInpu

作者: i冰点 | 来源:发表于2016-08-18 20:36 被阅读343次

http://www.open-open.com/lib/view/open1416664217867.html

1、着色tint

通过修改图像的Alpha遮罩层来修改图像的颜色，从而达到重新着色的目的，

   <ImageView
   android:src="@mipmap/ic_launcher"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:tint="@color/colorAccent"
   android:tintMode="src_in"/>

效果如下：

tint着色

1、修改视图的形状outline

可以使用ViewOutlineProvider来修改outline，之后再将outline作用于视图

   ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
       @Override
       public void getOutline(View view, Outline outline) {
           outline.setRoundRect(0,0,outLineImageView.getWidth(),outLineImageView.getHeight(),40);
       }
   };
   outLineImageView.setOutlineProvider(viewOutlineProvider);
   //Sets whether the View's Outline should be used to clip the contents of the View.
   outLineImageView.setClipToOutline(true);

裁剪

2、Palette

Palette可以用来提取颜色，让主题可以适应当前页面的色调
代码如下：

   private void setPalette() {
       Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.ic_1);
       final Palette.Builder build=new Palette.Builder(bitmap);
       build.generate(new Palette.PaletteAsyncListener() {
           @Override
           public void onGenerated(Palette palette) {
               //通过Palette获得对应的色调
               Palette.Swatch swatch=palette.getLightVibrantSwatch();
               getSupportActionBar().setBackgroundDrawable(new ColorDrawable(swatch.getRgb()));
               getWindow().setStatusBarColor(swatch.getRgb());
           }
       });
   }

依赖

compile 'com.android.support:palette-v7:23.3.0'

可以通过如下几个方法获得对应的色调：
getLightVibrantSwatch()、getVibrantSwatch()、getDarkVibrantSwatch()、getLightMutedSwatch()、getMutedSwatch()、getDarkMutedSwatch()

palette

3、FloatingActionButton

FAB用来表示一个APP最主要的操作（ promoted action），它主要有以下几个属性：

属性：
- elevation：正常显示时阴影的大小（FAB在Z轴方向的高度）
- pressedTranslationZ：按下时阴影的大小（按下时，在Z轴的偏移量）
- layout_anchor：锚点
layout_anchorGrav：相对于锚点的位置
backgroundTint：背景色，默认的是theme中的colorAccent
rippleColor：按下时的颜色，默认的是theme中的colorControlHighlight
fabSize：FAB的大小，normal、mini

代码实现


   <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

Floating action button

参考：
Android Reference FloatingActionButton
Android 设计文档，FAB

4、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 设计文档

5、CardView

卡片非常适合展示有不同元素组成的内容，比如带有长标题的图片

特点：
有圆角
有多个Action
可以被重新排列、取消

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的圆角交叉，效果如下

API 19，cardPreventCornerOverlap为true

但是，有如下限制：
1、使用额外边距
2、不会裁剪其与圆角相交的子视图

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>

依赖

compile 'com.android.support:cardview-v7:23.0.1'

API 21 以上有效，点击cardView

如果要实现如图点击的效果，添加** stateListAnimator ** 属性，它在API 21以上有效

state_list_animator_selector，代码如下

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

注意：为cardView添加点击事件，才有上面这个动画效果

参考：
Android 设计文档，Card
Android Reference cardview

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

   <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);
               }
           }
       });

注意：TextInputLayout只能包含一个子View

TextInputLayout会在左下角生成一个TextView用来显示错误信息这个效果是怎么实现的呢？
需要借助** setErrorEnabled() **方法，如果传入true，TextInputLayout会在左下角生成一个TextView用来显示错误信息，之后调用setError() 方法，设置错误信息；如果传入false，则移除TextView从而不显示错误信息。
如何统计输入的字数？
使用 app:counterEnabled="true"，app:counterMaxLength="10"

统计输入的字数

代码下载

关于FAB、CardView、Snackbar、TextInpu

1、着色tint

1、修改视图的形状outline

2、Palette

3、FloatingActionButton

4、Snackbar

5、CardView

5、TextInputLayout

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android

Android效果/自定义

Android开发

Android知识

android成神之路

Android开发