为 Android* 设备构建动态 UI

最新推荐文章于 2016-08-12 20:19:21 发布

focusjava

最新推荐文章于 2016-08-12 20:19:21 发布

阅读量939

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/focusjava/article/details/29811881

版权

Android 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

下载文档

下载为 Android* 设备构建动态 UI [PDF 1MB]

摘要

“动态 UI”对于 Android* 开发人员意味着什么？作为 Android 应用开发人员，你可能希望你的应用 UI 能够适应应用内容的动态环境。你可以进行一定程度的定制，但一般来说最好能够符合最新的 Android 准则和趋势。但是，这可能是一件困难的事情，因为市场上存在多种多样的 Android 设备，而且你还需要与最新的 Android SDK 保持同步。

在本文中，我们将主要介绍几种 Android UI 编程技术帮助您达成动态 UI 目标，包括使用包含动态应用数据的操作栏、标签和滑动视图来增强屏幕导航，使用 Android fragment 为使用不同尺寸显示器的屏幕设计多窗口和主视图布局，以及使用 Android 资源系统提高使用不同分辨率和密度的屏幕的图形和文本内容呈现。

简介

本文从三个方面讨论了动态 UI 的构建：

使用最新的 Android UI 模式和控制显示动态内容 — 至少，你希望你的应用 UI 像其他 Android 系统一样“生存”和“呼吸”。关键一点是使用最新的 Android UI 组件、控制和导航模式来设计应用。你可能希望，能够进行一定程度的定制，而且总体上紧跟最新的 Android 准则和趋势。那么，我们如何使用此最新 UI 趋势呈现动态应用内容呢？在本文中，我们将演示如何使用最新 Android UI 组件，如操作栏、标签和滑动视图，来呈现动态应用数据。
UI 布局和导航流程 – 为 4 英寸的手机和 11 英寸的平板电脑使用相同的 UI 布局是否可行？为了最大限度地利用大显示器的空间，有时，你希望为显示器尺寸不同的设备使用不同的布局。在本文中，我们将讨论如何使用 Android Fragment 设计多窗口/单窗口布局和主从视图，以适应拥有不同显示器尺寸的屏幕。
显示器分辨率和密度 — 除了 UI 布局之外，如果你在应用中使用了图形，如何确保在采用不同屏幕分辨率和像素密度的设备上图形不被拉伸或像素化？文本项的字号如何处理？文本项采用 20 号字体在手机上可能非常合适，但是在平板电脑上可能会太小。我们将讨论如何使用 Android 资源系统来处理这些问题。

示例餐厅菜单应用

为了解释本文中介绍的编程概念，我编写了一款可帮助用户浏览按照食物分类安排的餐厅菜单的应用。餐厅菜单应用可为本文中讨论的话题提供编程示例。

请注意，本文面向对 Java 编程和 Android 开发概念的基本知识有一定了解的读者。本文不提供 Android 教程，而主要介绍几种基本的 UI 技术帮助开发人员达成动态 UI 的构建目标。

此外，本文中的代码片段是取自餐厅应用的示例代码。我们选取这些代码，仅为解释本文中摘录的编程内容。它们并不提供应用结构和细节的完整视图。如果您希望全面了解该示例应用提供的 Android 应用开发，如 fragment 的生命循环处理、单元格项选择的 UI 更新、在配置更改时保留 fragment 中的用户选择和应用数据或资源中的 UI 风格示例，请参见“参考文献”部分的 Android 开发人员链接，了解更多信息。

操作栏、标签、滑动视图和动态应用数据

在为“餐厅菜单”应用设计 UI 时，我考虑到以下几个方面：

UI 应支持用户从主窗口访问基本应用功能
UI 应支持餐厅菜单应用的所有者动态添加/删除食物项目
UI 在切换食物分类时应可提供一致的外观和视图
UI 应可在需要时呈现带有图片的食物和菜单信息
UI 应支持使用手势进行界面导航，这种方式在 Android 系统中非常直观

我选择了 Android 操作栏、标签和滑动视图来满足上述要求。事实上，自 Android 3.0 起，这些 UI 元素成为 Android 推荐的重点 UI 模式。你会发现大部分的常用 Android 应用中都使用了这些 UI 元素，如电子邮件、日历、hangouts、音乐和 play store。下面的截屏展示了我们如何使用这些 UI 元素呈现可浏览的餐厅菜单。

图 1 餐厅菜单应用的屏幕概观

使用滑动视图创建操作栏和标签

本部分内容介绍了如何为 Android 应用创建带有操作栏和标签的滑动视图。

向主屏幕的布局文件中添加 ViewPager，以便处理标签的滑动视图（activity_main.xml）

      
      
       
       
        
        
         
         01 <android.support.v4.view.ViewPager       
        
        
        
        
         
         02     xmlns:android="http://schemas.android.com/apk/res/android"
        
        
        
        
         
         03     xmlns:tools="http://schemas.android.com/tools"
        
        
        
        
         
         04     android:id="@+id/pager"
        
        
        
        
         
         05     android:layout_width="match_parent"
        
        
        
        
         
         06     android:layout_height="match_parent"
        
        
        
        
         
         07     tools:context=".MainActivity" >
        
        
        
        
         
         08  
        
        
        
        
         
         09     <android.support.v4.view.PagerTitleStrip
        
        
        
        
         
         10         android:id="@+id/pager_title_strip"
        
        
        
        
         
         11         android:layout_width="match_parent"
        
        
        
        
         
         12         android:layout_height="wrap_content"
        
        
        
        
         
         13         android:layout_gravity="top"
        
        
        
        
         
         14         android:background="#333333"
        
        
        
        
         
         15         android:paddingBottom="4dp"
        
        
        
        
         
         16         android:paddingTop="4dp"
        
        
        
        
         
         17         android:textColor="#ffffff"/>        
        
        
        
        
         
         18 </android.support.v4.view.ViewPager>

在 MainActivity.java（应用的主界面）中，activity_main.xml 布局进行 inflate 处理，从活动布局文件中检索 ViewPager，创建 ViewPagerAdapter 以处理每页标签的创建和初始化，并将 OnPageChangeListener 分配至 ViewPager

      
      
       
       
        
        
         
         1 // Setting up swipe view for each tab
        
        
        
        
         
         2 mViewPager = (ViewPager) findViewById(R.id.pager);
        
        
        
        
         
         3 mViewPager.setOnPageChangeListener(this);
        
        
        
        
         
         4 mPagerAdapter = new PagerAdapter(getSupportFragmentManager(), this);
        
        
        
        
         
         5 mViewPager.setAdapter(mPagerAdapter);

执行 OnPageChangeListener，在视图切换时处理与应用相关的任务。至少，当用户将视图滑动至下一个标签时，代码应可在操作栏上设置选择的标签。

      
      
       
       
        
        
         
         01 /**
        
        
        
        
         
         02  * This method is called when the user swipes the tab from one to another
        
        
        
        
         
         03  */
        
        
        
        
         
         04 public void onPageSelected(int position) {
        
        
        
        
         
         05         // on changing the page
        
        
        
        
         
         06         // make respected tab selected
        
        
        
        
         
         07         mActionBar.setSelectedNavigationItem(position);
        
        
        
        
         
         08         mCurrentViewedCategory = (String) mActionBar.getTabAt(position).getText();
        
        
        
        
         
         09 }
        
        
        
        
         
         10  
        
        
        
        
         
         11 /**
        
        
        
        
         
         12  * Tab swipe view related callback
        
        
        
        
         
         13  */
        
        
        
        
         
         14 public void onPageScrolled(int arg0, float arg1, int arg2) {
        
        
        
        
         
         15 }
        
        
        
        
         
         16  
        
        
        
        
         
         17 /**
        
        
        
        
         
         18  * Tab swipe view related callback
        
        
        
        
         
         19  */
        
        
        
        
         
         20 public void onPageScrollStateChanged(int arg0) {
        
        
        
        
         
         21 }

对 PagerAdapter（继承自 FragmentStatePagerAdapter）进行定义，以处理每个标签的视图。示例中，Pager Adapter 被定义为 MainActivity.java 的内部类。初始化每个页面时将会调用 “getItem”。在本案例中，每一页包括一个含有菜单数据的主从视图的碎片，如图 1 所示。碎片编程的具体内容将会在下一部分进行介绍。

技巧

