【Interface&navigation】使用选项卡创建滑动视图（62）

weixin_33975951

于 2018-09-21 10:07:50 发布

阅读量91

点赞数

原文链接：http://blog.51cto.com/4789781/2178007

版权

原

滑动视图提供兄弟屏幕之间的横向导航，例如带有水平手指手势的标签（有时称为水平分页的模式）。本课程教您如何使用滑动视图创建标签布局，以便在标签之间切换，或者如何显示标题条而不是标签。

滑动视图设计

在实现这些功能之前，您应该了解设计有效导航和滑动视图设计指南中所述的概念和建议。

实现滑动视图

您可以使用支持库中ViewPager 提供的小部件在应用中创建滑动视图。这是一个布局窗口小部件，其中每个子视图是布局中的单独页面（单独的选项卡）。ViewPager

要设置布局ViewPager，<ViewPager>请在XML布局中添加元素。例如，如果滑动视图中的每个页面都应使用整个布局，那么您的布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<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" />

要插入代表每个页面的子视图，您需要将此布局挂钩到a PagerAdapter。您可以使用两种适配器：

FragmentPagerAdapter
当在表示固定的少量页面的兄弟屏幕之间导航时，这是最佳的。
FragmentStatePagerAdapter
这最适合在未确定页数的对象集合中进行分页。它会在用户导航到其他页面时销毁片段，从而最大限度地减少内存使用量。
例如，以下是您可以FragmentStatePagerAdapter 用来滑动Fragment对象集合的方法：

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) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collection_demo);

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

此示例仅显示创建滑动视图所需的代码。以下部分显示如何添加选项卡以帮助促进页面之间的导航。

将选项卡添加到操作栏

操作栏选项卡为用户提供了一个熟悉的界面，用于在应用程序之间导航和识别兄弟屏幕。

要使用创建选项卡ActionBar，您需要启用 NAVIGATION_MODE_TABS，然后创建几个实例ActionBar.Tab并ActionBar.TabListener为每个实例提供接口的实现。例如，在您的activity的onCreate()方法中，您可以使用与此类似的代码：
【Interface&navigation】使用选项卡创建滑动视图（62）
如何处理ActionBar.TabListener更改标签的回调取决于您构建内容的方式。但是，如果您正在使用每个选项卡的片段， ViewPager如上所示，以下部分显示了当用户选择选项卡时如何在页面之间切换，以及当用户在页面之间滑动时更新所选选项卡。

使用滑动视图更改选项卡

要ViewPager在用户选择选项卡时在页面之间切换，请ActionBar.TabListener通过调用以下setCurrentItem()内容实现选择适当的页面ViewPager：

@Override 
public void onCreate(Bundle savedInstanceState) {
    ... 

    // 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) {
            // When the tab is selected, switch to the 
            // corresponding page in the ViewPager. 
            mViewPager.setCurrentItem(tab.getPosition());
        } 
        ... 
    }; 
}

同样，当用户使用触摸手势在页面之间滑动时，您应该选择相应的选项卡。您可以通过实现ViewPager.OnPageChangeListener界面来设置此行为，以在每次页面更改时更改当前选项卡。例如：

@Override 
public void onCreate(Bundle savedInstanceState) {
    ... 

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setOnPageChangeListener( 
            new ViewPager.SimpleOnPageChangeListener() {
                @Override 
                public void onPageSelected(int position) {
                    // When swiping between pages, select the 
                    // corresponding tab. 
                    getActionBar().setSelectedNavigationItem(position);
                } 
            }); 
    ... 
}

使用标题条而不是标签

如果您不想包含操作栏选项卡，并且希望为较短的可视化配置文件提供可滚动选项卡，则可以使用PagerTitleStrip滑动视图。

下面是一个活动的示例布局XML文件，其活动的整个内容是a 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>