在具有ConstraintLayout的真实设备上，TextView的颜色显示为白色 [英] Color of TextView shows as white on a real device with ConstraintLayout

问题描述

我一直在尝试使用ConstraintLayout，到目前为止，我非常喜欢它 ，但现在遇到了一个特殊的问题.如果我使用RelativeLayout设计相同的布局，则将包含的TextView的颜色显示为默认文本颜色(灰色)，但使用ConstraintLayout时，则显示白色.

I have been trying my hands on ConstraintLayout and so far I have liked it a lot except now I have run into a peculiar problem. The same layout, if I design using a RelativeLayout displays the color of the contained TextViews as the default text color(greyish) but with ConstraintLayout, it shows white.

这在真实设备以及具有Android 5.0的模拟器上都会发生，但在模拟器(7.0)上不会发生.有谁知道，为什么会这样?

This happens on both a real device as well as an emulator with Android 5.0 but not on emulator(7.0). Does anyone know, why might this be happening?

此外，显而易见的解决方案似乎是手动将布局中TextView的颜色设置为应有的样式，但这似乎是一种解决方案，而不是hack.我想知道为什么会首先发生这种情况，并且这种黑客攻击是唯一的解决方案吗? (我宁愿不通过强制在TextView上涂颜色来修复它，因为该行为在Android 7.0上是正确的)

Also, the obvious solution seems to be manually styling the color of the TextView in the layout to what it should be but that seems like a hack than a solution. I would be interested in knowing, why this is happening in the first place and if this hack is the only solution? (I prefer not fixing it by forcing a color on TextView as the behavior is correct on Android 7.0)

编辑:忘了提及布局编辑器将它们都显示为黑色/灰色，这也暗示了实际颜色不应为白色.

Forgot to mention that the Layout Editor shows them both as black/greyish so that is also a cue that the actual color should not be white.

供您参考，以下是两种布局大致相同(其中一个是Button，另一个是TextView而不是Button )哪一个是错误的.

For your reference, here are the 2 layouts that are more or less same(there is a Button in one of them and TextView instead of Button in the other) in which one is faulty.

将其显示为白色(焦点对准问题)的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey">


    <android.support.constraint.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:paddingBottom="10dp"
        android:elevation="2dp"
        android:id="@+id/constraintLayout">


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/guideline"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintHorizontal_bias="0.0"
            android:id="@+id/linearLayout"
            tools:layout_editor_absoluteY="16dp">

            <TextView
                android:text="@string/tutor_name"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tutor_name"/>

            <TextView
                android:text="@string/tutor_skill_set"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/skill_set"/>

            <TextView
                android:text="@string/tutor_types"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/tutor_types" />

            <TextView
                android:text="@string/tutor_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/location"
                android:layout_marginTop="12dp" />

        </LinearLayout>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="16dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="16dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_rating"
            android:layout_below="@+id/display_pic"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            app:srb_starSize="13dp"
            app:srb_numberOfStars="5"
            app:srb_borderColor="@color/colorAccent"
            app:srb_fillColor="@color/colorPrimary"
            app:srb_starBorderWidth="1"
            app:srb_isIndicator="true"
            app:layout_constraintRight_toRightOf="@+id/display_pic"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/display_pic"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintHorizontal_bias="1.0" />

        <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.6796875" />


    </android.support.constraint.ConstraintLayout>


    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="8dp"
        android:layout_below="@+id/constraintLayout" />


</RelativeLayout>

显示为黑色/灰色(默认值为默认值)的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp"
    android:background="@color/lightGrey"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp"
    android:elevation="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:paddingBottom="10dp"
        android:paddingEnd="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingStart="10dp"
        android:paddingTop="10dp">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:layout_toLeftOf="@+id/display_pic"
            android:layout_toStartOf="@+id/display_pic"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:id="@+id/linearLayout2">

            <TextView
                android:text="@string/tutor_name"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tutor_name"/>

            <TextView
                android:text="@string/tutor_skill_set"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/skill_set"/>

            <TextView
                android:text="@string/tutor_types"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/tutor_types" />

            <TextView
                android:text="@string/tutor_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/location"
                android:layout_marginTop="12dp" />

        </LinearLayout>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/holo_red_light" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_rating"
            android:layout_below="@+id/display_pic"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            app:srb_starSize="13dp"
            app:srb_numberOfStars="5"
            app:srb_borderColor="@color/colorAccent"
            app:srb_fillColor="@color/colorPrimary"
            app:srb_starBorderWidth="1"
            app:srb_isIndicator="true"
            android:layout_marginTop="2dp" />

        <Button
            android:id="@+id/request_tutor"
            style="@android:style/Widget.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/linearLayout2"
            android:layout_marginTop="14dp"
            android:background="@color/lighterGrey"
            android:minHeight="25dp"
            android:minWidth="80dp"
            android:text="Request"
            android:textAppearance="@style/TextAppearance.AppCompat" />

    </RelativeLayout>

</FrameLayout>

---

(注意:，尽管我尝试在下面使用Barrier，但它位于ConstraintLayout 1.1.0 beta中，在这种情况下，我将严格避免使用Beta版进行生产)

