(三)高级篇____8、实现高效导航——实现横向导航

负责人：2003yyyyyy

原文链接：http://docs.eoeandroid.com/training/implementing-navigation/lateral.html

实现横向导航

横向导航是导航软件中介于同一层级的屏幕(有时也称屏幕地图)。最突出的横向导航模式选项卡和水平分页(也称滚动视图)。这个模式和另外的描述在Designing Effective Navigation。这节课介绍了如何实现在Android中的几个主要的横向导航模式。

实现选项卡

选项卡允许用户导航兄弟屏幕之间通过选择适当的选项卡指示器可用的顶部显示。在3.0以后，选项卡都用ActionBar类实现和通常在Activity.onCreate()中建立。在一些例子中，比如当水平空间有限和/或标签的数量是巨大的时候，一个适当的表现形式为下拉列表形式为选项卡展示(有些时候用Spinner 实现) 在上个版本的android，tabs 可以被TabWidget 和TabHost。习惯用法，看Hello, Views教程。自3.0开始，无论如何，你应该在NAVIGATION_MODE_TABS或者NAVIGATION_MODE_LIST之间选择一个和ActionBar类一起使用。

以NAVIGATION_MODE_TABS实现tabs 模式

创建选项卡，你可以有一下的代码在你的 acitivity onCreate()方法中。注意,准确的表示标签在当前每台设备设备配置可能会有所不同, ,以最大程度地利用可用的屏幕空间。例如，android 可能自动瓦解成下拉列表，如果选项卡没有过横行填充在动作条；

@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    final ActionBar actionBar = getActionBar();
 
    // Specify that tabs should be displayed in the action bar.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
 
    // Create a tab listener that is called when the user changes tabs.
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { }
 
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { }
 
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { }
    };
 
    // Add 3 tabs.
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(actionBar.newTab().setText("Tab " + (i + 1)).setTabListener(tabListener));
    }
    ...
}

以NAVIGATION_MODE_LIST实现tabs模式

用一个下拉列表替换，用一下代码在你的 activity的onCreate()方法中。下拉列表在可取的情况下，更多的信息必须显示在导航的每个项里时，例如，未阅读消息的数量，或者可导航的数量是巨大的。

@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    final ActionBar actionBar = getActionBar();
 
    // Specify that a dropdown list should be displayed in the action bar.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
 
    actionBar.setListNavigationCallbacks(
            // Specify a SpinnerAdapter to populate the dropdown list.
            new ArrayAdapter(
                    actionBar.getThemedContext(),
                    android.R.layout.simple_list_item_1,
                    android.R.id.text1,
                    new String[]{ "Tab 1", "Tab 2", "Tab 3" }),
 
            // Provide a listener to be called when an item is selected.
            new ActionBar.OnNavigationListener() {
                public boolean onNavigationItemSelected(
                        int position, long id) {
                    // Take action here, e.g. switching to the
                    // corresponding fragment.
                    return true;
                }
            });
    ...
}

实现水平分页(滚动视图)

水平分页或者滚动视图，允许用户在当前屏幕导航到相连的屏幕上水平地滚动。这个模式可以使用ViewPager挂件实现，目前可用的Android Support Package。兄弟之间导航屏幕代表固定数量的部分。最后提供ViewPager与FragmentPagerAdapter.使用。对水平分页在对象的集合，最好使用FragmentStatePagerAdapter，当用户导航到另一个页面销毁分段，保证最小内存使用量。

下面的例子是用一个ViewPager 去滚动一排对象集合。

public class CollectionDemoActivity extends FragmentActivity {
    // When requested, this adapter returns a DemoObjectFragment,
    // representing an object in the collection.
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;
 
    public void onCreate(Bundle savedInstanceState) {
        // ViewPager and its adapters use support library
        // fragments, so use getSupportFragmentManager.
        mDemoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    }
}
 
// Since this is an object collection, use a FragmentStatePagerAdapter,
// and NOT a FragmentPagerAdapter.
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }
 
    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DemoObjectFragment();
        Bundle args = new Bundle();
        // Our object is just an integer :-P
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }
 
    @Override
    public int getCount() {
        return 100;
    }
 
    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}
 
// Instances of this class are fragments representing a single
// object in our collection.
public static class DemoObjectFragment extends Fragment {
    public static final String ARG_OBJECT = "object";
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated
        // properly.
        View rootView = inflater.inflate(R.layout.fragment_collection_object, container, false);
        Bundle args = getArguments();
        ((TextView) rootView.findViewById(android.R.id.text1)).setText(Integer.toString(args.getInt(ARG_OBJECT)));
        return rootView;
    }
}

你也可以添加一个指示器去你的横向分页UI以PagerTitleStrip.增加。一下的一个Activity的xml layout布局文件，整个容器是一个ViewPager 而且PagerTitleStrip在它的顶部里。个人页面(提供的适配器)占据ViewPager内的剩余空间。

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />
 
</android.support.v4.view.ViewPager>

实现标签之间滑动

一个关键的设计建议在Android 4.0的标签是允许它们之间在适当的地方划动的。这种行为可以让用户在选定的选项卡的内容导航到邻近的标签水平地滚动,而不需要直接要自己实现交互的标签。要实现这一点,您可以用一个ViewPager结合ActionBar 标签API使用。根据观察到的当前页的改变，选择相应的选项卡。你可以使用这个行为建立ViewPager.OnPageChangeListener 在你的accctivity 的 onCreate()方法中：

@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    mViewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // When swiping between pages, select the
                    // corresponding tab.
                    getActionBar().setSelectedNavigationItem(position);
                }
            });
    ...
}

根据选择的标签，切换到相应的页在ViewPager里。做这个，添加一个ActionBar.TabListener区你的页签，当创建它是用newTab()方法。

actionBar.newTab()
        ...
        .setTabListener(new ActionBar.TabListener() {
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                // When the tab is selected, switch to the
                // corresponding page in the ViewPager.
                mViewPager.setCurrentItem(tab.getPosition());
            }
            ...
        }));

posted @ 2014-07-31 11:02 ╰→劉じ尛鶴阅读(192) 评论(0) 收藏举报

刷新页面返回顶部

╰→劉じ尛鶴

http://my.csdn.net/jing__tonyhe