编程中共有两种 PagerAdapter：FragmentPagerAdapter 和 FragmentStatePagerAdapter。从内存效率角度来看，如果页面数固定则推荐使用前者；如果动态分配页面数则推荐使用后者。如果使用了 FragmentStatePagerAdapter，当用户离开页面时，页面调度程序就会被破坏。本示例使用了 FragmentStatePagerAdapter，因为食物种类的数量能够随着应用数据变化。

      
      
       
       
        
        
         
         01 /**
        
        
        
        
         
         02 * Fragment pager adapter to handle tab swipe view. Each tab view contains 
        
        
        
        
         
         03 * an ultimate fragment which includes a grid menu view and a detail view. 
        
        
        
        
         
         04 * Depending on the orientation of the device, the app decides whether to 
        
        
        
        
         
         05 * show both views or just grid view.
        
        
        
        
         
         06 */
        
        
        
        
         
         07  
        
        
        
        
         
         08 class PagerAdapter extends FragmentStatePagerAdapter {    
        
        
        
        
         
         09     UltimateViewFragment ultimateViewFragment;
        
        
        
        
         
         10     FragmentActivity mFragmentActivity;
        
        
        
        
         
         11     UltimateViewFragment[] fragmentArray = new 
        
        
        
        
         
         12         UltimateViewFragment[mCategory.size()];
        
        
        
        
         
         13          
        
        
        
        
         
         14 public PagerAdapter(FragmentManager fm, FragmentActivity fragmentActivity) {
        
        
        
        
         
         15      super(fm);     
        
        
        
        
         
         16      mFragmentActivity = fragmentActivity;
        
        
        
        
         
         17 }
        
        
        
        
         
         18          
        
        
        
        
         
         19 @Override
        
        
        
        
         
         20 public Object instantiateItem(ViewGroup container, int position) {
        
        
        
        
         
         21     super.instantiateItem(container, position);
        
        
        
        
         
         22     UltimateViewFragment fragment = (UltimateViewFragment)     
        
        
        
        
         
         23         super.instantiateItem(container, position);
        
        
        
        
         
         24         fragment.setGridItemListener((GridItemListener) 
        
        
        
        
         
         25         mFragmentActivity);
        
        
        
        
         
         26         fragmentArray[position] = fragment;
        
        
        
        
         
         27         return fragment;
        
        
        
        
         
         28 } 
        
        
        
        
         
         29          
        
        
        
        
         
         30 @Override
        
        
        
        
         
         31 public Fragment getItem(int position) {
        
        
        
        
         
         32     Bundle args = new Bundle();
        
        
        
        
         
         33     // Each ultimate view is associated with one menu category
        
        
        
        
         
         34     args.putString(MenuFactory.ARG_CATEGORY_NAME, 
        
        
        
        
         
         35     mCategory.get(position));
        
        
        
        
         
         36     ultimateViewFragment = new UltimateViewFragment();
        
        
        
        
         
         37     ultimateViewFragment.setArguments(args);
        
        
        
        
         
         38     // Register as a GridItemListener to receive the notification of grid 
        
        
        
        
         
         39     // item click
        
        
        
        
         
         40     ultimateViewFragment.setGridItemListener((GridItemListener) 
        
        
        
        
         
         41     mFragmentActivity);
        
        
        
        
         
         42     fragmentArray[position] = ultimateViewFragment;
        
        
        
        
         
         43     return ultimateViewFragment;
        
        
        
        
         
         44 }
        
        
        
        
         
         45  
        
        
        
        
         
         46 @Override
        
        
        
        
         
         47     public int getCount() {
        
        
        
        
         
         48         // Return number of tabs
        
        
        
        
         
         49         return mCategory.size();
        
        
        
        
         
         50  }
        
        
        
        
         
         51  
        
        
        
        
         
         52 @Override 
        
        
        
        
         
         53     public CharSequence getPageTitle(int position) {
        
        
        
        
         
         54        //Return the title of each tab
        
        
        
        
         
         55         return mCategory.get(position);
        
        
        
        
         
         56     }
        
        
        
        
         
         57 }

从 Activity 中检索 ActionBar (mActionBar)，并将导航模式设置为 NAVIGATION_MODE_TABS

使用 mActionBar.addTab 向 ActionBar 添加标签，并使用指定文本初始化标签标题

      
      
       
       
        
        
         
         01 // Setting up action bar and tabs
        
        
        
        
         
         02 mActionBar = getActionBar();
        
        
        
        
         
         03 mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);       
        
        
        
        
         
         04 for (int i = 0; i < mCategory.size(); i++) {
        
        
        
        
         
         05     mActionBar.addTab(mActionBar.newTab().setText(
        
        
        
        
         
         06     mCategory.get(i)).setTabListener(this));
        
        
        
        
         
         07     // Initialize selected items in the hashtable with the first item 
        
        
        
        
         
         08     // of each category
        
        
        
        
         
         09     if (savedInstanceState == null) {
        
        
        
        
         
         10          mSelectedItems.put(mCategory.get(i), mMenuFactory.getMenuWithCategory(
        
        
        
        
         
         11                mCategory.get(i)).get(0));
        
        
        
        
         
         12     } else {
        
        
        
        
         
         13          //update the mSelectedItems from the last saved instance
        
        
        
        
         
         14          String[] selectedItems = savedInstanceState.getStringArray("selectedItems");
        
        
        
        
         
         15          mSelectedItems.put(mCategory.get(i), mMenuFactory.getMenuItem(
        
        
        
        
         
         16          mCategory.get(i),selectedItems[i]));               
        
        
        
        
         
         17      }
        
        
        
        
         
         18  }

技巧

ActionBar API 在 Android 3.0 (API level 11) 中首次推出，但是由于具备对 Android 2.1 (API level 7) 及更高版本的兼容性，它也能够在支持的库中使用。本示例代码使用了 android-support-v4.jar 库。此 jar 格式文件位于应用根目录下的库文件夹中。如果您使用 Eclipse 作为 IDE，请将路径添加至 Project Properties->Java Build Path->Libraries 中的库

向操作栏中添加操作项

操作栏中包含用户经常使用的操作项。这些操作项位于操作栏顶部，以便于用户轻松访问。在样本代码中，我们对几个操作项进行了定义，如摄像头、调用、查看和设置，请见下面截屏中的突出显示。

图 2 带有操作项的操作栏

以下介绍了如何向操作栏中添加操作项。

在 res/menu 下的 xml 中定义操作项（如 action_bar.xml）

      
      
       
       
        
        
         
         01 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
        
        
        
        
         
         02      
        
        
        
        
         
         03     <item android:id="@+id/action_camera"
        
        
        
        
         
         04           android:icon="@drawable/ic_action_camera"
        
        
        
        
         
         05           android:title="@string/action_camera"
        
        
        
        
         
         06           android:showAsAction="always" />
        
        
        
        
         
         07     <item android:id="@+id/action_search"
        
        
        
        
         
         08           android:title="@string/action_search_str"
        
        
        
        
         
         09           android:icon="@drawable/ic_action_search"
        
        
        
        
         
         10           android:showAsAction="always"
        
        
        
        
         
         11           android:actionViewClass="android.widget.SearchView" />
        
        
        
        
         
         12     <item android:id="@+id/action_call"
        
        
        
        
         
         13           android:icon="@drawable/ic_action_phone"
        
        
        
        
         
         14           android:title="@string/action_call"
        
        
        
        
         
         15           android:showAsAction="always" />
        
        
        
        
         
         16     <item android:id="@+id/action_checkout"
        
        
        
        
         
         17           android:icon="@drawable/ic_action_shoppingcart_checkout"
        
        
        
        
         
         18           android:title="@string/action_checkout"
        
        
        
        
         
         19           android:showAsAction="always"/>
        
        
        
        
         
         20     <item android:id="@+id/action_settings"
        
        
        
        
         
         21         android:orderInCategory="100"
        
        
        
        
         
         22         android:showAsAction="never"
        
        
        
        
         
         23         android:title="@string/action_settings"/>
        
        
        
        
         
         24    
        
        
        
        
         
         25 </menu>

