【Interface&navigation】实现自适应UI流程（6）

根据您的应用程序当前显示的布局，UI流可能会有所不同。例如，如果您的应用程序处于双窗格模式，则单击左窗格上的项目将仅显示右窗格中的内容; 如果它处于单窗格模式，则内容应单独显示（在不同的活动中）。

除此页面外，您还可以在支持平板电脑和手持设备上找到设备特定的指导。

确定当前布局

由于每个布局的实现将有所不同，因此您可能必须做的第一件事之一是确定用户当前正在查看的布局。例如，您可能想知道用户是处于“单窗格”模式还是“双窗格”模式。您可以通过查询给定的视图是否存在并且可见来做到这一点：

public class NewsReaderActivity extends FragmentActivity {
    boolean mIsDualPane;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        View articleView = findViewById(R.id.article);
        mIsDualPane = articleView != null &&
                        articleView.getVisibility() == View.VISIBLE;
    }
}

请注意，此代码将查询“文章”窗格是否可用，这比为特定布局硬编码查询更灵活。

如何适应不同组件的存在的另一个例子是在对它们执行操作之前检查它们是否可用。例如，在新闻阅读器示例应用程序中，有一个按钮可打开菜单，但该按钮仅在运行于Android 3.0以上版本时才存在（因为它的功能是由ActionBarAPI级别11+ 接管的）。所以，为这个按钮添加事件监听器，你可以这样做：

Button catButton = (Button) findViewById(R.id.categorybutton);
OnClickListener listener = /* create your listener here */;
if (catButton != null) {
    catButton.setOnClickListener(listener);
}

根据当前布局做出反应

根据当前布局，某些操作可能会有不同的结果。例如，在新闻阅读器示例中，如果用户界面处于双窗格模式，单击标题列表中的标题可打开右侧窗格中的文章，但如果用户界面位于单窗格中，将启动单独的活动模式：

@Override
public void onHeadlineSelected(int index) {
    mArtIndex = index;
    if (mIsDualPane) {
        /* display article on the right pane */
        mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
    } else {
        /* start a separate activity */
        Intent intent = new Intent(this, ArticleActivity.class);
        intent.putExtra("catIndex", mCatIndex);
        intent.putExtra("artIndex", index);
        startActivity(intent);
    }
}

同样，如果应用程序处于双窗格模式，则应该设置带有用于导航的选项卡的操作栏，而如果应用程序处于单窗格模式，则应该使用微调控件设置导航。所以你的代码也应该检查哪种情况是合适的：

final String CATEGORIES[] = { "Top Stories", "Politics", "Economy", "Technology" };

public void onCreate(Bundle savedInstanceState) {
    ....
    if (mIsDualPane) {
        /* use tabs for navigation */
        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);
        int i;
        for (i = 0; i < CATEGORIES.length; i++) {
            actionBar.addTab(actionBar.newTab().setText(
                CATEGORIES[i]).setTabListener(handler));
        }
        actionBar.setSelectedNavigationItem(selTab);
    }
    else {
        /* use list navigation (spinner) */
        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);
        SpinnerAdapter adap = new ArrayAdapter(this,
                R.layout.headline_item, CATEGORIES);
        actionBar.setListNavigationCallbacks(adap, handler);
    }
}

在其他活动中重复使用片段

为多个屏幕设计的循环模式是将界面的一部分作为某些屏幕配置的窗格实现，并作为其他配置的单独活动。例如，在新闻阅读器示例中，新闻文章文本显示在大屏幕的右侧窗格中，但在较小的屏幕上是单独的活动。

在这种情况下，通常可以通过Fragment在多个活动中重用相同的子类来避免代码重复。例如， ArticleFragment 在双窗格布局中使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="400dp"
              android:layout_marginRight="10dp"/>
    <fragment android:id="@+id/article"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.ArticleFragment"
              android:layout_width="fill_parent" />
</LinearLayout>

在小屏幕（ArticleActivity）的活动布局中重用（没有布局）：

ArticleFragment frag = new ArticleFragment();
getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();

当然，这与在XML布局中声明片段具有相同的效果，但在这种情况下，XML布局是不必要的，因为文章片段是此活动的唯一组件。

设计片段时需要牢记的一点非常重要，那就是不要为特定活动创建强大的耦合。通常可以通过定义一个接口来实现该功能，该接口抽象出片段需要与其宿主活动交互的所有方式，然后宿主活动实现该接口：

例如，新闻阅读器应用程序HeadlinesFragment就是这样做的：

public class HeadlinesFragment extends ListFragment {
    ...
    OnHeadlineSelectedListener mHeadlineSelectedListener = null;

    /* Must be implemented by host activity */
    public interface OnHeadlineSelectedListener {
        public void onHeadlineSelected(int index);
    }
    ...

    public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
        mHeadlineSelectedListener = listener;
    }
}

然后，当用户选择标题时，片段通知由主机活动指定的监听者（而不是通知特定的硬编码活动）：

public class HeadlinesFragment extends ListFragment {
    ...
    @Override
    public void onItemClick(AdapterView<?> parent,
                            View view, int position, long id) {
        if (null != mHeadlineSelectedListener) {
            mHeadlineSelectedListener.onHeadlineSelected(position);
        }
    }
    ...
}

这项技术将在“ 支持平板电脑和手机指南”中进一步讨论。

处理屏幕配置更改

如果您正在使用单独的活动来实现界面的不同部分，则必须记住，可能需要对某些配置更改（例如轮换更改）作出反应，以保持界面的一致性。

例如，在运行Android 3.0或更高版本的典型7英寸平板电脑上，新闻阅读器示例使用单独的活动在纵向模式下运行时显示新闻文章，但在横向模式下使用双窗格布局。

这意味着，当用户处于肖像模式并且查看文章的活动在屏幕上时，您需要检测到方向已更改为横向，并通过结束活动并返回到主活动来做出适当反应，以便内容可以显示在双窗格布局：

public class ArticleActivity extends FragmentActivity {
    int mCatIndex, mArtIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
        mArtIndex = getIntent().getExtras().getInt("artIndex", 0);

        // If should be in two-pane mode, finish to return to main activity
        if (getResources().getBoolean(R.bool.has_two_panes)) {
            finish();
            return;
        }
        ...
}

联系我

QQ:94297366
微信打赏：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公众号推荐：

【Interface&navigation】实现自适应UI流程（6）