小米ui主题如何开发

~

1、下载编辑器

• 解压后 Windows 下执行根目录下的 MIUINewThemeEditor.exe 即可打开编辑器，mac 下执行编辑器子目录（类似 19.5.31_1559298827 的文件夹，不同版本文件夹名称不一样）MIUINewThemeEditor.jar 文件打开编辑器

• mac 系统需提前安装 java 环境。

2、注意事项：

• 编辑器在连接手机时需要开启 USB 调试，开启 USB 调试方法：

• 开启 USB 调试需要先开启开发者选项，开启开发者选项方法：设置-我的设备-全部参数，连续点击 MIUI 版本（至少 7 次，直到提示：您已处于开发者模式，无需进行此操作）

• 开启手机 USB 调试方法：设置-更多设置-开发者选项，开启 USB 调试，第一次连接到电脑时，手机会弹出允许 USB 调试的弹窗，选择允许后电脑与手机的 usb 调试就建立好了，后续无需再次开启（注意，再手机的安全中心进行手机优化后，系统可能会把 USB 调试模式关闭，如果关闭了，请按照上面的步骤重新开启 USB 调试）。

• 编辑器无法应用主题、打不开可能的原因

• 检查手机是否打开了 USB 调试，检查步骤：系统设置–全部设置–开发者选项–usb 调试（开），

• 打开任务管理器查看是否有多个 adb 进程，建议卸载或关闭其他占用 adb 的进程，或在主题编辑器菜单里点击“修复 adb”（仅 win 下可用）

• 驱动程序未安装，下载手机驱动程序，可点击这里 下载 miflash 来安装驱动。安装方法：打开 miflash，点击左上角的 Driver 按钮即可自动安装，安装完驱动后如果你不需要了可以直接删除 miflash

• 更换 USB 线缆或接口

• 编辑器 plugin 目录下是否包含你添加的插件，若 plugin 目录不包含添加过的插件会合成失败，可以通过检查主题包内 plugin_config.xml 文件来查看添加过的插件。

• 手写的 manifest 文件有语法错误。某行代码内添加了两个相同的属性，比如一行代码内写了两个 X 坐标。或者属性之间原本需要空格分开的缺少空格，都会导致插件应用失败。

• 连接手机后，若是第一次打开编辑器或新建主题，需要等待一点时间，并非卡机

• 添加了插件后，应用失败

• 其他情况排查步骤如下：

• MAC 下使用

• 先安装 MAC 版 java 环境。

• 由于 mac 安全设置，第一次直接执行 MIUINewThemeEditor.jar 可能不被系统允许，你可以右键选择打开，在弹出的窗口中选择打开编辑器，后续即可双击直接打开了。

• 编辑器目录结构不可有空格等特殊字符，最好不要放在中文目录下





#创建主题包





• 新建主题 点击“新建”按钮，会弹出一个主题信息的弹窗（如图），填完所有信息点击确定即可开始正式的制作主题之旅啦~

请点击输入图片描述

请点击输入图片描述




#编辑器使用

新建主题之后，编辑器进入编辑界面，如图，顶部为菜单栏，左侧侧边栏可选择编辑的模块。

请点击输入图片描述

注意：

• 菜单栏的刷新按钮，一般用于修改了内置插件时重建缓存用，否则修改了内置插件不会生效，插件的制作教程详见

• 菜单简介 点击左上角菜单，弹出一个列表。重点需要了解几个功能，前提是编辑器能正常把主题应用到手机上：

• 导出主题包：这个是上传至主题商店的唯一文件格式（.mtz）,所有主题完成之后都需要导出主题包。

• 同步图标/模块：线下编辑器的素材有限，如果在编辑器中找不到手机上显示的图标或者素材，可以直接同步图标/素材，然后去相应的模块找即可。

• 编辑信息：主要是更改主题版本，当 UI 版本为 V11 的时候，编辑器会展示 MIUI11 系统的界面和素材。，当 UI 版本为 V12 的时候，编辑器会展示 MIUI12 系统的界面和素材。




1、创建第一个锁屏

请点击输入图片描述

插入一个解锁功能

