android開發我的新浪微博客戶端-載入頁面UI篇(1.1)

来源:http://www.cnblogs.com/8hao/archive/2016/03/02/5235678.html

本軟體設定用戶第一個接觸到的功能就是頁面載入等待功能,這個功能對使用者來說就是一個持續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的父控制項用來控制居中對齊已經底部對齊的實現,具體代碼如下:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/layout"
  4.     android:orientation="vertical"
  5.     android:layout_width="fill_parent"
  6.     android:layout_height="fill_parent">
  7.     <ImageView
  8.     android:layout_width="wrap_content"
  9.     android:layout_height="wrap_content"
  10.     android:src="@drawable/ver"
  11.     android:layout_marginTop="15dip"
  12.     android:layout_marginLeft="15dip">
  13.     </ImageView>
  14.     <RelativeLayout
  15.     android:layout_width="fill_parent"
  16.     android:layout_height="fill_parent">
  17.     <ImageView
  18.     android:layout_width="wrap_content"
  19.     android:layout_height="wrap_content"
  20.     android:src="@drawable/logo"
  21.     android:layout_centerInParent="true">
  22.     </ImageView>
  23.     
  24.     <ImageView
  25.     android:layout_width="wrap_content"
  26.     android:layout_height="wrap_content"
  27.     android:src="@drawable/dev"
  28.     android:layout_alignParentBottom="true"
  29.     android:layout_alignParentRight="true"
  30.     android:layout_marginRight="5dip"
  31.     android:layout_marginBottom="35dip">
  32.     </ImageView>
  33.     </RelativeLayout>
  34. </LinearLayout>
複製代碼
三、在ec打開名為MainActivity的Activity源代碼文件進行編輯,onCreate部分代碼如下:
  1. public void onCreate(Bundle savedInstanceState) {
  2.         super.onCreate(savedInstanceState);
  3.         setContentView(R.layout.main);
  4. }
複製代碼
然後運行項目可以在模擬器中顯示,上面的幾個圖片都按照設計的位置和效果進行顯示只是整個頁面的背景還是黑色的,接下來就是背景部分的顯示實現,由於為了實現橫豎屏切換顯示,背景圖的顯示採用代碼進行控制顯示,首先用如下方法獲取當前手機是橫屏還是豎屏:
  1. //獲取屏幕方向
  2. public static int ScreenOrient(Activity activity)
  3.     {
  4.         int orient = activity.getRequestedOrientation(); 
  5.         if(orient != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE && orient != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
  6.             //寬>高為橫屏,反正為豎屏  
  7.              WindowManager windowManager = activity.getWindowManager();  
  8.              Display display = windowManager.getDefaultDisplay();  
  9.              int screenWidth  = display.getWidth();  
  10.              int screenHeight = display.getHeight();  
  11.              orient = screenWidth < screenHeight ? ActivityInfo.SCREEN_ORIENTATION_PORTRAIT : ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
  12.         }
  13.         return orient;
  14.     }
複製代碼
然後編寫一個名為AutoBackground的公共方法用來實現屏幕背景的自動切換,後面的幾乎每一個功能頁面都需要用到這個方法:
  1. public static void AutoBackground(Activity activity,View view,int Background_v, int Background_h)
  2.     {
  3.         int orient=ScreenOrient(activity);
  4.         if (orient == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) { //縱向 
  5.             view.setBackgroundResource(Background_v);
  6.         }else{ //橫向
  7.             view.setBackgroundResource(Background_h);
  8.         }  
  9.     }
複製代碼
完成上述兩方法後在 MainActivity的onCreate方法中調用AutoBackground方法進行屏幕自動切換:
  1. LinearLayout layout=(LinearLayout)findViewById(R.id.layout);
  2. //背景自動適應
  3. 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行業人員進入!


您的分享是我們最大的動力!

更多相關文章
  • 按照之前架構的定義,做好架構首先需要做的就是識別出需要解決的問題。一般來說,如果把真正的問題找到,那麼問題就已經解決了80%了。這個能力基本上就決定了架構師的水平。 那麼面對問題有哪些困難呢? 我們先看一則笑話。女主人公:老公,把袋子里的土豆切一半下鍋。結果老公是把袋子里的每個土豆都削了一半,然後下
  • 憑什麼要用面向對象來編程,不用是否可以?今天我們通過講這麼幾個設計原則來說明為什麼要用面向對象,它的好處在哪裡。 一、單一職責原則: 全稱:“Single-Responsibility Principle” 面向對象設計 說明:就一個類而言,應該只專註於做一件事和僅有一個引起它變化的原因。所謂職責,
  • 獲取【下載地址】 QQ: 313596790 【免費支持更新】支持三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體【新錄針對本系統的視頻教程,手把手教開發一個模塊,快速掌握本系統】A 代碼生成器(開發利器); 增刪改查的處理類,service層,mybatis
  • 定義: 單例模式:確保某一個類只有一個實例,而且自行實例化並向整個系統提供這個實例。 使用場景: 確保某一個類有且只有一個對象的場景,避免產生多個對象消耗過多的資源,或者某種類型的對象只應該有且只有一個。 UML類圖: 單例模式幾個關鍵點: 1、構造函數不對外開放,一般為private。 2、通過一
  • 第二章:商場促銷——策略模式 策略模式的定義: 策略模式是一種定義一系列演算法的方法,從概念上來看,所有這些演算法完成的都是相同的工作,知識實現不同,他可以以相同的方式調用所有的演算法,減少了各類演算法類與使用演算法類之間的耦合 策略模式的優點 : 1. 策略模式的Strategy 類層次為Context定義
  • Atitit.biz業務系統 面向框架 面向模式---------數據映射imp 1.1. 面向變數 面向過程 面向對象 面向組件 面向框架 面向服務 面向模式1 1.2. 第2章 架構模式 18 1 1.3. 第3章 設計模式 143 2 1.4. 面向對象中的面向變數全局變數問題2 1.5. 面
  • Atitit.wrmi web rmi框架新特性 1. V1d 新特性1 1.1. 增加了精確參數1 1.2. 增加了req參數,命名參數模式。。1 1.3. 增加了globale 傳遞隱含參數req resp等1 1.4. Cs bs兩個版本的實現1 2. V2 新特性2 2.1. $req對象預
  • 協議 協議只有方法的聲明(類似於其他編程語言的介面) 協議相當於大家都所遵循的 關鍵字 @protocol 協議名 <所遵循的協議> 預設NSObject @end @protocollamcoProtocol <NSObject>@required //必須實現的方法 -(void)study;@
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...