Android 5.0(L) ToolBar(替代ActionBar) 实战（二）

上一次我们说到ToolBar的创建，这次我们来讨论一下ToolBar结合ViewPager实现类似微信的左右滑屏多个界面的效果。

要实现滑屏，首先我们要到Android开发者官网去下载一个示例代码，它封装了Viewpager和Tab配合切换页卡的方法。当然，我们也可以自己来实现，为了节约时间成本，就直接拿来用了。如果在官网找不到或者无奈被墙，可以到这里下载：http://download.csdn.net/detail/wh1990xiao2005/8105345

把下载好的工具类复制到项目指定的包内，我是在之前的项目中创建了view专用的包，并将这两个类复制了进去。

这里要注意，复制进去之后有可能会报错，因为包名不符，只需把package包名修改为自己的类所在包名即可。

打开布局文件，在上次Toolbar的声明下面添加SlidingTabLayout和ViewPager控件，下面放上示例：

[html] view plaincopyprint?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     xmlns:app="http://schemas.android.com/apk/res/com.xwh.toolbardemo"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context="com.xwh.toolbardemo.MainActivity" >  
7.   
8.     <android.support.v7.widget.Toolbar  
9.         android:id="@+id/demo_toolbar"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="?attr/colorPrimary"  
13.         android:minHeight="?attr/actionBarSize"  
14.         app:title="@string/hello_world" />  
15.   
16.     <com.xwh.toolbardemo.view.SlidingTabLayout  
17.         android:id="@+id/demo_tab"  
18.         android:layout_width="fill_parent"  
19.         android:layout_height="wrap_content"  
20.         android:layout_below="@+id/demo_toolbar" />  
21.   
22.     <android.support.v4.view.ViewPager  
23.         android:id="@+id/demo_vp"  
24.         android:layout_width="fill_parent"  
25.         android:layout_height="fill_parent"  
26.         android:layout_below="@+id/demo_tab" />  
27.   
28. </RelativeLayout>  

下面打开MainActivity.java，实例化相关的对象，包括ToolBar，这里不多说废话了，直接上代码：

[java] view plaincopyprint?

1. <span style="white-space:pre">    </span>// 初始化控件  
2.     private void findView() {  
3.         toolbar = (Toolbar) findViewById(R.id.demo_toolbar);  
4.         slidingTabLayout = (SlidingTabLayout) findViewById(R.id.demo_tab);  
5.         viewPager = (ViewPager) findViewById(R.id.demo_vp);  
6.     }  

ToolBar不用多说，SlidingTabLayout实际上是上方的Tab视图，而ViewPager是页卡的容器，而页卡是稍后添加的多个Fragment。

下面我们来写三个Layout的xml文件和相关的三个Fragment的Java代码，分别代表三个页卡。

第一个页卡随意放置一个图片，代码如下：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:contentDescription="@string/app_name"  
6.     android:src="@drawable/ic_launcher" >  
7.   
8. </ImageView>  

第二个页卡放置一个模拟时钟，代码如下：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <AnalogClock xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5. </AnalogClock>  

第三个页卡放置一个数字时钟，代码如下：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <DigitalClock xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:gravity="center"  
6.     android:textSize="40sp" >  
7. </DigitalClock>  

相应的，创建三个Fragment的Java代码文件，这里只列出其中一个文件的程序清单，另外两个按此自行编写：

[java] view plaincopyprint?

1. package com.xwh.toolbardemo.fragment;  
2.   
3. import com.xwh.toolbardemo.R;  
4. import android.os.Bundle;  
5. import android.support.v4.app.Fragment;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. public class Fragment_Tab_1 extends Fragment {  
11.     @Override  
12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
13.             Bundle savedInstanceState) {  
14.         return inflater.inflate(R.layout.fragment_tab_1, container, false);  
15.     }  
16. }  

下面我们还需一个适配器（Adapter），用于将这三个Fragment适配到ViewPager之上，下面列出适配器的Java程序代码清单：

[java] view plaincopyprint?

