MTC ui開發經驗總結
mtc的ui在代碼上涉及到兩部分
1、ui布局檔案
2、邏輯控制部分
ui布區域分的所有內容都存在theme目錄下具體路徑為：project/source/solution/theme/
其中包括對顏色，字體，圖片，詞條定義以及界面布局檔案
對應的目錄分別為：
theme/color
theme/font
theme/image
theme/language
theme/widget
下面逐個目錄說明一下
color
在theme/color/color.xml中定義
示例:
<color name="ZTE_CID_TXT_N">#F0F0F0</color>
代表的含義為：定義了一個名為ZTE_CID_TXT_N的顏色列舉，其對應的顏色RGB值為#F0F0F0。
需要注意，為提高代碼的可讀性，定義的顏色名稱需要按約定起名方便理解：ZTE_CID打頭，CID代表colorid。TXT代表此顏色定義是給字體顏色使用，其他背景顏色使用BG。N代表文字未選中時的顏色，選中即定義為S。
比如ZTE_CID_BG_BLACK指的就是非字體顏色的黑色的定義。
其中需要特別注意的是兩個顏色：
<color name="ZTE_CID_DESKTOP">#00FF00</color>
<color name="ZTE_CID_TXT_TRANS">#FF00FF</color>
這兩個顏色均為透明色。ZTE_CID_DESKTOP主要用于整個頁面，沒有背景，需要透到視頻層時使用的透明色
ZTE_CID_TXT_TRANS這個顏色主要用于，各個控制元件最常見的是文字控制元件，控制元件背景為透明色。這兩個顏色不能混用。后續介紹頁面布局時會再介紹下具體使用場景。
以上是關于顏色的定義，需要注意的是：國芯一月份對sdk進行了升級，升級后要求顏色定義加上alpha值，也就是后續顏色需要定義為ARGB，上述的ZTE_CID_TXT_N列舉值需要改成#00F0F0F0
font
在theme/font/font.xml中定義
示例:
<font>
<name>ZFID_B24</name>
<file>segoeuib.ttf</file>
<size>24</size>
</font>
ZFID_B24為字體名稱FID代表fontid B為粗題24表示該字體字號大小要與size實際大小對應起來，防止造成誤解。
file指定了該字體使用了那個ttf字庫檔案。字庫檔案需要放在同一級目錄下。
size指定了字體的字號大小。
如果需要新加一個字體的話，可以參照上面的例子。需要注意的是，字體的名稱不能超過十個位元組，因為gxbus中對字體名稱的長度有限制。
image
目錄中根據檔案的不同用途，分成了多個檔案夾，需要在linux環境中執行腳本，生成image.xml其中圖片定義如下
<image id="zte_icon_menu_mail1_normal">zte_icon/zte_icon_menu_mail1_normal.png</image>
頁面布局檔案中直接使用對應的檔案名即可。
需要注意的是圖片的位深度必須為32位，已知24位圖片會造成死機。
language
關注檔案i18n.xls，此檔案中根據語言分了不同的列，如果需要增加詞條，就在對應的語言列當中，增加對應語言的翻譯。第一列為詞條的名稱，在頁面布局檔案中，直接使用該名稱，即可指定使用對應的詞條。
修改完成后保存該檔案。并進入目錄project/source/solution/tools/language 下，執行命令
python i18n_muti.py linux
即可把詞條更新到對應語言的xml檔案中。目前mtc專案只用到了俄語和英語，也就是會自動把詞條更新到Russian.xml和English.xml中。需要注意的是，所有的詞條名稱需要按規范以ZSID開頭。
widget目錄
這個目錄中存放了所有界面的布局檔案，首先需要注意的是檔案widget.xml
檔案中定義了一些全域的配置比如:
<width>1280</width>
<height>720</height>
<bpp>32</bpp>
<osd_trans>#00FF00</osd_trans>
<gui_trans>#FF00FF</gui_trans>
前兩條定義了UI界面的寬和高，所有的界面不能超過此范圍。
第三條規定了界面的色域位數。有16和32兩種選擇，相比較而言，16位顯示效果差于32位，但是界面重繪效率優于32位。且記憶體開銷16位小于32位。目前MTC專案，配置的是32位。根據國芯的優化，回應速度與16位差不多。
第四行和第五行定義了兩個透明色，這兩個透明色就是之前我們在color.xml里重點強調了兩個透明色。
緊接著就是界面布局檔案的定義：
<widget class="window" style="default" name="ZWIN_AUDIO_AND_SUB"/>
如果我們新增加了一個界面，就要按照這個格式，在這個檔案中增加這么一條記錄，把name這一行，修改成指定檔案的名稱。如果沒有做這一步操作，那APP中就找不到對應的布局檔案，也就無法打開對應的界面。
需要注意的是，所有的頁面布局檔案，命名必須按照規范以ZWIN_開頭。工程編譯時，會自動把以ZWIN_開頭的頁面布局檔案，生成一個對應的列舉，方便APP中呼叫
接下來就是頁面布局檔案了。頁面布局檔案，與邏輯控制檔案息息相關。
下面以主選單界面為列，說一下幾個通用的函式。
ZWIM_MAIN_MENU.xml
<property>
<rect>[0,136,1280,584]</rect>
<forecolor>[ZTE_CID_DESKTOP,ZTE_CID_DESKTOP,ZTE_CID_DESKTOP]</forecolor>
<backcolor>[ZTE_CID_DESKTOP,ZTE_CID_DESKTOP,ZTE_CID_DESKTOP]</backcolor>
</property>
頁面的屬性中定義了頁面的位置和大小。rect中的值為x y w h即左、上、寬、高。
forecolor和backcolor定義了界面的前景和背景色，可以看到這里設定的全是透明色。也就是我們之前提到的ZTE_CID_DESKTOP
這里也可以指定設定一張圖片為背景。加上下面一句即可
<back_ground>bg</back_ground>
bg為圖片列舉。
<signal>
<create>zui_main_menu_create</create>
<destroy>zui_main_menu_destroy</destroy>
<show>zui_main_menu_show</show>
<got_focus>zui_main_menu_got_focus</got_focus>
<lost_focus>zui_main_menu_lost_focus</lost_focus>
<keypress>zui_main_menu_keypress</keypress>
</signal>
這里涉及到的就是界面的邏輯控制部分，對應的信號會自動呼叫對應的函式，只需在邏輯控制檔案中實作對應的函式即可。
<create>zui_main_menu_create</create>
create信號函式:在頁面創建的時候會被呼叫。一些初始化的作業可以在此函式當中實作。
<keypress>zui_main_menu_keypress</keypress>
keypress信號函式：顧名思義，這個函式在界面收到按鍵訊息的時候會被自動呼叫的，并且在函式當中根據Event的列舉值可以判斷出收到的是哪一個按鍵訊息。從而根據不同的按鍵來做不同的操作。
<destroy>zui_main_menu_destroy</destroy>
destroy信號函式:在頁面銷毀的時候會被呼叫，一些去初始化的作業，和動態申請記憶體的釋放可以在此函式中實作。需要注意的是，此函式的呼叫順序，比如keypress函式當中呼叫了關閉界面的操作，那么會先執行destroy函式，再執行關閉界面操作之后的陳述句，如果有一些動態申請的記憶體，在destroy函式中已經被釋放掉。在后續的陳述句中再訪問，就可能出現死機。
<got_focus>zui_main_menu_got_focus</got_focus>
<lost_focus>zui_main_menu_lost_focus</lost_focus>
這兩個函式在頁面獲取和丟失焦點的時候，會被自動呼叫。
除了此檔案中用到的這幾個信號，還有幾個信號函式，比較常用的，還有下面這個:
<service>zui_service</service>
此函式接收一些訊息。比如usb插拔，hdmi插拔，ca訊息,本地播放的狀態訊息的等。可以理解為除了按鍵訊息外的其他訊息如果透傳到了這個頁面都會呼叫該函式，并且根據入參的值可以判斷出訊息的型別。
除了界面可以回應這些信號訊息以外，同樣的控制元件也可以回應訊息。控制元件具體可以回應的訊息我們在對應的控制元件中再單獨說一下。其中需要特別注意的是
<keypress>keypress_function</keypress>
這個信號函式。在各個界面上，按鍵訊息會先分發給焦點控制元件。焦點控制元件在收到對應的按鍵訊息后，判斷自身是否需要回應，確定是否需要透傳給其他控制元件，或者選擇不透傳，按鍵訊息在控制元件處理結束劉停止，那界面就不會收到對應的按鍵訊息了。
下面來說一下幾個常用的控制元件：
text image listview
text
<widget class="text" style="default" name="ZWIN_INFOBAR_CURENT_EVENTNAME">
<property>
<rect>[21,109,466,38]</rect>
<forecolor>[ZTE_CID_TXT_N,ZTE_CID_TXT_N,ZTE_CID_TXT_N]</forecolor>
<backcolor>[ZTE_CID_BG_GRAY,ZTE_CID_BG_GRAY,ZTE_CID_BG_GRAY]</backcolor>
<font>ZFID_NOR24</font>
<alignment>left|vcentre</alignment>
<string/>
<enable_cut>true</enable_cut>
<format>static</format>
</property>
</widget>
如上面的例子所示：
name定義了控制元件名稱
rect定義了控制元件的位置和大小
forecolor定義了文字顏色
backcolor定義了文字框體的填充色
font定義了文字字體
alignment定義了文字的對齊方式
string 控制元件顯示內容，可以預置，也可以也可以后續通過函式設定，動態修改控制元件顯示的文字
enable_cut是否知否自動截斷文字并以...結尾
format格式，是否自動換行automatic會自動換行
文字控制元件主要用于一些標題，提示語等場景
image控制元件
<mode>single</mode>
<img>zte_btn_arrow_right_normal</img>
<mode>multiple</mode>
<img/>
<lb_img>zte_volume_bg_bottom_left</lb_img>
<rb_img>zte_volume_bg_bottom_right</rb_img>
<b_img>zte_volume_bg_bottom_mid</b_img>
image控制元件多出特殊屬性：
mode可選擇single或者multiple
代表單張圖片，或者是張圖片組合，組合圖片只支持純色組合,九宮格中間為純顏色填充，其余八張使用資源圖片
image控制元件使用場景為固定的指示圖示，可動態顯示和隱藏
listview控制元件
比較復雜，分開來說下
<property>
<roll_time>60</roll_time>
<enable_roll>true</enable_roll>
<postpone_time>3000</postpone_time>
<format>page</format>
<interval>1</interval>
<select>0</select>
<i18n>true</i18n>
</property>
去掉一些通用的屬性
roll_time 文字滾動時間間隔需與下面兩個屬性一個設定
enable_roll滾動使能。當文字顯示不下時，固定秒數開始滾動
postpone_time即上一條中的固定秒數。這三條的效果就是，當文字顯示不下時，會先用...結尾。并且焦點在這一行超過3秒后，自動開始滾動。滾動的時間間隔為60毫秒。
這三條可以不設定。但是如果設定了，必須同時設定。
format切換風格，page為翻頁。nopage為上下滾動，一條一條的顯示出來。
interval item之間間隔。這里設定為一個像素。間隔顏色顯示的為控制元件背景色。可以用這個屬性實作每一行加橫線的效果。
select默認選擇第幾個選項
i18n是否使用詞條列舉。如果選true那么會根據詞條列舉找到對應的詞條顯示，找不到則顯示實際內容。選否則不使用詞條列舉，直接顯示實際內容。
<signal>
<keypress>zui_usb_file_list_listview_keypress</keypress>
<get_total>zui_usb_file_list_listview_get_total</get_total>
<get_data>zui_usb_file_list_listview_get_data</get_data>
</signal>
listview控制元件和界面一樣，都可以接收按鍵訊息。如果沒有實作keypress這個函式，會呼叫控制元件默認的keypress函式，且所有按鍵都不會透傳出來。
listview比較重要的是
get_total和
get_data這兩個信號函式。控制元件通過這兩個函式來獲取item的個數，和每條item的內容。從而實作listview資料的更新。get_data在填充每條item資料時都會被呼叫一次。且每次呼叫時的入參index會變化，index的值就是當前更新的是哪一個item的資料。
<children>
<widget class="header" style="default" name="ZWIN_USB_FILE_LISTVIEW_HEADER">
<property>
...
<state>hide</state>
...
<colum_number>4</colum_number>
</property>
<children>
<widget class="text" style="default"
...
<format>fix_r2l</format>
</property>
</widget>
...
</children>
</widget>
以上的例子是listview的header子控制元件。描述了listview的一些屬性：
<state>hide</state>
header是否顯示
<colum_number>4</colum_number
listview的列數
<format>fix_r2l</format>
當前列結尾是否要添加豎線分隔
<widget class="scrollbar" style="default" name=""
listview右側的滾動條。來指示當前listview滾動的進度
<widget class="listitem" style="default" name="…">
<property>
<forecolor>…</forecolor>
<backcolor>…</backcolor>
<alignment>…</alignment>
</property>
</widget>
最后就是每行item的屬性設定，主要屬性就是顏色和內容的居中方式
需要注意的是listview控制元件的每個item的選中非選中顏色支持兩種設定當時，純色填充或者圖片填充。如果選擇圖片填充，那顏色填充則會失效。示例：
<widget class="listitem" style="default" name="ZWIN_USB_FILE_LIST_LISTITEM6">
<property>
<rect>[0,0,60,30]</rect>
<forecolor>…</forecolor>
<backcolor>…</backcolor>
<unfocus_img>
[zte_list_bg_52_b_l_n,zte_list_bg_52_b_m_n,zte_list_bg_52_b_m_n]
</unfocus_img>
<focus_img>…</focus_img>
<disable_img>…</disable_img>
</property>
</widget>
此時forecolor和backcolor就不會再生效了。
另外listview的列支持text和image兩種元素。header定義列屬性時，描述的都是text，這個不需要關心。如果需要設定為image，直接在getdata函式中給對應列的image指標賦圖片的列舉即可。
2月3號MTC軟體開發回顧
首先是sdk包中代碼層級目錄：
app目錄：project/source/solution(其中包括所有ui上的代碼，以及ui上呼叫到的功能函式封裝的介面，其中比較重要的子目錄：app:ui控制代碼都在這一塊，每個至少界面對應一個檔案，都以"zui_"開頭
theme:資源目錄，其中包含頁面布局檔案，圖片資源檔案，詞條資源檔案，顏色列舉定義，字體列舉定義等
module:對部分模塊功能進行封裝)
Gxbus目錄: project/source/platform/gxbus(國芯中間件代碼，包括國芯ui控制元件實作以及各個業務邏輯的實作，這部分我們改動的比較少，大部分由國芯支持修改，以補丁的形式更新給我們)
sdk編譯以及除錯：
1、進入project目錄
配置環境變數
source ./setup.sh
2、整個工程編譯：
在project目錄下
make clean;make
3、單獨編譯app:
在project目錄下
make solution_clean;make solution
4、編譯gxbus
project/source/platform/gxbus$ ./build arm linux
5、編譯產物
project\output\flash_images
包括燒寫和升級鏡像
project\source\solution\output\out.elf
app可執行檔案。配合theme資源檔案，可實作usb除錯。
usb除錯應用:
修改project\source\buildroot\template\public\home\root\bin目錄下的solution_callback檔案注釋掉最后一行/dvb/out.elf &
注釋掉這一行的效果是機頂盒運行到rootbox后不會自動執行app。
此時掛載u盤到機頂盒app目錄/tmp/下。
mount /dev/sda1 /tmp/
將資源檔案拷貝到u盤中
cp -a /dvb/theme /tmp/
拷貝完資源檔案后將編譯生成的out.elf檔案放到u盤根目錄并將u盤掛載到app作業目錄/dvb/目錄下
執行app，從即可從u盤中啟動應用
cd /dvb
./out.elf
MTC遙控器兼容：
修改project/source/solution/projects/對應的dvbc目錄下的keymap.xml檔案，mtc鍵值，取驅動按鍵值的第1和第3個位元組。組成一個鍵碼。修改keymap.xml對應按鍵的鍵碼。替換到u盤theme目錄下即可。
MTC字庫替換:
MTC支持多字庫。具體操作：將字庫檔案放到theme的font目錄下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/109348.html
標籤：非技術區
下一篇：這里是一個專科大一學生的迷茫