鍍金池/ 教程/ Android/ 為多種大小的屏幕進行規(guī)劃
檢測常用的手勢
優(yōu)化layout的層級
用戶輸入
管理應用的內(nèi)存
聯(lián)系人信息
開發(fā)輔助程序
Android多媒體
添加語音功能
顯示位置地址
提供向下與橫向?qū)Ш?/span>
支持游戲控制器
訪問可穿戴數(shù)據(jù)層
處理多點觸控手勢
全屏沉浸式應用
為多線程創(chuàng)建管理器
數(shù)據(jù)保存
Intent的發(fā)送
更新Notification
優(yōu)化下載以高效地訪問網(wǎng)絡
打印
打包可穿戴應用
接收從其他App傳送來的數(shù)據(jù)
發(fā)送與接收消息
建立靈活動態(tài)的UI
處理鍵盤輸入
Building a Work Policy Controller
建立測試環(huán)境
創(chuàng)建表盤
分享文件
顯示Notification進度
實現(xiàn)自適應UI流(Flows)
使用設備管理策略增強安全性
使用能感知版本的組件
執(zhí)行網(wǎng)絡操作
建立文件分享
添加移動
更新你的Security Provider來對抗SSL漏洞利用
支持鍵盤導航
創(chuàng)建和監(jiān)視地理圍欄
發(fā)送并同步數(shù)據(jù)
使用BigView樣式
無線連接設備
提供向上導航與歷史導航
最小化定期更新造成的影響
實現(xiàn)向下的導航
支持不同的屏幕大小
Android 可穿戴應用
添加動畫
顯示聯(lián)系人頭像
使用OpenGL ES顯示圖像
處理輸入法可見性
分享文件
保持設備喚醒
淡化系統(tǒng)Bar
使用NFC分享文件
保存到Preference
Android聯(lián)系人信息與位置信息
創(chuàng)建標準的網(wǎng)絡請求
使用Drawables
管理Bitmap的內(nèi)存使用
管理Activity的生命周期
按需加載視圖
傳輸資源
為可穿戴設備創(chuàng)建自定義UI
在一個線程中執(zhí)行一段特定的代碼
性能優(yōu)化
隱藏導航欄
創(chuàng)建目錄瀏覽器
為多種大小的屏幕進行規(guī)劃
View間漸變
使用觸摸手勢
高效加載大圖
使用CursorLoader在后臺加載數(shù)據(jù)
創(chuàng)建抽屜式導航(navigation drawer)
管理音頻焦點
創(chuàng)建后臺服務
創(chuàng)建功能測試
創(chuàng)建使用Material Design的應用
停止與重啟Activity
添加一個簡便的分享功能
啟動Activity時保留導航
TV應用清單
創(chuàng)建向后兼容的UI
?# 優(yōu)化自定義View
創(chuàng)建單元測試
在UI上顯示Bitmap
建立OpenGL ES的環(huán)境
構建表盤服務
JNI Tips
建立搜索界面
實現(xiàn)自定義View的繪制
使用HTTPS與SSL
按需操控BroadcastReceiver
分享簡單的數(shù)據(jù)
繪制形狀
Android位置信息
創(chuàng)建并運行可穿戴應用
執(zhí)行 Sync Adpater
獲取最后可知位置
創(chuàng)建 Android 項目
實現(xiàn)高效的導航
退出全屏的Activity
創(chuàng)建Card
兼容音頻輸出設備
同步數(shù)據(jù)單元
傳輸數(shù)據(jù)時避免消耗大量電量
保存到文件
緩存Bitmap
提供配置 Activity
調(diào)度重復的鬧鐘
實現(xiàn)輔助功能
重復的下載是冗余的
隱藏狀態(tài)欄
實現(xiàn)自定義的網(wǎng)絡請求
規(guī)劃界面和他們之間的關系
使用Sync Adapter傳輸數(shù)據(jù)
TV應用內(nèi)搜索
響應觸摸事件
使用Google Cloud Messaging(已廢棄)
控制相機
Android網(wǎng)絡連接與云服務
請求分享一個文件
處理TV硬件
響應UI可見性的變化
使用網(wǎng)絡服務發(fā)現(xiàn)
指定輸入法類型
優(yōu)化電池壽命
創(chuàng)建TV應用
獲取聯(lián)系人列表
拖拽與縮放
啟動與停止線程池中的線程
創(chuàng)建 Sync Adpater
使用 WiFi P2P 服務發(fā)現(xiàn)
開始使用Material Design
代理至新的APIs
使用include標簽重用layouts
使得View可交互
高效顯示Bitmap
創(chuàng)建企業(yè)級應用
Fragments之間的交互
創(chuàng)建與執(zhí)行測試用例
綜合:設計我們的樣例 App
繪制表盤
建立簡單的用戶界面
自定義動畫
開發(fā)輔助服務
避免出現(xiàn)程序無響應ANR(Keeping Your App Responsive)
使用ViewPager實現(xiàn)屏幕滑動
設計高效的導航
Android分享操作(Building Apps with Content Sharing)
提供向后的導航
保持向下兼容
創(chuàng)建TV播放應用
縮放View
使用 WiFi 建立 P2P 連接
Android后臺任務
連接到網(wǎng)絡
為 Notification 添加頁面
使TV應用是可被搜索的
添加Action Bar
使用Material的主題
啟動另一個Activity
顯示正在播放卡片
適配不同的系統(tǒng)版本
輕松錄制視頻
創(chuàng)建可穿戴的應用
創(chuàng)建自定義的布局
重新創(chuàng)建Activity
使用CursorLoader執(zhí)行查詢?nèi)蝿?/span>
使用舊的APIs實現(xiàn)新API的效果
使用備份API
安全要點
Android入門基礎:從這里開始
保存并搜索數(shù)據(jù)
根據(jù)網(wǎng)絡連接類型來調(diào)整下載模式
使用Tabs創(chuàng)建Swipe視圖
SMP(Symmetric Multi-Processor) Primer for Android
解析 XML 數(shù)據(jù)
使用 Volley 傳輸網(wǎng)絡數(shù)據(jù)
建立ActionBar
Android交互設計
使用Intent修改聯(lián)系人信息
增加搜索功能
輕松拍攝照片
定義形狀
測試你的Activity
在 Notifcation 中接收語音輸入
與其他應用的交互
管理系統(tǒng)UI
追蹤手勢移動
Android界面設計
執(zhí)行 Android 程序
顯示確認界面
創(chuàng)建Lists與Cards
打印HTML文檔
創(chuàng)建TV應用
為多屏幕設計
定義Shadows與Clipping視圖
使用Fragment建立動態(tài)UI
接收Activity返回的結果
布局變更動畫
定位常見的問題
自定義ActionBar的風格
定義Layouts
發(fā)送簡單的網(wǎng)絡請求
啟動與銷毀Activity
與UI線程通信
非UI線程處理Bitmap
創(chuàng)建TV布局
提升Layout的性能
報告任務執(zhí)行狀態(tài)
判斷并監(jiān)測網(wǎng)絡連接狀態(tài)
兼容不同的設備
處理按鍵動作
優(yōu)化性能和電池使用時間
給其他App發(fā)送簡單的數(shù)據(jù)
Implementing App Restrictions
向后臺服務發(fā)送任務請求
展示Card翻轉(zhuǎn)動畫
管理ViewGroup中的觸摸事件
兼容不同的屏幕密度
通過藍牙進行調(diào)試
為可穿戴設備創(chuàng)建Notification
控制音量與音頻播放
獲取聯(lián)系人詳情
在表盤上顯示信息
提供向上的導航
滾動手勢動畫
幫助用戶在TV上找到內(nèi)容
創(chuàng)建TV導航
為索引指定App內(nèi)容
ActionBar的覆蓋疊加
Android Wear 上的位置檢測
保護安全與隱私的最佳策略
Ensuring Compatibility with Managed Profiles
解決云同步的保存沖突
獲取位置更新
創(chuàng)建List
測試程序
管理網(wǎng)絡的使用情況
為App內(nèi)容開啟深度鏈接
推薦TV內(nèi)容
建立一個Notification
管理音頻播放
設計表盤
拍照
處理控制器輸入動作
判斷并監(jiān)測設備的底座狀態(tài)與類型
處理查詢的結果
保存到數(shù)據(jù)庫
支持多個游戲控制器
創(chuàng)建 Stub Content Provider
使得ListView滑動順暢
處理數(shù)據(jù)層的事件
創(chuàng)建TV應用的第一步
使得你的App內(nèi)容可被Google搜索
將 Notification 放成一疊
創(chuàng)建 Stub 授權器
暫停與恢復Activity
管理設備的喚醒狀態(tài)
Android圖像與動畫
打印照片
云同步
創(chuàng)建TV直播應用
為Notification賦加可穿戴特性
提供一個Card視圖
建立請求隊列(RequestQueue)
適配不同的語言
創(chuàng)建詳情頁
測試UI組件
接收其他設備的文件
創(chuàng)建自定義View
建立第一個App
創(chuàng)建2D Picker
監(jiān)測電池的電量與充電狀態(tài)
打印自定義文檔
抽象出新的APIs
通知提示用戶
獲取文件信息
運用投影與相機視角
在IntentService中執(zhí)行后臺任務
多線程操作
創(chuàng)建一個Fragment
添加Action按鈕
在不同的 Android 系統(tǒng)版本支持控制器
維護兼容性
發(fā)送文件給其他設備
創(chuàng)建TV游戲應用
創(chuàng)建自定義的View類
代碼性能優(yōu)化建議
Intent過濾
適配不同的屏幕

