Android 4.4创建The Master/Detail Flow应用程序 翻译

源地址：http://www.techotopia.com/index.php/An_Android_Master/Detail_Flow_Tutorial

这个网址有时候能打开，有时候打不开，看人品了。

昨天晚上写安卓程序时，意外地发现：

Create Android Application 下面有一个Master/Detail Flow 选项，看着右边的图片引发我的好奇心。

然后就来剖析一下这个Master/Detail Flow。

The Anatomy（剖析）of the Master/Detail Flow Template

下面的<kind_name>是你在创建时候点Finish那个对话框里面，你填写的Object Kind名。

• <kind_name>ListActivity.java – 这个是项目的主activity,她的目的是用来显示Master/Detail里面的Master列表 (它的布局存贮在res ==> layout ==> activity_<kind_name>_list.xml里面).如果类检测到显示器很大足以支持两个面板模式(Master/Detai可以在一个超大屏幕上显示)，从activity_ <kind_name> _twopane.xml文件里的<kind_name> _list fragment创建并显示一个实例。 否则, 就使用activity_<kind_name>_list.xml文件生成一个实例. 这个类也实现并建立 onItemSelected() 回调函数，在用户从Master列表选中一个项目时被调用。onItemSelected()方法的职责是创建并显示Detail面板的实例。在两个面板模式的情况中，Detail面板是通过实例化<kind_name>DetailFragment这个类，并把它加到当前的Activity中（ItemDetailFragment fragment = new ItemDetailFragment();）。在一个小显示器的设备中，不是调用第二个Activity--<kind_name>DetailFragment，而是... On smaller device displays, this instead involves launching a second activity in the form of the <kind_name>DetailActivity class (which will then, in turn, create an instance of the <kind_name>DetailFragment class).

• activity_<kind_name>_twopane.xml –大屏显示器用这个 Contains both the <kind_name>_list master list fragment and <kind_name>_detail_container FrameLayout declarations for the detail pane to be used when the application is running on a device large enough to support two-pane mode.
• activity_<kind_name>_list.xml –小显示器用这个 The XML layout resource file containing the <kind_name>_list fragment for the master list to be used on displays too small to support two-pane mode.

• <kind_name>ListFragment.java – 这个Java类与activity_<kind_name>_list.xml fragment资源文件相伴. 这个类包含一些用于识别和高亮显示用户在Master列表中选中的项目。
• <kind_name>DetailActivity.java – 这个Java类展示了Detail面板的活动Activity，以备设备太小而不能处理双面板模式之用。这个类创建<kind_name> FragmentDetail类的实例，并显示在activity_ <kind_name> _detail.xml 文件中声明的<kind_name> _detail_container的FrameLayout容器。
• activity_<kind_name>_detail.xml – 伴随在小屏幕设备使用的<kind_name> ActivityDetail.java类文件的XML资源布局。默认情况下，这包含将要添加的<kind_name> FragmentDetail 类中声明的用户界面元素的FrameLayout实例。
• <kind_name>DetailFragment.java – 伴随着fragment_ <kind_name> _detail.xml XML资源文件的Java类。在此方法中的代码加载与主列表相关的数据，向用户显示显示fragment_ <kind_name> _detail.xml文件中的内容。
• fragment_<kind_name>_detail.xml –对于Detail面板， <kind_name>_detail 用户接口是用于显示在 <kind_name>DetailFragment 类中的onCreateView() 方法.默认情况下，这个包含了一个TextView的对象实例，并同时用于双面板和小屏幕模式。
• DummyContent.java – 旨在提供样本数据的模板类文件。这个类可以被修改或完全取代，以满足应用程序的需要。默认情况下，这个类提供的内容仅仅是一些字符串。

res/values-large/refs.xml 和res/values-sw600dp/refs.xml 两个附加的文件，纯属为了有助于理解这个程序如何帮助辨别是否使用双面板模式。

