实现自适应界面流程

根据应用当前显示的布局,界面流程可能会有所不同。例如,如果您的应用处于双窗格模式,则点击左侧窗格中的某个项目时,会直接在右侧窗格中显示相应内容;如果它处于单窗格模式,则内容应单独显示(在不同的 Activity 中)。

除本页之外,您还可以找到有关支持平板电脑和手机的设备专用指南。

确定当前布局

由于您对每个布局的实现都会略有差异,因此您的首要任务之一或许就是确定用户当前正在查看的布局。例如,您可能想知道用户是处于“单窗格”模式还是“双窗格”模式。您可以通过查询给定视图是否存在以及是否可见来实现此目的:

Kotlin

    class NewsReaderActivity : FragmentActivity() {
        private var mIsDualPane: Boolean = false

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.main_layout)

            val articleView: View? = findViewById(R.id.article)
            mIsDualPane = articleView?.visibility == View.VISIBLE
        }
    }
    

Java

    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;
        }
    }
    

请注意,此代码将查询是否有“article”窗格,这比对特定布局的查询进行硬编码要灵活得多。

下面再举一个例子,说明如何适应不同组件的存在,那就是先检查是否有相应组件,然后再对其执行操作。例如,在 News Reader 应用示例中,有一个按钮用于打开菜单,但该按钮只在运行于 Android 3.0 以下的版本时才存在(因为从 API 级别 11 开始,其功能已被 ActionBar 取代)。因此,要为此按钮添加事件监听器,您可以编写以下代码:

Kotlin

    val catButton: Button? = findViewById(R.id.categorybutton)
    catButton?.setOnClickListener {
        /* create your listener here */
    }
    

Java

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

根据当前布局做出反应

某些操作可能会有不同的结果,具体取决于当前布局。例如,在 News Reader 示例应用中,如果界面处于双窗格模式,则点击标题列表中的某个标题时,会在右侧窗格中打开相应报道,但如果界面处于单窗格模式,则会启动不同的 Activity:

Kotlin

    fun onHeadlineSelected(index: Int) {
        mArtIndex = index
        if (mIsDualPane) {
            /* display article on the right pane */
            mArticleFragment.displayArticle(mCurrentCat.articles[index])
        } else {
            /* start a separate activity */
            val intent = Intent(this, ArticleActivity::class.java).apply {
                putExtra("catIndex", mCatIndex)
                putExtra("artIndex", index)
            }
            startActivity(intent)
        }
    }
    

Java

    @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);
        }
    }
    

同样,如果应用处于双窗格模式,其设置的操作栏应包含用于导航的标签,而如果应用处于单窗格模式,则应设置具有微调框微件的导航。因此,您的代码还应检查哪一种情况合适:

Kotlin

    private val CATEGORIES = arrayOf("Top Stories", "Politics", "Economy", "Technology")

    override fun onCreate(savedInstanceState: Bundle?) {
        ....
        actionBar.apply {
            if (mIsDualPane) {
                /* use tabs for navigation */
                navigationMode = android.app.ActionBar.NAVIGATION_MODE_TABS
                CATEGORIES.forEach { category ->
                    addTab(actionBar.newTab().setText(category).setTabListener(tabListener))
                }
                actionBar.setSelectedNavigationItem(selTab)
            } else {
                /* use list navigation (spinner) */
                navigationMode = android.app.ActionBar.NAVIGATION_MODE_LIST
                ArrayAdapter<String>(
                        this@NewsReaderActivity,
                        R.layout.headline_item,
                        CATEGORIES
                ).also { adap ->
                    setListNavigationCallbacks(adap, navigationListener)
                }
            }
        }
    }
    

Java

    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<String>(this,
                    R.layout.headline_item, CATEGORIES);
            actionBar.setListNavigationCallbacks(adap, handler);
        }
    }
    

在其他 Activity 中重复使用 Fragment

在面向多种屏幕设计时采用的一种重复模式是,让界面的某一部分在一些屏幕配置下以窗格的形式实现,而在其他配置下以单独 Activity 的形式实现。例如,在 News Reader 示例应用中,新闻报道正文在较大屏幕上显示在右侧窗格中,但在较小屏幕上则显示在一个单独的 Activity 中。

在这类情况下,您通常可以通过在几个 Activity中重复使用同一 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>

并在适用于较小屏幕的 Activity 布局中重复使用(无布局)(ArticleActivity):

Kotlin

    supportFragmentManager.beginTransaction()
            .add(android.R.id.content, ArticleFragment())
            .commit()
    

Java

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

当然,这与在 XML 布局中声明 Fragment 的效果相同,但在此情况下,XML 布局是无用功,因为报道 Fragment 是该 Activity 的唯一组件。

设计 Fragment 时需要牢记的一个要点是,不要创建与特定 Activity 的强耦合。为此,您通常可以定义一个接口,将 Fragment 与其宿主 Activity 进行交互时需要使用的所有方式抽象化,然后宿主 Activity 实现该接口。

例如,News Reader 应用的 HeadlinesFragment 发挥的就是这个作用:

Kotlin

    class HeadlinesFragment : ListFragment() {
        ...
        private var mHeadlineSelectedListener: OnHeadlineSelectedListener? = null

        /* Must be implemented by host activity */
        interface OnHeadlineSelectedListener {
            fun onHeadlineSelected(index: Int)
        }
        ...

        fun setOnHeadlineSelectedListener(listener: OnHeadlineSelectedListener) {
            mHeadlineSelectedListener = listener
        }
    }
    

Java

    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;
        }
    }
    

然后,当用户选择某个标题时,该 Fragment 便会通知由宿主 Activity 指定的监听器(而不是通知特定硬编码的 Activity):

Kotlin

    class HeadlinesFragment : ListFragment() {
        ...
        fun onItemClick(parent: AdapterView<*>, view: View, position: Int, id: Long) =
                mHeadlineSelectedListener?.onHeadlineSelected(position)
        ...
    }
    

Java

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

支持平板电脑和手机指南中进一步阐述了此技巧。

处理屏幕配置变更

如果您要使用不同的 Activity 来实现界面的不同部分,您必须牢记的是,可能需要对某些配置变更(如旋转变化)作出反应,以使界面保持一致。

例如,在一台运行 Android 3.0 或更高版本的典型 7 英寸平板电脑上,当平板电脑在纵屏模式下运行时,News Reader 示例应用使用单独的 Activity 来显示新闻报道,但在横屏模式下则使用双窗格布局。

这意味着,当用户处于纵屏模式并且用于查看报道的 Activity 位于屏幕上时,您需要能够检测到屏幕方向已变为横向并作出相应的反应:结束该 Activity 并返回主 Activity,以便内容可以显示在双窗格布局中:

Kotlin

    class ArticleActivity : FragmentActivity() {

        private var mCatIndex: Int = 0
        private var mArtIndex: Int = 0

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            mCatIndex = intent.extras?.getInt("catIndex", 0) ?: 0
            mArtIndex = intent.extras?.getInt("artIndex", 0) ?: 0

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

Java

    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;
            }
            ...
    }