本軟體設定用戶第一個接觸到的功能就是頁面載入等待功能,這個功能對使用者來說就是一個持續1、2秒鐘的等待頁面,在用戶等待的同時程式做一些必要的檢查以及數據準備工作,載入頁面分為UI篇和功能篇,從表及里首先是UI的實現,一個軟體除功能之外還得有一個光鮮的外表也是非常重要的,儘管本人設計水平一般但是還是親
本軟體設定用戶第一個接觸到的功能就是頁面載入等待功能,這個功能對使用者來說就是一個持續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的父控制項用來控制居中對齊已經底部對齊的實現,具體代碼如下:- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/layout"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/ver"
- android:layout_marginTop="15dip"
- android:layout_marginLeft="15dip">
- </ImageView>
- <RelativeLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/logo"
- android:layout_centerInParent="true">
- </ImageView>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/dev"
- android:layout_alignParentBottom="true"
- android:layout_alignParentRight="true"
- android:layout_marginRight="5dip"
- android:layout_marginBottom="35dip">
- </ImageView>
- </RelativeLayout>
- </LinearLayout>
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- }
- //獲取屏幕方向
- public static int ScreenOrient(Activity activity)
- {
- int orient = activity.getRequestedOrientation();
- if(orient != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE && orient != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
- //寬>高為橫屏,反正為豎屏
- WindowManager windowManager = activity.getWindowManager();
- Display display = windowManager.getDefaultDisplay();
- int screenWidth = display.getWidth();
- int screenHeight = display.getHeight();
- orient = screenWidth < screenHeight ? ActivityInfo.SCREEN_ORIENTATION_PORTRAIT : ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
- }
- return orient;
- }
- public static void AutoBackground(Activity activity,View view,int Background_v, int Background_h)
- {
- int orient=ScreenOrient(activity);
- if (orient == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) { //縱向
- view.setBackgroundResource(Background_v);
- }else{ //橫向
- view.setBackgroundResource(Background_h);
- }
- }
- LinearLayout layout=(LinearLayout)findViewById(R.id.layout);
- //背景自動適應
- AndroidHelper.AutoBackground(this, layout, R.drawable.bg_v, R.drawable.bg_h);
到此完成了載入頁面的UI部分的實現,測試運行模擬器中查看效果,基本上跟最上面的設計效果圖相符,測試效果圖如下: <ignore_js_op>
<ignore_js_op>
問啊-定製化IT教育平臺,牛人一對一服務,有問必答,開發編程社交頭條 官方網站:www.wenaaa.com
QQ群290551701 聚集很多互聯網精英,技術總監,架構師,項目經理!開源技術研究,歡迎業內人士,大牛及新手有志於從事IT行業人員進入!