Android官方文档学习之Creating Swipe Views with Tabs

2019独角兽企业重金招聘Python工程师标准>>>

Creating Swipe Views with Tabs

创建滑动视图选项卡

Swipe views provide lateral navigation between sibling screens such as tabs with a horizontal finger gesture (a pattern sometimes known as horizontal paging). This lesson teaches you how to create a tab layout with swipe views for switching between tabs, or how to show a title strip instead of tabs.

滑动视图在两个屏幕中提供了最新的导航功能，例如用一个横向手指手势（有时被称为水平分页模式）。本章节教你如何用在选项卡之间选择的滑动视图去创建一个选项卡布局。

Swipe View Design

滑动视图设计

Before implementing these features, you should understand the concepts and recommendations as described inDesigning Effective Navigation and the Swipe Views design guide.

在实现该特性之前，你应该了解有关设计高效导航和滑动视图设计指南的一些概念和推荐的设置。

Implement Swipe Views

实现滑动视图

You can create swipe views in your app using the ViewPagerwidget, available in the Support Library. The ViewPager is a layout widget in which each child view is a separate page (a separate tab) in the layout.

你可以在你的应用程序中用ViewPagerWidget去创建一个滑动视图，在支持库中是可用的。ViewPager是一个布局小部件。每一个子视图是一个分开的页面。

To set up your layout with ViewPager, add a <ViewPager>element to your XML layout. For example, if each page in the swipe view should consume the entire layout, then your layout looks like this:

用ViewPager去创建你的布局。在你的xml布局文件中添加一个<ViewPager>元素，如果在滑动视图中的每一个页面都应该消耗整个布局。你的布局应该如下：

<?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" />

To insert child views that represent each page, you need to hook this layout to a PagerAdapter. There are two kinds of adapter you can use:

插入子视图去作为子页，你需将布局文件与pagerAdpter连接上，你可以使用两种适配器

FragmentPagerAdapter

This is best when navigating between sibling screens representing a fixed, small number of pages.

当导航在少数的子页面工作时，该适配器是最合适的

FragmentStatePagerAdapter

This is best for paging across a collection of objects for which the number of pages is undetermined. It destroys fragments as the user navigates to other pages, minimizing memory usage.

当分页数量未定时，该适配器是最贱的。当拥有导航到其他的页面时，它销毁了fragments，减少了内存的使用

For example, here's how you might use FragmentStatePagerAdapter to swipe across a collection of Fragmentobjects:

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;
}
}
This example shows only the code necessary to create the swipe views. The following sections show how you can add tabs to help facilitate navigation between pages.

这个例子只显示了去创建滑动视图所需的代码。以下部分展示如何添加选项卡来帮助促进页面与导航的交互。

Add Tabs to the Action Bar

添加选项卡到操作栏

Action bar tabs offer users a familiar interface for navigating between and identifying sibling screens in your app.

操作栏为识别子屏幕的导航条提供了常用的接口

To create tabs using ActionBar, you need to enable NAVIGATION_MODE_TABS, then create several instances ofActionBar.Tab and supply an implementation of the ActionBar.TabListener interface for each one. For example, in your activity's onCreate() method, you can use code similar to this:

用actionBar创建选项卡，你需要开启NAVIGATION_MODE_TABS。然后创建几个actionBar.Tab的实例并且给予一个实现了ActionBar.TabListener的实例对象给每一个tab对象。

例如：在你的activity 的onCreate（）方法中你可以使用如下类似的代码。

@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) {
// show the given tab
}

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};

// Add 3 tabs, specifying the tab's text and TabListener
for (int i = 0; i < 3; i++) {
actionBar.addTab(
actionBar.newTab()
.setText("Tab " + (i + 1))
.setTabListener(tabListener));
}
}
How you handle the ActionBar.TabListener callbacks to change tabs depends on how you've constructed your content. But if you're using fragments for each tab with ViewPager as shown above, the following section shows how to switch between pages when the user selects a tab and also update the selected tab when the user swipes between pages.

Change Tabs with Swipe Views

To switch between pages in a ViewPager when the user selects a tab, implement yourActionBar.TabListener to select the appropriate page by calling setCurrentItem() on your 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());
}
...
};
}
Likewise, you should select the corresponding tab when the user swipes between pages with a touch gesture. You can set up this behavior by implementing the ViewPager.OnPageChangeListener interface to change the current tab each time the page changes. For example:

@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);
}
});
...
}
Use a Title Strip Instead of Tabs

If you don't want to include action bar tabs and prefer to provide scrollable tabs for a shorter visual profile, you can use PagerTitleStrip with your swipe views.

Below is an example layout XML file for an activity whose entire contents are a ViewPager and a top-alignedPagerTitleStrip inside it. Individual pages (provided by the adapter) occupy the remaining space inside theViewPager.

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

转载于:https://my.oschina.net/zaizaiangels/blog/542184