Cómo desarrollar el tema de la interfaz de usuario de Xiaomi
1. Descargue el editor
Después de la descompresión, ejecute MIUINewThemeEditor.exe en el directorio raíz de Windows para abrir el editor y ejecute el subdirectorio del editor en Mac (similar a 19.5.31_1559298827). carpeta, el nombre de la carpeta es diferente en diferentes versiones) Archivo MIUINewThemeEditor.jar para abrir el editor
El sistema Mac necesita instalar el entorno Java con anticipación.
2. Nota:
El editor debe habilitar la depuración USB cuando se conecta al teléfono móvil. Cómo habilitar la depuración USB:
Para habilitar la depuración USB, primero debe abrir las Opciones de desarrollador, activar las opciones de desarrollador: Configuración-Mi dispositivo-Todos los parámetros, hacer clic en la versión MIUI continuamente (al menos 7 veces hasta que se le solicite: ya está en modo de desarrollador, no es necesario hacer esto)
Active el método de depuración USB del teléfono: Configuración-Más configuraciones-Opciones de desarrollador, active la depuración USB Cuando el teléfono esté conectado a la computadora por primera vez, aparecerá una ventana emergente para permitir la depuración USB. Después de seleccionar permitir, se establece la depuración USB entre la computadora y el teléfono. No es necesario volver a encenderlo en el futuro (tenga en cuenta que después de optimizar el teléfono en el centro de seguridad del teléfono, el sistema puede apagarlo). Modo de depuración USB Si está desactivado, siga los pasos anteriores para activar la depuración USB nuevamente).
Posibles razones por las que el editor no puede aplicar el tema o abrirlo
Compruebe si la depuración USB está activada en el teléfono. Compruebe los pasos: Configuración del sistema – Todas las configuraciones – Opciones de desarrollador –. Depuración de USB ( (activado),
Abra el administrador de tareas para verificar si hay varios procesos adb. Se recomienda desinstalar o cerrar otros procesos que ocupan adb, o hacer clic en "Reparar adb" en el editor de temas. menú (solo disponible en win)
El controlador no está instalado Para descargar el controlador del teléfono móvil, puede hacer clic aquí para descargar miflash para instalar el controlador. Método de instalación: abra miflash y haga clic en el botón Controlador en la esquina superior izquierda para instalarlo automáticamente. Después de instalar el controlador, si ya no lo necesita, puede eliminar miflash directamente
Reemplace el cable o la interfaz USB.
Compruebe si el directorio de complementos del editor contiene los complementos que agregó. Si el directorio de complementos no contiene los complementos agregados, la síntesis fallará. Puede verificar los complementos agregados marcando el. archivo plugin_config.xml en el paquete del tema.
El archivo de manifiesto escrito a mano contiene errores gramaticales. Se agregan dos atributos idénticos a una determinada línea de código; por ejemplo, se escriben dos coordenadas X en una línea de código. O la falta de espacios entre atributos que originalmente debían estar separados por espacios hará que la aplicación del complemento falle.
Después de conectarte al teléfono móvil, si abres el editor o creas un nuevo tema por primera vez, debes esperar un rato.
Después de agregar el complemento, la aplicación falló
Los pasos de solución de problemas para otras situaciones son los siguientes:
Usar en MAC
Primero instale la versión MAC de entorno java.
Debido a la configuración de seguridad de Mac, es posible que el sistema no permita ejecutar MIUINewThemeEditor.jar directamente por primera vez. Puede hacer clic derecho y seleccionar Abrir, seleccionar Abrir editor en la ventana emergente y. luego haga doble clic para abrirlo directamente.
La estructura del directorio del editor no debe contener espacios ni otros caracteres especiales. Es mejor no colocarlo en el directorio chino.
#Crear paquete de temas
Para. cree un nuevo tema, haga clic en el botón "Nuevo", aparecerá una ventana emergente con información del tema (como se muestra en la imagen. Después de completar toda la información, haga clic en Aceptar para comenzar el viaje formal de creación del tema ~
Haga clic para ingresar la descripción de la imagen
Haga clic para ingresar la descripción de la imagen
#Uso del editor
Después de crear un nuevo tema, el editor Ingrese a la interfaz de edición, como se muestra en la figura. La parte superior es la barra de menú y la barra lateral izquierda puede seleccionar el módulo de edición.
Haga clic para ingresar la descripción de la imagen
Nota:
El botón de actualización en la barra de menú se usa generalmente para reconstruir el caché cuando el complemento integrado -in se modifica; de lo contrario, se modifica el complemento incorporado. Para obtener detalles sobre cómo crear el complemento, consulte
Introducción al menú. en la esquina superior izquierda para que aparezca una lista. Hay varias funciones clave que deben comprenderse, siempre que el editor pueda aplicar el tema al teléfono móvil normalmente:
Exportar el paquete del tema: este es el único formato de archivo (.mtz) cargado en el tienda de temas. Una vez completados todos los temas, todos deben exportar el paquete de temas.
Sincronizar íconos/módulos: el editor fuera de línea tiene materiales limitados. Si no puede encontrar los íconos o materiales que se muestran en su teléfono en el editor, puede sincronizar directamente los íconos/materiales y luego ir a. módulo correspondiente para encontrarlos.
Editar información: Principalmente para cambiar la versión del tema. Cuando la versión de UI es V11, el editor mostrará la interfaz y los materiales del sistema MIUI11. , cuando la versión de UI es V12, el editor mostrará la interfaz y los materiales del sistema MIUI12.
1. Crea la primera pantalla de bloqueo
Haz clic para ingresar la descripción de la imagen
Inserta una función de desbloqueo
Haz clic a la izquierda lado del editor Para el ícono de candado en la barra lateral, seleccione el marco de la pantalla de bloqueo en el área de selección de complementos, luego agregue un trazo hacia arriba para desbloquear el marco y haga clic en el botón Insertar
Haga clic en el teléfono Botón de forma en la esquina inferior izquierda del editor para aplicar el tema al teléfono celular.
Desbloquea una vez, luego cierra la pantalla y luego ábrela nuevamente, luego regresa a la pantalla de bloqueo. Verás dos pequeños íconos en la parte inferior de tu teléfono. En este momento, el desbloqueo de la aplicación del complemento se realizó correctamente.
Después de completar los pasos anteriores, descubrimos que las otras partes de la pantalla de bloqueo estaban todas negras. No importa, porque en este momento solo agregaste un control de desbloqueo y otros controles no. añadido todavía. ?Agregue otros complementos
Agregue un fondo de pantalla y un control de reloj, seleccione respectivamente el tema fondo de pantalla-variedad de fondo de pantalla de bloqueo-deslice hacia abajo para cambiar los fondos de pantalla y la pantalla de bloqueo en constante cambio-pantalla de bloqueo reloj-imagen horizontal inserción de reloj
Después de aplicar el tema, aparecerá un fondo de pantalla y un reloj en la pantalla de bloqueo.
Podemos usar el mismo método para agregar un control de pantalla negativo u otros controles a la pantalla de bloqueo. Al igual que los bloques de construcción, se construye una pantalla de bloqueo.
Después de completar la operación anterior, encontramos que faltaban los dos pequeños íconos en la parte inferior del marco de desbloqueo agregado anteriormente. La razón fue que el fondo de pantalla recién agregado los cubría, como se muestra en la imagen de arriba. Necesitamos modificar el complemento. ¿Ajustar la capa? Gestión de capas del complemento
En el área de administración de capas en el lado derecho del editor, primero seleccione el complemento que desea ajustar. y luego haga clic en los botones de flecha hacia arriba y hacia abajo en la parte inferior para ajustar el orden del complemento
Intentamos ajustar el fondo de pantalla del interruptor deslizante en la parte superior y volver a aplicar el fondo de pantalla del tema para que otros elementos. la pantalla de bloqueo no se bloqueará.
Cuanto más alta esté la capa del complemento en el editor, más baja será cuando se muestre en la pantalla de bloqueo. Si desea evitar que otros complementos la ocupen, ajuste el complemento. -in a otra capa en el editor. Justo debajo del complemento
También podemos personalizar los agregados, reemplazar los recursos de imagen y modificar los parámetros del módulo para hacer el estilo del complemento. ¿Está más en línea con nuestras necesidades de diseño? La personalidad del complemento. Personalización
Ingrese al editor de parámetros. En el área de edición de parámetros, puede elegir la edición de recursos de imagen y la edición de parámetros. recursos en el complemento, o modificar los parámetros del complemento, como ajustar las coordenadas, el color, etc. del complemento
Cabe señalar que es el recurso de imagen. de la secuencia de imágenes, porque lo que se modifica no es una sola imagen, sino una secuencia de imágenes compuesta de varias imágenes. Al reemplazar, debe nombrar la imagen que se va a reemplazar con reglas como 'xx_0.jpg' 'xx_1.jpg' 'xx_2.jpg' (los siguientes números y formato son los mismos que los del material de recurso original) y luego extraer en el editor como se muestra en el cuadro rojo. Seleccione un área para reemplazar el recurso correspondiente. Al reemplazar imágenes que no son secuencias de imágenes, no se requiere ningún nombre especial, siempre que el formato sea consistente.
Para modificaciones de parámetros utilizados comúnmente en complementos, consulte la siguiente tabla
Nombres de parámetros comunes
Parámetros correspondientes
Explicación
Alineación horizontal (o alineación en dirección X) izquierda, centro, derecha, izquierda, centro, derecha
Alineación vertical (o alineación en dirección Y) arriba, centro, abajo, arriba centro , abajo
Visibilidad 0 o 1 0 invisible, 1 visible, expresiones disponibles
Transparencia 0~255 0 significa que la transparencia es 0, 255 significa transparencia 100, expresiones disponibles
Color #ffffff El valor de color correspondiente se puede absorber de ps
2 Modificación de otros módulos de interfaz
Haga clic para ingresar la descripción de la imagen
Agregar. módulo de interfaz
Haga clic en el botón de estrella en la barra lateral derecha para ingresar a la función de edición de la interfaz del editor (el botón de estrella solo está disponible en el modo de eficiencia y el modo experto mostrará cada módulo de forma independiente)
Seleccione una plantilla oscura o una plantilla de color claro (la plantilla de color claro está en desarrollo y aún no está disponible. Puede modificar las imágenes y los colores de la interfaz a través del editor de parámetros a la derecha.
Después). Al cambiar al modo experto, cada interfaz La barra lateral se divide en botones independientes. Haga clic en diferentes botones para ingresar a la interfaz correspondiente para su modificación.
Nota: El modo de eficiencia es una nueva forma de crear interfaces en el editor. un conjunto completo de plantillas integradas de temas oscuros, todos los recursos necesarios para crear un tema oscuro se han integrado en la plantilla y los valores de color relevantes también se han empaquetado en la plantilla a través de las interfaces relevantes filtradas de la plantilla. , la producción de la parte de la interfaz se puede completar con solo unas pocas modificaciones, lo que mejora enormemente la eficiencia de la plantilla. Mejore la eficiencia de la creación de un conjunto de temas.
¿Cuál es la definición y la pintura de Point Nine Picture?
Haga clic para ingresar la descripción de la imagen
Haga clic para ingresar la descripción de la imagen
El error informado en la imagen de arriba se debe al dibujo no estándar de Dianjiu Picture, Dianjiu Picture es un formato de imagen especial utilizado en el desarrollo de Android. El nombre del archivo termina en ".9.png". La imagen puede decirle al programa qué parte de la imagen se puede levantar y qué parte no se puede levantar y necesita mantener la proporción original.
Al especificar el área de estiramiento y visualización .9, el efecto de visualización no se reducirá después de estirar el material, por ejemplo, si un rectángulo redondeado se amplía directamente, se volverá borroso, pero al dibujar. 9, se puede garantizar que solo estire el área dentro del filete para lograr el mejor efecto de visualización;
Para obtener más detalles, consulte: Explicación detallada del punto nueve.
#Estructura del paquete de temas
reloj_2x4 de escritorio
com.miui.home escritorio
com.android.contacts marcación y contactos
com.android.mms SMS
configuración de com.android.settings
barra de notificaciones com.android.systemui
framework-miui - res MIUI global
framework-res Android nativo global
iconos icono de escritorio
pantalla de bloqueo pantalla de bloqueo
miwallpaper fondo de pantalla cambiable
fondo de pantalla
archivo de descripción del tema descripción.xml
Lo anterior es la estructura de directorios del paquete de temas comúnmente utilizada actualmente, que incluye, entre otros, debido a la rápida iteración de; el sistema, se recomienda Puede hacerlo de acuerdo con la plantilla existente de la plantilla oficial del editor de temas.
#Código y herramientas
Las herramientas de escritura maml más utilizadas incluyen: (Sublime Text, Notepad), que se inicia rápidamente y tiene muchos complementos, es muy conveniente de usar. con la finalización automática de la sintaxis maml, recomendado para que todos lo utilicen.
#1. Sublime Text
#Install sublime
La dirección de descarga es directamente de Baidu. A continuación se proporciona el método de instalación de los complementos necesarios. mameluco.
#Install plug-in
Primero instale Package Control El complemento Package Control en sí es un complemento para una administración conveniente de los complementos. Después de instalarlo, puede hacerlo. agregue varios complementos.
Método de instalación: haga clic en ver en la barra de menú, luego haga clic en Mostrar consola (o ingrese directamente ctrl `), luego ingrese el siguiente código en el cuadro de entrada que aparece en la parte inferior y presione la tecla Intro. Se instalará después de un tiempo. importar urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' 'ebe013ee18cced0ef93d5f746d80ef60'; b. solicitud.build_opener (urllib .request.ProxyHandler()) ); por = urllib.request.urlopen( '/' pf.replace(' ', '20')).read(); print('Error al validar la descarga (obtuve s en lugar de s), intente la instalación manual' (dh, h)) si dh != h else open(os.path.join( ipp, pf), 'wb' ).write (por)
Si la instalación falla (la red está bloqueada), puede descargar manualmente el paquete del complemento e instalarlo.
Haga clic aquí para descargar Package Control
Método de instalación, haga clic en Preferencias----Buscar paquetes (buscar complementos) abrirá el directorio de complementos y luego irá al En la parte superior del directorio Carpeta de primer nivel, busque la carpeta Paquetes instalados y coloque el paquete Package Control.sublime descargado en el directorio Paquetes instalados, para que Package Control esté instalado.
Después de instalar Package Control, puede usarlo para instalar varios complementos.
Primero instalamos un complemento chino
Haga clic en Preferencias, luego haga clic en Control de paquetes, seleccione Instalar paquete en el cuadro de entrada emergente, luego ingrese chino y seleccione la primera localización china. esto instalará automáticamente el complemento chino y la interfaz sublime se volverá china.
Si se informa un error (la red está bloqueada), también podemos descargarlo e instalarlo manualmente usando el método anterior de instalación de Package Control
Haga clic aquí para descargar el complemento chino. Después de descargarlo, cópielo al directorio de Paquetes instalados anterior, después de copiarlo, haga clic en Ayuda en la barra de menú, seleccione Idioma y luego seleccione Chino simplificado y estará bien.
Después de instalar el complemento chino, podemos instalar el archivo de autocompletado maml.
Haga clic aquí para descargar el archivo de autocompletado, descomprima el archivo después de descargarlo y luego haga clic en Preferencias - ---Buscar paquetes (buscar complemento) Abra el directorio del complemento, coloque la carpeta Maml descomprimida en la carpeta que acaba de abrir (directorio Paquetes), hacemos clic en Texto sin formato en la esquina inferior derecha de sublime (el El estado predeterminado muestra texto sin formato, si se seleccionan otros idiomas o si otros idiomas están abiertos actualmente, se mostrarán otros idiomas), y luego seleccione XML, para que cambiemos al idioma XML. , La finalización automática de Maml entrará en vigor automáticamente. Primero ingresamos un corchete angular lt;? Luego ingresamos el nombre de la etiqueta que se ingresará y la finalización de sintaxis de Maml se invocará automáticamente.
Recomiendo un tema sublime que modifiqué yo mismo, que imita el tema Palenight de vscode. El efecto de visualización es muy bueno.
Haga clic aquí para descargar el tema. Después de descargarlo, cópielo. colóquelo en el directorio Paquetes donde se colocó previamente el complemento maml, después de copiarlo, haga clic en Preferencias en la barra de menú, seleccione el tema y la combinación de colores respectivamente y luego seleccione Palenight para ambos.
Otros complementos recomendados
SublimeLinter, SublimeLinter puede verificar automáticamente los errores en la sintaxis. Después de instalar SublimeLinter, también necesita instalar SublimeLinter-xmllint, para que pueda verificar los errores en xml. sintaxis.
#2. Bloc de notas
La dirección de descarga es Baidu. A continuación se describe el método de instalación del complemento utilizado por maml.
#Install Plug-in
Primero instale, haga clic en "Complemento" en la barra de menú y luego haga clic en "Administración de complementos", luego busque: Herramientas XML, verifique el cuadro y haga clic en el botón de instalación en la esquina superior derecha, como se muestra en la figura.
?
Haga clic para ingresar la descripción de la imagen
#Función de verificación de errores:
Una vez completada la instalación, el software se reiniciará. Después de abrirlo, haga clic en ". Complementos" en la barra de menú. Luego coloque el mouse en "Habilitar verificación automática de sintaxis XML" en Herramientas XML para activar la verificación automática de errores, como se muestra en la imagen:?
Haga clic para ingresar a la imagen descripción
Después de abrirlo, se le preguntará si el código de edición no tiene especificaciones escritas. Por ejemplo, si la etiqueta no termina con una barra o le faltan comillas dobles, cuando haga clic en Guardar. , una ventana emergente le indicará cuántas líneas tienen problemas, como se muestra en la figura:
Haga clic para ingresar la descripción de la imagen
El atributo src en la etiqueta de tiempo en A la imagen de arriba le faltan unas comillas dobles y la ventana emergente lo indica en la línea 6. Por lo tanto, al escribir código, todos recuerdan que las mayúsculas y la puntuación de las etiquetas del código deben ser regulares. De lo contrario, podría provocar una visualización anormal del teléfono u otros problemas. (A veces, no se le solicitará el número específico de líneas, por lo que puede escribir un párrafo y guardarlo una vez al escribir, lo que puede garantizar mejor la preservación del código y si hay problemas de escritura irregulares)
#Embellecimiento de códigos:
En la escritura diaria, muchos códigos escritos por diseñadores no estarán ordenados de manera ordenada y la visualización será desordenada. Sin embargo, cuando hay muchos códigos, será muy laborioso ajustarlos uno por uno. por uno, así que instale el complemento anterior en la nota. Más tarde podemos probar las teclas de acceso directo para embellecer con un solo clic.
Teclas de acceso directo:
Formatear el código en una línea: Ctrl Alt Shift L
Embellecer el código: Ctrl Alt Shift B
Antes del embellecimiento:
Haga clic para ingresar la descripción de la imagen
Después del embellecimiento:
Haga clic para ingresar la descripción de la imagen
En la figura 2 arriba El efecto solo necesita ser ejecutado: Ctrl Alt Shift B para embellecer el arreglo.
¡Para más funciones y jugabilidad, puedes estudiarlo por tu cuenta! ! ! Vamos ^_^
Haga clic aquí para obtener detalles del enlace web. Este es un tutorial detallado