CardView总结

CardView 总结

背景
实现
遇到的坑
基本用法

背景

公司想把之前的Web 教师端，转移到 原生实现，然后最近就在做新的UI,CardView本身没有特殊的地方，但是UI的界面虽然说是比较符合Android Material Design 风格，但是他妹的是仿照着IOS的样式做的，弄得我们Android有控件也不能好好地用，举个栗子就拿CardView来说，CardView的阴影颜色是固定的，而设计的UI则是非常浅的阴影，头说按UI那就硬着头皮刚吧

实现 CardView阴影自定义

• 使用原生的CardView实现

  刚刚也说过CardView 不支持阴影的自定义，那是说在API21(5.0)之前，为什么这样说呢？看波源码

  CardView.java

  static {
      if (Build.VERSION.SDK_INT >= 21) {
          IMPL = new CardViewApi21();
      } else if (Build.VERSION.SDK_INT >= 17) {
          IMPL = new CardViewJellybeanMr1();
      } else {
          IMPL = new CardViewGingerbread();
      }
      IMPL.initStatic();
  }
  
  

  可以看到CardView 初始化的时候会根据api不同而去初始化，而这三个实现方法是CardView不同的实现，首先看一波CardViewApi21(),现在我们只关心阴影的实现所以只看CardViewApi21()的initialize()方法

  @Override
  public void initialize(CardViewDelegate cardView, Context context,
              ColorStateList backgroundColor, float radius, float elevation, float maxElevation) {
      final RoundRectDrawable background = new RoundRectDrawable(backgroundColor, radius);
      cardView.setCardBackground(background);
  
      View view = cardView.getCardView();
      view.setClipToOutline(true);
      view.setElevation(elevation);//在这里设置了阴影
      setMaxElevation(cardView, maxElevation);
  }
  
  

  而setElevation（elevation）这个属性是View的，而且是在Api>21才能使用(也就是5.0)，这里可以知道在APi21之后所有View都能实现阴影的效果,那这个阴影可以修改么？
  答案是否定的，或者说我没有找到！为什么这么说，请看下面的操作

  这是View的setElevation 方法

  public void setElevation(float elevation) {
      if (elevation != getElevation()) {
          invalidateViewProperty(true, false);
          mRenderNode.setElevation(elevation);
          invalidateViewProperty(false, true);
  
          invalidateParentIfNeededAndWasQuickRejected();
      }
  }
  

  主要看 mRenderNode.setElevation(elevation);

  public boolean setElevation(float lift) {
      return nSetElevation(mNativeRenderNode, lift);
  }
  //ReaderNode.java
  private static native boolean nSetElevation(long renderNode, float lift);
  

  这个畜生竟然调的原生的接口实现

  所以api21无望，那么再看看低于21的，继续往下看

  CardViewJellybeanMr1，CardViewGingerbread，这两个类分别在17（4.2）~21（5.0）和< 17的实现，由于两者的阴影实现都一样，我们看一个就好了

  CardViewGingerbread

    @Override
    public void initStatic() {
        RoundRectDrawableWithShadow.sRoundRectHelper
                = new RoundRectDrawableWithShadow.RoundRectHelper() {
            @Override
            public void drawRoundRect(Canvas canvas, RectF bounds, float cornerRadius,
                    Paint paint) {
                canvas.drawRoundRect(bounds, cornerRadius, cornerRadius, paint);
            }
        };
    }

点到RoundRectDrawableWithShadow中看其实现

        //关键的地方↓
        mShadowStartColor = resources.getColor(R.color.cardview_shadow_start_color);
        mShadowEndColor = resources.getColor(R.color.cardview_shadow_end_color);
        //关键的地方↑
        mInsetShadow = resources.getDimensionPixelSize(R.dimen.cardview_compat_inset_shadow);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        setBackground(backgroundColor);
        mCornerShadowPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mCornerShadowPaint.setStyle(Paint.Style.FILL);
        mCornerRadius = (int) (radius + .5f);
        mCardBounds = new RectF();
        mEdgeShadowPaint = new Paint(mCornerShadowPaint);
        mEdgeShadowPaint.setAntiAlias(false);
        setShadowSize(shadowSize, maxShadowSize);

看到没！关键的地方 

    mShadowStartColor = resources.getColor(R.color.cardview_shadow_start_color);
    mShadowEndColor = resources.getColor(R.color.cardview_shadow_end_color);

---

解决：

如果我们需要修改颜色的话，只需要在咱们的value - color.xml 文件中重写这两个颜色就好了但是21(5.0)以上可怎么整，和同事探讨了一波，把CardView的源代码给粘出来了然后修改CardView初始化的方法,如下，然后就咳咳，就这样把效果做出来了

static {
     if (Build.VERSION.SDK_INT >= 17) {
            IMPL = new CardViewJellybeanMr1();
        } else {
            IMPL = new CardViewGingerbread();
        }
        IMPL.initStatic();
    }

缺点

这个缺点挺明显的，那就是在21以上效果就没有原本的效果自然了，最大的区别就是21以上阴影是在View里面绘制的，而21以下是靠在view外面绘制出的，而且21一下的圆角是依靠遮罩来处理的

通过shape layer-list 实现

这个由于我没实现，所以只留下链接
Android中用layer-list编写阴影效果

.9图 实现

这个找UI切个.9图就好了没什么好说的，.9图top left 黑点是表示拉伸的部位，right bottom 黑线是表示内容要展示的区域

遇见的坑

• 坑一：
  最明显的坑就是CardView在不同的Api上阴影的绘制的方式不同，为了兼容21一下没有阴影的实现，就在view外面绘制了阴影的宽度，
  而api21则是在view里面绘制的，所以运行出来看着低于21的空间间隙要大点

---

解决：就是在原本value的默认基础上在添加value-21的文件夹，在里面新建 dimens.xml 定义间距，value-21 是大于api21会被调用,value 下的dimens.xml 是小于21会用的，一般我都会减去阴影的间距大小

• 坑二：
  这个是我偷了个懒发现的，CardView左右两侧离父控件有左右12dp间距，我为了偷懒直接在父布局中设置了paddingLeft=12dp,结果发现CardView 左右两侧有黑色阴影，接近于直角而不是圆角，看起来奇丑无比

---

解决：还是不要偷懒了

基本用法

最后奉上 android api文档

么么哒！(づ￣ 3￣)づ