• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=实施自适应用户界面流程
2parent.title=针对多种屏幕进行设计
3parent.link=index.html
4
5trainingnavtop=true
6previous.title=支持各种屏幕密度
7previous.link=screendensities.html
8
9@jd:body
10
11
12<!-- This is the training bar -->
13<div id="tb-wrapper">
14<div id="tb">
15
16<h2>本教程将指导您</h2>
17
18<ol>
19  <li><a href="#TaskDetermineCurLayout">确定当前布局</a></li>
20  <li><a href="#TaskReactToLayout">根据当前布局做出响应</a></li>
21  <li><a href="#TaskReuseFrag">重复使用其他活动中的片段</a></li>
22  <li><a href="#TaskHandleConfigChanges">处理屏幕配置变化</a></li>
23</ol>
24
25<h2>您还应参阅</h2>
26
27<ul>
28  <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">支持平板电脑和手持设备</a></li>
29</ul>
30
31<h2>试试看</h2>
32
33<div class="download-box">
34<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">下载示例应用</a>
35<p class="filename">NewsReader.zip</p>
36</div>
37
38
39</div>
40</div>
41
42<p>根据您的应用当前显示的布局，用户界面流程可能会有所不同。例如，如果您的应用处于双面板模式下，点击左侧面板上的项即可直接在右侧面板上显示相关内容；如果该应用处于单面板模式下，相关内容就应以其他活动的形式在同一面板上显示。</p>
43
44
45<h2 id="TaskDetermineCurLayout">确定当前布局</h2>
46
47<p>由于每种布局的实施都会稍有不同，因此您可能需要先确定当前向用户显示的布局。例如，您可以了解用户所处的是“单面板”模式还是“双面板”模式。要做到这一点，您可以查询指定视图是否存在以及是否已显示出来。</p>
48
49<pre class="prettyprint">
50public class NewsReaderActivity extends FragmentActivity {
51    boolean mIsDualPane;
52
53    &#64;Override
54    public void onCreate(Bundle savedInstanceState) {
55        super.onCreate(savedInstanceState);
56        setContentView(R.layout.main_layout);
57
58        View articleView = findViewById(R.id.article);
59        mIsDualPane = articleView != null &amp;&amp;
60                        articleView.getVisibility() == View.VISIBLE;
61    }
62}
63</pre>
64
65<p>请注意，这段代码用于查询“报道”面板是否可用，与针对具体布局的硬编码查询相比，这段代码的灵活性要大得多。</p>
66
67<p>再举一个适应各种组件的存在情况的方法示例：在对这些组件执行操作前先查看它们是否可用。例如，新闻阅读器示例应用中有一个用于打开菜单的按钮，但只有在版本低于 3.0 的 Android 上运行该应用时，这个按钮才会存在，因为 API 级别 11 或更高级别中的  <PH>{@link android.app.ActionBar}</PH>  已取代了该按钮的功能。因此，您可以使用以下代码为此按钮添加事件侦听器：</p>
68
69<pre class="prettyprint">
70Button catButton = (Button) findViewById(R.id.categorybutton);
71OnClickListener listener = /* create your listener here */;
72if (catButton != null) {
73    catButton.setOnClickListener(listener);
74}
75</pre>
76
77
78<h2 id="TaskReactToLayout">根据当前布局做出响应</h2>
79
80<p>有些操作可能会因当前的具体布局而产生不同的结果。例如，在新闻阅读器示例中，如果用户界面处于双面板模式下，那么点击标题列表中的标题就会在右侧面板中打开相应报道；但如果用户界面处于单面板模式下，那么上述操作就会启动一个独立活动：</p>
81
82<pre>
83&#64;Override
84public void onHeadlineSelected(int index) {
85    mArtIndex = index;
86    if (mIsDualPane) {
87        /* display article on the right pane */
88        mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
89    } else {
90        /* start a separate activity */
91        Intent intent = new Intent(this, ArticleActivity.class);
92        intent.putExtra("catIndex", mCatIndex);
93        intent.putExtra("artIndex", index);
94        startActivity(intent);
95    }
96}
97</pre>
98
99<p>同样，如果该应用处于双面板模式下，就应设置带导航标签的操作栏；但如果该应用处于单面板模式下，就应使用旋转窗口小部件设置导航栏。因此您的代码还应确定哪种情况比较合适：</p>
100
101<pre>
102final String CATEGORIES[] = { "热门报道", "政治", "经济", "Technology" };
103
104public void onCreate(Bundle savedInstanceState) {
105    ....
106    if (mIsDualPane) {
107        /* use tabs for navigation */
108        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);
109        int i;
110        for (i = 0; i &lt; CATEGORIES.length; i++) {
111            actionBar.addTab(actionBar.newTab().setText(
112                CATEGORIES[i]).setTabListener(handler));
113        }
114        actionBar.setSelectedNavigationItem(selTab);
115    }
116    else {
117        /* use list navigation (spinner) */
118        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);
119        SpinnerAdapter adap = new ArrayAdapter<String>(this,
120                R.layout.headline_item, CATEGORIES);
121        actionBar.setListNavigationCallbacks(adap, handler);
122    }
123}
124</pre>
125
126
127<h2 id="TaskReuseFrag">重复使用其他活动中的片段</h2>
128
129<p>多屏幕设计中的重复模式是指，对于某些屏幕配置，已实施界面的一部分会用作面板；但对于其他配置，这部分就会以独立活动的形式存在。例如，在新闻阅读器示例中，对于较大的屏幕，新闻报道文本会显示在右侧面板中；但对于较小的屏幕，这些文本就会以独立活动的形式存在。</p>
130
131<p>在类似情况下，您通常可以在多个活动中重复使用相同的  <PH>{@link android.app.Fragment}</PH>  子类以避免代码重复。例如，您在双面板布局中使用了 <code>ArticleFragment</code>：</p>
132
133{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
134
135<p>然后又在小屏幕的活动布局中重复使用（无布局）了它 (<code>ArticleActivity</code>)：</p>
136
137<pre>
138ArticleFragment frag = new ArticleFragment();
139getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
140</pre>
141
142<p>当然，这与在 XML 布局中声明片段的效果是一样的，但在这种情况下却没必要使用 XML 布局，因为报道片段是此活动中的唯一组件。</p>
143
144<p>请务必在设计片段时注意，不要针对具体活动创建强耦合。要做到这一点，您通常可以定义一个界面，该界面概括了相关片段与其主活动交互所需的全部方式，然后让主活动实施该界面：</p>
145
146<p>例如，新闻阅读器应用的 <code>HeadlinesFragment</code> 会精确执行以下代码：</p>
147
148<pre>
149public class HeadlinesFragment extends ListFragment {
150    ...
151    OnHeadlineSelectedListener mHeadlineSelectedListener = null;
152
153    /* Must be implemented by host activity */
154    public interface OnHeadlineSelectedListener {
155        public void onHeadlineSelected(int index);
156    }
157    ...
158
159    public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
160        mHeadlineSelectedListener = listener;
161    }
162}
163</pre>
164
165<p>然后，如果用户选择某个标题，相关片段就会通知由主活动指定的侦听器（而不是通知某个硬编码的具体活动）：</p>
166
167<pre>
168public class HeadlinesFragment extends ListFragment {
169    ...
170    &#64;Override
171    public void onItemClick(AdapterView&lt;?&gt; parent,
172                            View view, int position, long id) {
173        if (null != mHeadlineSelectedListener) {
174            mHeadlineSelectedListener.onHeadlineSelected(position);
175        }
176    }
177    ...
178}
179</pre>
180
181<p><a
182href="{@docRoot}guide/practices/tablets-and-handsets.html">支持平板电脑和手持设备</a>的指南中进一步介绍了此技术。</p>
183
184
185<h2 id="TaskHandleConfigChanges">处理屏幕配置变化</h2>
186
187<p>如果您使用独立活动实施界面的独立部分，那么请注意，您可能需要对特定配置变化（例如屏幕方向的变化）做出响应，以便保持界面的一致性。</p>
188
189<p>例如，在运行 Android 3.0 或更高版本的标准 7 英寸平板电脑上，如果新闻阅读器示例应用运行在纵向模式下，就会在使用独立活动显示新闻报道；但如果该应用运行在横向模式下，就会使用双面板布局。</p>
190
191<p>也就是说，如果用户处于纵向模式下且屏幕上显示的是用于阅读报道的活动，那么您就需要在检测到屏幕方向变化（变成横向模式）后执行相应操作，即停止上述活动并返回主活动，以便在双面板布局中显示相关内容：</p>
192
193<pre>
194public class ArticleActivity extends FragmentActivity {
195    int mCatIndex, mArtIndex;
196
197    &#64;Override
198    protected void onCreate(Bundle savedInstanceState) {
199        super.onCreate(savedInstanceState);
200        mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
201        mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
202
203        // If should be in two-pane mode, finish to return to main activity
204        if (getResources().getBoolean(R.bool.has_two_panes)) {
205            finish();
206            return;
207        }
208        ...
209}
210</pre>
211
212
213