低版本系统兼容的ActionBar（六）用Fragment+ViewPager+Tab实现快速导航

Tab经常和Fragment结合使用，这一讲我们用3种方式来实现这种快捷导航。

0、重要的两个监听器

MyTabListener，这个我们之前已经接触过了

package com.kale.actionbar05;

import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;

/**
 * @author:Jack Tony
 * @tips  :设置tab的监听器，控制viewpager的显示
 * @date  :2014-7-30
 */
public class MyTabListener implements ActionBar.TabListener{
    ViewPager viewPager;
    public MyTabListener(ViewPager viewPager) {
        this.viewPager =viewPager;
    }

    @Override
    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
        
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction arg1) {
        if (viewPager != null && viewPager.getCurrentItem() != tab.getPosition()){
            viewPager.setCurrentItem(tab.getPosition());
        }
    }

    @Override
    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
        
    }
    
}

PageChangeListener（这里面是滑动ViewPager会触发的动作）

package com.kale.actionbar05;

import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;

public class PageChangeListener implements ViewPager.OnPageChangeListener {

    private ActionBar actionBar;

    public PageChangeListener(ActionBar actionBar) {
        this.actionBar = actionBar;
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO 自动生成的方法存根

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO 自动生成的方法存根

    }

    @Override
    public void onPageSelected(int position) {
        //System.out.println("position:" + position);
        actionBar.setSelectedNavigationItem(position);

    }
}

一、Tab+ViewPager

先定义一个主布局，里面放入ViewPager。我们即将在这个ViewPager中放入视图

view_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="下面是ViewPager"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

view_item.xml

 这是准备放入ViewPager的视图。我们放3个TextView，然后再放入这整个视图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/viewItem_textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="No 4"
        android:textSize="40sp"/>

</LinearLayout>

ViewMainActivity

package com.kale.actionbar05.view;

import java.util.ArrayList;

import com.kale.actionbar05.MyTabListener;
import com.kale.actionbar05.PageChangeListener;
import com.kale.actionbar05.R;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

public class ViewMainActivity extends ActionBarActivity {
    private ActionBar actionBar;
    private ArrayList<View> viewList;
    ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_main);
        initView();
        initActionBar();
        
        viewList = new ArrayList<View>();
        //得到填充器，准备获得对象
        LayoutInflater mLayoutInflater = getLayoutInflater();  
        //给适配器准备好数据，添加进list中
        for (int i = 0; i < 3; i++) {
            TextView tv  = (TextView)(mLayoutInflater.inflate(R.layout.view_item, null))
                    .findViewById(R.id.viewItem_textView);
            tv.setText("No "+(i+1));
            viewList.add(tv);
        }    
        viewList.add(mLayoutInflater.inflate(R.layout.view_item, null));//也可以直接用布局做一个视图
        //内容准备好后，设置适配器
        viewPager.setAdapter(new MyPagerAdapter(viewList));
        viewPager.setOnPageChangeListener(new PageChangeListener(getSupportActionBar()));  
        
    }

    /**
     *初始化actionBar和Tab 
     */
    private void initActionBar() {
        actionBar = getSupportActionBar();
        //设定有Tab
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.Tab tab;
        //开始添加Tab
        for (int i = 1; i <= 4; i++) {
            tab = actionBar.newTab();
            tab.setText("Tab " + i);
            tab.setTabListener(new MyTabListener(viewPager));
            actionBar.addTab(tab);
        }
    }
    
    private void initView() {
        viewPager = (ViewPager)findViewById(R.id.viewPager01);
    }



}

MyPagerAdapter（这里设置适配器，从list中得到一个个View，然后展现出来）

