AndroidQ 强制黑暗(Force Dark)模式适配实践

作者: Allenlll | 来源:发表于2019-11-07 21:21 被阅读0次

引言

AndroidQ版本增加了ForceDark功能，可以快速实现应用的黑暗模式。本文主要讲述了AndroidQForceDark适配过程中遇到的一些问题，通过一步步分析AndroidQ黑暗模式实现原理进而解决适配过程中的这些问题。希望通过这篇文章读者能够了解AndroidQForceDark功能的原理，更好的完成适配工作。

一、强制黑暗(Force Dark)模式简介

黑暗模式不仅可能减少耗电量，在光线暗的环境中对眼睛也有保护的作用。AndroidQ提供了Force Dark功能，在浅色主题(例如:Theme.Material.Light)上面设置android:forceDarkAllowed="true"就可以快速的实现黑色主题背景，而不需要为黑色主题背景提供单独的主题资源。具体使用方法可以参考官方文档：https://developer.android.google.cn/guide/topics/ui/look-and-feel/darktheme

二、适配过程中遇到的问题

1、图片圆角被加亮

如果图片圆角是通过自定义ImageView，在onDraw()方法中通过canvas.drawPath来实现的。则在使用ForceDark功能时绘制的圆角颜色会被加亮。如果圆角颜色是白色，此时圆角在黑色背景下面就会显示为白色，与我们所要的效果刚好相反。
圆角绘制的代码如下所示：

   private void initPaint() {
        paint = new Paint();
        paint.setAntiAlias(true);           //设置画笔为无锯齿
        paint.setStyle(Paint.Style.FILL);   //设置实心
        paint.setColor(Color.WHITE);
    }
    public void initRightDownPath() {
        rightDownPath = new Path();
        rightDownPath.moveTo(width, height);
        rightDownPath.lineTo(width, height - radius);
        RectF rectF = new RectF(width - 2 * radius, height - 2 * radius, width, height);
        rightDownPath.arcTo(rectF, 0, 90, true);
        rightDownPath.lineTo(width, height);
        rightDownPath.close();
    }
   /**
      绘制白色圆角在forcedark模式下会被加亮
   **/
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(leftDownPath, paint);
        canvas.drawPath(leftUpPath, paint);
        canvas.drawPath(rightUpPath, paint);
        canvas.drawPath(rightDownPath, paint);
    }

2、文字绘制被加亮

如果自定义ImageView中，除了绘制圆角外还绘制了文字，则使用 ForceDark功能时圆角和文字颜色都会被加亮。

   /**
      绘制白色圆角和白色文字在forcedark模式下会被加亮
   **/
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆角
        canvas.drawPath(leftDownPath, paint);
        canvas.drawPath(leftUpPath, paint);
        canvas.drawPath(rightUpPath, paint);
        canvas.drawPath(rightDownPath, paint);
        //绘制文字
        mTextPaint.setTextSize(typeIconTextSize);
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float baseline = getHeight() - typeIconMargin - (typeIconHeight + fontMetrics.bottom + fontMetrics.top) / 2;
        float textWidth = mTextPaint.measureText("长图");
        canvas.drawText("长图", getWidth() - typeIconMargin - typeIconWidth / 2 - textWidth / 2, baseline, mTextPaint);
    }

3、RecycleView ItemDecoration被加亮

RecycleView的ItemDecoration可以用来在RecycleView上面绘制一些装饰元素，例如：分割线、圆点标题、字母排序标题等。ItemDecoration有两个方法：onDraw和onDrawOver，这两个方法分别表示在RecycleView绘制之前和绘制完成后绘制。以字母排序为例，排序后的字母标题就是在onDrawOver方法中绘制出来的。当开启ForceDark功能时字母以及字母的背景会被处理成加亮，而RecycleView的ItemView会被处理成加暗，加亮的字母背景在加暗的ItemView上面显得特别突兀。
字母排序的绘制方法如下所示：

    /**
     * {@inheritDoc}
     绘制的字母和字母背景forcedark模式下会被加亮
     */
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        final int count = parent.getChildCount();
        for (int layoutPos = 0; layoutPos < count; layoutPos++) {
            final View child = parent.getChildAt(layoutPos);
            View header = getHeader(parent, adapterPos).itemView;
            final int left = child.getLeft();
            int top = getHeaderTop(parent, child, header, adapterPos, layoutPos);
            c.save();
            c.translate(left, top);
            header.draw(c);
            c.restore();
        }
    }

