android開發我的新浪微部落格戶端-載入頁面UI篇(1.1),androidui
本軟體設定使用者第一個接觸到的功能就是頁面載入等待功能,這個功能對使用者來說就是一個持續1、2秒鐘的等待頁面,在使用者等待的同時程式做一些必要的檢查以及資料準備工作,載入頁面分為UI篇和功能篇,從表及裡首先是UI的實現,一個軟體除功能之外還得有一個光鮮的外表也是非常重要的,儘管本人設計水平一般但是還是親自操刀用ps先做了一下設計如下:
<ignore_js_op> 一、接下來的任務就是在android中實現這樣的效果顯示,從這個效果的設計分別把圖片分成背景、版本號碼部分、軟體名稱和表徵圖、作者名稱和blog四個部分,按照這樣的思路把分別產生4張png的圖片,背景部分考慮實現橫屏和豎屏切換額外添加一張橫屏背景圖,然後建立android工程,我這裡的名稱為MySinaWeibo,android版本勾選2.2,並且建立名為MainActivity的Activity作為整個軟體的起始頁面,然後把上面的這些圖片儲存到項目的res/drawable-mdpi檔案夾下,關於res目錄下的drawable-mdpi、drawable-ldpi,、drawable-hdpi三個檔案夾的區別,mdpi 裡面主要放中等解析度的圖片,如HVGA (320x480)。ldpi裡面主要放低解析度的圖片,如QVGA (240x320)。hdpi裡面主要放高解析度的圖片,如WVGA (480x800),FWVGA (480x854)。android系統會根據機器的解析度來分別到這幾個檔案夾裡面去找對應的圖片,在開發程式時為了相容不同平台不同螢幕,建議各自檔案夾根據需求均存放不同版本圖片,我這裡就不進行這麼多的考慮了。 二、完成圖片資源的準備後接下就是layout檔案的編寫, 在res/layout檔案夾下建立main.xml檔案,這個layout採用LinearLayout控制項作為頂層控制項,然後用ImageView控制項分別實現版本號碼圖片頂部靠左對齊顯示、軟體名稱和表徵圖圖片置中對齊、作者名稱和blog圖片底部靠右對齊。注意在版本號碼圖片顯示ImageView控制項下面添加一個RelativeLayout控制項作為軟體名稱和表徵圖圖片ImageVIew和作者名稱和blog圖片ImageView的父控制項用來控制置中對齊已經底部對齊的實現,具體代碼如下:複製代碼三、在ec開啟名為MainActivity的Activity原始碼檔案進行編輯,onCreate部分代碼如下:複製代碼然後運行項目可以在模擬器中顯示,上面的幾個圖片都按照設計的位置和效果進行顯示只是整個頁面的背景還是黑色的,接下來就是背景部分的顯示實現,由於為了實現橫豎屏切換顯示,背景圖的顯示採用代碼進行控制顯示,首先用如下方法擷取當前手機是橫屏還是豎屏:複製代碼然後編寫一個名為AutoBackground的公用方法用來實現螢幕背景的自動切換,後面的幾乎每一個功能頁面都需要用到這個方法:複製程式碼完成上述兩方法後在 MainActivity的onCreate方法中調用AutoBackground方法進行螢幕自動切換:複製代碼
到此完成了載入頁面的UI部分的實現,測試回合模擬器中查看效果,基本上跟最上面的設計相符,測試如下: <ignore_js_op>
<ignore_js_op>
問啊-定製化IT教育平台,牛人一對一服務,有問必答,開發編程社交頭條 官方網站:www.wenaaa.com
QQ群290551701 聚集很多互連網精英,技術總監,架構師,專案經理!開源技術研究,歡迎業內人士,大牛及新手有志於從事IT行業人員進入!