如何在APP中实现深色模式

Posted 2022-11-10 小陈乱敲代码

最近许多应用程序在其应用程序中采用了夜间模式，所以在这里给大家分享如何应用深色主题。

为深色主题制作布局

首先，我们需要做我们的布局，以便我们可以应用我们的黑暗主题，我们用cardview来制作布局。

布局请参见下面的代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="10sp"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardCornerRadius="10sp"
        android:id="@+id/post"
        >
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10sp"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="70sp"
                android:layout_height="70sp"
                android:id="@+id/profilePicContainer"
                app:cardCornerRadius="100sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"

                    android:src="@drawable/user1"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/username"
                android:text="John Doe"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                app:layout_constraintLeft_toRightOf="@id/profilePicContainer"
                android:layout_marginStart="10sp"
                app:layout_constraintTop_toTopOf="@id/profilePicContainer"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/time"
                android:text="Just now"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption"
                app:layout_constraintLeft_toRightOf="@id/profilePicContainer"
                android:layout_marginStart="10sp"
                app:layout_constraintTop_toBottomOf="@id/username"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="35sp"
                android:id="@+id/caption"
                android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                app:layout_constraintTop_toBottomOf="@id/profilePicContainer"
                android:textAppearance="@style/TextAppearance.AppCompat.Body2"
                android:layout_marginTop="10sp"
                />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="250sp"
                android:id="@+id/photoPost"
                android:scaleType="centerCrop"
                app:layout_constraintTop_toBottomOf="@id/caption"
                android:src="@drawable/post"
                android:layout_marginTop="10sp"
                />

            <ImageView
                android:layout_width="30sp"
                android:layout_height="30sp"
                android:id="@+id/likeBtn"
                android:src="@drawable/ic_like"
                app:layout_constraintLeft_toLeftOf="@id/photoPost"
                app:layout_constraintTop_toBottomOf="@id/photoPost"
                android:layout_marginTop="15sp"
                />

            <ImageView
                android:layout_width="30sp"
                android:layout_height="30sp"
                android:id="@+id/shareBtn"
                android:src="@drawable/ic_share"
                app:layout_constraintLeft_toRightOf="@id/likeBtn"
                app:layout_constraintTop_toBottomOf="@id/photoPost"
                app:layout_constraintTop_toTopOf="@id/likeBtn"
                android:layout_marginLeft="15sp"
                />


        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/changeThemeBtn"
        android:text="Change Theme"
        app:layout_constraintTop_toBottomOf="@id/post"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20sp"
        android:paddingHorizontal="10sp"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

现在我们需要在布局中设置主题颜色，例如，我们需要设置活动和cardview的背景颜色，还需要设置textview颜色和图标颜色。但是设置所有的颜色我们需要一些方法来动态地设置颜色。

当我们在应用程序中应用深色主题时，我们希望将活动的背景色更改为深黑色。

要生成动态值，我们需要创建属性。值文件夹中的xml文件。

为布局创建自定义属性值

在values文件夹中创建一个新的xml文件。右键单击values文件夹并单击new，然后单击values resource file并在文件名字段中键入attrs。

在属性中。我们将像下面这样声明我们的自定义属性值。

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <attr name="appWindowBackground" format="color" />
        <attr name="cardBackground" format="color" />
        <attr name="textColor" format="color"/>
        <attr name="textColorSecondary" format="color"/>
        <attr name="iconColor" format="color"/>
        <attr name="buttonBackground" format="color"/>
        <attr name="buttonTextColor" format="color"/>
</resources>

在上面的代码中，我们定义了7个值及其类型，即颜色。我们将在布局文件中使用每个值。

但是在使用这些值之前，我们需要在当前应用的主题中指定或设置这些值，而且我们还将创建暗主题并更新这些属性值。

使用深色主题的风格

首先，我们将为默认主题或浅色主题设置属性值，然后在深色主题中更新这些属性值。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="appWindowBackground">#CDDDDD</item>
        <item name="cardBackground">#FFFFFF</item>
        <item name="textColor">#000000</item>
        <item name="textColorSecondary">#717171</item>
        <item name="iconColor">#6A6A6A</item>
        <item name="buttonBackground">#CDCDCD</item>
        <item name="buttonTextColor">#000000</item>
    </style>

    <style name="DarkAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="appWindowBackground">#393e46</item>
        <item name="cardBackground">#222831</item>
        <item name="textColor">#ffffff</item>
        <item name="textColorSecondary">#DAA8A8A8</item>
        <item name="iconColor">#00fff5</item>
        <item name="buttonBackground">@color/colorPrimary</item>
        <item name="buttonTextColor">#000000</item>
    </style>

</resources>

以上就是本文的全部内容，更多技术交流和Android学习资料可以添加下方微信获得！