twrp 2.7.0 ui.xml简单分析，布局讲解，第一章

时间：2023-03-10 08:24:32
twrp 2.7.0 ui.xml简单分析，布局讲解，第一章

twrp 的ui.xml文件在bootable/recovery/gui/devices/$(DEVICE_RESOLUTION)/res目录里面

下面我主要分析的是720x1280分辨率的界面布局及功能的实现。

文件的一开始有如下的定义：

<recovery>

    <details>

        <resolution width="720" height="1280" />

        <author>TeamWin</author>

        <title>Backup Naowz</title>

        <description>Default basic theme</description>

        <preview>preview.jpg</preview>

    </details>

    <resources>

        <resource name="font" type="font" filename="Roboto-Condensed-30" />

        <resource name="mediumfont" type="font" filename="Roboto-Condensed-30" />

        <resource name="filelist" type="font" filename="Roboto-Condensed-30" />

        <resource name="top_bar" type="image" filename="top-bar.jpg" />

        <resource name="main_button" type="image" filename="menu-button" />

        <resource name="file_icon" type="image" filename="file" />

        <resource name="folder_icon" type="image" filename="folder" />

        <resource name="slideout" type="image" filename="slideout" />

        <resource name="progress" type="animation" filename="indeterminate" />

        <resource name="progress_empty" type="image" filename="progress_empty" />

        <resource name="progress_full" type="image" filename="progress_fill" />

        <resource name="checkbox_false" type="image" filename="checkbox_empty" />

        <resource name="checkbox_true" type="image" filename="checkbox_checked" />

        <resource name="radio_false" type="image" filename="radio_empty" />

        <resource name="radio_true" type="image" filename="radio_selected" />

        <resource name="medium_button" type="image" filename="medium-button" />

        <resource name="sort_button" type="image" filename="sort-button" />

        <resource name="minus_button" type="image" filename="minus-button" />

        <resource name="plus_button" type="image" filename="plus-button" />

        <resource name="home_icon" type="image" filename="home-icon" />

        <resource name="back_icon" type="image" filename="back-icon" />

        <resource name="slider" type="image" filename="slider" />

        <resource name="slider-used" type="image" filename="slider-used" />

        <resource name="slider-touch" type="image" filename="slider-touch" />

        <resource name="unlock-icon" type="image" filename="unlock" />

        <resource name="keyboard1" type="image" filename="keyboard1" />

        <resource name="keyboard2" type="image" filename="keyboard2" />

        <resource name="keyboard3" type="image" filename="keyboard3" />

        <resource name="keyboard4" type="image" filename="keyboard4" />

        <resource name="cursor" type="image" filename="cursor" />

    </resources>

定义的是要调用的资源的相关参数

<variables>

        <variable name="col1_x" value="10" />

        <variable name="col2_x" value="373" />

        <variable name="col_center_x" value="191" />

        <variable name="col_center_medium_x" value="275" />

        <variable name="center_x" value="360" />

        <variable name="row1_y" value="170" />

        <variable name="row2_y" value="410" />

        <variable name="row3_y" value="650" />

        <variable name="row4_y" value="890" />

        <variable name="col1_center_x" value="179" />

        <variable name="col2_center_x" value="552" />

        <variable name="row1_text2_y" value="310" />

        <variable name="row2_text2_y" value="550" />

        <variable name="row_queue_y" value="760" />

        <variable name="row1_header_y" value="120" />

        <variable name="row1_text_y" value="170" />

        <variable name="row2_text_y" value="220" />

        <variable name="row3_text_y" value="270" />

        <variable name="row4_text_y" value="320" />

        <variable name="row5_text_y" value="370" />

        <variable name="row6_text_y" value="420" />

        <variable name="row7_text_y" value="470" />

        <variable name="row8_text_y" value="520" />

        <variable name="row9_text_y" value="570" />

        <variable name="row10_text_y" value="620" />

        <variable name="row11_text_y" value="670" />

        <variable name="row12_text_y" value="720" />

        <variable name="row13_text_y" value="770" />

        <variable name="row14_text_y" value="820" />

        <variable name="row15_text_y" value="870" />

        <variable name="row16_text_y" value="920" />

        <variable name="row17_text_y" value="970" />

        <variable name="row18_text_y" value="1020" />

        <variable name="zip_status_y" value="615" />

        <variable name="tz_selected_y" value="160" />

        <variable name="tz_set_y" value="950" />

        <variable name="tz_current_y" value="1180" />

        <variable name="col_progressbar_x" value="234" />

        <variable name="row_progressbar_y" value="1100" 

                  ...

                  ...

        <variable name="slidervalue_lineh" value="2" />

        <variable name="slidervalue_padding" value="20" />

        <variable name="slidervalue_sliderw" value="10" />

        <variable name="slidervalue_sliderh" value="60" />

    </variables>

