للوضع الليلي في التطبيق DayNight

في هذا البرنامج التعليمي ، سنناقش ونستخدم موضوع Android DayNight في تطبيقنا. إذا كان لديك تطبيق يحتوي على مواد للقراءة ، فإن استخدام الوضع الليلي مفيد وبسهولة للعينين.




Android released a new theme: Theme.AppCompat.DayNight with the support library 23.2.0.




أصدر Android مظهرًا جديدًا: Theme.AppCompat.DayNightمع مكتبة الدعم 23.2.0.




بفضل هذا الموضوع ، يمكننا الآن التبديل بين صيغ الضوء والظلام في طلبنا. يمكننا فعل ذلك يدويًا أو السماح لنظام Android باكتشاف وقت اليوم بشكلٍ ضمني من هاتفك.




هذا الموضوع يعزز قابلية قراءة التطبيق وسهولة استخدامه خلال الليل عن طريق استبدال الخلفية البيضاء المبهرجة بواجهة داكنة. لقد قامت العديد من تطبيقات القارئ بنشر هذا الموضوع بالفعل في تطبيقاتهم.




دعنا نبدأ بتطبيقنا من خلال إنشاء مشروع جديد لـ Android Studio مع نشاط فارغ.




إضافة المظهر إلى الأنماط. xml

دعونا استبدال الموضوع الحالي في طلبنا مع DayNight واحد.







______________________________________________________________________________


<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>



______________________________________________________________________________







لضبط موضوع DayNight في تطبيقنا ، نستخدم الطريقة: AppCompatDelegate.setDefaultNightMode()




فيما يلي الحجج المسموح بها في الأسلوب أعلاه.




MODE_NIGHT_YES - تمكن من الوضع الليلي يدويا.

MODE_NIGHT_NO - تعطيل الوضع الليلي يدويا.

MODE_NIGHT_FOLLOW_SYSTEM- يستخدم إعدادات النظام لتحديد الوقت من اليوم وتبديل NightMode وفقا لذلك. هذه هي الوسيطة الافتراضية.

MODE_NIGHT_AUTO- يحاول هذا اكتشاف الوقت تلقائيًا من واجهات برمجة التطبيقات لموقع الجهاز. إذا لم يتم منح إذن وقت التشغيل لخدمات الموقع ، فإنه يستخدم وقت النظام.

قم بإضافة التعليمة البرمجية التالية في onCreate()الأسلوب.




__________________________________________




@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); //For night mode theme

//AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); //For day mode theme

setContentView(R.layout.activity_main);

}




_________________________________________________________________________________




يجب دائمًا تعيين النسق قبل setContentViewاستدعاء الطريقة.




ما هو AppCompatDelegate؟

و AppCompatDelegateهي تمثل فئة مندوب التي يمكنك استخدامها لتقديم الدعم AppCompat لأي آخر.

دعونا نرى كيف تبدو شاشة نشاطنا مع وضع النهار والليلة تمكين الوضع واحدا تلو الآخر.

































يغير TextView لونه إلى اللون الأبيض في الوضع الليلي. هذا لأن TextView يحتوي ضمنيًا على النمط الافتراضي المسمى: ?attr/colorPrimaryوالذي يغير اللون استنادًا إلى مظهر التطبيق light / dark. إذا قمت بتعيين لون مخصص @color/redعلى TextView ، فلن يتغير بين أوضاع النهار / الليل.




لون نص شريط الأدوات في وضع اليوم أسود. كيفية ضبطه على الأبيض في styles.xmlنفسه؟
















<style name="AppTheme" parent="Theme.AppCompat.DayNight">

<!-- Customize your theme here. -->

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

<item name="android:textColorPrimary">@android:color/white</item>

<item name="android:textColorSecondary">@android:color/white</item>

</style>

لاسترداد نوع الوضع الليلي الحالي ، نستخدم الطريقة AppCompatDelegate.getDefaultNightMode()التي تُرجع عددًا صحيحًا لكل نوع من الأنواع التي تمت مناقشتها سابقًا ، على التوالي.




بعد أن حصلت على فكرة أساسية دعونا نجعل طلبا وهو ما يلي:




تخصيص الموارد ، الأنماط في أوضاع النهار / الليل.

Toggle DayNight theme from the UI

شاهد كيف تبدو أدوات واجهة المستخدم المتنوعة في الوضع الليلي.

Android Project Mode بنية المشروع

مشروع android theme daynight المثال




الروبوت DayNight الموضوع رمز المثال

رمز ملف فئة activity_main.xml موضح أدناه.







<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">







<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_margin="@android:dimen/app_icon_size"

android:text="Welcome to this tutorial."

android:textColor="@color/daynight_textColor"

android:textSize="18sp" />




<ImageView

android:id="@+id/imageView"

android:layout_width="250dp"

android:layout_height="250dp"

android:layout_centerInParent="true"

android:src="@drawable/placeholder" />







<TextView

android:id="@+id/txtNightMode"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBaseline="@+id/switchCompat"

android:layout_centerHorizontal="true"

android:paddingRight="8dp"

android:text="Night Mode"

android:textColor="@color/daynight_textColor" />







<android.support.v7.widget.SwitchCompat

android:id="@+id/switchCompat"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="@android:dimen/app_icon_size"

android:layout_toRightOf="@+id/txtNightMode"

android:checked="false"

android:textAppearance="?android:attr/textAppearanceMedium" />




<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/imageView"

android:layout_alignLeft="@+id/txtNightMode"

android:layout_alignStart="@+id/txtNightMode"