package com.kale.actionbar05.view;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class MyPagerAdapter extends PagerAdapter {
    private ArrayList<View> mViewList;
    private int pagerNum = 0;

    public MyPagerAdapter(ArrayList<View> viewList) {
        mViewList = viewList;
    }

    public int getPagerNum() {
        return pagerNum;
    }

    @Override
    public int getCount() {
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        if (mViewList.get(arg1) != null) {
            ((ViewPager) arg0).removeView(mViewList.get(arg1));
        }
    }

    @Override
    public Object instantiateItem(View arg0, int arg1) {
        try {
            if (mViewList.get(arg1).getParent() == null) {
                ((ViewPager) arg0).addView(mViewList.get(arg1), 0);
            } else {
                /*
                 * 很难理解新添加进来的view会自动绑定一个父类，由于一个儿子view不能与两个父类相关， 所以得解绑不这样做否则会产生
                 * viewpager java.lang.IllegalStateException: The specified
                 * child already has a parent. You must call removeView() on the
                 * child's parent first.
                 */
                ((ViewGroup) mViewList.get(arg1).getParent())
                        .removeView(mViewList.get(arg1));
                ((ViewPager) arg0).addView(mViewList.get(arg1), 0);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            pagerNum = arg1;
        }
        return mViewList.get(arg1);
    }

}

二、Tab+Fragment+ViewPager

fragment_main.xml （主布局）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager02"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

</RelativeLayout>

DummyFragment（准备填充进去的Fragment，这里面接受一个参数用来方便说明）

package com.kale.actionbar05.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class DummyFragment extends Fragment {

    public static final String BUNDLE_SECTION_NUMBER = "section_number";

    // 该返回值就是这个Fragment显示的view组件
    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER);
        // 获取创建该Fragment时传入的参数的Bundle
        Bundle bundle = getArguments();
        textView.setText("Fragment 0" + bundle.getInt(BUNDLE_SECTION_NUMBER));
        textView.setTextSize(50);
        return textView;
    }
}

FragmentMainActivity

package com.kale.actionbar05.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.ViewGroup;

import com.kale.actionbar05.MyTabListener;
import com.kale.actionbar05.PageChangeListener;
import com.kale.actionbar05.R;

/**
 * @author:Jack Tony
 * @tips :出于使用FragmentPagerAdapter 时，Fragment对象会一直存留在内存中.
 *       所以当有大量的显示页时，就不适合用FragmentPagerAdapter了
 *       ，FragmentPagerAdapter适用于只有少数的page情况。
 *       多的话请考虑使用FragmentStatePagerAdapter，当使用FragmentStatePagerAdapter时，
 *       如果Fragment不显示，那么Fragment对象会被销毁，但在回调onDestroy()方法之前
 *       会回调onSaveInstanceState(Bundle outState)方法来保存Fragment的状态，
 *       下次Fragment显示时通过onCreate(Bundle savedInstanceState)把存储的状态值取出来，
 *       FragmentStatePagerAdapter 比较适合页面比较多的情况，像一个页面的ListView
 * @date :2014-7-30
 */
public class FragmentMainActivity extends ActionBarActivity {
    ActionBar actionBar;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO 自动生成的方法存根
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_main);
        initView();
        initActionBar();
        viewPager.setAdapter(new MyFragmentPagerAdapter(
                getSupportFragmentManager()));
        //下面是用另一种适配器的方式，其实就是换个名字。主要针对的是很多个fragment的情况
        //viewPager.setAdapter(new MyFragmentStaticAdapter(getSupportFragmentManager()));
        viewPager.setOnPageChangeListener(new PageChangeListener(actionBar));
        
    }

    public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private int NUM_ITEMS = 4;

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DummyFragment();
            Bundle args = new Bundle();
            args.putInt(DummyFragment.BUNDLE_SECTION_NUMBER, position + 1);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public int getCount() {
            return NUM_ITEMS;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // 这里Destroy的是Fragment的视图层次，并不是Destroy Fragment对象
            super.destroyItem(container, position, object);
            //Log.i("INFO", "Destroy Item " + position);
        }

    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager02);
    }

    /**
     * 初始化actionBar和Tab
     */
    private void initActionBar() {
        actionBar = getSupportActionBar();
        // 设定有Tab
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.Tab tab;
        // 开始添加Tab
        for (int i = 1; i <= 4; i++) {
            tab = actionBar.newTab();
            tab.setText("Tab " + i);
            tab.setTabListener(new MyTabListener(viewPager));
            actionBar.addTab(tab);
        }
    }

    public class MyFragmentStaticAdapter extends FragmentStatePagerAdapter {
        private int NUM_ITEMS = 5;

        public MyFragmentStaticAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DummyFragment();
            Bundle args = new Bundle();
            args.putInt(DummyFragment.BUNDLE_SECTION_NUMBER, position + 1);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public int getCount() {
            return NUM_ITEMS;
        }

    }
}

三、PagerSlidingTabStrip+ViewPager+Fragment

tab_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res/com.kale.actionbar05">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:pstsShouldExpand="true"
        app:pstsUnderlineHeight="1dp"
        app:pstsIndicatorHeight="4dp"
        app:pstsIndicatorColor="#45c01a"
        app:pstsSelectedTabTextColor="#45c01a"
        app:pstsTabTextSize="16sp"
        app:pstsTabTextColor="#666666"
        app:pstsDividerColor="@android:color/transparent"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager03"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