variables: 定义的是相关的变量，图标的位置，变量的颜色。

下面是最基本的模块 <templates> ,里面定义了头部分，进度条

<templates>

                <!-- 这个是头部分定义 ，第一个page 都会调用到的

                 在这里定义了版本信息，电量信息，……

                 -->

        <template name="header">

            <background color="#000000FF" />

            <object type="image">

                <image resource="top_bar" />

                <placement x="0" y="0" />

            </object>

            <object type="text" color="%text_color%">

                <font resource="font" />

                <placement x="120" y="10" />

                <text>Team Win Recovery Project  v%tw_version%</text>

            </object>

            <object type="text" color="%text_color%">

                <condition var1="tw_simulate_actions" var2="1" />

                <font resource="font" />

                <placement x="120" y="45" />

                <text>SIMULATING ACTIONS</text>

            </object>

            <object type="text" color="%text_color%">

                <font resource="font" />

                <placement x="120" y="76" />

                <text>%tw_time%</text>

            </object>

            <object type="text" color="%text_color%">

                <font resource="font" />

                <placement x="270" y="76" />

                <conditions>

                    <condition var1="tw_no_battery_percent" var2="0" />

                    <condition var1="tw_battery" op=">" var2="0" />

                    <condition var1="tw_battery" op="<" var2="101" />

                </conditions>

                <text>Battery: %tw_battery%</text>

            </object>

            <object type="button">

                <highlight color="%highlight_color%" />

                <placement x="%home_button_x%" y="%home_button_y%" />

                <font resource="font" color="%button_text_color%" />

                <text></text>

                <image resource="home_icon" />

                <condition var1="tw_busy" var2="0" />

                <action function="key">home</action>

            </object>

            <object type="button">

                <highlight color="%highlight_color%" />

                <placement x="%back_button_x%" y="%back_button_y%" />

                <font resource="font" color="%button_text_color%" />

                <text></text>

                <image resource="back_icon" />

                <condition var1="tw_busy" var2="0" />

                <action function="key">back</action>

            </object>

            <object type="action">

                <touch key="power" />

                <action function="overlay">lock</action>

            </object>

        </template>

