一、控件简述

　　今天给大家推荐一个控件 SCardView ，看名字就很容易才出来它其实就是一个 CardView 。把它拿出来，是因为它解决了一些 CardView 无法实现的需求以及简化了 CardView 的使用。其实就是 CardView 的一个改良版。下面我们来介绍它：

　　1. 实现圆角阴影效果，并可以设置阴影的方向

　　　　CardView 也可以实现圆角阴影效果，但是 CardView 的阴影方向是我们无法设置的。为什么强调阴影方向这个条件呢，因为 CardView 在 API 21 之后，阴影的显示效果在屏幕的各个位置是不一致的。如果你在屏幕中使用了多个 CardView ，但是 UI 美眉告诉你这几个CardView 的阴影不一样，太难看，需要统一，并且让测试提成了一个 BUG 。怎么解决，这就是SCardView 出现的来源。

　　　　看下 CardView 造成的阴影不一致的效果：

　　　　SCardView 通过 cardLightDirection 属性来配置光源的位置来控制阴影的显示，如下：

  1. <com.meetsl.scardview.SCardView
  2.         android:layout_width="@dimen/card_size"
  3.         android:layout_height="@dimen/card_size"
  4.         android:layout_centerHorizontal="true"
  5.         android:layout_margin="20dp"
  6.         app:cardBackgroundColor="@android:color/holo_orange_dark"
  7.         app:cardCornerRadius="5dp"
  8.         app:cardElevation="@dimen/cardview_elevation"
  9.         app:cardLightDirection="left">  <!--光源位置在左侧，则阴影出现在反方向右侧 -->
  10.  
  11.         <TextView
  12.             android:layout_width="wrap_content"
  13.             android:layout_height="wrap_content"
  14.             android:layout_gravity="center_horizontal"
  15.             android:padding="5dp"
  16.             android:text="left"
  17.             android:textColor="@android:color/white"
  18.             android:textSize="16sp" />
  19.  
  20.         <ImageView
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:layout_gravity="center"
  24.             android:src="@mipmap/home_back" />
  25.     </com.meetsl.scardview.SCardView>

　　　　在 cardLightDirection 中提供四面八方的值，足够满足你的需求：

  1. <attr name="cardLightDirection">
  2.             <enum name="left" value="1" /> <!-- 设置光源位置为左侧，阴影在右侧 -->
  3.             <enum name="right" value="2" /> <!-- 阴影在左侧-->
  4.             <enum name="top" value="3" /> <!-- 阴影在下部-->
  5.             <enum name="bottom" value="4" /> <!-- 阴影在上部 -->
  6.             <enum name="LT" value="5" /> <!-- 阴影在右下角-->
  7.             <enum name="RT" value="6" /> <!-- 阴影在左下角-->
  8.             <enum name="LB" value="7" /> <!-- 阴影在右上角 -->
  9.             <enum name="RB" value="8" /> <!-- 阴影在左上角 -->
  10.             <enum name="none" value="9" /> <!-- 光源位置在正上方 -->
  11.         </attr>

　　2. 给阴影设置颜色

　　　　看到一些比较漂亮的UI，阴影都有其自身的颜色，虽然不符合自然现象，但是好看啊。出了这样的设计图，除了和UI美眉要一张有阴影的背景图片，还可以通过 SCardView 来实现，来看下效果：

中间一行的第一个和第三个都设置有阴影，确实挺好看的。

　　3. 扔掉 CardView 对不同 Android 版本适配的过程

　　　　使用 CardView 开发，需要注意的一点是 CardView 在不同 API 的Android 手机上显示效果会有大小的差异。 CardView 提供了 cardUseCompatPadding 、cardPreventCornerOverlap 等属性来做版本的适配。具体怎么在开发中适配，自行搜索一下。如果不想考虑这些，那就直接使用 SCardView 。来看一下，照成差异的源码：

  1. /**
  2.      * CardView adds additional padding to draw shadows on platforms before Lollipop.
  3.      * <p>
  4.      * This may cause Cards to have different sizes between Lollipop and before Lollipop. If you
  5.      * need to align CardView with other Views, you may need api version specific dimension
  6.      * resources to account for the changes.
  7.      * As an alternative, you can set this flag to <code>true</code> and CardView will add the same
  8.      * padding values on platforms Lollipop and after.
  9.      * <p>
  10.      * Since setting this flag to true adds unnecessary gaps in the UI, default value is
  11.      * <code>false</code>.
  12.      *
  13.      * @param useCompatPadding <code>true></code> if CardView should add padding for the shadows on
  14.      *      platforms Lollipop and above.
  15.      * @attr ref android.support.v7.cardview.R.styleable#CardView_cardUseCompatPadding
  16.      */
  17.     public void setUseCompatPadding(boolean useCompatPadding) {
  18.         if (mCompatPadding != useCompatPadding) {
  19.             mCompatPadding = useCompatPadding;
  20.             IMPL.onCompatPaddingChanged(mCardViewDelegate);
  21.         }
  22.     }

