偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Android UI設(shè)計(jì)模板Dashboard及Action Bar的應(yīng)用

原創(chuàng)
作者：核子可樂譯
移動開發(fā) Android
前面我們已經(jīng)介紹了Dashboard，本文我們將介紹Action bar及Dashboard能在大多數(shù)Android程序項(xiàng)目中為用戶提供界面設(shè)計(jì)圖案。

【51CTO譯文】Action bar及Dashboard能在大多數(shù)Android程序項(xiàng)目中為用戶提供界面設(shè)計(jì)圖案。

Dashboard項(xiàng)目組已經(jīng)開始著手于一個項(xiàng)目，以幫助開發(fā)者們更快地使他們的項(xiàng)目步入軌道。這一項(xiàng)目的目的是將可在不同UI模板上使用的代碼收集并整合起來。我以Google IO會議上的Android應(yīng)用程序?yàn)榛A(chǔ)，去掉冗余的代碼，以使這些精簡過的好用的部分更易于理解。

我在做的項(xiàng)目可以在下面的谷歌代碼網(wǎng)站中找到.

目前該項(xiàng)目只進(jìn)行一項(xiàng)工作，其成果將同時(shí)作用于Dashboard及Action bar。

實(shí)施指南

實(shí)施指南

讓所有的Android應(yīng)用程序都能同時(shí)支持縱向及橫向顯示模式，這一點(diǎn)非常重要。盡管許多布局方案在編輯正確的前提下，都可以自動實(shí)現(xiàn)對縱向、橫向顯示模式的支持，但Dashboard所制作的布局還做不到這一點(diǎn)。為了保證這兩種模式下都具備充足的可用空間，我們需要編寫兩個單獨(dú)的布局XMLs。只要我們將相同的布局XML文件放入正確的文件夾并提交給Android系統(tǒng)，系統(tǒng)框架將在運(yùn)行時(shí)自動選擇合適的顯示方式。

支持不同方向下的不同布局的構(gòu)架范例 

支持不同方向下的不同布局的構(gòu)架范例

縱向布局XML代碼

  1. dashboard.xml:  
  2.  
  3. <?xml version="1.0" encoding="utf-8"?> 
  4. <!--  
  5.     Copyright 2010 Google Inc.  
  6.     Licensed under the Apache License, Version 2.0 (the "License");  
  7.     you may not use this file except in compliance with the License.  
  8.     You may obtain a copy of the License at  
  9.          http://www.apache.org/licenses/LICENSE-2.0  
  10.     Unless required by applicable law or agreed to in writing, software  
  11.     distributed under the License is distributed on an "AS IS" BASIS,  
  12.     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
  13.     See the License for the specific language governing permissions and  
  14.     limitations under the License.  
  15. --> 
  16.  
  17. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  18.     android:id="@+id/home_root" 
  19.     android:orientation="vertical" 
  20.     android:layout_width="fill_parent" 
  21.     android:layout_height="fill_parent"> 
  22.  
  23.     <LinearLayout style="@style/TitleBar"> 
  24.         <ImageView style="@style/TitleBarLogo" 
  25.             android:contentDescription="@string/description_logo" 
  26.             android:src="@drawable/title_logo" /> 
  27.  
  28.         <View style="@style/TitleBarSpring" /> 
  29.  
  30.         <ImageView style="@style/TitleBarSeparator" /> 
  31.         <ImageButton style="@style/TitleBarAction" 
  32.             android:id="@+id/btn_title_refresh" 
  33.             android:contentDescription="@string/description_refresh" 
  34.             android:src="@drawable/ic_title_refresh" 
  35.             android:onClick="onActionBarButtonClick" /> 
  36.         <ProgressBar style="@style/TitleBarProgressIndicator" 
  37.             android:id="@+id/title_refresh_progress" 
  38.             android:visibility="gone" /> 
  39.  
  40.         <ImageView style="@style/TitleBarSeparator" /> 
  41.         <ImageButton style="@style/TitleBarAction" 
  42.             android:contentDescription="@string/description_search" 
  43.             android:src="@drawable/ic_title_search" 
  44.             android:onClick="onActionBarButtonClick" /> 
  45.     </LinearLayout> 
  46.  
  47.     <LinearLayout 
  48.         android:orientation="vertical" 
  49.         android:layout_width="fill_parent" 
  50.         android:layout_height="wrap_content" 
  51.         android:layout_weight="1" 
  52.         android:padding="6dip"> 
  53.         <LinearLayout 
  54.             android:orientation="horizontal" 
  55.             android:layout_width="fill_parent" 
  56.             android:layout_height="wrap_content" 
  57.             android:layout_weight="1"> 
  58.             <Button android:id="@+id/action_one_button" 
  59.                 style="@style/HomeButton" 
  60.                 android:onClick="onActionOneClick" 
  61.                 android:text="@string/dashboard_action" 
  62.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  63.             <Button android:id="@+id/action_two_button" 
  64.                 style="@style/HomeButton" 
  65.                 android:onClick="onActionTwoClick" 
  66.                 android:text="@string/dashboard_action" 
  67.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  68.         </LinearLayout> 
  69.  
  70.         <LinearLayout 
  71.             android:orientation="horizontal" 
  72.             android:layout_width="fill_parent" 
  73.             android:layout_height="wrap_content" 
  74.             android:layout_weight="1"> 
  75.             <Button android:id="@+id/action_three_button" 
  76.                 style="@style/HomeButton" 
  77.                 android:onClick="onActionThreeClick" 
  78.                 android:text="@string/dashboard_action" 
  79.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  80.             <Button android:id="@+id/action_four_button" 
  81.                 style="@style/HomeButton" 
  82.                 android:onClick="onActionFourClick" 
  83.                 android:text="@string/dashboard_action" 
  84.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  85.         </LinearLayout> 
  86.  
  87.         <LinearLayout 
  88.             android:orientation="horizontal" 
  89.             android:layout_width="fill_parent" 
  90.             android:layout_height="wrap_content" 
  91.             android:layout_weight="1"> 
  92.             <Button android:id="@+id/action_five_button" 
  93.                 style="@style/HomeButton" 
  94.                 android:onClick="onActionFiveClick" 
  95.                 android:text="@string/dashboard_action" 
  96.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  97.             <Button android:id="@+id/action_six_button" 
  98.                 style="@style/HomeButton" 
  99.                 android:onClick="onActionSixClick" 
  100.                 android:text="@string/dashboard_action" 
  101.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  102.  
  103.         </LinearLayout> 
  104.     </LinearLayout> 
  105.  
  106.     <LinearLayout 
  107.         android:id="@+id/now_playing_loading" 
  108.         android:layout_width="fill_parent" 
  109.         android:layout_height="@dimen/now_playing_height" 
  110.         android:orientation="horizontal" 
  111.         android:background="#eee" 
  112.         android:gravity="center"> 
  113.         <ProgressBar 
  114.             style="?android:attr/progressBarStyleSmall" 
  115.             android:layout_width="wrap_content" 
  116.             android:layout_height="wrap_content" 
  117.             android:paddingRight="6dip" 
  118.             android:indeterminate="true"/> 
  119.         <TextView 
  120.             android:layout_width="wrap_content" 
  121.             android:layout_height="wrap_content" 
  122.             android:textSize="@dimen/text_size_small" 
  123.             android:text="@string/now_playing_loading"/> 
  124.     </LinearLayout> 
  125. </LinearLayout> 
  126.  