其中header的布局文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_header"
        style="@style/Text_B4_T7"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@color/Blk_8"
        android:gravity="center_vertical"
        android:paddingStart="14dp"
        android:paddingEnd="14dp"
        android:visibility="visible"
        tools:text="A" />
</FrameLayout>

需要注意的是显示字母的TextView设置了一个背景android:background="@color/Blk_8"。
为了解决以上适配问题，需要我们了解一下View硬件绘制的相关概念以及ForceDark模式的源码

三、RenderNode和DisplayList

AndroidQ的黑暗模式是通过硬件加速来绘制的，下面分别介绍一下RenderNode和DisplayList这两个类。

1、RenderNode介绍

绘制节点RenderNode是用来构建View的硬件加速绘制结构树的，在framework层有对应的RenderNode.cpp文件，java层RenderNode的使用方法如下所示：

   public void drawRenderNode(Canvas canvas){
        RenderNode mRenderNode = new RenderNode("name");
        RecordingCanvas rendCanvas = mRenderNode.beginRecording();
        try {
            rendCanvas.drawRect(rect,mPaint);
        }finally {
            mRenderNode.endRecording();
        }
        mRenderNode.setPosition(0,0,100,100);
        if(canvas.isHardwareAccelerated()&&mRenderNode.hasDisplayList()){
            canvas.drawRenderNode(mRenderNode);
        }
    }

其中beginRecording()方法创建了一个RecordingCanvas，用来记录当前RenderNode的绘制操作，例如：drawCircle、drawBitmap、drawRect、drawRenderNode等。endRecording()方法会返回Native层中 RecordingCanvas中DisplayList的地址，并将DisplayList保存到Native层中的RenderNode的mDisplayList中。例如：上图所示的mRenderNode节点的DisplayList中记录了drawRect操作。

2、DisplayList介绍

在AndroidQ系统源码中，DisplayList功能主要是在SkiaDisplayList.cpp类中实现，SkiaDisplayList.cpp包含了RenderNode集合和当前View需要绘制的内容。如下图所示：DisplayList中mNodeChildren是RenderNode集合，mDrawOpList是绘制操作集合。

image.png

SkiaDisplayList位置如下图所示：

//位置frameworks/base/libs/hwui/pipeline/skia/SkiaDisplayList.h
  std::deque<RenderNodeDrawable> mChildNodes;//子RenderNode
  DisplayListData mDisplayList;//绘制操作列表

3、一个例子

每个View至少有一个RenderNode，包含各种绘制操作。其中可以包含多个子RenderNode，如果View设置了背景，则会包含绘制背景时创建的背景mBackgroundRenderNode以及子View的RenderNode(如果包含子View的话)。背景mBackgroundRenderNode创建时默认UsageHint会被设置为USAGE_BACKGROUND，UsageHint是什么在下面源码的分析中会说明，这里只需要知道，背景节点会被设置为默认加黑。这样如果一个ViewGroup设置了背景，并且有一个子View，则这个ViewGroup除了普通的绘制外还会有两个drawRenderNode操作，相应的DisplayList中记录了两个RenderNode。
如下图所示布局，是一个FrameLayout嵌套一个TextView。

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_header"
        style="@style/Text_B4_T7"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@color/Blk_8"
        android:gravity="center_vertical"
        android:paddingStart="14dp"
        android:paddingEnd="14dp"
        android:visibility="visible"
        tools:text="A" />
</FrameLayout>

image.png

上面这张图展示了上面布局中RendrNode和DisplayList关系。

四、强制黑暗(Force Dark)源码分析

1、黑暗模式的判断

