最近许多应用程序在其应用程序中采用了夜间模式,所以在这里给大家分享如何应用深色主题。
为深色主题制作布局
首先,我们需要做我们的布局,以便我们可以应用我们的黑暗主题,我们用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学习资料可以添加下方微信获得!