下面分析最简单的功能 <page name="reboot"> <!-- 这个是重启菜单的定义布局 -->

     <page name="reboot">

             <object type="template" name="header" />   <!-- 这里引用临时模块header ,用于显示时间和电量，及版本信息 -->

             <object type="text" color="%text_color%">    <!--  开始 text 变量的定义，也是文字的颜色 -->

                 <font resource="font" />                 <!-- 引用字体资源 ，在最开始的资源变量中有定义 -->

                 <placement x="%center_x%" y="%row1_header_y%" placement="5" />  <!-- 这是是定义菜单的显示位置 -->

                 <text>Reboot Menu</text>            <!-- 显示在reboot菜单的最顶端， "Reboot Menu" -->

             </object>                               <!-- 结束 text 的定义 -->

             <object type="button">                 <!-- 按钮定义 -->

                 <highlight color="%highlight_color%" />

                 <condition var1="tw_reboot_system" var2="1" />

                 <placement x="%col1_x%" y="%row1_y%" />        <!-- 定义这个按钮的位置， 在第一行，第一列 -->

                 <font resource="font" color="%button_text_color%" />

                 <text>System</text>

                 <image resource="main_button" />      <!-- 声明这个按钮是主按钮，-->

                 <actions>                             <!-- 声明要执行的操作 -->

                     <action function="set">tw_back=reboot</action>      <!-- 声明要返回的page -->

                     <action function="set">tw_action=reboot</action>     <!-- 声明要执行的命令reboot ,这个命令人在actions.cpp中会检查 -->

                     <action function="set">tw_action_param=system</action>    <!-- 命令要用到的参数，这里是system

                     <action function="set">tw_has_action2=0</action>

                     <action function="set">tw_text1=No OS Installed! Are you</action>

                     <action function="set">tw_text2=sure you wish to reboot?</action>

                     <action function="set">tw_action_text1=Rebooting...</action>

                     <action function="set">tw_complete_text1=Rebooting...</action>

                     <action function="set">tw_slider_text=Swipe to Reboot</action>

                     <action function="page">rebootcheck</action>

                 </actions>

             </object>

             <object type="button">

                 <highlight color="%highlight_color%" />

                 <condition var1="tw_reboot_poweroff" var2="1" />

                 <placement x="%col2_x%" y="%row1_y%" />    <!-- 位置是第一行，第二列 -->

                 <font resource="font" color="%button_text_color%" />

                 <text>Power Off</text>

                 <image resource="main_button" />

                 <actions>

                     <action function="set">tw_back=reboot</action>

                     <action function="set">tw_action=reboot</action>

                     <action function="set">tw_action_param=poweroff</action>

                     <action function="set">tw_has_action2=0</action>

                     <action function="set">tw_text1=No OS Installed! Are you</action>

                     <action function="set">tw_text2=sure you wish to power off?</action>

                     <action function="set">tw_action_text1=Turning Off...</action>

                     <action function="set">tw_complete_text1=Turning Off...</action>

                     <action function="set">tw_slider_text=Swipe to Power Off</action>

                     <action function="page">rebootcheck</action>

                 </actions>

             </object>

             <object type="button">

                 <highlight color="%highlight_color%" />

                 <condition var1="tw_reboot_recovery" var2="1" />

                 <placement x="%col1_x%" y="%row2_y%" />    <!-- 第二行，第一列 -->

                 <font resource="font" color="%button_text_color%" />

                 <text>Recovery</text>

                 <image resource="main_button" />

                 <actions>

                     <action function="set">tw_back=reboot</action>

                     <action function="set">tw_action=reboot</action>

                     <action function="set">tw_action_param=recovery</action>

                     <action function="set">tw_has_action2=0</action>

                     <action function="set">tw_text1=No OS Installed! Are you</action>

                     <action function="set">tw_text2=sure you wish to reboot?</action>

                     <action function="set">tw_action_text1=Rebooting...</action>

                     <action function="set">tw_complete_text1=Rebooting...</action>

                     <action function="set">tw_slider_text=Swipe to Reboot</action>

                     <action function="page">rebootcheck</action>

                 </actions>

             </object>

             <object type="button">

                 <highlight color="%highlight_color%" />

                 <condition var1="tw_reboot_bootloader" var2="1" />

                 <placement x="%col2_x%" y="%row2_y%" />

                 <font resource="font" color="%button_text_color%" />

                 <text>Bootloader</text>

                 <image resource="main_button" />

                 <actions>

                     <action function="set">tw_back=reboot</action>

                     <action function="set">tw_action=reboot</action>

                     <action function="set">tw_action_param=bootloader</action>

                     <action function="set">tw_has_action2=0</action>

                     <action function="set">tw_text1=No OS Installed! Are you</action>

                     <action function="set">tw_text2=sure you wish to reboot?</action>

                     <action function="set">tw_action_text1=Rebooting...</action>

                     <action function="set">tw_complete_text1=Rebooting...</action>

                     <action function="set">tw_slider_text=Swipe to Reboot</action>

                     <action function="page">rebootcheck</action>

                 </actions>

             </object>

             <object type="button">

                 <highlight color="%highlight_color%" />

                 <condition var1="tw_download_mode" var2="1" />

                 <placement x="%col1_x%" y="%row3_y%" />

                 <font resource="font" color="%button_text_color%" />

                 <text>Download</text>

                 <image resource="main_button" />

                 <actions>

                     <action function="set">tw_back=reboot</action>

                     <action function="set">tw_action=reboot</action>

                     <action function="set">tw_action_param=download</action>

                     <action function="set">tw_has_action2=0</action>

                     <action function="set">tw_text1=No OS Installed! Are you</action>

                     <action function="set">tw_text2=sure you wish to reboot?</action>

                     <action function="set">tw_action_text1=Rebooting...</action>

                     <action function="set">tw_complete_text1=Rebooting...</action>

                     <action function="set">tw_slider_text=Swipe to Reboot</action>

                     <action function="page">rebootcheck</action>

                 </actions>

             </object>

             <object type="action">

                 <touch key="home" />    <!-- 在菜单的最底部，定义的动作， home 键 -->

                 <action function="page">main</action>   <!-- 回到的<page name="main">

             </object>

             <object type="action">

                 <touch key="back" />           <!-- 返回键 back -->

                 <action function="page">main</action>

             </object>

             <object type="template" name="footer" />    <!-- 临时模块 footer -->

         </page>                                          <!-- page 模块的结束 -->