在Native层中的RenderNode类中实现了黑暗模式的处理，最终是通过handleFroceDark方法来实现的，handlerForceDark的调用关系是：RenderNode:prepareTreeImpl-->pushStagingDisplayListChanges-->syncDisplayList-->handleForceDark。

//位置：frameworks/base/libs/hwui/RenderNode.cpp
void RenderNode::prepareTreeImpl(TreeObserver& observer, TreeInfo& info, bool functorsNeedLayer) {
    if (info.mode == TreeInfo::MODE_FULL) {
        pushStagingDisplayListChanges(observer, info);//构造mDisplayList，应用黑暗模式
    }
    if (mDisplayList) {
        info.out.hasFunctors |= mDisplayList->hasFunctor();
        bool isDirty = mDisplayList->prepareListAndChildren(
                observer, info, childFunctorsNeedLayer,
                [](RenderNode* child, TreeObserver& observer, TreeInfo& info,
                   bool functorsNeedLayer) {//递归调用处理子节点
                    child->prepareTreeImpl(observer, info, functorsNeedLayer);
                });
        if (isDirty) {
            damageSelf(info);
        }
    }
}

handleForceDark方法实现了颜色是加暗还是加亮的判断，判断的方法如下所示：

/**

1、位置：frameworks/base/libs/hwui/RenderNode.cpp
2、如果当前RenderNode中有文字需要展示，则是定义为前景，需要颜色变亮
3、如果当前RenderNode没有文字需要展示，且有多于一个子节点，则定义为背景，需要颜色变暗
4、如果当前RenderNode没有文字需要展示，且有一个子节点，并且子节点不是背景，则定义为背景，需要颜色变暗
5、如果有大于一个子节点，遍历子节点，如果当前节点边界包含子节点，则定义为背景，需要颜色变暗
6、最后根据定义的背景，调用applyColorTransform进行颜色变换

**/
void RenderNode::handleForceDark(android::uirenderer::TreeInfo *info) {
    if (CC_LIKELY(!info || info->disableForceDark)) {
        return;
    }
    auto usage = usageHint();
    const auto& children = mDisplayList->mChildNodes;//需要展示的所有节点
    if (mDisplayList->hasText()) {//有文字则是前景
        usage = UsageHint::Foreground;//前景，light
    }
    if (usage == UsageHint::Unknown) {
        if (children.size() > 1) {//有子节点，则是背景
            usage = UsageHint::Background;
        } else if (children.size() == 1 &&//有一个子节点，并且子节点的usageHint不是背景，则是背景
                children.front().getRenderNode()->usageHint() !=
                        UsageHint::Background) {
            usage = UsageHint::Background;
        }
    }
    if (children.size() > 1) {//有子节点
        // Crude overlap check
        SkRect drawn = SkRect::MakeEmpty();
        for (auto iter = children.rbegin(); iter != children.rend(); ++iter) {//逆序迭代
            const auto& child = iter->getRenderNode();//遍历到的子节点
            // We use stagingProperties here because we haven't yet sync'd the children
            SkRect bounds = SkRect::MakeXYWH(child->stagingProperties().getX(), child->stagingProperties().getY(),
                    child->stagingProperties().getWidth(), child->stagingProperties().getHeight());//子节点的边界
            if (bounds.contains(drawn)) {//判断bounds是否包含drawn，如果drawn为空或者bounds为空，返回false。
                // This contains everything drawn after it, so make it a background
                child->setUsageHint(UsageHint::Background);
            }
            drawn.join(bounds);//取bounds和drawn的并集，如果bounds为空对drawn没影响；如果drawn为空设置drawn为bounds.
        }
    }
    mDisplayList->mDisplayList.applyColorTransform(//应用颜色变换，如果是背景则把颜色变深，如果是前景则把颜色浅
            usage == UsageHint::Background ? ColorTransform::Dark : ColorTransform::Light);
}

2、黑暗模式的执行

在handleForceDark方法中的applyColorTransform会执行以下调用顺序：DisplayList:applyColorTransform-->RecordingCanvas:colorTransformForOp-->CanvasTransform:transformPaint
最终会调用到CanvasTransform中的transfromPaint方法。CanvasTransform的transformPaint方法有两个，一个是执行普通绘制颜色变换，一个是执行图片绘制的的颜色变换。