android:text="CLICK ME"

android:textColor="@color/daynight_textColor" />

</RelativeLayout>

لقد قمنا بتعيين لون نص مخصص و drawable على ImageView.

لتعيين ألوان ورسومات مختلفة لموضوعات النهار والليل ، نحتاج إلى إنشاء مجلدات منفصلة للموارد.

موارد سمة اليوم الموجودة في الدليل الافتراضي.

توجد موارد الموضوع الليلي في مجلدات ذات أسماء ملحقة بـ -night .

ومن هنا قمنا بإنشاء values-nightو drawable-nightالمجلدات في مشروعنا.

يجب أن يكون اسم الملف القابل للرسوم ، والألوان ، وأسماء الأنماط متماثلاً في كل من الدلائل الخاصة بالموارد التي ترغب في تبديلها في سمة DayNight.

إذا تم تعريف الأشياء أعلاه في واحد فقط من الدلائل ، سيتم استخدام نفس في مواضيع نهارية وليلية.

ويرد أدناه رمز الأنماط. xml في القيم ومجلدات القيم الليلية.







<resources>




<!-- Base application theme. -->

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

<!-- Customize your theme here. -->

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

<item name="android:textColorPrimary">@android:color/white</item>

</style>




<style name="MyDialog" parent="Theme.AppCompat.Light.Dialog.Alert"/>




<style name="MySwitch">

<item name="colorControlActivated">@color/switchColor</item>

</style>

</resources>




<resources>

<!-- Base application theme. values-night.xml -->

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

<!-- Customize your theme here. -->

<item name="colorPrimary">@color/orange</item>

<item name="colorPrimaryDark">@color/orangeDark</item>

<item name="colorAccent">@color/colorAccent</item>

<item name="android:textColorPrimary">@android:color/white</item>

</style>




<style name="MyDialog" parent="Theme.AppCompat.DayNight.Dialog.Alert"/>




<style name="MySwitch">

<item name="colorControlActivated">@color/switchColor</item>

</style>

</resources>

يتم استخدام الأنماط المحددة أعلاه لتعيين تخصيص موضوع DayNight القياسي.




يتم تعريف الأشياء الخاصة بـ colors.xml كما هو موضح أدناه.

وضع الليل ليلة الألوان الروبوت

colors.xml من مجلد قيم الليل




وضع daynight لون النهار الروبوت

colors.xml من مجلد القيم




MainActivity.javaيتم إعطاء رمز الفصل الدراسي أدناه.







package com.journaldev.daynightmode;




import android.content.Intent;

import android.support.v7.app.AlertDialog;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.app.AppCompatDelegate;

import android.support.v7.widget.SwitchCompat;

import android.view.View;

import android.widget.Button;

import android.widget.CompoundButton;




public class MainActivity extends AppCompatActivity {




@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

if (InitApplication.getInstance().isNightModeEnabled()) {

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

} else {

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

}

setContentView(R.layout.activity_main);







SwitchCompat switchCompat = findViewById(R.id.switchCompat);

Button button = findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

new AlertDialog.Builder(MainActivity.this, R.style.MyDialog)

.setTitle("Title")

.setMessage("Message")

.show();

}

});




if (AppCompatDelegate.getDefaultNightMode() == AppCompatDelegate.MODE_NIGHT_YES)

switchCompat.setChecked(true);




switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked) {

InitApplication.getInstance().setIsNightModeEnabled(true);

Intent intent = getIntent();

intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);

finish();

startActivity(intent);




} else {

InitApplication.getInstance().setIsNightModeEnabled(false);

Intent intent = getIntent();

intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);

finish();

startActivity(intent);

}







}

});




}

}

في الكود أعلاه ، نستخدم التبديل للتبديل بين موضوعات الوضع الليلي والنهائي في طلبنا. نحفظ

الوضع الحالي في كائن SharedPreferences .




لماذا ا؟




يمكن تعيين موضوع النشاط مرة واحدة فقط. ومن ثم عندما يتم تبديل المفتاح ، نحتاج إلى حفظ الوضع الجديد في كائن SharedPreference. نستخدم نمط Singleton لنوع التطبيق. بهذه الطريقة يمكن استخدام نفس مثيل فئة التطبيق في جميع أنحاء التطبيق.




InitApplication.javaيتم إعطاء رمز الفصل الدراسي أدناه.







package com.journaldev.daynightmode;




import android.app.Application;

import android.content.SharedPreferences;

import android.preference.PreferenceManager;







public class InitApplication extends Application {

public static final String NIGHT_MODE = "NIGHT_MODE";

private boolean isNightModeEnabled = false;




private static InitApplication singleton = null;




public static InitApplication getInstance() {




if(singleton == null)

{

singleton = new InitApplication();

}

return singleton;

}




@Override

public void onCreate() {

super.onCreate();

singleton = this;

SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences(this);

this.isNightModeEnabled = mPrefs.getBoolean(NIGHT_MODE, false);

}




public boolean isNightModeEnabled() {

return isNightModeEnabled;

}




public void setIsNightModeEnabled(boolean isNightModeEnabled) {

this.isNightModeEnabled = isNightModeEnabled;




SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences(this);

SharedPreferences.Editor editor = mPrefs.edit();

editor.putBoolean(NIGHT_MODE, isNightModeEnabled);

editor.apply();

}

}

إنه هنا حيث نقوم بتحديث واسترجاع نوع الوضع الليلي من التفضيلات المشتركة.




وضع التشغيل في الوضع الليلي في Android