下面来讲解一下实现sideload功能的page

 <page name="sideload">

             <object type="template" name="header" />

             <object type="text" color="%text_color%">

                 <font resource="font" />

                 <placement x="%center_x%" y="%row1_header_y%" placement="5"/>

                 <text>ADB Sideload</text>

             </object>

             <object type="checkbox">    <!--这里是checkbox 选项 ,其中的变量，需要修改data.cpp -->

                 <placement x="%col1_x%" y="%row2_text_y%" />

                 <font resource="font" color="%text_color%" />

                 <text>Wipe Dalvik Cache.</text>

                 <data variable="tw_wipe_dalvik" />     <!-- 这个变量的定义如下：mvalues.insert(make_pair("tw_wipe_cache", make_pair("0", 0))); 初始化为 0 即， false -->

                 <image checked="checkbox_true" unchecked="checkbox_false" />   <!-- 设置相应的图片显示已经选，没有选 -->

             </object>

             <object type="checkbox">

                 <placement x="%col1_x%" y="%row3_text_y%" />

                 <font resource="font" color="%text_color%" />

                 <text>Wipe Cache.</text>

                 <data variable="tw_wipe_cache" />

                 <image checked="checkbox_true" unchecked="checkbox_false" />

             </object>

             <object type="slider">

                 <placement x="%slider_x%" y="%slider_y%" />

                 <resource base="slider" used="slider-used" touch="slider-touch" />

                 <actions>

                     <action function="set">tw_back=advanced</action>

                     <action function="set">tw_action=adbsideload</action>

                     <action function="set">tw_action_text1=ADB Sideload</action>

                     <action function="set">tw_action_text2=Usage: adb sideload filename.zip</action>

                     <action function="set">tw_complete_text1=ADB Sideload Complete</action>

                     <action function="set">tw_has_cancel=1</action>

                     <action function="set">tw_show_reboot=1</action>

                     <action function="set">tw_cancel_action=adbsideloadcancel</action>

                     <action function="page">action_page</action>       <!-- 这个page 实现的功能就是，新开一个page,并显示进度条 -->

                 </actions>

             </object>

             <object type="text" color="%text_color%">

                 <font resource="font" />

                 <placement x="%center_x%" y="%slider_text_y%" placement="4" />

                 <text>Swipe to Start Sideload</text>    <!-- 在slider里面显示的文件 -->

             </object>

             <object type="action">

                 <touch key="home" />

                 <action function="page">main</action>

             </object>

             <object type="action">

                 <touch key="back" />

                 <action function="page">advanced</action>

             </object>

             <object type="template" name="footer" />

         </page>