瀏覽模式XML代碼

  1. dashboard.xml:  
  2.  
  3. <?xml version="1.0" encoding="utf-8"?> 
  4. <!--  
  5.     Copyright 2010 Google Inc.  
  6.     Licensed under the Apache License, Version 2.0 (the "License");  
  7.     you may not use this file except in compliance with the License.  
  8.     You may obtain a copy of the License at  
  9.  
  10.          http://www.apache.org/licenses/LICENSE-2.0  
  11.     Unless required by applicable law or agreed to in writing, software  
  12.     distributed under the License is distributed on an "AS IS" BASIS,  
  13.     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
  14.     See the License for the specific language governing permissions and  
  15.     limitations under the License.  
  16. --> 
  17.  
  18.  
  19. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  20.     android:id="@+id/home_root" 
  21.     android:orientation="vertical" 
  22.     android:layout_width="fill_parent" 
  23.     android:layout_height="fill_parent"> 
  24.  
  25.  
  26.     <LinearLayout style="@style/TitleBar"> 
  27.         <ImageView style="@style/TitleBarLogo" 
  28.             android:src="@drawable/title_logo" /> 
  29.  
  30.  
  31.         <View style="@style/TitleBarSpring" /> 
  32.  
  33.  
  34.         <ImageView style="@style/TitleBarSeparator" /> 
  35.         <ImageButton style="@style/TitleBarAction" 
  36.             android:id="@+id/btn_title_refresh" 
  37.             android:src="@drawable/ic_title_refresh" 
  38.             android:onClick="onActionBarButtonClick" /> 
  39.         <ProgressBar style="@style/TitleBarProgressIndicator" 
  40.             android:id="@+id/title_refresh_progress" 
  41.             android:visibility="gone" /> 
  42.  
  43.  
  44.         <ImageView style="@style/TitleBarSeparator" /> 
  45.         <ImageButton style="@style/TitleBarAction" 
  46.             android:src="@drawable/ic_title_search" 
  47.             android:onClick="onActionBarButtonClick" /> 
  48.     </LinearLayout> 
  49.  
  50.  
  51.     <LinearLayout 
  52.         android:orientation="vertical" 
  53.         android:layout_width="fill_parent" 
  54.         android:layout_height="wrap_content" 
  55.         android:layout_weight="1" 
  56.         android:padding="6dip"> 
  57.         <LinearLayout 
  58.             android:orientation="horizontal" 
  59.             android:layout_width="fill_parent" 
  60.             android:layout_height="wrap_content" 
  61.             android:layout_weight="1"> 
  62.             <Button android:id="@+id/action_one_button" 
  63.                 style="@style/HomeButton" 
  64.                 android:onClick="onActionOneClick" 
  65.                 android:text="@string/dashboard_action" 
  66.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  67.             <Button android:id="@+id/action_two_button" 
  68.                 style="@style/HomeButton" 
  69.                 android:onClick="onActionTwoClick" 
  70.                 android:text="@string/dashboard_action" 
  71.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  72.             <Button android:id="@+id/action_three_button" 
  73.                 style="@style/HomeButton" 
  74.                 android:onClick="onActionThreeClick" 
  75.                 android:text="@string/dashboard_action" 
  76.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  77.         </LinearLayout> 
  78.       
  79.         <LinearLayout 
  80.             android:orientation="horizontal" 
  81.             android:layout_width="fill_parent" 
  82.             android:layout_height="wrap_content" 
  83.             android:layout_weight="1"> 
  84.             <Button android:id="@+id/action_four_button" 
  85.                 style="@style/HomeButton" 
  86.                 android:onClick="onActionFourClick" 
  87.                 android:text="@string/dashboard_action" 
  88.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  89.             <Button android:id="@+id/action_five_button" 
  90.                 style="@style/HomeButton" 
  91.                 android:onClick="onActionFiveClick" 
  92.                 android:text="@string/dashboard_action" 
  93.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  94.             <Button android:id="@+id/action_six_button" 
  95.                 style="@style/HomeButton" 
  96.                 android:onClick="onActionSixClick" 
  97.                 android:text="@string/dashboard_action" 
  98.                 android:drawableTop="@drawable/dashboard_button_selector"/> 
  99.         </LinearLayout> 
  100.     </LinearLayout> 
  101. </LinearLayout> 
  102.  

