Android高级UI开发(十七)CardView+FloatActionButton+普通Button水波纹问题

举报
yd_57386892 发表于 2020/12/28 23:36:14 2020/12/28
【摘要】 自动Android5.0的Material design设计规范推出之后,新增了许多设计比较好的控件,如CardView,浮动按钮等。这些控件来自于com.android.support:design包中。今天我们主要讲布局界面及展示效果,无需额外编写程序代码。 1. CardView在布局中的运用: <LinearLayout xmlns:android="http...

自动Android5.0的Material design设计规范推出之后,新增了许多设计比较好的控件,如CardView,浮动按钮等。这些控件来自于com.android.support:design包中。今天我们主要讲布局界面及展示效果,无需额外编写程序代码。

1. CardView在布局中的运用:


      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:orientation="vertical">
      <android.support.v7.widget.CardView
      android:id="@+id/cardView"
      android:layout_width="300dp"
      android:layout_height="200dp"
      android:layout_margin="16dp"
      android:clickable="true"
      android:foreground="?attr/selectableItemBackground"
      android:stateListAnimator="@drawable/z_translation"
      app:cardCornerRadius="20dp"
      app:cardElevation="20dp">
      <ImageView
      android:id="@+id/iv"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:scaleType="centerCrop"
      android:src="@drawable/andy" />
      </android.support.v7.widget.CardView>
      </LinearLayout>
  
 

      从上述布局中我们可以看出以下几点:
      (1)CardView显示效果表现为一个卡片,例如信用卡,身份证。
      (2)CardView可以嵌套任何布局,在这里嵌套的是ImageView
      (3)可以设置水波纹效果与阴影。
        android:clickable="true" 只有设置为可点击,水波纹效果才能表现出来。
        android:foreground="?attr/selectableItemBackground" 设置为水波纹效果。
        android:stateListAnimator="@drawable/z_translation"  当按下卡片时Z轴上执行一个属性动画(Z轴上平移),改变阴影大小。
        app:cardCornerRadius="20dp"  卡片的圆角
        app:cardElevation="20dp 通过设置卡片Z轴高度,来设置阴影。
  
 

上述@drawable/z_translation属性动画XML配置如下:


      <?xml version="1.0" encoding="utf-8"?>
      <selector
      xmlns:android="http://schemas.android.com/apk/res/android"
       >
      <item
      android:state_pressed="true">
      <objectAnimator
      android:duration="@android:integer/config_shortAnimTime"
      android:propertyName="translationZ"
      android:valueTo="15dp"
      android:valueType="floatType"
       ></objectAnimator>
      </item>
      <item
       >
      <objectAnimator
      android:duration="@android:integer/config_shortAnimTime"
      android:propertyName="translationZ"
      android:valueTo="0dp"
      android:valueType="floatType"
       ></objectAnimator>
      </item>
      </selector>
  
 

2.  浮动按钮在布局中的运用:

效果图(最下面那个+号是浮动按钮)


       <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_margin="16dp"
      android:clickable="true"
      android:src="@drawable/ic_add_white_24dp"
      app:backgroundTint="?attr/colorPrimary"
      app:elevation="10dp"
      app:fabSize="normal"
      app:pressedTranslationZ="12dp"
      app:rippleColor="#ff0" />
  
 

       app:backgroundTint="?attr/colorPrimary" 设置浮动按钮 表面颜色 为主题颜色,也可以设置其它颜色
        app:elevation="10dp"          设置Z轴阴影高度,这个相当于卡片中的app:cardElevation属性
        app:fabSize="normal"          设置浮动按钮大小为中等大小。
        app:pressedTranslationZ="12dp"  设置按下时阴影的变化,这个相当于第1节所讲的阴影在Z轴上的属性动画                          ( android:stateListAnimator="@drawable/z_translation")

3.普通Button

普通Button默认是有水波纹效果的,但是当给Button设置了background图片后,Button自带的水波纹效果与阴影就不起作用了。

解决方法,我们以ImageButton为例,需要设置一个background为一个@drawable/ripple.具体请看下面内容。

效果图(最下面那张图片为ImageButton):

ImageButton布局文件:


         <ImageButton
       android:id="@+id/btButton"
       android:layout_width="200dp"
       android:layout_height="100dp"
       android:layout_marginTop="30dp"
       android:background="@drawable/ripple"
       android:clickable="true"
       android:elevation="5dp"
       android:stateListAnimator="@drawable/z_translation" />
  
 

其中background=@drawable/ripple用来恢复水波纹效果,那么我们在drawable下新建一个ripple.xml,内容如下:

 


      <?xml version="1.0" encoding="utf-8"?>
      <ripple
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@color/colorAccent">//点击时波纹的颜色
      <item android:drawable="@drawable/andy"/>//未点击时控件的背景(可以是图片,可以是颜色,也可以是drawable里的xml背景(比如圆角))
      </ripple>
  
 

相信,至此ImageButton里的属性不用解释也可以理解了吧。最后送上Demo源码:

https://download.csdn.net/download/gaoxiaoweiandy/10825219

 

文章来源: blog.csdn.net,作者:冉航--小虾米,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/gaoxiaoweiandy/article/details/84772210

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。