為多種大小的屏幕進行規(guī)劃

編寫:XizhiXu - 原文:http://developer.android.com/training/design-navigation/multiple-sizes.html

雖然上節(jié)中的界面完備圖在手持設備和相似大小設備上可行,但并不是和某個設備因素綁死的。Android應用需要適配一大把不同類型的設備,從3"的手機到10"的平板到42"的電視。這節(jié)課中我們探討把完備圖中不同界面組合起來的策略和原因。

Note: 為電視設計應用程序還需要注意其他的因素,包括互動方式(就是說,它沒觸屏),長距離情況下文本的可讀性,還有其他的。雖然這個討論在本課范疇之外,你仍然可以在 Google TV 文檔的設計模式中找到有關為電視設計的信息。

用多視窗布局(Multi-pane Layout)組合界面

多視窗布局(Multi-pane Layout)設計

設計指南請閱讀 Android 設計部分的多視窗布局

3 到 4英寸的屏幕通常只適合每次展示單個縱向內(nèi)容視窗,一個列表,或某列表項的具體信息,等等。所以在這些設備上,界面通常對映于信息層次上的某一級(類別 → 列表 → 詳情)。

更大的諸如平板和電視上的屏幕通常會有更多的可用界面空間,并且他們能夠展示多個內(nèi)容視窗。橫屏中,視窗從左到右以細節(jié)程度遞增的順序排列。因常年使用桌面應用和網(wǎng)站,用戶變得特別適應大屏上的多視窗。很多桌面應用和網(wǎng)站提供左側導航視窗,或者使用總/分(master/detail)兩個視窗布局。