1. package com.xwh.toolbardemo.adapter;  
2.   
3. import java.util.ArrayList;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentManager;  
6. import android.support.v4.app.FragmentPagerAdapter;  
7.   
8. public class ViewPager_Adapter extends FragmentPagerAdapter {  
9.   
10.     private ArrayList<Fragment> fragments;  
11.   
12.     public ViewPager_Adapter(FragmentManager fm, ArrayList<Fragment> fragments) {  
13.         super(fm);  
14.         this.fragments = fragments;  
15.     }  
16.   
17.     @Override  
18.     public Fragment getItem(int pos) {  
19.         return fragments.get(pos);  
20.     }  
21.   
22.     @Override  
23.     public int getCount() {  
24.         return fragments.size();  
25.     }  
26.   
27.     @Override  
28.     public CharSequence getPageTitle(int position) {  
29.         return "Tab_" + position;  
30.     }  
31. }  

这里需要注意：下方的getPageTitle()方法是必要的，他用于相应Tab名称的显示。

到此，我的程序架构如下图所示：

接下来，我们将三个Fragment通过Adapter适配到ViewPager上，这一过程，我们只对MainActivity做操作。完整代码如下所示：

[java] view plaincopyprint?

1. package com.xwh.toolbardemo;  
2.   
3. import java.util.ArrayList;  
4.   
5. import com.xwh.toolbardemo.adapter.ViewPager_Adapter;  
6. import com.xwh.toolbardemo.fragment.Fragment_Tab_1;  
7. import com.xwh.toolbardemo.fragment.Fragment_Tab_2;  
8. import com.xwh.toolbardemo.fragment.Fragment_Tab_3;  
9. import com.xwh.toolbardemo.view.SlidingTabLayout;  
10.   
11. import android.support.v4.app.Fragment;  
12. import android.support.v4.view.ViewPager;  
13. import android.support.v7.app.ActionBarActivity;  
14. import android.support.v7.widget.Toolbar;  
15. import android.os.Bundle;  
16.   
17. public class MainActivity extends ActionBarActivity {  
18.   
19.     private Toolbar toolbar;  
20.     private SlidingTabLayout slidingTabLayout;  
21.     private ViewPager viewPager;  
22.   
23.     private ArrayList<Fragment> fragments;  
24.     private ViewPager_Adapter viewPager_Adapter;  
25.   
26.     @Override  
27.     protected void onCreate(Bundle savedInstanceState) {  
28.         super.onCreate(savedInstanceState);  
29.         setContentView(R.layout.activity_main);  
30.         findView();  
31.     }  
32.   
33.     // 初始化控件  
34.     private void findView() {  
35.         // 实例化控件  
36.         toolbar = (Toolbar) findViewById(R.id.demo_toolbar);  
37.         slidingTabLayout = (SlidingTabLayout) findViewById(R.id.demo_tab);  
38.         viewPager = (ViewPager) findViewById(R.id.demo_vp);  
39.         // 设置ViewPager  
40.         fragments = new ArrayList<Fragment>();  
41.         fragments.add(new Fragment_Tab_1());  
42.         fragments.add(new Fragment_Tab_2());  
43.         fragments.add(new Fragment_Tab_3());  
44.         viewPager_Adapter = new ViewPager_Adapter(getSupportFragmentManager(),  
45.                 fragments);  
46.         viewPager.setOffscreenPageLimit(fragments.size());  
47.         viewPager.setAdapter(viewPager_Adapter);  
48.         // 设置SlidingTab  
49.         slidingTabLayout.setViewPager(viewPager);  
50.     }  
51. }  

到此，我们可以Ctrl+F11运行看效果了。如果不出意外的话，会是下面的效果：

仔细观察可以发现，ToolBar比ActionBar更好的一点在于上方Tab的选中状态，是根据滑动程度来的，而传统的ActionBar略显生硬。

第二篇Toolbar文章到此为止，在下一篇里，我们将集中介绍Menu的使用以及关于Toolbar的更多功能，欢迎关注！