Acerca del modo oscuro

El cliente de Android AndroidQ ha comenzado a admitir el modo oscuro, y la experiencia también es muy buena, por lo que muchas aplicaciones grandes también se adaptarán a esto. Hay dos métodos de adaptación:

1 Método personalizado: agregue un conjunto de archivos nocturnos y personalice el diseño, los colores, el estilo, etc., de acuerdo con el diseño de la interfaz de usuario.

  Ventajas: puede lograr el efecto deseado según las necesidades.

 Desventajas: Puede ser un poco más complicado, para proyectos antiguos, especialmente la denominación de colores no está estandarizada o hay demasiados componentes, es muy problemático. Peor aún, confíe en componentes proporcionados por proveedores externos.

2. 自动 适配 Force Dark。 <item name = "android: forceDarkAllowed" herramientas: targetApi = "q"> true </item> 

  Ventajas: simple, el efecto es bastante bueno.

  Desventajas: No favorece la adaptación personalizada.

 

1. Forma personalizada:

1. Agregue un nuevo conjunto de archivos correspondientes a los archivos de recursos relacionados, vea la imagen a continuación:

Por ejemplo, colors.xml de valores y colors.xml de values-night se mantienen consistentes, pero el mismo nombre corresponde a diferentes valores de color en estos dos recursos. Lo mismo ocurre con otros estilos dibujables. Es solo que el tema de AppTheme debe cambiarse a:

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

2. El interruptor de modo oscuro del sistema de monitoreo:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    int mSysThemeConfig = newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK;
    switch (mSysThemeConfig) {
        // 亮色主题
        case Configuration.UI_MODE_NIGHT_NO:
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
            recreate();
            break;
        // 深色主题
        case Configuration.UI_MODE_NIGHT_YES:
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
            recreate();
            break;
    }

}

Nota: asegúrese de configurar las propiedades de la actividad en el archivo de configuración: android: configChanges = "uiMode"

En este momento, cuando cambie el interruptor de modo oscuro del sistema de la APLICACIÓN, la APLICACIÓN volverá a crear () en esta página, y luego de acuerdo con el modo establecido en su código para que coincida con la carga del archivo de recursos correspondiente a la noche o al recurso archivo en modo normal, a fin de lograr la oscuridad El propósito de la adaptación.  

Tenga cuidado: 1. El nombre de los colores se puede vincular directamente al color. Por ejemplo: <color name = "color_55000000"> # 55000000 </color>. Para el modo oscuro, se pueden nombrar varios nombres que apuntan a un color por separado, y luego apúntelo juntos, como:

Cuando varias personas se adaptan juntas, para evitar posibles conflictos, se pueden escribir adaptaciones especiales por separado en su propia área personalizada.

2. Asegúrese de prestar atención a los colores y los recursos de imagen que se usan dinámicamente en el código y no olvide adaptarse.

3. Componentes del proyecto. Si el color, el archivo de recursos, etc.en el componente se nombran con un prefijo o algo así, no entrará en conflicto con el proyecto principal. En este momento, solo necesita adaptar el colors.xml y el estilo y la noche correspondientes al dibujable bajo la noche en el proyecto principal. Pero si el nombre es inconsistente, habrá un conflicto de adaptación y el conflicto del componente o del proyecto principal debe modificarse en este momento. Por supuesto, también puede obtener un conjunto de archivos nocturnos en el componente como el proyecto principal. Cómo cambiar el conflicto o cómo cambiarlo (cuando el recurso del componente se denomina igual que el recurso del proyecto principal, el el proyecto principal se utilizará al empaquetar y fusionar recursos cuasi)

  4. Para los componentes de terceros fabricantes (generalmente no se les permite modificar), si el nombre del color propio y el nombre del color del proyecto principal entran en conflicto, naturalmente causará algunos colores oscuros y claros en los componentes, lo cual es muy mal. Necesito coordinar con un tercero para realizar cambios. No adaptamos los componentes de los proveedores externos generales, pero puede requerir una adaptación dinámica para el caso en que la Actividad en el proyecto principal herede los componentes en el campo.

También puede ser así: agregue un xml a los valores del proyecto principal, y defina el estilo y el color en él. En este momento, puede usar un nombre de color del proyecto principal que ha sido adaptado. Siempre que el nombre de un determinado color o estilo que desee adaptar para construir sea el mismo que el nombre del color y el estilo de este nuevo archivo, también se lleva a cabo la adaptación. Como se muestra abajo:

2. Adaptación automática a Force Dark

1. El tema en estilo se modifica a: parent = "Theme.AppCompat.Light.NoActionBar"

2. <item name = "android: forceDarkAllowed" herramientas: targetApi = "q"> verdadero </item>

Entonces está bien. Cuando se cambia el interruptor de modo, el sistema se adapta automáticamente y el efecto es bueno.

Esto se adapta tanto a las páginas nativas como a las vistas web. Esto es muy importante.

El contenido anterior está básicamente satisfecho. El cliente de Android está adaptado al modo oscuro. Sin embargo, puede haber muchos otros requisitos durante el desarrollo, y estos requisitos lo llevarán a ello. Me encontré con dos problemas

1. La página web se configura con el atributo prefiere-esquema-de-color, y el  @media estilo CSS correspondiente se empareja después del juicio, como se muestra en la figura siguiente, para lograr la adaptación oscura de la página web de Android. (Ios puede serlo, pero muchos teléfonos Android no pueden adaptarse a él)