• 点击第编辑器左侧侧边栏的锁型图标，在插件选择区选择锁屏框架，然后添加一个上划解锁框架，点击插入按钮

• 点击编辑器左下角手机形状按钮，即可应用主题到手机。

• 解锁一次，然后息屏再开屏，重新回到锁屏。你会发现手机底部有两个小图标。这时候解锁插件应用就成功了。




操作完上面的步骤以后，我们发现锁屏其他部分全是黑的，没关系，因为这个时候你只是添加了一个解锁控件，其他控件都还没加呢。 添加其他插件

• 添加一张壁纸和一个时钟控件，分别选择【主题壁纸-百变锁屏壁纸-下划切换壁纸】 和 【百变锁屏-锁屏时钟-横向图片时钟】插入

• 应用主题后锁屏界面就出现了一张壁纸和一个时钟。

• 我们可以用同样的方法给锁屏添加一个负一屏控件或则其他控件，就跟搭积木一样，一个锁屏就构建出来了。




上面操作完成后我们发现之前添加的解锁框架底部的两个小图标不见了，原因是你新添加的壁纸把他给盖住了，如上图所示，我们需要对插件的图层进行调整 插件的图层管理

• 在编辑器右侧的图层管理区，先选择要调整孙旭的插件，然后点击底部上上下箭头按钮，即可调整插件的顺序

• 我们尝试把下滑切换壁纸调整到最顶上，重新应用主题壁纸就不对锁屏其他元素进行遮挡了。

• 在编辑器中图层越往上的插件，在锁屏实际显示中则越往下，要想不被其他插件盖住，则在编辑器中把插件调整到另一个插件的下面即可




我们还可以对添加的进行个性化定制，替换其中的图片资源，修改模块的各项参数，使插件的样式更符合我们的设计需求 插件的个性化定制

• 进入参数编辑器，参数编辑区可选图片资源编辑和参数编辑，我们可以替换插件里的图片资源，也可以修改插件的参数，例如调整插件的坐标、色彩等

• 需要注意的是是图片序列的图片资源，因为修改的不是单独一张图片,而是多张图片组成的图片序列。替换时需要把需要替换的图片以’xx_0.jpg’ ‘xx_1.jpg’ ‘xx_2.jpg’ 这样的规则命名（后面的数字及格式与原资源素材相同），然后拉进编辑器如图红色框选区域即可替换对应资源，非图片序列的图片替换时无需特殊命名，只需要格式一致即可。




插件中常用参数的修改可参考下表

常用参数名

对应参数

释义

横向对齐（或 X 方向对齐）    left、 center、right    居左 居中，居右    

纵向对齐（或 Y 方向对齐）    top、 center、bottom    顶部 居中，底部    

可见性    0 或 1    0 不可见，1 可见，可用表达式    

透明度    0~255    0 为透明度为 0，255 为透明度 100%，可用表达式    

颜色    #ffffff    可从 ps 里吸取对应的颜色值    




2、其他界面模块的修改

请点击输入图片描述

• 添加界面模块

• 点击右侧侧边栏的星星按钮，即可进入编辑器界面编辑功能（星星按钮只在效率模式有，专家模式会把各模块独立展现）

• 选择深色模板或浅色模板（浅色模板开发中，暂不可用），人后通过右侧的参数编辑器就可以对界面的图片和颜色进行修改了

• 切换到专家模式后，各界面在侧边栏分为独立按钮，点击不同按钮进入到对应界面进行修改

注：效率模式为编辑器中制作界面的全新方式，效率模式内置了一套完整的深色主题模板，模板内已经内置了制作一套深色主题所需要的所有资源，相关颜色值也已打包进模板中，通过模板外漏的相关接口，只需少量修改即可完成界面部分的制作，大大提高制作一套主题的效率。




• 点九图的定义与绘画 

  请点击输入图片描述

  请点击输入图片描述

  上图报错是因点九图绘画不规范导致，点九图是 Android 开发中用到的一种特殊格式的图片，文件名以”.9.png“结尾，这种图片能告诉程序，图像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。
  通过指定.9 拉伸与显示区域即可实现在素材拉伸后不会降低显示效果；例如一个圆角矩形直接放大会变模糊、通过绘制.9 后就能保证只拉伸圆角内的区域，从而达到最佳的显示效果；
  具体请查看：点九详解。




