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

2018-08-02 18:05 更新

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

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

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

用多視窗布局（Multi-pane Layout）組合界面

多視窗布局（Multi-pane Layout）設(shè)計(jì)
設(shè)計(jì)指南請(qǐng)閱讀 Android 設(shè)計(jì)部分的多視窗布局。

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

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

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

下面圖例示范了當(dāng)把 UI 設(shè)計(jì)遷移到更大的布局時(shí)出現(xiàn)的一些問題，并且展示了如何用多視窗布局來處理這些問題：

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

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

實(shí)現(xiàn)提醒： 當(dāng)決定好了區(qū)分使用單視窗布局和多視窗布局的屏幕大小基準(zhǔn)線后，你就可以為不同屏幕大小區(qū)間（例如 large/xlarge）或最低屏幕寬度（例如 sw600dp）提供不同的布局了。
實(shí)現(xiàn)提醒： 單一界面被實(shí)現(xiàn)為 Activity 的子類, 單獨(dú)的內(nèi)容視窗則可實(shí)現(xiàn)為 Fragment 的子類。這樣最大化了跨越不同結(jié)構(gòu)因素和不同屏幕內(nèi)容的代碼復(fù)用。

為不同平板方向設(shè)計(jì)

雖然現(xiàn)在我們還沒有開始在我們的屏幕上排布 UI 元素，但現(xiàn)在很是時(shí)候來考慮下我們的多視窗界面如何適配不同的設(shè)備方向了。多視窗布局在橫屏?xí)r表現(xiàn)的非常棒，因?yàn)橛写罅靠捎玫臋M向空間。然而，在豎屏?xí)r，你的橫向空間被限制了，所以你需要為這個(gè)方向設(shè)計(jì)一個(gè)單獨(dú)的布局。

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

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

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

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

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