Handling Different Android Devices and Displays 这一章有着更加详细的勾勒。每个应用程序项目都拥有多套针对不同显示器大小的资源。运行时，安卓系统自动地使用哪些最为匹配物理设备大小的资源集。当然，values-large 和values-sw600dp用于大显示器的设备。在这些文件夹中ref.xml文件仅仅是声明一个导致所双窗口布局可以被使用的别名：

<item name="activity_item_list" type="layout">@layout/activity_item_twopane</item>

Modifying the Master/Detail Flow Template

虽然 Master/Detail Flow模板的结构在一开始显示的很混乱，但是随着默认模板在本章的随后部分被修改，它的概念将会变得更加清晰。随之出现的是，其中很大一部分由模板提供的功能，在许多Master/Detail实现中是不需要修改的。

在本章的剩余部分，该MasterDetailFlow项目将被修改，以使主列表显示网站名称的列表，并改变以包含web视图对象，而不是目前的TextView的详细信息窗格中。当一个网站是由用户选择，相应的网页将随后加载和在细节窗格中显示

In the rest of this chapter, the MasterDetailFlow project will be modified such that the master list displays a list of web site names and the detail pane altered to contain a WebView object instead of the current TextView. When a web site is selected by the user, the corresponding web page will subsequently load and display in the detail pane.

在随后的章节中，MasterDetailFlow project将会被修改，以至于Master列表显示的是一列网址名称，Detail面板变为包含一个WebView对象，而不是当前的TextView。当用户选择了一个网址，相应的网页将被随后加载并显示在Detail pane中

Changing the Content Model

The content for the example as it currently stands is defined by the DummyContent class file。因此，开始通过选择DummyContent.java文件，并检查代码。在文件的底部是一个声明了一个名为DummyItem类，这是目前能够存储两个String对象，分别表示content string和一个ID 。另一方面，更新后的项目，将需要每个item object包含一个ID string，用于网站名称的字符串，和一个网址URL。要添加这些功能，修改DummyItem类，以便它的内容如下：

public static class DummyItem {
	public String id;
	public String website_name;
	public String website_url;

	public DummyItem(String id, String website_name, 
             String website_url) 
	{
		this.id = id;
		this.website_name = website_name;
		this.website_url = website_url;
	}
	
	@Override
	public String toString() {
		return website_name;
	}
}

注意到这个类现在添加了3个Items。分别显示为 “Item 1”, “Item 2” and “Item 3”:

public static Map<String, DummyItem> ITEM_MAP = 
          new HashMap<String, DummyItem>();

static {
	// Add 3 sample items.
	addItem(new DummyItem("1", "Item 1"));
	addItem(new DummyItem("2", "Item 2"));
	addItem(new DummyItem("3", "Item 3"));
}

his code needs to be modified to initialize the data model with the required web site data:

public static Map<String, DummyItem> ITEM_MAP = 
          new HashMap<String, DummyItem>();

static {
	// Add 3 sample items.
	addItem(new DummyItem("1", "eBookFrenzy", 
		"http://www.ebookfrenzy.com"));
	addItem(new DummyItem("2", "Google", 
		"http://www.google.com"));
	addItem(new DummyItem("3", "Android", 
		"http://www.android.com"));
}

The code now takes advantage of the modified DummyItem class to store an ID, web site name and URL for each item.

上面几句话只可意会，意思是把

addItem(new DummyItem("1", "Item 1"));

 修改为

addItem(new DummyItem("1", "eBookFrenzy", "http://www.ebookfrenzy.com"));

修改Detail Pane：

Changing the Detail Pane