　　　　差异造成的原因主要因为 Google开发者在实现 CardView 的阴影效果在 API 21之前和之后实现方式不一样，例如源码中所示：

  1. static {
  2.         if (Build.VERSION.SDK_INT >= 21) {
  3.             IMPL = new CardViewApi21Impl();
  4.         } else if (Build.VERSION.SDK_INT >= 17) {
  5.             IMPL = new CardViewApi17Impl();
  6.         } else {
  7.             IMPL = new CardViewBaseImpl();
  8.         }
  9.         IMPL.initStatic();
  10.     }

　　　　SCarView 直接去掉了 CardViewApi21Impl 这个实现方式，去掉适配了的麻烦，当然这样好像有点不太好，但是还有前面两个原因，还是值得的。这三点基本就说明了 SCardView 出现的缘由，觉得怎么样。如果可以就继续往下了解，看看如何在项目中使用它。

二、使用 SCardView

　　怎么使用 SCardView ，那这个就非常简单了。添加一个依赖，然后在布局中使用即可。

　　添加依赖：

  1. implementation 'io.github.meetsl:SCardView:1.0'

　　Xml中使用：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.  
  9.     <com.meetsl.scardview.SCardView
  10.         android:layout_width="@dimen/card_size"
  11.         android:layout_height="@dimen/card_size"
  12.         android:layout_margin="20dp"
  13.         android:onClick="jump"
  14.         app:cardBackgroundColor="@android:color/holo_blue_light"
  15.         app:cardShadowStartColor="#3733B5E5"
  16.         app:cardShadowEndColor="#0333B5E5"
  17.         app:cardCornerRadius="5dp"
  18.         app:cardElevation="@dimen/cardview_elevation"
  19.         app:cardLightDirection="none">
  20.  
  21.         <TextView
  22.             android:layout_width="wrap_content"
  23.             android:layout_height="wrap_content"
  24.             android:layout_gravity="center_horizontal"
  25.             android:padding="5dp"
  26.             android:text="none"
  27.             android:textColor="@android:color/white"
  28.             android:textSize="16sp" />
  29.  
  30.         <ImageView
  31.             android:layout_width="wrap_content"
  32.             android:layout_height="wrap_content"
  33.             android:layout_gravity="center"
  34.             android:src="@mipmap/home_back" />
  35.     </com.meetsl.scardview.SCardView>
  36.  
  37.     <com.meetsl.scardview.SCardView
  38.         android:layout_width="@dimen/card_size"
  39.         android:layout_height="@dimen/card_size"
  40.         android:layout_centerHorizontal="true"
  41.         android:layout_margin="20dp"
  42.         app:cardBackgroundColor="@android:color/holo_orange_dark"
  43.         app:cardCornerRadius="5dp"
  44.         app:cardElevation="@dimen/cardview_elevation"
  45.         app:cardLightDirection="left">
  46.  
  47.         <TextView
  48.             android:layout_width="wrap_content"
  49.             android:layout_height="wrap_content"
  50.             android:layout_gravity="center_horizontal"
  51.             android:padding="5dp"
  52.             android:text="left"
  53.             android:textColor="@android:color/white"
  54.             android:textSize="16sp" />
  55.  
  56.         <ImageView
  57.             android:layout_width="wrap_content"
  58.             android:layout_height="wrap_content"
  59.             android:layout_gravity="center"
  60.             android:src="@mipmap/home_back" />
  61.     </com.meetsl.scardview.SCardView>
  62.  
  63.     <com.meetsl.scardview.SCardView
  64.         android:layout_width="@dimen/card_size"
  65.         android:layout_height="@dimen/card_size"
  66.         android:layout_alignParentRight="true"
  67.         android:layout_margin="20dp"
  68.         app:cardBackgroundColor="@android:color/holo_red_light"
  69.         app:cardCornerRadius="5dp"
  70.         app:cardElevation="@dimen/cardview_elevation"
  71.         app:cardLightDirection="right">
  72.  
  73.         <TextView
  74.             android:layout_width="wrap_content"
  75.             android:layout_height="wrap_content"
  76.             android:layout_gravity="center_horizontal"
  77.             android:padding="5dp"
  78.             android:text="right"
  79.             android:textColor="@android:color/white"
  80.             android:textSize="16sp" />
  81.  
  82.         <ImageView
  83.             android:layout_width="wrap_content"
  84.             android:layout_height="wrap_content"
  85.             android:layout_gravity="center"
  86.             android:src="@mipmap/home_back" />
  87.     </com.meetsl.scardview.SCardView>
  88.  
  89.     <com.meetsl.scardview.SCardView
  90.         android:layout_width="@dimen/card_size"
  91.         android:layout_height="@dimen/card_size"
  92.         android:layout_centerVertical="true"
  93.         android:layout_margin="20dp"
  94.         app:cardBackgroundColor="#1ADB99"
  95.         app:cardShadowStartColor="#671ADB99"
  96.         app:cardShadowEndColor="#041ADB99"
  97.         app:cardCornerRadius="5dp"
  98.         app:cardElevation="@dimen/cardview_elevation"
  99.         app:cardLightDirection="top">
  100.  
  101.         <TextView
  102.             android:layout_width="wrap_content"
  103.             android:layout_height="wrap_content"
  104.             android:layout_gravity="center_horizontal"
  105.             android:padding="5dp"
  106.             android:text="top"
  107.             android:textColor="@android:color/white"
  108.             android:textSize="16sp" />
  109.  
  110.         <ImageView
  111.             android:layout_width="wrap_content"
  112.             android:layout_height="wrap_content"
  113.             android:layout_gravity="center"
  114.             android:src="@mipmap/home_back" />
  115.     </com.meetsl.scardview.SCardView>
  116.  
  117.     <com.meetsl.scardview.SCardView
  118.         android:layout_width="@dimen/card_size"
  119.         android:layout_height="@dimen/card_size"
  120.         android:layout_centerInParent="true"
  121.         android:layout_margin="20dp"
  122.         app:cardBackgroundColor="@color/colorPrimary"
  123.         app:cardCornerRadius="5dp"
  124.         app:cardElevation="@dimen/cardview_elevation"
  125.         app:cardLightDirection="bottom">
  126.  
  127.         <TextView
  128.             android:layout_width="wrap_content"
  129.             android:layout_height="wrap_content"
  130.             android:layout_gravity="center_horizontal"
  131.             android:padding="5dp"
  132.             android:text="bottom"
  133.             android:textColor="@android:color/white"
  134.             android:textSize="16sp" />
  135.  
  136.         <ImageView
  137.             android:layout_width="wrap_content"
  138.             android:layout_height="wrap_content"
  139.             android:layout_gravity="center"
  140.             android:src="@mipmap/home_back" />
  141.     </com.meetsl.scardview.SCardView>
  142.  
  143.     <com.meetsl.scardview.SCardView
  144.         android:layout_width="@dimen/card_size"
  145.         android:layout_height="@dimen/card_size"
  146.         android:layout_alignParentRight="true"
  147.         android:layout_centerVertical="true"
  148.         android:layout_margin="20dp"
  149.         app:cardBackgroundColor="@color/colorAccent"
  150.         app:cardShadowStartColor="#57FF4081"
  151.         app:cardShadowEndColor="#03FF4081"
  152.         app:cardCornerRadius="5dp"
  153.         app:cardElevation="@dimen/cardview_elevation"
  154.         app:cardLightDirection="LT">
  155.  
  156.         <TextView
  157.             android:layout_width="wrap_content"
  158.             android:layout_height="wrap_content"
  159.             android:layout_gravity="center_horizontal"
  160.             android:padding="5dp"
  161.             android:text="LT"
  162.             android:textColor="@android:color/white"
  163.             android:textSize="16sp" />
  164.  
  165.         <ImageView
  166.             android:layout_width="wrap_content"
  167.             android:layout_height="wrap_content"
  168.             android:layout_gravity="center"
  169.             android:src="@mipmap/home_back" />
  170.     </com.meetsl.scardview.SCardView>
  171.  
  172.     <com.meetsl.scardview.SCardView
  173.         android:layout_width="@dimen/card_size"
  174.         android:layout_height="@dimen/card_size"
  175.         android:layout_alignParentBottom="true"
  176.         android:layout_margin="20dp"
  177.         app:cardBackgroundColor="#85BC49"
  178.         app:cardCornerRadius="5dp"
  179.         app:cardElevation="@dimen/cardview_elevation"
  180.         app:cardLightDirection="LB">
  181.  
  182.         <TextView
  183.             android:layout_width="wrap_content"
  184.             android:layout_height="wrap_content"
  185.             android:layout_gravity="center_horizontal"
  186.             android:padding="5dp"
  187.             android:text="LB"
  188.             android:textColor="@android:color/white"
  189.             android:textSize="16sp" />
  190.  
  191.         <ImageView
  192.             android:layout_width="wrap_content"
  193.             android:layout_height="wrap_content"
  194.             android:layout_gravity="center"
  195.             android:src="@mipmap/home_back" />
  196.     </com.meetsl.scardview.SCardView>
  197.  
  198.     <com.meetsl.scardview.SCardView
  199.         android:layout_width="@dimen/card_size"
  200.         android:layout_height="@dimen/card_size"
  201.         android:layout_alignParentBottom="true"
  202.         android:layout_centerHorizontal="true"
  203.         android:layout_margin="20dp"
  204.         app:cardBackgroundColor="#80B3FF"
  205.         app:cardCornerRadius="5dp"
  206.         app:cardElevation="@dimen/cardview_elevation"
  207.         app:cardLightDirection="RT">
  208.  
  209.         <TextView
  210.             android:layout_width="wrap_content"
  211.             android:layout_height="wrap_content"
  212.             android:layout_gravity="center_horizontal"
  213.             android:padding="5dp"
  214.             android:text="RT"
  215.             android:textColor="@android:color/white"
  216.             android:textSize="16sp" />
  217.  
  218.         <ImageView
  219.             android:layout_width="wrap_content"
  220.             android:layout_height="wrap_content"
  221.             android:layout_gravity="center"
  222.             android:src="@mipmap/home_back" />
  223.     </com.meetsl.scardview.SCardView>
  224.  
  225.     <com.meetsl.scardview.SCardView
  226.         android:layout_width="@dimen/card_size"
  227.         android:layout_height="@dimen/card_size"
  228.         android:layout_alignParentBottom="true"
  229.         android:layout_alignParentRight="true"
  230.         android:layout_margin="20dp"
  231.         app:cardBackgroundColor="#40337D"
  232.         app:cardCornerRadius="5dp"
  233.         app:cardElevation="@dimen/cardview_elevation"
  234.         app:cardLightDirection="RB">
  235.  
  236.         <TextView
  237.             android:layout_width="wrap_content"
  238.             android:layout_height="wrap_content"
  239.             android:layout_gravity="center_horizontal"
  240.             android:padding="5dp"
  241.             android:text="RB"
  242.             android:textColor="@android:color/white"
  243.             android:textSize="16sp" />
  244.  
  245.         <ImageView
  246.             android:layout_width="wrap_content"
  247.             android:layout_height="wrap_content"
  248.             android:layout_gravity="center"
  249.             android:src="@mipmap/home_back" />
  250.     </com.meetsl.scardview.SCardView>
  251. </RelativeLayout>