為了符合這些用戶期望,通常很有必要為平板提供多個信息視窗來避免留下過多空白或無意間引入尷尬的交互,比如 10 x 0.5" 按鈕。

下面圖例示范了當把 UI 設計遷移到更大的布局時出現(xiàn)的一些問題,并且展示了如何用多視窗布局來處理這些問題:

http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-bad.png" alt="app-navigation-multiple-sizes-multipane-bad" />

圖 1. 大橫屏使用單視窗導致尷尬的空白和過長行。

http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-good.png" alt="app-navigation-multiple-sizes-multipane-good" />

圖 2. 橫屏多視窗布局產(chǎn)生更好的視覺平衡,更大的效用和可讀性。

實現(xiàn)提醒: 當決定好了區(qū)分使用單視窗布局和多視窗布局的屏幕大小基準線后,你就可以為不同屏幕大小區(qū)間(例如 large/xlarge)或最低屏幕寬度(例如 sw600dp)提供不同的布局了。

實現(xiàn)提醒: 單一界面被實現(xiàn)為 Activity 的子類, 單獨的內(nèi)容視窗則可實現(xiàn)為 Fragment 的子類。這樣最大化了跨越不同結構因素和不同屏幕內(nèi)容的代碼復用。

為不同平板方向設計

雖然現(xiàn)在我們還沒有開始在我們的屏幕上排布 UI 元素,但現(xiàn)在很是時候來考慮下我們的多視窗界面如何適配不同的設備方向了。多視窗布局在橫屏時表現(xiàn)的非常棒,因為有大量可用的橫向空間。然而,在豎屏時,你的橫向空間被限制了,所以你需要為這個方向設計一個單獨的布局。