The detail information shown to the user when an item is selected from the master list is currently displayed via the layout contained in the fragment_website_detail.xml file. By default this contains a single view in form of a TextView. Since the TextView class is not capable of displaying a web page, this needs to be changed to a WebView object for the purposes of this tutorial. To achieve this, navigate to the res -> layout -> fragment_website_detail.xml file in the Project Explorer panel and double click on it to load it. Switch to the Graphical Layout tool display if it is not already displayed before right-clicking on the white background of the display canvas (which represents the TextView). From the resulting menu, select the Change Widget Type… menu option. In the Change Widget Type dialog, change the widget type from TextView to WebView before clicking on OK to commit the change.（下面是意译，因为直译对我来说，实在是太痛苦了，不过我还是能看懂英文的）

双击打开res -> layout ->fragment_<kind_name>_detail.xml文件。在Graphical Laout中显示一个图形界面，点击右上角的MaxMize按钮，不是编成软件最外面的那个放大按钮。在Structure的Outline中显示<kind_name>(TextView),因为它默认显示的是一个TextView，为了显示网页，需要把它修改为WebView。右击白色区域，选择Change Widget Type，弹出Change Widget Type对话框，选择WebView。

Modifying the WebsiteDetailFragment Class

At this point the user interface detail panel has been modified but the corresponding Java class is still designed for working with a TextView object instead of a WebView. Load the source code for this class by double clicking on the WebsiteDetailFragment.java file in the Project Explorer panel. Within the source file locate the onCreateView() method which should read as outlined in the following listing:（以下为意译）

虽然res -> layout ->fragment_<kind_name>_detail.xml里面的用户界面已经被修改，但相应的Java类没有变，仍然是TextView而不是WebView，所以我们要进入WebsiteDetailFragment.java文件。修改onCreateView（）方法如下：

把((TextView) rootView.findViewById(R.id.item_detail)).setText(mItem.content);修改为：((WebView) rootView.findViewById(R.id.item_detail)).loadUrl(mItem.website_url);即可。

package com.example.masterdetailflow;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
.
.
.
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
		Bundle savedInstanceState) {

	View rootView = 
		inflater.inflate(R.layout.fragment_website_detail,
			container, false);

	// Show the dummy content as text in a TextView.
	if (mItem != null) {
		((TextView) rootView.findViewById(R.id.website_detail))
				.setText(mItem.content);
	}

	return rootView;
}

In order to load the web page URL corresponding to the currently selected item only one line of code needs to be changed. Once this change has been made, the method should read as follows (note also the addition of the import directive for the android.webkit.WebView library):

package com.example.masterdetailflow;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
.
.
.
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
		Bundle savedInstanceState) {

	View rootView = 
		inflater.inflate(R.layout.fragment_website_detail,
			container, false);

	// Show the dummy content as text in a TextView.
	if (mItem != null) {
		((WebView) rootView.findViewById(R.id.website_detail))
			.loadUrl(mItem.website_url);
	return rootView;
}

All that this change does is find the view with the ID of website_detail (this was formally the TextView but is now a WebView), extracts the URL of the web site from the selected item and instructs the WebView object to load that page.

Adding Manifest Permissions

最后一步是通过manifest文件添加网络权限到应用程序中。这将会允许WebView 对象访问网络下载网络页面。修改项目中的 AndroidManifest.xml文件 。 添加合适的权限行到该文件中:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.masterdetailflow"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-permission android:name="android.permission.INTERNET" />"
    
    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="17" />
.
.
.
</manifest>

Running the Application

Compile and run the application on a suitably configured emulator or an attached Android device. Depending on the size of the display, the application will appear either in small screen or two-pane mode. Regardless, the master list should appear primed with the names of the three web sites defined in the content model. Selecting an item should cause the corresponding web site to appear in the detail panel as illustrated in two-pane mode in Figure 23-5:

总结：

一个master/detail用户界面由项目的Master列表，选中它，一个细节面板中会显示有关该选择的更多信息。master/detail Flow 是Android ADT bundle提供的一个模板，允许一个master/detail管理被快速和相对容易创建。在本章中的演示中，对默认模板文件稍加修改，各种基于Master/Detail的功能可以通过少量的修改和设计付出即可实现。