普通绘制颜色变换
颜色的变化是通过把颜色转换成Lab颜色模式，然后对颜色的亮度做反转，这样原本暗色颜色会被加亮，原来亮色颜色会被加暗，其它细节可以参考源码。

//位置：frameworks/base/libs/hwui/CanvasTransform.cpp
/**
1、Lab颜色模式，包括亮度L和a,b两个颜色通道
2、对颜色的亮度进行反转
**/
static SkColor makeLight(SkColor color) {
    Lab lab = sRGBToLab(color);
    float invertedL = std::min(110 - lab.L, 100.0f);//反转亮度
    if (invertedL > lab.L) {//超过原来的亮度，则以新的为准，比原来还暗，则不进行变换
        lab.L = invertedL;
        return LabToSRGB(lab, SkColorGetA(color));
    } else {
        return color;
    }
}
/**
1、Lab颜色模式，包括亮度L和a,b两个颜色通道
2、对颜色的亮度进行反转
**/
static SkColor makeDark(SkColor color) {
    Lab lab = sRGBToLab(color);
    float invertedL = std::min(110 - lab.L, 100.0f);
    if (invertedL < lab.L) {//没有原来的亮，则以新的为准，比原来还亮，则还用原来的。
        lab.L = invertedL;
        return LabToSRGB(lab, SkColorGetA(color));
    } else {
        return color;
    }
}

图片绘制颜色变换
图片颜色的变换同样是对图片的明暗度进行反转处理，和普通绘制不同的是，这里的明暗转换是通过Skia图片绘制引擎实现的。具体实现原理可能参考Skia相关资料。

/**
1、根据Palette和明暗的判断决定是否要对图片进行处理
2、为图片设置一个colorfilter
**/

bool transformPaint(ColorTransform transform, SkPaint* paint, BitmapPalette palette) {
    palette = filterPalette(paint, palette);//计算图片的palette是明还是暗
    bool shouldInvert = false;
    if (palette == BitmapPalette::Light && transform == ColorTransform::Dark) {//图片是明亮的，效果是要变暗
        shouldInvert = true;
    }
    if (palette == BitmapPalette::Dark && transform == ColorTransform::Light) {//图片是暗的，效果是变亮
        shouldInvert = true;
    }
    if (shouldInvert) {
        SkHighContrastConfig config;
        config.fInvertStyle = SkHighContrastConfig::InvertStyle::kInvertLightness;
        paint->setColorFilter(SkHighContrastFilter::Make(config)->makeComposed(paint->refColorFilter()));//设置一个colorfilter
    }
    return shouldInvert;
}

通过以上介绍，我们已经了解了黑暗模式是怎么实现的了，回到第二节中适配中出现的问题，我们可以分析一下问题的解决方法。

五、问题的解决

1、图片圆角被加亮

如果ImageView没有设置背景，则当前ImageView的DisplayList中没有子RenderNode，根据第三节Native中RenderNode源码可知ImageView的RenderNode的UsageHint是默认的Unknow，因此在onDraw中绘制的圆角会被加亮。解决方法是在onDraw中增加一个空的RenderNode，这样DisplayList中就有一个默认UsageHint是Unknow的RenderNode，因此ImageView整体会被加暗。

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        drawRoundCornor(canvas);
        
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
            if(mRenderNode == null){
                mRenderNode = new RenderNode("");
            }
            mRenderNode.beginRecording(1, 1);
            mRenderNode.endRecording();
            if (canvas.isHardwareAccelerated()&&mRenderNode.hasDisplayList()) {
                canvas.drawRenderNode(mRenderNode);
            }
        }
    }

2、文字绘制被加亮