在代码中 Inflate 操作项菜单（MainActivity.java）

      
      
       
       
        
        
         
         01 /**
        
        
        
        
         
         02 * Initialize the action menu on action bar
        
        
        
        
         
         03 */
        
        
        
        
         
         04 public boolean onCreateOptionsMenu(Menu menu) {
        
        
        
        
         
         05     getMenuInflater().inflate(R.menu.action_bar, menu);
        
        
        
        
         
         06          
        
        
        
        
         
         07     //Set up the search feature
        
        
        
        
         
         08     SearchManager searchManager =
        
        
        
        
         
         09         (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        
        
        
        
         
         10     SearchView searchView =
        
        
        
        
         
         11         (SearchView) menu.findItem(R.id.action_search).getActionView();
        
        
        
        
         
         12         searchView.setSearchableInfo(
        
        
        
        
         
         13                    searchManager.getSearchableInfo(getComponentName()));
        
        
        
        
         
         14         return super.onCreateOptionsMenu(menu);
        
        
        
        
         
         15 }

在代码中处理操作项触发（click）

      
      
       
       
        
        
         
         01 /**
        
        
        
        
         
         02 * This method is called when the user click an action from the action bar
        
        
        
        
         
         03 */
        
        
        
        
         
         04 public boolean onOptionsItemSelected(MenuItem item) {
        
        
        
        
         
         05     if (mDrawerToggle.onOptionsItemSelected(item)) {
        
        
        
        
         
         06               return true;
        
        
        
        
         
         07      }
        
        
        
        
         
         08  
        
        
        
        
         
         09      // Handle presses on the action bar items
        
        
        
        
         
         10      switch (item.getItemId()) {
        
        
        
        
         
         11         // Handle up/home navigation action
        
        
        
        
         
         12         case android.R.id.home:
        
        
        
        
         
         13             NavUtils.navigateUpFromSameTask(this);
        
        
        
        
         
         14             return true;
        
        
        
        
         
         15         // Handle search
        
        
        
        
         
         16         case R.id.action_search:
        
        
        
        
         
         17                     return true;                
        
        
        
        
         
         18         // Handle settings
        
        
        
        
         
         19         case R.id.action_settings:
        
        
        
        
         
         20                     return true;                
        
        
        
        
         
         21         // Handle camera
        
        
        
        
         
         22         case R.id.action_camera:
        
        
        
        
         
         23                     return true;
        
        
        
        
         
         24         //Handle check out feature
        
        
        
        
         
         25         case R.id.action_checkout:
        
        
        
        
         
         26                 return true;
        
        
        
        
         
         27             default:
        
        
        
        
         
         28                 return super.onOptionsItemSelected(item);
        
        
        
        
         
         29 }

技巧

如图 1 所示，操作栏中包含用户经常执行的操作项，如摄像头、搜索和查看。如要确保整个系统中的外观和风格一致，你可以从 https://developer.android.com/design/downloads/index.html 下载操作栏图示包（Action Bar Icon Pack）并将其用于应用资源区。

操作栏风格

Android 使用系统定义的颜色来渲染操作栏，这种颜色有时可能与你的应用颜色主题不相配。有时，你可能想要使用专为应用主题设计的风格和颜色（或企业主题颜色）来设计操作栏。

例如，本示例应用中的操作栏使用了与应用主题相匹配的“栗色”。

图 3 操作栏风格示例

在本部分中，我们将介绍如何使用 Android Action Bar Style Generator 来增强操作栏的外观。

如欲获取该工具，请访问： http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
指定选择的颜色并通过链接下载生成的资源文件。以下是我在本示例应用中所使用的颜色和风格。

图 4 操作栏风格生成工具

该工具生成的示例资源图示、图像、风格 xml 文件如下所示。向应用资源 drawable 区域中添加所有资源文件，然后更新 AndroidManifest.xml application:theme，以使用该工具生成的风格 xml 文件。

图 5 操作栏资源示例

      
      
       
       
        
        
         
         1 <activity
        
        
        
        
         
         2             android:theme="@style/Theme.Example"
        
        
        
        
         
         3             android:name="com.example.restaurant.MainActivity"      
        
        
        
        
         
         4             android:label="@string/app_name" >
        
        
        
        
         
         5             <intent-filter>
        
        
        
        
         
         6                 <action android:name="android.intent.action.MAIN" />
        
        
        
        
         
         7                 <category android:name="android.intent.category.LAUNCHER" />
        
        
        
        
         
         8             </intent-filter>
        
        
        
        
         
         9 </activity>

处理 UI 中的动态应用数据

应用 UI 并非一直都是静态状态，尤其当它呈现的数据可能在应用生命周期内发生变化时。例如，图片集应用支持用户查看和编辑大量图片，而这些图片在设备开启时随时可能会发生更改。电子邮件应用需要处理的消息在每个服务器所配置的时间段内都会刷新一次。在该样本餐厅菜单应用中，食物菜单是动态的。操作栏标签和菜单格的内容可以随着食物种类和菜单而变化。

处理动态数据的一种方法是创建数据工厂；数据工厂相当于原始数据和 UI 之间的转换器。数据工厂可以从 UI 中抽取数据操作逻辑，从而能够在不改变 UI 逻辑的情况下改变数据。从更高层面而言，数据工厂能够与数据来源通信以获取原始应用数据，处理多种来源（如网络、本地文件系统、数据库或缓存）的原始数据，并将原始数据转化为 UI 组件可以使用的数据对象。

下图简要介绍了 UI、数据工厂和数据来源之间的流程。

图 6 处理动态应用内容的一般流程

技巧

处理动态应用内容的步骤

确认可能的数据来源，如网络、本地文件系统、数据库或设备缓存
创建一个数据工厂，“倾听”数据来源的变化，或根据应用的需求定期查询数据
数据工厂在单独的线程中处理数据更新请求以避免阻止 UI 线程，因为数据请求和处理需要耗费一定的时间
UI 组件登记为数据工厂的数据变更监听器，收到数据变更通知后，刷新 UI 组件
数据工厂可管理数据变更事件的监听器，并提供便捷的方式以便调用程序（caller）在不了解原始数据格式情况下也可查询数据

为了简化样本餐厅应用中的实施，我们将食物菜单数据在 Android strings.xml 中存储为一个字符串阵列。每个阵列元素包含一个食物项记录。在实际情况下，这些数据记录可在服务器中进行定义和存储，以便能够进行动态变更。无论数据的来源为何处，数据格式都可以在 string.xml 中重复使用。下文介绍了应用如何在 MenuFactory.java 中进行处理，以及如何使用应用数据初始化 UI 组件。

在 strings.xml 中定义菜单数据。每个食物项目中都包括一个含有种类名称、菜单名称、介绍、营养成分、价格和图片名称的字符串。数据字段由分隔符 “,,,” 进行划分。

      
      
       
       
        
        
         
         01 <string-array name="menu_array">
        
        
        
        
         
         02  
        
        
        
        
         
         03     <item>Appetizer,,,Angels on horseback,,,Oysters wrapped in bacon, served hot. In the United Kingdom they can also be a savoury, the final course of a traditional British ,,,Calories 393; Fat 22 g( Saturated 4 g); Cholesterol 101 mg; Sodium 836 mg; Carbohydrate 19g; Fiber 3g; Protein 31g,,,6.99,,,Angels on horseback.jpg</item>   
        
        
        
        
         
         04       
        
        
        
        
         
         05     <item>Appetizer,,,Batata vada,,,A popular Indian vegetarian fast food in Maharashtra, India. It literally means potato fritters. The name \"Batata\" means potato in English. It consists of a potato mash patty coated with chick pea flour, then deep-fried and served hot with savory condiments called chutney. The vada is a sphere, around two or three inches in diameter.,,,Calories 393; Fat 22 g( Saturated 4 g); Cholesterol 101 mg; Sodium 836 mg; Carbohydrate 19g; Fiber 3g; Protein 31g,,,7.99,,,Batata vada.jpg</item>
        
        
        
        
         
         06  
        
        
        
        
         
         07     <item>Appetizer,,,Barbajuan,,,An appetizer mainly found in the eastern part of French Riviera and Northern Italy.,,,Calories 393; Fat 22 g( Saturated 4 g); Cholesterol 101 mg; Sodium 836 mg; Carbohydrate 19g; Fiber 3g; Protein 31g,,,8.99,,,Barbajuan.jpg</item>
        
        
        
        
         
         08  
        
        
        
        
         
         09      <item>Appetizer,,,Blooming onion,,,Typically consists of one large onion which is cut to resemble a flower, battered and deep-fried. It is served as an appetizer at some restaurants.,,,Calories 393; Fat 22 g( Saturated 4 g); Cholesterol 101 mg; Sodium 836 mg; Carbohydrate 19g; Fiber 3g; Protein 31g,,,9.99,,,Blooming onion.jpg</item>
        
        
        
        
         
         10  
        
        
        
        
         
         11 </string-array>

在应用启动过程中， MainActivity.java 将创建一个单独的 MenuFactory 参考，并加载 Android 资源区域的数据。

      
      
       
       
        
        
         
         1 mMenuFactory = MenuFactory.getInstance(res);
        
        
        
        
         
         2 mMenuFactory.loadDataFromAndroidResource();

MenuFactory 处理来自 strings.xml 的数据，并将其转换为 UI 视图使用的 MenuItem 对象。

      
      
       
       
        
        
         
         01 /* Allows caller to load the app data from Android resource area */
        
        
        
        
         
         02 public void loadDataFromAndroidResource() { 
        
        
        
        
         
         03     if (mMenuItems != null && mMenuItems.size() > 0) {
        
        
        
        
         
         04         clear();
        
        
        
        
         
         05     }       
        
        
        
        
         
         06     mMenuItems = new ArrayList<MenuItem>();
        
        
        
        
         
         07     mCategoryList = new ArrayList<String>();
        
        
        
        
         
         08          
        
        
        
        
         
         09     String[] menuList = mResources.getStringArray(R.array.menu_array);
        
        
        
        
         
         10     MenuItem menuItem;
        
        
        
        
         
         11     String[] currentMenu;
        
        
        
        
         
         12     String currentCategory = "";
        
        
        
        
         
         13          
        
        
        
        
         
         14     for (int i = 0; i<menuList.length; i++) {
        
        
        
        
         
         15     currentMenu = menuList[i].split(",,,");
        
        
        
        
         
         16     menuItem = new MenuItem();
        
        
        
        
         
         17     for (int j = 0; j< currentMenu.length; j++) {
        
        
        
        
         
         18         switch (j) {
        
        
        
        
         
         19         case 0:
        
        
        
        
         
         20             menuItem.setCategory(currentMenu[j]);
        
        
        
        
         
         21             if (!currentMenu[j].equals(currentCategory)) {
        
        
        
        
         
         22                 currentCategory = currentMenu[j];
        
        
        
        
         
         23                 mCategoryList.add(currentMenu[j]);
        
        
        
        
         
         24             }
        
        
        
        
         
         25             break;
        
        
        
        
         
         26         case 1:
        
        
        
        
         
         27             menuItem.setName(currentMenu[j]);                                       break;
        
        
        
        
         
         28         case 2:
        
        
        
        
         
         29             menuItem.setDescription(currentMenu[j]);
        
        
        
        
         
         30             break;
        
        
        
        
         
         31         case 3:
        
        
        
        
         
         32             menuItem.setNutrition(currentMenu[j]);                                      break;
        
        
        
        
         
         33         case 4:
        
        
        
        
         
         34             menuItem.setPrice(currentMenu[j]);                                      break;  
        
        
        
        
         
         35         case 5:
        
        
        
        
         
         36             menuItem.setImageName(currentMenu[j]);                                      break;
        
        
        
        
         
         37         }
        
        
        
        
         
         38                }
        
        
        
        
         
         39                menuItem.setId(Integer.toString(i));     
        
        
        
        
         
         40                mMenuItems.add(menuItem);
        
        
        
        
         
         41     }   
        
        
        
        
         
         42 }

MenuFactory.java 可提供便捷的方式，以便调用程序查询 UI 更新相关信息。

      
      
       
       
        
        
         
         01 /* Allows caller to retrieve the category list based on menu items */
        
        
        
        
         
         02 public ArrayList<String> getCategoryList() {
        
        
        
        
         
         03     return mCategoryList;
        
        
        
        
         
         04 }
        
        
        
        
         
         05      
        
        
        
        
         
         06 /* Allows caller to retrieve a list of menu based on passed in category */
        
        
        
        
         
         07 public ArrayList<MenuItem> getMenuWithCategory (String category) {
        
        
        
        
         
         08     ArrayList<MenuItem> result = new ArrayList<MenuItem>();
        
        
        
        
         
         09     for (int i = 0; i<mMenuItems.size(); i++) {
        
        
        
        
         
         10         MenuItem item = mMenuItems.get(i);
        
        
        
        
         
         11         if (item.category.equals(category)) {
        
        
        
        
         
         12             result.add(item);
        
        
        
        
         
         13         }           
        
        
        
        
         
         14     }
        
        
        
        
         
         15          
        
        
        
        
         
         16     return result;
        
        
        
        
         
         17 }
        
        
        
        
         
         18      
        
        
        
        
         
         19 /* Allows caller to retrieve menu item based on passed category and index */
        
        
        
        
         
         20 public MenuItem getMenuItem (String category, int index) {
        
        
        
        
         
         21     ArrayList<MenuItem> menuList = getMenuWithCategory(category);
        
        
        
        
         
         22     if (menuList.size() == 0) {
        
        
        
        
         
         23         return null;
        
        
        
        
         
         24     }
        
        
        
        
         
         25     return menuList.get(index);
        
        
        
        
         
         26 }
        
        
        
        
         
         27      
        
        
        
        
         
         28 /* Allows caller to retrieve menu item based on passed category and name */
        
        
        
        
         
         29 public MenuItem getMenuItem (String category, String name) {
        
        
        
        
         
         30     MenuItem result = null;
        
        
        
        
         
         31     for (int i = 0; i<mMenuItems.size(); i++) {
        
        
        
        
         
         32         MenuItem item = mMenuItems.get(i);
        
        
        
        
         
         33         if (item.category.equals(category) && item.name.equals(name)) {
        
        
        
        
         
         34             result = item;
        
        
        
        
         
         35         }           
        
        
        
        
         
         36     }   
        
        
        
        
         
         37     return result;
        
        
        
        
         
         38 }
        
        
        
        
         
         39  
        
        
        
        
         
         40 /* Data structure for menu item */
        
        
        
        
         
         41 class MenuItem {
        
        
        
        
         
         42     String category;
        
        
        
        
         
         43     String name;
        
        
        
        
         
         44     String price;
        
        
        
        
         
         45     String description;
        
        
        
        
         
         46     String nutrition;
        
        
        
        
         
         47     ImageView image;
        
        
        
        
         
         48     String imageName;
        
        
        
        
         
         49     String id;
        
        
        
        
         
         50          
        
        
        
        
         
         51     public void setCategory(String str) {
        
        
        
        
         
         52         category = str;
        
        
        
        
         
         53     }
        
        
        
        
         
         54          
        
        
        
        
         
         55     public void setName(String str) {
        
        
        
        
         
         56         name = str;
        
        
        
        
         
         57     }
        
        
        
        
         
         58      
        
        
        
        
         
         59     public void setDescription(String str) {
        
        
        
        
         
         60         description = str;
        
        
        
        
         
         61     }
        
        
        
        
         
         62          
        
        
        
        
         
         63     public void setNutrition(String str) {
        
        
        
        
         
         64         nutrition = str;
        
        
        
        
         
         65     }
        
        
        
        
         
         66          
        
        
        
        
         
         67     public void setImageName(String str) {
        
        
        
        
         
         68         imageName = str;
        
        
        
        
         
         69     }
        
        
        
        
         
         70          
        
        
        
        
         
         71     public void setId(String str) {
        
        
        
        
         
         72         id = str;
        
        
        
        
         
         73     }
        
        
        
        
         
         74          
        
        
        
        
         
         75     public void setPrice(String str) {
        
        
        
        
         
         76         price = str;
        
        
        
        
         
         77     }
        
        
        
        
         
         78          
        
        
        
        
         
         79     public void setImageView(ImageView imageView) {
        
        
        
        
         
         80         image = imageView;
        
        
        
        
         
         81     }
        
        
        
        
         
         82 }

使用 MenuFactory 的食物项初始化网格菜单视图。此操作是在 MenuGridFragment.java 中完成。在菜单应用中，每种类型中的食物项都通过内嵌于 Fragment 中的 GridView 显示。在 fragment 初始化过程中，将会调用 MenuFactory 检索每类中的食物项。网格视图的数据适配器（ImageAdapter）可在初始化过程中创建和渲染每个食物项。

      
      
       
       
        
        
         
         01 /* Inflating view item for the grid view and initialize the image adapter
        
        
        
        
         
         02 * for the grid view. 
        
        
        
        
         
         03 */
        
        
        
        
         
         04 public View onCreateView(LayoutInflater inflater, ViewGroup container,
        
        
        
        
         
         05     Bundle savedInstanceState) {
        
        
        
        
         
         06          
        
        
        
        
         
         07     View rootView = inflater.inflate(
        
        
        
        
         
         08         R.layout.fragment_menu_grid, container, false);
        
        
        
        
         
         09  
        
        
        
        
         
         10     mMenuList = mMenuFactory.getMenuWithCategory(mCategory);    
        
        
        
        
         
         11     mGridView = (GridView) rootView.findViewById(R.id.gridview);
        
        
        
        
         
         12     mGridView.setAdapter(mImageAdapter);
        
        
        
        
         
         13     mGridView.setOnItemClickListener(this);
        
        
        
        
         
         14     return rootView;
        
        
        
        
         
         15 }

      
      
       
       
        
        
         
         01 /* Image adapter for the grid view */
        
        
        
        
         
         02 class ImageAdapter extends BaseAdapter {
        
        
        
        
         
         03     private LayoutInflater mInflater;
        
        
        
        
         
         04  
        
        
        
        
         
         05     public ImageAdapter(Context c) {
        
        
        
        
         
         06         mInflater = LayoutInflater.from(c);
        
        
        
        
         
         07     }
        
        
        
        
         
         08  
        
        
        
        
         
         09     public int getCount() {
        
        
        
        
         
         10         return mMenuList.size();
        
        
        
        
         
         11     }
        
        
        
        
         
         12  
        
        
        
        
         
         13     public Object getItem(int position) {
        
        
        
        
         
         14         return mMenuList.get(position);
        
        
        
        
         
         15     }
        
        
        
        
         
         16  
        
        
        
        
         
         17     public long getItemId(int position) {
        
        
        
        
         
         18         return position;
        
        
        
        
         
         19     }
        
        
        
        
         
         20          
        
        
        
        
         
         21     // create a new ImageView for each item referenced by the Adapter
        
        
        
        
         
         22     public View getView(int position, View convertView, ViewGroup parent) {
        
        
        
        
         
         23  
        
        
        
        
         
         24         View v = convertView;
        
        
        
        
         
         25         ImageView picture;
        
        
        
        
         
         26         TextView name;
        
        
        
        
         
         27         TextView price;
        
        
        
        
         
         28  
        
        
        
        
         
         29         if(v == null) {
        
        
        
        
         
         30             v = mInflater.inflate(R.layout.view_grid_item, parent, false);
        
        
        
        
         
         31             v.setTag(R.id.picture, v.findViewById(R.id.picture));
        
        
        
        
         
         32             v.setTag(R.id.grid_name, v.findViewById(R.id.grid_name));
        
        
        
        
         
         33             v.setTag(R.id.grid_price, v.findViewById(R.id.grid_price));
        
        
        
        
         
         34         }
        
        
        
        
         
         35       
        
        
        
        
         
         36         picture = (ImageView)v.getTag(R.id.picture);
        
        
        
        
         
         37         name = (TextView)v.getTag(R.id.grid_name);
        
        
        
        
         
         38         price = (TextView) v.getTag(R.id.grid_price);
        
        
        
        
         
         39  
        
        
        
        
         
         40         MenuItem item = (MenuItem) mMenuList.get(position);
        
        
        
        
         
         41          
        
        
        
        
         
         42         InputStream inputStream = null;
        
        
        
        
         
         43         AssetManager assetManager = null;
        
        
        
        
         
         44         try {
        
        
        
        
         
         45             assetManager = getActivity().getAssets();
        
        
        
        
         
         46             inputStream =  assetManager.open(item.imageName);
        
        
        
        
         
         47             picture.setImageBitmap(BitmapFactory.decodeStream(inputStream));
        
        
        
        
         
         48         } catch (Exception e) {
        
        
        
        
         
         49         } finally {   
        
        
        
        
         
         50         }
        
        
        
        
         
         51      
        
        
        
        
         
         52         name.setText(item.name);
        
        
        
        
         
         53         price.setText(item.price);
        
        
        
        
         
         54          
        
        
        
        
         
         55         //Highlight the item if it's been selected        
        
        
        
        
         
         56         if (mSelectedPosition == position){
        
        
        
        
         
         57                 updateGridItemColor(v, true);         
        
        
        
        
         
         58         } else {
        
        
        
        
         
         59                 updateGridItemColor(v, false);    
        
        
        
        
         
         60         }
        
        
        
        
         
         61  
        
        
        
        
         
         62         return v;
        
        
        
        
         
         63     }    
        
        
        
        
         
         64 }

使用 MenuFactory 中的食物分类初始化操作栏标签

      
      
       
       
        
        
         
         01 // Retrieve the category list from MenuFactory 
        
        
        
        
         
         02 mCategory = mMenuFactory.getCategoryList();
        
        
        
        
         
         03 // Setting up action bar and tabs
        
        
        
        
         
         04 mActionBar = getActionBar();
        
        
        
        
         
         05 mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);       
        
        
        
        
         
         06 for (int i = 0; i < mCategory.size(); i++) {
        
        
        
        
         
         07 mActionBar.addTab(mActionBar.newTab().setText(
        
        
        
        
         
         08     mCategory.get(i)).setTabListener(this));
        
        
        
        
         
         09      // Initialize selected items in the hashtable with the first item 
        
        
        
        
         
         10      // of each category
        
        
        
        
         
         11      if (savedInstanceState == null) {
        
        
        
        
         
         12         mSelectedItems.put(mCategory.get(i), mMenuFactory.getMenuWithCategory(
        
        
        
        
         
         13                         mCategory.get(i)).get(0));
        
        
        
        
         
         14         } else {
        
        
        
        
         
         15              //update the mSelectedItems from the last saved instance
        
        
        
        
         
         16              String[] selectedItems = savedInstanceState.getStringArray("selectedItems");
        
        
        
        
         
         17              mSelectedItems.put(mCategory.get(i), mMenuFactory.getMenuItem(
        
        
        
        
         
         18                       mCategory.get(i),selectedItems[i]));              
        
        
        
        
         
         19         }
        
        
        
        
         
         20 }

Android Fragment、多窗口布局和主从视图

动态 UI 的另一个重点是如何设计 Android 应用的 UI 才能让相同的应用适用于不同尺寸的设备（如平板电脑和手机）。在本部分内容中，我们将讨论如何使用 Android fragment 为显示器尺寸不同的设备设计多窗口布局。

Android 在 3.0 中引入 “fragment” 的概念。你可以把 “fragment” 看作 “组件化”屏幕布局的一种方式。屏幕被划分为多个 UI 组或视图。每个 UI 组或视图将作为一个 fragment 来实施。你的应用将根据其所在设备的显示器来决定在运行时为用户使用哪种 UI 组/视图和导航流程。

多窗口布局是 Android fragment 的一种常见用途，在这种布局中，屏幕呈现为组合的多视图。与屏幕中的一个视图交互可能会更新屏幕上的另一个视图。主从视图便是此概念的一个重要 UI 设计模式。该应用使用一个列表或网格视图 widget 在主视图中呈现总体内容。选择网格或列表中的一个项目，将会在同一个屏幕或另一个屏幕上显示出该项目的细节视图。在采用大尺寸显示器的设备（平板电脑）上，主视图和细节视图能够在相同的屏幕上显示。在采用较小尺寸显示器的设备（手机）上，主视图和细节视图能够在不同的屏幕中呈现。

餐厅菜单应用在网格视图中呈现每类食物的菜单信息。如果设备为大尺寸显示器，选择网格项将会在同一屏幕上显示食物项的详细内容；如果设备为较小的屏幕，则会显示在另一个屏幕中显示。该设计通过 3 个 Fragment 实现：

UltimateVIewFragment — 包含一个网格视图 fragment 和一个细节视图 fragment 的 fragment；内部 fragment 的可见性将取决于运行时屏幕的尺寸（如果设备采用大尺寸显示器，则仅显示细节视图）
GridViewFragment — 在网格视图中呈现每类食物菜单数据的 fragment
DetailViewFragment — 在网格视图中呈现选中的食物项的细节的 fragment

技巧

Android 开发人员网站上的大部分代码样本仅展示了将两个 Fragment 嵌入一个 Activity 中的主从视图的操作，而没有在一个 fragment 内嵌入两个 fragment 的操作。在样本餐厅应用中，我们执行了第二种方式。操作栏的滑动视图要求使用 fragment 而非 activity。样本餐厅代码将详细展示如何使用标签滑动视图实现该操作。

图 7 适用于采用不同屏幕尺寸的设备的多窗口和主从视图

fragment 的创建

本部分内容将介绍创建本样本中使用的 fragment 所需的步骤。

使用 fragment 在 xml 中定义屏幕布局。以下代码是 UltimateVIewFragment、GridViewFragment 和 DetailViewFragment 的屏幕布局。请注意，以下细节视图的可见性最初设置为 “gone”，在不同屏幕尺寸的设备的布局文件中应分别对其进行更改。例如，如果设备拥有更大的显示器，可见性应设置为 “visible”。请参见下面的“基于屏幕尺寸的多窗口和单窗口布局”部分，了解更多信息。

本部分内容仅展示了 UltimateViewFragment 的屏幕布局。请参见 GridViewFragment (layout/fragment_menu_grid.xml) 和 DetailViewFragment (layout/fragment_disch_detail.xml) 的屏幕布局的完整代码样本。

      
      
       
       
        
        
         
         01 <!—UltimateViewFragment screen layout -->
        
        
        
        
         
         02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        
        
        
        
         
         03     xmlns:tools="http://schemas.android.com/tools"
        
        
        
        
         
         04     android:layout_width="fill_parent"
        
        
        
        
         
         05     android:layout_height="fill_parent"
        
        
        
        
         
         06     android:orientation="horizontal">
        
        
        
        
         
         07      
        
        
        
        
         
         08     <FrameLayout
        
        
        
        
         
         09         android:id="@+id/grid_fragment"
        
        
        
        
         
         10         android:layout_width="wrap_content"
        
        
        
        
         
         11         android:layout_height="wrap_content"
        
        
        
        
         
         12         android:layout_weight="1"/>
        
        
        
        
         
         13          
        
        
        
        
         
         14     <FrameLayout
        
        
        
        
         
         15         android:id="@+id/detail_fragment"
        
        
        
        
         
         16         android:layout_width="wrap_content"
        
        
        
        
         
         17         android:layout_height="wrap_content"
        
        
        
        
         
         18         android:layout_weight="1"
        
        
        
        
         
         19         android:visibility="gone"
        
        
        
        
         
         20         android:orientation="vertical"/>
        
        
        
        
         
         21      
        
        
        
        
         
         22  </LinearLayout>

以编程方式创建和初始化 fragment，并使用 FragmentManager 处理 fragment 的交易。以下代码片段展示了 UltimateViewFragment 的执行； UltimateViewFragment 可在运行过程中创建 MenuGridFragment 和 DetailViewFragment。关于执行 MenuGridFragment 和 DetailViewFragment 的详细信息，请参见完整的样本代码。

      
      
       
       
        
        
         
         01 public void onCreate(Bundle savedInstanceState) {
        
        
        
        
         
         02         super.onCreate(savedInstanceState);
        
        
        
        
         
         03                 
        
        
        
        
         
         04         if (savedInstanceState != null) {  
        
        
        
        
         
         05             String tmp = savedInstanceState.getString("selectedIndex");
        
        
        
        
         
         06             if (tmp != null) {
        
        
        
        
         
         07                 mSelectedIndex = Integer.parseInt(tmp);
        
        
        
        
         
         08             }
        
        
        
        
         
         09             mCategory = savedInstanceState.getString("currentCategory", mCategory);
        
        
        
        
         
         10         } else {
        
        
        
        
         
         11             mCategory = (String) getArguments().getString(MenuFactory.ARG_CATEGORY_NAME);
        
        
        
        
         
         12         }
        
        
        
        
         
         13         mDetailViewFragment = new DetailViewFragment();
        
        
        
        
         
         14         mGridViewFragment = new MenuGridFragment();
        
        
        
        
         
         15                  
        
        
        
        
         
         16         mGridViewFragment.setCategory(mCategory);
        
        
        
        
         
         17         mGridViewFragment.setOnGridItemClickedListener(this);   
        
        
        
        
         
         18              
        
        
        
        
         
         19         FragmentManager fragmentManager = this.getChildFragmentManager();
        
        
        
        
         
         20         FragmentTransaction transaction = fragmentManager.beginTransaction();
        
        
        
        
         
         21          
        
        
        
        
         
         22         if (savedInstanceState != null) {      
        
        
        
        
         
         23             transaction.replace(R.id.detail_fragment, mDetailViewFragment);
        
        
        
        
         
         24             transaction.replace(R.id.grid_fragment, mGridViewFragment);
        
        
        
        
         
         25         } else {
        
        
        
        
         
         26             transaction.add(R.id.detail_fragment, mDetailViewFragment, "detail_view");
        
        
        
        
         
         27             transaction.add(R.id.grid_fragment, mGridViewFragment, "grid_view");
        
        
        
        
         
         28         }
        
        
        
        
         
         29         transaction.commit();  
        
        
        
        
         
         30 }

技巧

fragment 应在一项活动运行时创建，尤其如果准备以动态方式将 fragment 从屏幕中调入或调出时。你可以使用 FragmentManager 在屏幕中添加、更换和删除 Fragment。如代码中所示，FragmentManager 能够从 getChildFragmentManager 而非 getFragmentManager 中检索到，因为子 fragment 的容器是 fragment 而非 Activity。此外，在改变方向时，为了避免在 UltimateViewFragment 中在彼此上面添加相同的 fragment，代码应用使用 FragmentTransaction 中的 “replace” 而非 “add” ，用新的 fragment 替换现有的 fragment。

fragment 和活动之间的通信

fragment 之间的通信可以通过使用监听器模式来实现，这包括两个简单的步骤：

定义一个监听器界面，这可以通过希望从其他组件接收通知的组件来执行。
在使用多窗口和主从 fragment 的情况下，如果子 fragment 发送通知，子 fragment 的容器将注册为子 fragment 的监听器。收到通知后，母 fragment 或活动能够根据接收到的信息执行相应的操作。

以下是餐厅应用中的做法：

定义一个 GridItemListener 界面。该界面通过网格 fragment 容器来实现。当网格选择操作发生时，网格 fragment 将通知母容器。

      
      
       
       
        
        
         
         1 /**
        
        
        
        
         
         2  * An interface implemented by classes which want to receive notification
        
        
        
        
         
         3  * when a menu item is clicked on the grid. This interface is used by 
        
        
        
        
         
         4  * UltimateViewFragment, ActionBarActivity, DetailView to communicate the selected
        
        
        
        
         
         5  * menu item.
        
        
        
        
         
         6 */
        
        
        
        
         
         7 public interface GridItemListener {
        
        
        
        
         
         8     public void onGridItemClick(com.example.restaurant.MenuFactory.MenuItem itemSelected, int position);
        
        
        
        
         
         9 }

UltimateViewFragment 支持调用程序将其注册为 GridItemListener。

      
      
       
       
        
        
         
         1 /* Allow caller to set the grid item listener */
        
        
        
        
         
         2 public void setGridItemListener(GridItemListener gridItemListener) {
        
        
        
        
         
         3     mGridItemListener = gridItemListener;
        
        
        
        
         
         4 }

UltimateViewFragment 通知其监听器网格选择中的变化。

      
      
       
       
        
        
         
         01 /* Handle the event of item click from the menu grid */
        
        
        
        
         
         02 public void onGridItemClick(MenuItem itemSelected, int position) {
        
        
        
        
         
         03     mGridItemListener.onGridItemClick(itemSelected, position);
        
        
        
        
         
         04     mSelectedIndex = position;
        
        
        
        
         
         05     View detail = getActivity().findViewById(R.id.detail_fragment);
        
        
        
        
         
         06     //portrait mode
        
        
        
        
         
         07     if (detail != null && detail.getVisibility() == View.GONE) {
        
        
        
        
         
         08         Intent intent = new Intent(this.getActivity(), DetailActivity.class);
        
        
        
        
         
         09                  intent.setAction("View");
        
        
        
        
         
         10                     intent.putExtra("category", itemSelected.category);
        
        
        
        
         
         11                 intent.putExtra("entree_name", itemSelected.name);
        
        
        
        
         
         12                     Activity activity = getActivity();
        
        
        
        
         
         13                     activity.startActivity(intent);     
        
        
        
        
         
         14              
        
        
        
        
         
         15          //landscape mode
        
        
        
        
         
         16     } else {
        
        
        
        
         
         17         mDetailViewFragment.update(itemSelected);
        
        
        
        
         
         18     }
        
        
        
        
         
         19 }

在 MainActivity 中，每个标签视图都是 UltimateViewFragment 的母视图。 MainActivity 将其自身注册为 GridItemListener，以追踪上一个在每类中选中的食物项。

      
      
       
       
        
        
         
         01 @Override
        
        
        
        
         
         02 public Object instantiateItem(ViewGroup container, int position) {
        
        
        
        
         
         03 super.instantiateItem(container, position);
        
        
        
        
         
         04 UltimateViewFragment fragment = (UltimateViewFragment) 
        
        
        
        
         
         05 super.instantiateItem(container, position);
        
        
        
        
         
         06     fragment.setGridItemListener((GridItemListener) 
        
        
        
        
         
         07     mFragmentActivity);
        
        
        
        
         
         08 fragmentArray[position] = fragment;
        
        
        
        
         
         09 return fragment;
        
        
        
        
         
         10 }

收到通知后，MainActivity 将在监听器回调中采用相应的操作。

      
      
       
       
        
        
         
         1 /**
        
        
        
        
         
         2  * This method is called when a grid menu item is clicked
        
        
        
        
         
         3 */
        
        
        
        
         
         4 public void onGridItemClick(com.example.restaurant.MenuFactory.MenuItem 
        
        
        
        
         
         5     itemSelected, int position) {
        
        
        
        
         
         6 mSelectedItems.put(itemSelected.category, itemSelected);
        
        
        
        
         
         7 }

基于屏幕尺寸的多窗口和单窗口布局

如上文所述，Android fragment 可帮助你为屏幕定义多窗口布局。但是，如何使用屏幕尺寸确定多窗口/单窗口布局，如何根据多窗口/单窗口设计提供不同的屏幕流程呢？ Android 资源系统可为应用提供处理多界面布局的配置限定符。

根据屏幕尺寸，资源系统中将提供不同的布局文件。在应用启动过程中，Android 将根据显示器尺寸运用相应地布局文件。如果采用 Android 3.2 之前的版本，你可以为小型、正常、大型或超大型屏幕定义布局。对于屏幕尺寸小于 426dpx320dp 的设备，布局文件可以在 res/layout-small 中进行定义；对于屏幕尺寸大于 960dpx720dp 的设备，可以在 res/layout-xlarge 中定义。以下是这些屏幕尺寸的定义。

超大尺寸最低为 960dp x 720dp
大型尺寸最低为 640dp x 480dp
正常尺寸最低为 470dp x 320dp
小型尺寸最低为 426dp x 320dp

下图展示了每种尺寸与以英寸计的实际设备尺寸的关系。

图 8 屏幕尺寸限定符与以英寸计的实际显示器尺寸的关系

自 Android 3.2 起，以上屏幕尺寸限定符被限定符 sw<N>dp 取代；其中的 N 是指屏幕看度的像素定义。例如，对于“大型”屏幕，可从 layout-sw600dp 目录中获得布局文件。

我们可以进一步在资源限定符中添加 “portrait” 或 “landscape” 定义。例如，我只想为屏幕宽度为 600dp 的纵向模式进行特别布局。在这种情况下，需要创建layout-sw600dp-port 来存储布局。

以下是基于样本应用中使用的屏幕尺寸和设备方向的布局结构。对于中等尺寸的平板电脑，我希望为纵向模式设置单窗口布局，因为如果在中等尺寸的平板电脑（7 英寸或 8 英寸的平板电脑）上使用多窗口布局，UI 可能会被挤压。

图 9 不同显示器尺寸在资源系统中的多布局文件

不同尺寸的 fragment_ultimate_view.xml 布局大体相同。唯一的不同是子 fragment 的可见性。对于中等尺寸的平板电脑，最终的视图布局如下：

    
    
     
     
      
      
       
       01 <!—UltimateViewFragment screen layout 
      
      
      
      
       
       02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      
      
      
      
       
       03     xmlns:tools="http://schemas.android.com/tools"
      
      
      
      
       
       04     android:layout_width="fill_parent"
      
      
      
      
       
       05     android:layout_height="fill_parent"
      
      
      
      
       
       06     android:orientation="horizontal">
      
      
      
      
       
       07      
      
      
      
      
       
       08     <FrameLayout 
      
      
      
      
       
       09         android:id="@+id/grid_fragment"
      
      
      
      
       
       10         android:layout_width="wrap_content"
      
      
      
      
       
       11         android:layout_height="wrap_content"
      
      
      
      
       
       12         android:layout_weight="1"/>
      
      
      
      
       
       13          
      
      
      
      
       
       14     <FrameLayout 
      
      
      
      
       
       15         android:id="@+id/detail_fragment"
      
      
      
      
       
       16         android:layout_width="wrap_content"
      
      
      
      
       
       17         android:layout_height="wrap_content"
      
      
      
      
       
       18         android:layout_weight="1"
      
      
      
      
       
       19         android:visibility="gone"
      
      
      
      
       
       20         android:orientation="vertical"/>
      
      
      
      
       
       21      
      
      
      
      
       
       22  </LinearLayout>

如何处理不同布局的导航流程？ 在应用运行时，根据视图的可见性，应用可以决定是否需要相同的屏幕（多窗口）上更新其他视图，还是重新打开一个屏幕（但窗口）。 以下代码片段展示了这是如何实现的：

    
    
     
     
      
      
       
       01 /* Handle the event of item click from the menu grid */
      
      
      
      
       
       02 public void onGridItemClick(MenuItem itemSelected, int position) {
      
      
      
      
       
       03     mGridItemListener.onGridItemClick(itemSelected, position);
      
      
      
      
       
       04     mSelectedIndex = position;
      
      
      
      
       
       05     View detail = getActivity().findViewById(R.id.detail_fragment);
      
      
      
      
       
       06     //portrait mode
      
      
      
      
       
       07     if (detail != null && detail.getVisibility() == View.GONE) {
      
      
      
      
       
       08         Intent intent = new Intent(this.getActivity(), DetailActivity.class);
      
      
      
      
       
       09                  intent.setAction("View");
      
      
      
      
       
       10                     intent.putExtra("category", itemSelected.category);
      
      
      
      
       
       11                 intent.putExtra("entree_name", itemSelected.name);
      
      
      
      
       
       12                     Activity activity = getActivity();
      
      
      
      
       
       13                     activity.startActivity(intent);     
      
      
      
      
       
       14              
      
      
      
      
       
       15          //landscape mode
      
      
      
      
       
       16     } else {
      
      
      
      
       
       17         mDetailViewFragment.update(itemSelected);
      
      
      
      
       
       18     }
      
      
      
      
       
       19 }

Fragment 生命周期处理

如同 Android Activity，fragment 在应用的启动、暂停、恢复、停止和破坏状态中执行生命周期回调和相应操作。 fragment 的生命周期管理与 Activity 相似。

技巧

除了常规的 Activity 生命周期回调，如 onCreate、onStart、onResume、onPause、onStop 和 onDestroy 之外，fragment 很少有其他的生命周期回调：

onAttach() – 当 fragment 与活动相关时调用

onCreateView() – 创建与 fragment 相关的视图层级时调用

onActivityCreated() – 当返回活动的 onCreate() 时调用

onDestroyView() – 当与 fragment 相关的视图层级被删除时调用

onDetach() – 当 fragment 与活动断开关联时调用

下图展示了活动生命周期对 fragment 生命周期回调的影响。

图 10 应用生命周期与 fragment 生命周期回调之间的关系

与 Activity 相同，fragment 需要在设备配置变更过程中对应用状态进行保存和恢复，如设备方向的变化、意外破坏活动或暂停活动。保存应用状态需要在 onSaveInstanceState () 回调中进行处理，它应在 Activity 破坏之前调用；恢复应用状态可在 onCreate ()、onCreateView () 或 onActivityCreated () 回调中进行处理。以下代码片段展示了餐厅应用如何在 onSaveInstanceState () 中保存选中的网格项索引并在 onCreate () 进行恢复。

    
    
     
     
      
      
       
       01 public void onCreate (Bundle savedInstanceState) {
      
      
      
      
       
       02     super.onCreate(savedInstanceState);
      
      
      
      
       
       03          
      
      
      
      
       
       04     if (savedInstanceState != null) {
      
      
      
      
       
       05                     String selectedIndex = savedInstanceState.getString("selectedIndex");
      
      
      
      
       
       06                 if(selectedIndex != null) {            
      
      
      
      
       
       07                         mSelectedPosition = Integer.parseInt(selectedIndex);
      
      
      
      
       
       08                  }
      
      
      
      
       
       09          }      
      
      
      
      
       
       10          
      
      
      
      
       
       11     mImageAdapter = new ImageAdapter(getActivity());
      
      
      
      
       
       12 }
      
      
      
      
       
       13      
      
      
      
      
       
       14 /* Saved the last selected Index before orientation change */
      
      
      
      
       
       15 public void  onSaveInstanceState (Bundle outState) {
      
      
      
      
       
       16             //only save the selected position if user has clicked on the item
      
      
      
      
       
       17          if (mSelectedPosition != -1) {
      
      
      
      
       
       18                     outState.putString("selectedIndex", Integer.valueOf(mSelectedPosition).toString());
      
      
      
      
       
       19             }
      
      
      
      
       
       20 }

技巧

有时，由于应用状态数据的复杂性，你可能不希望在配置变化（设备方向变化）时重新创建 fragment。在 fragment 的容器类中调用 setRetainInstance (true) 能够阻止 fragment 在配置变化时重新创建。

Android 资源系统、图形和文本、屏幕分辨率和密度

屏幕上的文本和图形呈现如何处理？针对手机设备选择的字体对于采用大屏幕的平板电脑可能太小。图形图标可能适合平板电脑，但是在屏幕较小的手机上则会太大。如何防止图像在屏幕分辨率不同的设备上被拉伸？

在本部分内容中，我们将介绍几种能够确保文本和图形资源在采用不同分辨率和密度的屏幕上正常显示的技术。

图像和屏幕像素密度

屏幕像素密度对于图形在屏幕上的呈现非常重要。因为每像素的尺寸在低像素密度设备上更大，所以同一个图像会在低像素密度的屏幕上显示得更大。相反，同一个图像在采用高像素密度的屏幕上将显示得更小。在设计 UI 时，你可能会希望在采用不同屏幕像素密度的设备上尽可能保留相同的图像外观。

大部分情况下，这可以通过使用像素独立的单元来实现，如使用 “dp” 和 “wrap_content” 在资源系统中指定图像图示的尺寸和布局。借助像素独立的单元，Android 能够根据屏幕的像素密度来调整图像。以下样本展示了如何使用 “dp” 和 “wrap_content” 在细节视图中展示食物项的图像。

    
    
     
     
      
      
       
       1 <ImageView
      
      
      
      
       
       2     android:id="@+id/dish_image"
      
      
      
      
       
       3     android:layout_width="fill_parent"
      
      
      
      
       
       4     android:layout_height="wrap_content"
      
      
      
      
       
       5     android:layout_below="@+id/cart_area"
      
      
      
      
       
       6     android:minWidth="600dp"
      
      
      
      
       
       7     android:minHeight="400dp"
      
      
      
      
       
       8 android:scaleType="centerCrop"/>

有时候，仅通过这种方式无法完成。例如，由于图像伸展，小图像可能在屏幕上出现像素化。在这种情况下，你应该在 res/drawable 区域提供可替代的图像以避免这种问题。采用不同尺寸的图像可在 res/drawable-<xxxxxx> 文件夹中提供；其中 xxxxxx 是通用的密度类型。下图介绍了实际屏幕密度中的通用密度，以供参考。

图 11 各种 drawable 区域，包含采用不同尺寸显示器的设备的图形资源

图 12 通用屏幕密度在实际 dpi 值中的映射

文本大小和屏幕尺寸

为了增强文本的可辨认性，有时需要根据显示器的尺寸来调整字体。例如，在样本餐厅应用中，对于屏幕宽度小于 600 像素的设备（如手机），我在网格菜单中为食物的名称和价格采用了较小的字号。我创建了一种文本 “style” ，能够在采用较大和较小显示器的屏幕中使用不同的字号。该 style 文件存储在与屏幕尺寸有关的res/values-sw<N>dp 中。

图 13 不同尺寸屏幕的不同 style 文件

以下 style 文件指定了网格菜单项中使用的文本的字体大小。

    
    
     
     
      
      
       
       1 <!—text style for screen with dp smaller than 600    
      
      
      
      
       
       2  <style name="GridItemText">        
      
      
      
      
       
       3         <item name="android:textColor">@color/grid_item_unselected_text</item>
      
      
      
      
       
       4         <item name="android:textStyle">italic</item>
      
      
      
      
       
       5         <item name="android:textSize">14sp</item>
      
      
      
      
       
       6     </style>

    
    
     
     
      
      
       
       1 <!—text style for screen with dp larger than 600    
      
      
      
      
       
       2 <style name="GridItemText">        
      
      
      
      
       
       3         <item name="android:textColor">@color/grid_item_unselected_text</item>
      
      
      
      
       
       4         <item name="android:textStyle">italic</item>
      
      
      
      
       
       5         <item name="android:textSize">20sp</item>
      
      
      
      
       
       6     </style>

网格项的布局文件引用了上面定义的文本 style（view_grid_item.xml）。

    
    
     
     
      
      
       
       01 <TextView
      
      
      
      
       
       02             android:id="@+id/grid_price"
      
      
      
      
       
       03             android:layout_width="wrap_content"
      
      
      
      
       
       04             android:layout_height="wrap_content"
      
      
      
      
       
       05             android:paddingLeft="5dp"
      
      
      
      
       
       06             android:paddingRight="5dp"
      
      
      
      
       
       07             android:paddingTop="15dp"
      
      
      
      
       
       08             android:paddingBottom="15dp"
      
      
      
      
       
       09             android:layout_gravity="right"
      
      
      
      
       
       10  style="@style/GridItemText"/>

结论

Android UI 是 Android 编程中最有趣的领域。设计和编程 Android UI 时需要考虑许多因素。本文讨论了四种基本概念，以帮助你实现构建动态 UI 的目标：

在屏幕导航中使用最新推荐的 UI 元素，如操作栏、标签和滑动视图。
如何处理动态应用数据以及将它们运用到操作栏、标签和滑动视图中的编程实践。
使用 Android fragment 为采用不同尺寸屏幕的设备执行多窗口和主从视图布局
使用 Android 资源系统增强采用不同分辨率和像素密度的屏幕的图形和文本的外观

随着 Android 不断发展，明智的做法是积极采用最新的 UI 技术，并及时了解最新的 UI 概念。掌握这些技术将会帮助你为未来出现的各种 Android 设备轻松设计动态 UI。

参考文献

操作栏创建： https://developer.android.com/training/basics/actionbar/index.html
操作栏风格： https://developer.android.com/training/basics/actionbar/styling.html
多窗口布局： https://developer.android.com/design/patterns/multi-pane-layouts.html
Fragment 编程指南： https://developer.android.com/guide/components/fragments.html
多屏幕设计： https://developer.android.com/guide/practices/screens_support.html
Android SDK 参考： https://developer.android.com/reference/packages.html

关于作者

Mei-Lin Hsieh 是一位在英特尔及其他公司的移动开发领域拥有 15 年工作经验的软件工程师。她目前就职于软件解决方案事业部，主要负责为平板电脑和手机上的 Android 应用提供大规模项目支持。

相关文章与文献：

本文件所描述的产品可能包含使其与宣称的规格不符的设计缺陷或失误。这些缺陷或失误已收录于勘误表中，可索取获得。

在发出订单之前，请联系当地的英特尔营业部或分销商以获取最新的产品规格。

如欲获得本文涉及的带编号文档的副本或其他英特尔文献，可致电 1-800-548-4725，或访问：

http://www.intel.com/design/literature.htm

在性能检测过程中涉及的软件及其性能只有在英特尔微处理器的架构下方能得到优化。性能测试（如 SYSmark* 和

MobileMark*）使用特定的计算机系统、组件、软件、操作和功能进行测量。上述任何要素的变动都有可能导致测试结果的变化。

请参考其他信息及性能测试（包括结合其他产品使用时的运行性能）以对目标产品进行全面评估。

** 该示例源代码根据英特尔示例源代码许可协议发布

原文

focusjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为 Android* 设备构建动态 UI

下载文档下载为 Android* 设备构建动态 UI [PDF 1MB]摘要“动态 UI”对于 Android* 开发人员意味着什么？作为 Android 应用开发人员，你可能希望你的应用 UI 能够适应应用内容的动态环境。你可以进行一定程度的定制，但一般来说最好能够符合最新的 Android 准则和趋势。但是，这可能是一件困难的事情，因为市场上存在多种多样的 Android 设
复制链接

扫一扫