下面是一些創(chuàng)建豎屏布局的常見策略:

  • 伸縮 http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-strategy-stretch.png" alt="app-navigation-multiple-sizes-strategy-stretch" />

最直接的策略就是簡單地伸縮每個視窗的寬度來最好地在豎屏下的呈現(xiàn)內(nèi)容。視窗可設置固定寬度或占可用界面寬度的一定比例。

  • 展開/折疊 http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-strategy-collapse.png" alt="app-navigation-multiple-sizes-strategy-collapse" />

伸縮策略的一個變種就是在豎屏中折疊左側視窗的內(nèi)容。當遇到總/分(master/detail)視窗中左側(master)視窗包含易折疊列表項時,這個策略很有效。以一個實時聊天應用為例。橫屏中,左側列表可能包含聊天聯(lián)系人的照片,姓名和在線狀態(tài)。在豎屏中,橫向空間可以將通過隱藏聯(lián)系人姓名而且只顯示照片和在線狀態(tài)的提示圖標的方式來折疊。也可以選擇性的提供展開控制,這種控制允許用戶展開左側視窗或反向操作。

  • 顯示/隱藏 http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-strategy-show-hide.png" alt="app-navigation-multiple-sizes-strategy-show-hide" />

這個方案中,左側視窗在豎屏模式下完全隱藏。然而,為了保證你界面的功能等價性,左側視窗必須功能可見(比如,添一個按鈕)。通常適合在 Action Bar 使用 Up 按鈕(詳見Android設計的模式文檔)來展示左側視窗,這將在之后討論。

  • 堆疊 http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-strategy-stack.png" alt="app-navigation-multiple-sizes-strategy-stack" />

最后的策略就是在豎屏時垂直地堆放你一般橫向排布的視窗。當你的視窗不是簡單的文本列表,或者當有多個內(nèi)容模塊與基本內(nèi)容視窗同時運行時,這個策略很奏效。但是當心使用這個策略時出現(xiàn)上面提到的尷尬的空白問題。

組合界面圖中的界面

既然現(xiàn)在我們能夠通過提供大屏設備上的多視窗布局來組合單獨的界面,那么就讓我們把這個技術應用到我們上節(jié)課界面完備圖上吧,這樣我們應用的界面層次在這類設備上變得更具體了:

http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-screen-map.png" alt="app-navigation-multiple-sizes-multipane-screen-map" />

Figure 3. 更新后新聞應用例子的界面完備Map

下節(jié)課我們將討論 向下橫向 導航,并且探討更多方法來組合界面使能最大化應用 UI 的直觀性和內(nèi)容獲取速度。

下一節(jié):提供向下和橫向?qū)Ш?/a>