　　效果图如下，有木有很漂亮：

　　

---------- 更新：2018/10/9

三、控件新特性：边角控制

　　SCardView 添加了对边角的控制，可能满足某些需求，上图查看效果：

　　新特性是对边角添加了控制，就正如上图所示，一共添加了 6 种效果：

  1. <attr name="cardCornerVisibility">
  2.      <enum name="noLeftCorner" value="1" />
  3.      <enum name="noRightCorner" value="2" />
  4.      <enum name="noTopCorner" value="3" />
  5.      <enum name="noBottomCorner" value="4" />
  6.      <enum name="noLT_RBCorner" value="5" />
  7.      <enum name="noRT_LBCorner" value="6" />
  8.      <enum name="none" value="7" />
  9. </attr>

　　这样的特性有吸引到你么！！！这个新特性是添加在 1.1 版本上的，要使用这个特性，添加依赖：

  1. implementation 'io.github.meetsl:SCardView:1.1'

　　SCardView 源码放置在 GitHub 上 ，大家想看具体实现可以到这里查看：欢迎 Mark 收藏，后续会添加其他特性

　　https://github.com/meetsl/SCardView-master

---------- 更新 2019/9/12

  1. implementation 'io.github.meetsl:SCardView:1.2'

1. 支持代码中动态设置阴影颜色

  1. 　　/**
  2.      * Updates the shadow color of the CardView
  3.      *
  4.      * @param startColor The new startColor to set for the card shadow
  5.      * @param endColor The new endColor to set for the card shadow
  6.      */
  7.     fun setCardShadowColor(@ColorInt startColor: Int, @ColorInt endColor: Int)
  8.  
  9.     /**
  10.      * update the both of background color and shadow color of the card view
  11.      */
  12.     fun setColors(@ColorInt backgroundColor: Int, @ColorInt shadowStartColor: Int, @ColorInt shadowEndColor: Int)

