多屏幕设计——实现适应性的UI布局

根据您的应用程序目前呈现的布局,用户界面​​布局可能会有所不同。如果您的应用程序是在双窗格模式,单击在左窗格中的项目将只显示在右侧窗格中的内容;如果它是在单窗格模式,内容上应该显示自己的布局中(在不同的activity)。

确定当前布局

由于实现每个布局将有一点不同,需要做的第一件事情就是确定什么样的用户目前观看布局。可能想知道用户是在“单一窗口”模式或“双窗格”模式。通过查询一个给定的视图存在并可见来判断:

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以上的版本上运行时(因为它的功能是 ActionBar API级别11提供) 。因此,要为这个按钮添加事件监听器,你可以做:

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

根据当前布局做出应对

有些行为可能有不同的结果,这取决于当前的布局。例如,在News Reader例子,点击标题列表中的标题可以打开的相应文章,如果UI在双窗格模式,则文章是显示在右边的窗格;如果UI是单窗格模式,文章则会显示在开启的另一个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 作为导航,而如果它是单窗口模式,则会用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);
    }
}

在别的Activity中重用Fragment

在多个屏幕设计中一个经常性的模式是接口部分,实现接口作为屏幕配置上一个窗格和其他配置上一个单独的Activity。例如,在News Reader例子,新闻文章文字是在大屏幕的右侧窗格中,但在较小的屏幕上是一个单独的activity。

在这种情况下,你通常能避免几个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>
并且 ArticleFragment 也可以被重用在小屏幕的activity的布局中ArticleActivity,这个activity没有布局文件

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

 当然,这个和在xml布局文件中描述fragment的效果是一样的。在这个实例中xml布局文件不是必须的,因为文章fragment是ArticleActivity唯一的组件。

设计Fragment时,要牢记的一个很重要的一点是不要创建一个强耦合到一个特定的activity。通常可以定义一个接口,接口抽象出所有需要与它的宿主activity交互的方法,然后由宿主activity实现该接口:

例如,News Reader应用程序的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;
    }
}

当用户选中标题时,fragment通知宿主activity指定的监听器(不是硬编码特定的通知):

public class HeadlinesFragment extends ListFragment {
    ...
    @Override
    public void onItemClick(AdapterView<?> parent, 
                            View view, int position, long id) {
        if (null != mHeadlineSelectedListener) {
            mHeadlineSelectedListener.onHeadlineSelected(position);
        }
    }
    ...
}
这项技术在开发指导中 Supporting Tablets and Handsets.文章有进一步的讨论。

处理屏幕配置更改

如果使用特定的活动实现界面的特定部分,必须要记住,它可能是做些必要的改变来适应某些配置更改(如旋转变化),以保持你界面保持一致。

例如,一个典型的7“运行Android 3.0或更高的平板上,News Reader例子中使用一个单独的activity以显示新闻文章在竖屏模式下运行时,但在横向模式时使用两个窗格的布局。

这意味着,当用户在竖屏模式下,阅览文章在整个activity屏幕上。需要检测的屏幕方向改变成横屏并且适当做出反应,通过结束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;
        }
        ...
}



译自: http://developer.android.com/training/multiscreen/adaptui.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值