Android 4.4創建The Master/Detail Flow應用程序 翻譯

 

這個網址有時候能打開,有時候打不開,看人品瞭。

昨天晚上寫安卓程序時,意外地發現:

Create Android Application 下面有一個Master/Detail Flow 選項,看著右邊的圖片引發我的好奇心。

然後就來剖析一下這個Master/Detail Flow。

 

The Anatomy(剖析)of the Master/Detail Flow Template

 

下面的是你在創建時候點Finish那個對話框裡面,你填寫的Object Kind名。

 

ListActivity.java – 這個是項目的主activity,她的目的是用來顯示Master/Detail裡面的Master列表 (它的佈局存貯在res ==> layout ==> activity__list.xml裡面).如果類檢測到顯示器很大足以支持兩個面板模式(Master/Detai可以在一個超大屏幕上顯示),從activity_ _twopane.xml文件裡的 _list fragment創建並顯示一個實例。 否則, 就使用activity__list.xml文件生成一個實例. 這個類也實現並建立 onItemSelected() 回調函數,在用戶從Master列表選中一個項目時被調用。onItemSelected()方法的職責是創建並顯示Detail面板的實例。在兩個面板模式的情況中,Detail面板是通過實例化DetailFragment這個類,並把它加到當前的Activity中(ItemDetailFragment fragment = new ItemDetailFragment();)。在一個小顯示器的設備中,不是調用第二個Activity–DetailFragment,而是… On smaller device displays, this instead involves launching a second activity in the form of the DetailActivity class (which will then, in turn, create an instance of the DetailFragment class).

 

 

 

activity__twopane.xml –大屏顯示器用這個 Contains both the _list master list fragment and _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__list.xml –小顯示器用這個 The XML layout resource file containing the _list fragment for the master list to be used on displays too small to support two-pane mode.

 

 

ListFragment.java – 這個Java類與activity__list.xml fragment資源文件相伴. 這個類包含一些用於識別和高亮顯示用戶在Master列表中選中的項目。DetailActivity.java – 這個Java類展示瞭Detail面板的活動Activity,以備設備太小而不能處理雙面板模式之用。這個類創建 FragmentDetail類的實例,並顯示在activity_ _detail.xml 文件中聲明的 _detail_container的FrameLayout容器。activity__detail.xml – 伴隨在小屏幕設備使用的 ActivityDetail.java類文件的XML資源佈局。默認情況下,這包含將要添加的 FragmentDetail 類中聲明的用戶界面元素的FrameLayout實例。DetailFragment.java – 伴隨著fragment_ _detail.xml XML資源文件的Java類。在此方法中的代碼加載與主列表相關的數據,向用戶顯示顯示fragment_ _detail.xml文件中的內容。fragment__detail.xml –對於Detail面板, _detail 用戶接口是用於顯示在 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文件僅僅是聲明一個導致所雙窗口佈局可以被使用的別名:

@layout/activity_item_twopane

 

 

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 ITEM_MAP = 
          new HashMap();

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 ITEM_MAP = 
          new HashMap();

static {
	// Add 3 sample items.
	addItem(new DummyItem(1, eBookFrenzy, 
		https://www.ebookfrenzy.com));
	addItem(new DummyItem(2, Google, 
		https://www.google.com));
	addItem(new DummyItem(3, Android, 
		https://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, https://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__detail.xml文件。在Graphical Laout中顯示一個圖形界面,點擊右上角的MaxMize按鈕,不是編成軟件最外面的那個放大按鈕。在Structure的Outline中顯示(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__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文件 。 添加合適的權限行到該文件中:




    
    
    
.
.
.

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的功能可以通過少量的修改和設計付出即可實現。

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *