Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效

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

废话少说，先上效果：

1、添加android support包
因为几个类都是在android support包中才提供，我们先添加android-support-v4.jar文件到工程的libs目录下即可

2、新建ViewPager.xml，内容如下

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

    <!--
        注意事项:   
        1.这里ViewPager和 PagerTabStrip都要把包名写全了，不然会ClassNotFount  
        2.API中说：在布局xml把PagerTabStrip当做ViewPager的一个子标签来用，不能拿出来，不然还是会报错  
        3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置  
        4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)
    -->

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_demo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#6B92A5" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tabstrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#33b5e5"
            android:textColor="#ffffff" />

        <!-- <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:layout_gravity="bottom"
            android:visibility="gone" /> -->
    </android.support.v4.view.ViewPager>

</RelativeLayout>

这里面有两个控件PagerTitleStrip和PagerTabStrip，这两个控件必须当作ViewPager的子控件来用，否则会报错。

两个控件有什么区别呢？

简单的理解就是：

PagerTabStrip：交互式

PagerTitleStrip：非交互式

经过简单测试发现：

PagerTabStrip：

    1.点击上面的标题可以实现ViewPager的切换。

    2.选中的文字下方包含指引线

    3.显示全宽下划线（setDrawFullUnderline）

PagerTitleStrip：

    1.点击上面的标题无反应。

    2.无上述描述。

3、新建view_pager_fragment.xml内容如下：

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

    <TextView
        android:id="@+id/view_pager_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top|center_horizontal"
        android:layout_marginTop="30dp" />

    <ImageView
        android:id="@+id/view_pager_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/view_pager_text"
        android:layout_marginTop="10dp" />

</RelativeLayout>

用于在ViewPager中显示。

4、新建TitleViewPagerDemo页面

import java.util.ArrayList;
import java.util.List;
import com.lk.myandroidui.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 有标题的ViewPager
 * @author Administrator
 *
 */
public class TitleViewPagerDemo extends FragmentActivity {

    private static int TOTAL_COUNT = 5;// 标题数量

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.view_pager_demo);
        
        PagerTabStrip mPagerTabStrip=(PagerTabStrip) findViewById(R.id.pager_tabstrip);
        //设置导航条的颜色
        mPagerTabStrip.setTabIndicatorColorResource(android.R.color.white);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_demo);
        ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();//ViewPager中显示的数据
        ArrayList<String> titleList = new ArrayList<String>();// 标题数据
        //添加数据
        for (int i = 0; i < TOTAL_COUNT; i++) {
            ViewPagerFragment mViewPagerFragment = new ViewPagerFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("upImageId", R.drawable.banner1);// 图片
            bundle.putString("text", "Page " + i);// 文字
            mViewPagerFragment.setArguments(bundle);// 设置参数
            titleList.add("Title " + (i+1));
            fragmentList.add(mViewPagerFragment);
        }
        mViewPager.setAdapter(new MyPagerFragmentAdapter(
                getSupportFragmentManager(), fragmentList, titleList));

    }
    //适配器
    private class MyPagerFragmentAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;
        private List<String> titleList;

        public MyPagerFragmentAdapter(FragmentManager fm,
                List<Fragment> fragmentList, List<String> titleList) {
            super(fm);
            this.fragmentList = fragmentList;
            this.titleList = titleList;
        }

        // ViewPage中显示的内容
        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return (fragmentList == null || fragmentList.size() == 0) ? null
                    : fragmentList.get(arg0);
        }

        // Title中显示的内容
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return (titleList.size() > position) ? titleList.get(position) : "";
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragmentList == null ? 0 : fragmentList.size();
        }

    }
    /** 使用Fragment显示ViewPager中的主要内容 */
    public static class ViewPagerFragment extends Fragment {
        public ViewPagerFragment() {
            super();
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.view_pager_fragment_demo1,
                    container, false);
            TextView tv = (TextView) view.findViewById(R.id.view_pager_text);
            ImageView image = (ImageView) view
                    .findViewById(R.id.view_pager_image);

            Bundle bundle = getArguments();
            if (bundle != null) {
                //设置图片
                int upImageId = bundle.getInt("upImageId");
                if (upImageId != 0) {
                    image.setImageResource(upImageId);
                }
                //设置文字
                String text = bundle.getString("text");
                tv.setText(text);
            }
            return view;
        }
    }
}

ok，结束。

转载于:https://my.oschina.net/u/1251149/blog/206126