</LinearLayout>

ChatFragment （其中的一个Fragment，其余的都一样，就是文字变了）

package com.kale.actionbar05.tab;

import android.app.ActionBar.LayoutParams;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;

public class ChatFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        FrameLayout fl = new FrameLayout(getActivity());
        fl.setLayoutParams(params);
        DisplayMetrics dm = getResources().getDisplayMetrics();
        final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);
        TextView v = new TextView(getActivity());
        params.setMargins(margin, margin, margin, margin);
        v.setLayoutParams(params);
        v.setLayoutParams(params);
        v.setGravity(Gravity.CENTER);
        v.setText("聊天界面");
        v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));
        fl.addView(v);
        return fl;
    }
}

TabMainActivity（定义个Tab，然后设定个ViewPager就行了。Fragment在适配器中设置）

package com.kale.actionbar05.tab;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.util.DisplayMetrics;
import android.util.TypedValue;

import com.astuetz.PagerSlidingTabStrip;
import com.kale.actionbar05.R;

public class TabMainActivity extends ActionBarActivity {
    private ChatFragment chatFragment;
    private FoundFragment foundFragment;
    private ContactsFragment contactsFragment;

    /**
     * PagerSlidingTabStrip的实例
     */
    private PagerSlidingTabStrip tabs;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO 自动生成的方法存根
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_main);
        initView();

        //initTabs();  //用代码来设置tab的样式，因为我在xml中已经设置了，所以就不在代码中写了
        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        tabs.setViewPager(viewPager);

    }

    /**
     * @author:Jack Tony
     * @tips :定义适配器，返回一个fragment对象
     * @date :2014-7-30
     */
    public class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        private final String[] titles = { "聊天", "发现", "通讯录" };

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public int getCount() {
            return titles.length;
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
            case 0:
                if (chatFragment == null) {
                    chatFragment = new ChatFragment();
                }
                return chatFragment;
            case 1:
                if (foundFragment == null) {
                    foundFragment = new FoundFragment();
                }
                return foundFragment;
            case 2:
                if (contactsFragment == null) {
                    contactsFragment = new ContactsFragment();
                }
                return contactsFragment;
            default:
                return null;
            }
        }

    }

    /**
     *定义的属性，参考：https://github.com/astuetz/PagerSlidingTabStrip 
     */
    private void initTabs() {
        /**
         * 获取当前屏幕的密度
         */
        DisplayMetrics dm;
        dm = getResources().getDisplayMetrics();
        // 设置Tab是自动填充满屏幕，也就是均分屏幕宽度，每个tab的weight都是一致的    app:pstsShouldExpand="true"
        tabs.setShouldExpand(true);
        // 设置Tab的分割线是透明的     app:pstsDividerColor="@android:color/transparent"
        tabs.setDividerColor(Color.TRANSPARENT);
        // 设置Tab底部与下面分割的细线的高度    app:pstsUnderlineHeight="1dp"
        tabs.setUnderlineHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 1, dm));
        // 设置Tab 指示器的高度        app:pstsIndicatorHeight="4dp"
        tabs.setIndicatorHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 4, dm));
        // 设置Tab标题文字的大小        app:pstsTabTextSize="16sp"
        tabs.setTextSize((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, dm));
        // 设置Tab Indicator的颜色        app:pstsIndicatorColor="#45c01a"
        tabs.setIndicatorColor(Color.parseColor("#45c01a"));
        // 设置选中Tab文字的颜色         app:pstsSelectedTabTextColor="#45c01a"
        tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
        // 取消点击Tab时的背景色        app:pstsTabBackground="0"
        tabs.setTabBackground(0);
    }

    private void initView() {
        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewPager03);
    }
}

源码下载：http://download.csdn.net/detail/shark0017/7696295

题外话：通过这几篇文章的学习，我可以肯定的说：我们已经不需要ActionBarSherlock（最高版本4.4.0）这个开源库了。其实这是件好事，很感谢国外的这个团体开发的这么有效稳定的库，给我们开发者带来了极大的帮助。离开这个未免有些伤感，我还记得之前看到它的Demo时那种激动，整天学习它代码的那种苦，还有找到解决办法的兴奋。但无论怎样，那都是历史了。我们需要迎接新的科技，迎接更好的明天！

最后，向ActionBarSherlock-4.4.0致敬！