其它實(shí)用項(xiàng)目

在Android系統(tǒng)中另有許多實(shí)用項(xiàng)目，以使開發(fā)者可以很容易地獲取兼容性許可。

iosched - Google IO app by Google

這個項(xiàng)目試圖提供一個在應(yīng)用程序上實(shí)現(xiàn)Dashboard及Action bar用戶設(shè)計(jì)模塊的完整范例，這是個相當(dāng)大的工程。有鑒于此，如果你只需要兼容Dashboard或Action bar工具的設(shè)計(jì)成果，我建議你使用android-ui-patterns（android用戶模塊工具）。

GreenDroid library

源自網(wǎng)絡(luò)的項(xiàng)目目標(biāo)列表

◆避免在重復(fù)拷貝相同的代碼上浪費(fèi)時(shí)間

◆嘗試使Android上的不同應(yīng)用程序更加相似

◆幫助開發(fā)者構(gòu)建功能強(qiáng)大的應(yīng)用程序

◆充分利用Android系統(tǒng)框架的功能

◆盡可能多地使用XML

原文地址

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯稿和譯者！】

【編輯推薦】

  1. Windows Phone 7 免費(fèi)線下培訓(xùn)火熱報(bào)名中
  2. Dashboard Android用戶自定義UI設(shè)計(jì)模板
  3. Android用戶界面設(shè)計(jì)模板Dashboard產(chǎn)品展示
  4. Android用戶界面設(shè)計(jì)模板Dashboard反例展示 
  5. Android用戶界面OmniGraffle設(shè)計(jì)模板及下載
  6. Android UI自定義設(shè)計(jì)模板Dashboard
責(zé)任編輯：佚名 來源： 51CTO
Action BarDashboardAndroid用戶界面設(shè)計(jì)模板
相關(guān)推薦

2011-03-02 10:24:23

DashboardAndroid用戶界面設(shè)計(jì)模板

2011-03-02 14:03:02

DashboardAndroid用戶界面反例模板

2011-03-02 10:49:42

DashboardAndroid用戶界面設(shè)計(jì)模板

2011-11-04 16:49:26

Action BarAndroid

2011-03-02 13:16:15

OmniGraffleAndroid用戶界面

2011-05-28 15:14:06

設(shè)計(jì)技巧UIAndroid

2011-06-07 09:15:35

參數(shù)設(shè)置屏幕UI設(shè)計(jì)

2011-06-01 16:12:11

Android UI

2012-03-01 20:14:25

Android UI

2011-05-28 12:19:33

設(shè)計(jì)技巧UIAndroid

2013-07-23 16:33:27

Android視覺效果UI

2011-12-29 21:22:29

Windows Pho

2011-03-25 15:08:00

UI設(shè)計(jì)

2017-03-10 18:29:17

Androidfreemarker應(yīng)用

2018-01-01 20:56:43

AndroidUIAPI

2011-02-16 14:15:58

FringAndroid應(yīng)用iOS應(yīng)用

2010-02-04 13:30:49

Android UI元

2011-09-14 10:29:23

Android UI設(shè)

2013-12-09 15:42:17

移動應(yīng)用UI設(shè)計(jì)

2023-12-05 16:01:12

模板方法設(shè)計(jì)模式算法結(jié)構(gòu)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號