一个可以配置阴影方向和颜色的类 CardView 控件 SCardView的更多相关文章

  1. 『Asp.Net 组件』第一个 Asp.Net 服务器组件：自己的文本框控件

    代码: using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DemoWebControl ...

  2. MFC中如何在一个类中调用另一个类的控件

    学习记录: 两个类,一个为主类 1个为:CCkDlg,主类 1个为: Https,用来做HTTPS请求获得页面状态. 测试界面如下: CCkDlg 类里定义函数 void CCkDlg::printf ...

  3. C#中一个关于不同窗体间的颜色参数的传递

    1目标是 在弹出菜单中选择颜色,在主菜单中对控件进行操作(弹出菜单选择的颜色就是主菜单控件的颜色) 2颜色属性需要来回转换(也许不用转换,暂时还不会,有会的提醒下,TKS) 3用到一个颜色控件(col ...

  4. 如何用 Swift 语言构建一个自定控件

    (via:破船之家,原文:How To Make a Custom Control in Swift)   用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它 ...

  5. Android开发 控件阴影详情

    如何给控件设置阴影? <com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" andr ...

  6. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  7. 常量，字段，构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图，改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq

    常量,字段,构造方法   常量 1.什么是常量 ​ 常量是值从不变化的符号,在编译之前值就必须确定.编译后,常量值会保存到程序集元数据中.所以,常量必须是编译器识别的基元类型的常量,如:Boolean ...

  8. iOS 在xib或storyboard里为控件添加圆角、外框和外框颜色

    如果要在xib和storyboard里为控件添加圆角和外框宽度,只要这样做就可以 layer.borderWidth     设置外框宽度属性 layer.cornerRadius    设置圆角属性 ...

  9. VC 对话框背景颜色、控件颜色（三种方法）

    系统环境:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为对话框设置背景颜色.控件颜色 既然MFC对话框不好开发,那么现在我们来开始美化我们的对话框.为对话框设置背景颜色 ...

随机推荐

  1. 接口测试工具-fiddler

    1.fiddler拦截修改数据 命令介绍: bpu在请求开始时中断,bpafter在响应到达时中断,bps在特定http状态码时中断,bpv/bpm在特定请求method时中断. 提示:命令输入区域输 ...

  2. JS变量类型与计算

    一.题目 1.JS中使用typeof能得到哪些类型? 2.何时使用===何时使用==? 3.JS中有哪些内置函数? 4.JS变量按照存储方式区分为哪些类型,并描述其特点? 5.如何理解JSON? 知识 ...

  3. TestFlight 测试

    问题1:iOS提交TestFlight测试显示缺少合规证明 解决:有的时候testFlight会显示@“缺少合规证明” 最简单的解决办法就是点击文字前边的黄色标识符,会询问你是否加密,选择相应选项就可 ...

  4. Oracle sql function LISTAGG

    select business_unit, voucher_id, listagg( vat_txn_type_cd, ',') within group (order by business_uni ...

  5. Git命令（Git版本：Linux 2.14.3）

    常用 git status 跟踪状态git commit -m "xxx" yyy.cppgit pull git pushgit mergetool --tool=meld 合并 ...

  6. cookie,localStorage和sessionStorage的区别

    cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.

  7. HBase指定大量列集合的场景下并发拉取数据时卡住的问题排查

    最近遇到一例,HBase 指定大量列集合的场景下,并发拉取数据,应用卡住不响应的情形.记录一下. 问题背景 退款导出中,为了获取商品规格编码,需要从 HBase 表 T 里拉取对应的数据. T 对商品 ...

  8. 软件综合实践Axure介绍

    首先就是下载安装Axure这款软件了,在百度上搜索“”Axure rp下载“”即可,下载完成后,打开exe安装,根据步骤一步步点击下一步即可完成安装. 运行该软件时会出现类似于填写激活码的东西,这时依 ...

  9. hiho一下 第206周

    题目1 : Guess Number with Lower or Higher Hints 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 There is a game ...

  10. C++环境设置

    g++ -V #include <iostream> int main() { std::cout << "Hello World!\n"; return ...