body {
  color: #333; /* 在 light mode 时,页面中的文字颜色 */
}
@media screen and (prefers-color-scheme: dark) {
  body {
    color: #fff; /* 如果系统切换到 dark mode 时,页面中的文字颜色改变 */
  }
}

 Sin embargo, este atributo requiere que la versión Chromum del navegador del kernel sea> = 81, y muchos teléfonos móviles son actualmente inferiores a esta versión, lo que hace que esto sea imposible.

Entonces encontré el siguiente método:

1. En el lado del cliente, inyecte dinámicamente estilos CSS de acuerdo con la lógica del interruptor oscuro, puede consultar https://blog.csdn.net/anhenzhufeng/article/details/78931586?utm_medium=distribute.pc_relevant.none- task-blog-baidujs- 3     este artículo.  

Desventajas: 1. En primer lugar, debe tener una cierta base de html, porque necesita adaptarse a lugares especiales. 2. Además, los controles en la página web todavía están fragmentados, lo que hace que sea particularmente difícil de manejar.

2. Pase el estado del modo de teléfono móvil a la página web a través de la interacción Js para su procesamiento.

3. Usando nuestro segundo método, solo para adaptarnos a WebviewActivity, basta con adaptar el estilo a esta Actividad por separado. Otras interfaces nativas se pueden adaptar de forma personalizada (yo uso esto)

2. Requisitos: el cliente tiene un interruptor para controlar manualmente el modo oscuro en una interfaz de segundo o tercer nivel. Si el teléfono móvil muestra el modo oscuro está restringido por el interruptor oscuro del sistema del teléfono móvil y este interruptor, y la interfaz debe permanecer en La interfaz actual no puede saltar a la página de inicio (una interfaz primaria similar como MainActiivty).

Si se le permite saltar a la página de inicio, es fácil, porque la pila de tareas se vacía y cada interfaz recargada será la misma que la página de inicio (este es el caso de WeChat, no importa en qué interfaz cambie el modo, él saltará a la página de inicio y parpadeará durante un tiempo). Si no está permitido, cuando fuerce dinámicamente que la interfaz actual se establezca en un modo determinado, la interfaz cargada en la pila de tareas no cambiará. ¿Cómo solucionar esta demanda?

Muy problemático, se puede lograr, pero la experiencia del cliente no es muy buena. Solo hablaré de ideas a continuación.

1. Cree una caché global y almacene el estado del modo actual de la interfaz en la caché cada vez que se carga una interfaz en BaseActivity.

2. Cuando se cambia el modo en una determinada interfaz y es necesario cambiar el estado de la APLICACIÓN, la interfaz actual se puede cambiar directamente. Para otras actividades que se han cargado en la pila, el modo en la caché se obtiene en onResume y se compara con el modo que debería mostrarse actualmente. Si son iguales, no es necesario modificarlos, de lo contrario se establecerán dinámicamente de acuerdo con la lógica.

AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_NO); // Establecer el color de la luz dinámicamente
AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_YES); // Establecer el color oscuro dinámicamente

Y vuelva a modificar el estado de esta interfaz en la caché, al destruir, elimine el almacenamiento de esta interfaz

3. Debido a que está relacionado con la transformación de proyectos antiguos, habrá tal problema: setContentView () se coloca antes de super.onCreate (), (porque puede involucrar procesamiento lógico) cuando se modifica el estado del modo, recreate () No se renderizó como debería ser después. En respuesta a esta situación, mi tratamiento es recargar una vez para esta situación en onRestoreInstanceState.

@Override 
protected void onRestoreInstanceState (Bundle SavedInstanceState) { 
    super.onRestoreInstanceState (SavedInstanceState); 
    if (IMApp.getInstance (). isChangeConfigMode) { 
        String flag = MeUtils.getString (SystemParamManager.getSystemParam (SystemParam.BIG_TYPE_CUSTOMER_PARAM, SystemParam.SMALL_TYPE_ME_SETTING_DARK_SWITCH)); 
        IMApp.getInstance (). IsChangeConfigMode = false; 
        if (flag.equals ("1") &&! isOncreateFirst) { 
            Intención Intención = getIntent (); 
            thisActivity.finish (); 
            overridePendingTransition (0, 0); 
            startActivity (intención); 
        } 
    } más { 
        IMApp.getInstance (). IsChangeConfigMode = false;
    } 
}

Todos estos se manejan de manera uniforme en Base, siempre que se establezcan las condiciones.

 

Resumen: A la hora de adaptarnos a proyectos complejos y antiguos durante muchos años, podemos encontrarnos con diversos problemas, lo que nos obliga a tratar de optimizar constantemente.

no he decidido:

Huawei P30 mate30Pro Actualmente son móviles nuevos, solo serán controlados por el sistema, el efecto oscuro no tiene nada que ver con tu personalización.

Instale la APLICACIÓN por primera vez desde la interfaz Splash de acuerdo con: el sistema es negro + el interruptor propio está apagado = Obligo a la APLICACIÓN a configurarse en color brillante, al ingresar a MainActivty, el primer Fragmento cargado en el interior tendrá problemas de reproducción, algunas líneas o iconos Aparece en blanco y no se puede renderizar. Pero otros Fragmentos están bien y otras Actividades están bien. Sal y vuelve a entrar, no hay problema y no habrá ningún problema en el futuro, no entiendo esto.

 

Supongo que te gusta

Origin blog.csdn.net/lk2021991/article/details/107517455
Recomendado
Clasificación