---

(Note: Although I tried using a Barrier below, it is in ConstraintLayout 1.1.0 beta and I would strictly refrain from using a beta version for production in this case)

遵循@ rami-jemli的建议，这是ConstraintLayout，其障碍仍然存在.

EDIT 2: Following @rami-jemli 's advice, here is the ConstraintLayout with a barrier with the problem still persisting.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey"
    android:id="@+id/constraintLayout">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        android:id="@+id/linearLayout">

        <TextView
            android:text="@string/tutor_name"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_name"/>

        <TextView
            android:text="@string/tutor_skill_set"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/skill_set"/>

        <TextView
            android:text="@string/tutor_types"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/tutor_types" />

        <TextView
            android:text="@string/tutor_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/location"
            android:layout_marginTop="12dp" />

    </LinearLayout>


    <ImageView
        android:id="@+id/display_pic"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="false"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:color/holo_red_light" />

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tutor_rating"
        android:layout_below="@+id/display_pic"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:srb_starSize="13dp"
        app:srb_numberOfStars="5"
        app:srb_borderColor="@color/colorAccent"
        app:srb_fillColor="@color/colorPrimary"
        app:srb_starBorderWidth="1"
        app:srb_isIndicator="true"
        app:layout_constraintRight_toRightOf="@+id/display_pic"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/display_pic"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintHorizontal_bias="1.0" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6796875"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="250dp" />

    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_below="@+id/constraintLayout"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="@+id/linearLayout"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="tutor_rating,linearLayout"
        tools:layout_editor_absoluteY="126dp" />


</android.support.constraint.ConstraintLayout>

输出:(虚拟数据)

推荐答案

我不敢相信！我找到了答案.

I cannot believe this! I found the answer.

从问题中不可能查明可能出了什么问题，因为问题不是 layout ，RecyclerView，AppCompat或ConstraintLayout.问题出在主题上下文上.我几乎在所有情况下都绕过了应用程序上下文，但是事实证明涉及布局的地方，建议传入Activity实例本身(这是一个主题上下文，因为它扩展了ContextThemeWrapper---more稍后再讲).

From the question, it is not possible to pinpoint what could be wrong because problem is not with the layout, RecyclerView, AppCompat or ConstraintLayout. The problem is with something called the Themed Context. I have been passing around application context in almost all cases but it turns out where the layout is concerned, it is recommended to pass in Activity instance itself(which is a Themed context because it extends ContextThemeWrapper --more on this a bit later).

因此，例如，当我们为RecyclerView实例化LayoutManager时，我们将传入Activity实例.当为RecyclerView夸大布局项时，我们将再次使用Activity.

So, for example, when we are instantiating a LayoutManager for a RecyclerView, we would pass in Activity instance. When we are inflating a layout item for a RecyclerView, we would again use the Activity.

在这种情况下， ContextThemeWrapper 将概念优先级作为在此处和Activity对其进行子类化.

Talking in this context, ContextThemeWrapper takes conceptual precedence as stated here and Activity subclasses it.

还提到的是，

ContextThemeWrapper将应用您的应用程序主题

我上面共享的代码片段并未立即显示 当然，您可以编写自己的测试来验证这一点.最好的 我可以想到的方式是使用 使用android.R.layout.simple_list_item_1进行显示的ListView 项目.默认情况下，使您的应用程序主题为浅，然后初始化您的 ArrayAdapter使用getApplicationContext().您会注意到 文本不可见或几乎不可见，因为它将是白色 默认情况下，而您的主题应要求使用默认文本 黑色的.更改代码，以便您的代码初始化数组 带有"this"(即Activity)或getContext()的适配器，然后 您会看到文本变成黑色.

ContextThemeWrapper will apply your application theme

The snippet of code I've shared above does not make this immediately clear, however, you can write your own tests to verify this. The best way I can think of doing this is to create a simple app with a ListView that uses android.R.layout.simple_list_item_1 to display items. Make your apps theme Light by default and then initialize your ArrayAdapter using getApplicationContext(). You’ll notice that the text is either not visible or barely visible because it will be white by default whereas your theme should call for default text to be black. Change the code, so that your code initializes the array adapter with "this" (i.e the Activity) or simply getContext() and you’ll see the text turns black.

然后

请勿将 getApplicationContext()与LayoutInflater一起使用，除非您确实确实想忽略自己的主题.

Do not use getApplicationContext() with LayoutInflater, unless you really do want to ignore your theme.

---

前往@sockeqwe获取他的 answer在SwitchCompat 上给了我这个主意.

注意:以前，我曾提到这可能是ConstraintLayout中的错误.我向那些正在研究ConstraintLayout(我发现真棒！)

Note: Previously, I had mentioned that this might be a bug in ConstraintLayout. I take that back and apologies to the folks working on ConstraintLayout(which I have found totally awesome!)

最后，感谢所有宝贵的时间，他们花了宝贵的时间阅读我的问题，并动脑筋寻求答案.

Lastly, thanks to all the folks who gave their precious time reading my question and churning their brainpower for answer.

这篇关于在具有ConstraintLayout的真实设备上，TextView的颜色显示为白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！