#主题包结构

• clock_2x4 桌面时钟

• com.miui.home 桌面

• com.android.contacts 拨号与联系人

• com.android.mms 短信

• com.android.settings 设置

• com.android.systemui 通知栏

• framework-miui-res MIUI 全局

• framework-res 安卓原生全局

• icons 桌面图标

• lockscreen 锁屏

• miwallpaper 百变壁纸

• wallpaper 壁纸

• description.xml 主题描述文件

• 以上是目前常用的主题包目录结构，包括但不限于这些；由于系统迭代较快，建议大家按照官方主题编辑器模板已有的模板进行制作即可。





#代码与工具

maml 编写工具常用的有：（Sublime Text、Notepad++），启动快，插件多，加上 maml 语法自动补全后用起来很方便，推荐大家使用。

#一、Sublime Text

#安装 sublime

下载地址直接百度，下面提供 maml 需用到的插件的安装方法。

#安装插件

首先安装 Package Control，Package Control 插件本身是一个为了方便管理插件的插件，安装了这个就可以添加各种插件了。

安装方法，点击菜单栏的 view，然后点击 Show Console(或者直接输入 ctrl + `)，然后在底部弹出的输入框中输入 如下代码后按 enter 键，过一会就装好了。

• import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.cn/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)



如果安装失败（网络被墙），可以手动下载插件包安装。

点击这里下载 Package Control

安装方法，点击 Preferences（首选项）----Browse packages（浏览插件）会打开插件的目录，然后进去该目录的上一级文件夹，找到 Installed Packages 文件夹 将下载的 Package Control.sublime-package 放在 Installed Packages 目录中，这样 Package Control 就安装好了。

安装好 Package Control 就可以用它来安装各种插件了。

首先我们安装一个中文插件
点击 Preferences（首选项），然后点击 Package Control，弹出的输入框中选择 Install Package ，然后输入 chinese，选择第一个 ChineseLocalization，这样就会自动安装好中文插件，sublime 界面就变成中文的了。

如果报错（网络被墙），我们也可以用前面安装 Package Control 的方法手动下载安装
点击这里下载中文插件，下载完后照样拷贝到前面的 Installed Packages 目录中，拷贝进去以后，点击菜单栏中的 help，选择 Language，然后选择简体中文就 ok 了。

安装完中文插件我们就可以安装 maml 自动补全文件了
点击这里下载自动补全文件,下载完后解压文件，然后点击 Preferences（首选项）----Browse packages（浏览插件）打开插件的目录，把解压的 Maml 文件夹放到刚刚打开的这个文件夹下（Packages 目录），我们点击 sublime 右下角的 Plain Text（默认状态显示 Plain Text，如果选择了其他语言或者当前打开其他语言的话会显示其他语言），然后选择 XML，这样我们就切换到 XML 语言下了，在 XML 语言下 Maml 自动补全会自动生效，我们先输入一个尖括号< 然后再输入要输入的标签名 Maml 语法补全就会自动唤起。

再推荐一个自己修改的 sublime 主题，模仿 vscode 的 Palenight 主题，显示效果非常不错
点击这里下载主题，下载完后拷贝到之前放 maml 插件的 Packages 目录中，拷贝进去以后，点击菜单栏中的首选项，分别选择主题和配色方案，然后都选择 Palenight 就行了。

其他推荐插件
SublimeLinter，SublimeLinter 可以自动校验语法中的错误，安装完 SublimeLinter 后还需要安装 SublimeLinter-xmllint，这样就可以对 xml 语法进行错误校验了。




#二、Notepad++

下载地址百度即可，下方介绍maml用到的插件安装方法。

#安装插件

首先安装，点击菜单栏中的“插件”然后点击“插件管理”，然后搜索：XML Tools 勾选后点击右上角安装按钮即可，如图。 

请点击输入图片描述

#查错功能：

安装完成后软件会重启一下，打开之后点击菜单栏的“插件”，然后鼠标放到“XML Tools上面的Enable XML syntax auto-check”即可开启自动查错，如图： 

请点击输入图片描述

打开之后当我们编辑代码没有写规范时就会提示，例如标签没有斜杠结尾的、少了双引号的，当你点击保存时就会弹窗提示你多少行有问题，如图：

请点击输入图片描述

上图当中的Time标签中src属性少了一个双引号，弹窗就提示在第6行当中。所以在书写代码时大家记得代码标签的大小写和标点符号一定要规整。不然可能导致手机显示不正常或者其他问题。（某些时候也不会提示具体多少行，所以大家写时候可以写一段保存一次，比较能保证代码的保存和是否存在书写不规范的问题）

#代码美化：

在日常书写中有不少设计师写的代码会没有一个规整的排序，显示的很乱，但是代码多的时候挨个去调会非常费事费力，那么在note++中安装上面的插件后我们可以试用快捷键就能一键美化。

快捷键：
将代码格式化成一行：Ctrl+Alt+Shift+L
将代码美化规整：Ctrl+Alt+Shift+B

没有美化前：

请点击输入图片描述

美化后：

请点击输入图片描述

上面图2中的效果只需要执行：Ctrl+Alt+Shift+B 即可美化排列。

其他更多的功能和玩法大家就自己研究lo！！！加油 ^_^

网页链接详情点击这里。这是制作的详细教程

---

崂山区17844615645： 谁知道怎么设计小米主题? 设计师帐号已经申请到了 - ？
屠荆甘油： 设计主页有一个活动的东西 上传图标 壁纸后生成即可

崂山区17844615645： 如何用ps制作小米手机主题的图标 - ？
屠荆甘油： 先把自己的小米账号申请成为主题开发者账号, 下载小米主题制作工具,自己安装PS软件. 下载小米主题模板.把里面提供的全部图标都重新用PS设计一遍. 根据官方教程把里面图标、壁纸、字体、等东西加入进去,打包,就是一个初级的主题了. 后面如果想提升,学习一些编程知识,制作锁屏,自由桌面、通知栏图标、动态壁纸,百变闹铃.动态图标等东西, 只有真正作出好的,兼容的,稳定的,大家都爱的.才是真的成功了.

崂山区17844615645： 小米手机如何自定义图标图片 - ？
屠荆甘油： 小米手机我们在进行使用的时候,想知道自己怎么才能自定义图标,不知道方法的小伙伴们,就让小编给大家详细的讲讲,一起来看看吧.小米手机怎么自定义应用图标手机:小米8系统:MIUI11.0.4点击手机桌面个性主题程序 点击我的,...

崂山区17844615645： 小米手机怎么设置MIUI7个性化UI主题 - ？
屠荆甘油： MIUI7发布会上的五个主题?这个要重新刷机的,(系统更新,下载最新版本安装包)就会出现了

崂山区17844615645： 红米note怎么升级miui7 - ？
屠荆甘油： 红米Note升级MIUI7方法:1.下载支持红米Note手机的MIUI7刷机包:直接进入“小米资源下载中心”,从“设备列表”中选择“红米Note”手机进入,并从“开发版”栏目中点击“下载完整包”按钮以下载MIUI7 For 红米Note刷机包.MIUI7 For ...

崂山区17844615645： 小米手机怎么设置MIUI7个性化UI主题 - ？
屠荆甘油： 如果你想用的是发布会说的那四个新的ui,必须是通过电脑线刷开发版才有,手机里面升级的没有

崂山区17844615645： 怎样能自己制作安卓主题卖钱 - ？
屠荆甘油： 下载工具,制作主题,上传.比如小米的miui主题 miui论坛有功具有教程,你可以试试

崂山区17844615645： UI可以设计手机主题吗 - ？
屠荆甘油： 当然可以,手机主题要从icon开始,所有的界面都是不同的icon组成的,界面的设计要和icon完美的融入,才会有良好的用户体验.icon设计是ui设计师必须要的基础的内容,加入自己的思维和创意擦可以做出好的手机主题.