如果以上圆角ImageView在onDraw中通过drawText画了文字，则根据以上分析，ImageView中所有的操作会被作加亮处理，解决方式是把drawText方法封装到一个RenderNode中，这样ImageView中只有一个RenderNode，ImageView中的圆角会被作加暗处理，而文字依然是加亮处理。

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        drawRoundCornor(canvas);

        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
            if (mRenderNode == null) {
                mRenderNode = new RenderNode("name");
            }
            Canvas rendCanvas = mRenderNode.beginRecording();
            rendCanvas.translate(-left, -top);//设置位移
            try {
                rendCanvas.drawText("长图", 100,200, mTextPaint);//绘制文字
            } finally {
                mRenderNode.endRecording();
            }
            mRenderNode.setPosition(left,top,right,bottom);//设置renderCanvas的位置
            if (canvas.isHardwareAccelerated() && mRenderNode.hasDisplayList()) {
                canvas.drawRenderNode(mRenderNode);
            }
        } else {
            canvas.drawText("长图", 100,200, mTextPaint);
        }
    }

3、RecycleView ItemDecoration被加亮

RecycleView的ItemDecoration是绘制在RecycleView上面的，方法 onDrawOver是在绘制完 RecyelView之后开始执行，因此在这个方法中的绘制操作会被记录在RecycleView的mDisplayList中。在drawOver()方法中直接调用header.draw(canvas)，此时header的mAttachInfo为空，所以不会走硬件加速绘制。header中所有View的绘制操作包含TextView都会保存在RecycleView的mDisplayList中。由于header中包含TextView所以RecycleView整体会被加亮。解决方法是使用同一个RenderNode来画背景，多个RenderNode的重叠会使最底层的那个RenderNode变暗，由于是同一个RenderNode，这样绘制的时候所有在ItemDecoration中使用RenderNode绘制的背景都会被加暗，这样即保证了文字加亮又有一个加暗的背景。

  @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        final int count = parent.getChildCount();
        for (int layoutPos = 0; layoutPos < count; layoutPos++) {
            final View child = parent.getChildAt(layoutPos);
            View header = getHeader(parent, adapterPos).itemView;
            final int left = child.getLeft();
            int top = getHeaderTop(parent, child, header, adapterPos, layoutPos);
            c.save();
            c.translate(left, top);
            header.setTranslationX(left);
            header.setTranslationY(top);
            Rect rect = new Rect();
            header.getDrawingRect(rect);
            if (android.os.Build.VERSION.SDK_INT > android.os.Build.VERSION_CODES.P) {
                TextView textView = header.findViewById(R.id.tv_header);
                textView.setBackground(null);
                String des = textView.getText().toString();
                if(isCharacter(des)){
                    Canvas rendCanvas = mRenderNode.beginRecording();
                    try {
                        rendCanvas.drawRect(rect,mPaint);
                    }finally {
                        mRenderNode.endRecording();
                    }
                    mRenderNode.setPosition(rect);
                    if(c.isHardwareAccelerated()&&mRenderNode.hasDisplayList()){
                        c.drawRenderNode(mRenderNode);
                    }
                }
            }
            header.draw(c);
            c.restore();
        }
    }

六、总结

本文从AndroidQ强制黑暗(ForceDark)模式的在适配中遇到的问题开始，分析了AndroidQ系统黑暗模式的实现原理，并通过解决在适配中遇到的问题，给出了适配黑暗模式的一种方法，希望本文对黑暗模式的适配有一定的帮助。

参考：
1、https://developer.android.google.cn/preview/features/darktheme

2、https://www.androidos.net.cn/android/10.0.0_r6/xref

3、https://blog.csdn.net/shensky711/article/details/102677056

4、https://blog.csdn.net/luoshengyang/article/details/45943255

5、https://blog.csdn.net/luoshengyang/article/details/46281499

AndroidQ 强制黑暗(Force Dark)模式适配实践

引言

一、强制黑暗(Force Dark)模式简介

二、适配过程中遇到的问题

1、图片圆角被加亮

2、文字绘制被加亮

3、RecycleView ItemDecoration被加亮

三、RenderNode和DisplayList

1、RenderNode介绍

2、DisplayList介绍

3、一个例子

四、强制黑暗(Force Dark)源码分析

1、黑暗模式的判断

2、黑暗模式的执行

五、问题的解决

1、图片圆角被加亮

2、文字绘制被加亮

3、RecycleView ItemDecoration被加亮

六、总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读