0%

Android开发:屏幕适配-实现可适配的UI Flow(交互方式)

翻自http://developer.android.com/training/multiscreen/adaptui.html UI flow大致是交互方式的意思,本节讲的是根据不同的layout,在代码中判断,并实现不同的交互方式。 应用当前显示的界面依靠布局,但UI flow可以是不同的。举例来说,如果你的应用是双栏的,在左栏的item上点击将会在右栏上显示内容;如果这是单栏的,内容会在自身上显示(或者是开了个不同的Activity) 判断当前布局 由于你每个布局的实现有些不同,要做的第一件事可能就是先判断当前用户浏看到的是哪个布局。举例来说,你可能需要知道用户是在单栏还是双栏模式。你可以通过判断一个view是否存在,是否可见来实现。

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

这里是判断acticle栏是否可用,为比用硬编码查询一个指定的layout再灵活(说的应该是为了判断专门加一个没用的layout吧) 另一个例子在对某些组件执行操作时判断该组件是否可用。比如,在新闻阅读器里,有一个按钮用来打开菜单,但这个按钮只有在Android 3.0以上的版本里才有(因为这个功能用到了 API 11里的ActionBar),所以你可以这样为按钮添加事件监听器:

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

根据当前的布局做不同的响应 根据当前显示的布局,有些动作可能会有不同的结果。在新闻阅读器的例子中,双栏模式在左边点击标题时,右边显示内容,而单栏模式,会打开一个新的Activity用于显示内容.

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

同样的,在双栏模式下,action bar 会被设置成tab导航,而在单栏模式中,应该设置成一个spinner下拉菜单,所以你的代码里应该检查哪种适合:

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中复用Fragment 在为多屏设计时一个重复模式是,你的一部分UI在某些屏幕配置上实现起来是个面板,但在其他的配置时是一个独立的Activity。举例来说,在新闻阅读器里,大屏的设备中,内容会显示在右侧面板中,而在小屏设备中,内容会显示在独立的activity里。 在这种情况下,你通常可以在多个Activity中复用一个Fragment的子类来避免代码复本(多个Activity中包含一样的逻辑代码)。比如 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布局里声明fragment也有相同的效果,但在本案例中,ArticleActivity只有这么一个组件,所以xml是没有必要的. 有一点很重要需要铭记的是,当你设计Fragment时,不要跟某个特殊的Activity强耦合(不要调用某个Activity特有的方法,属性等),你可以定义一个接口,抽象所有该Fragment会用到的方法,然后让所有使用该Fragment的Activity实现它(这里不仅指狭义上的Activity自身实现,也可以由Activity来set其他实现者)。 新闻阅读器里的HeadlinesFragment就是这么干的

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

    /* Activity必须实现该接口*/
    public interface OnHeadlineSelectedListener {
        public void onHeadlineSelected(int index);
    }
    ...

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

然后,当用户选择一个标题时,Fragment会通知Activity指定的监听器(相反的是通知一个写死的Activity)

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

操作屏幕配置改变 如果你使用独立的Activity来实现界面的某一部分,你要在一些配置变化时(比如屏幕翻转)做出相应反应以保持界面一致性。 在典型的运行Android 3.0及以上版本的7寸平板中,竖屏模式下,新闻阅读器将使用一个独立的Activity显示新闻内容,但在横屏模式下使用双栏。 这意味着,当用户在竖屏模式下浏览文章内容时,是在一个独立的Activity中,你需要检测屏幕方向改变成横屏时作出合适的反应,关闭Activity,回到 main activity,显示两栏布局.

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