2018-06-05-ViewPager

ViewPager

这是谷歌官方提供的一个兼容低版本安卓设备的软件包，里面包含了只有在安卓3.0以上可以使用的API。ViewPager就是其中之一。利用它，我们可以做很多的事情，从最简单的道行，到页面菜单等等。与ListVew类似，他需要一个适配器，就是PagerAdapter。

有四个分页，每个分页都有自己名字和布局，通过名字与布局的匹配，自定义适配器将其转化为View。

布局文件

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity = "top">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "bottom"
            />

    </android.support.v4.view.ViewPager>

</LinearLayout>

每个页面的布局文件

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />

</LinearLayout>

Activity

/**
 * ViewPager组建的使用
 */

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一张图","第二张图","第三张图","第四张图"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();

        viewPager.setAdapter(new MyPagerAdapter());

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));
    }


    //适配器
    class MyPagerAdapter extends PagerAdapter{

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

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

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

这里有四个注意事项：

1.这里ViewPager和PagerTabStrip(滚动条)都要把包名写全了，不然会ClassNotFound
2.API中说：在布局xml把PagerTabStrip当作ViewPager的一个自标签开用，不能拿出来，不然会报错
3.在PagerTabStrip标签中可以用属性android:layout_gravity="Top|Bottom"来指定title的位置
4.如果要显示出PagerTabStrip某一页的title，需要在ViewPager的Adapter中实现getPageTitle(int)

pagerTabStrip.setBackgroundColor(Color.BLUE);   //设置滚动条背景颜色

页面切换的事件监听

继承ViewPager.OnPageChangeListener

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一张图","第二张图","第三张图","第四张图"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();


        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setOnPageChangeListener(this);

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));

    }

    //事件监听的四个方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(getApplicationContext(),"选中",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //适配器
    class MyPagerAdapter extends PagerAdapter{

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

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

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

程序首次启动的引导

程序首次启动引导一般好几个页面，每个页面对应下面的一个小圆点，当滑倒当前页面时，对应页面的小圆点对有反应
基于上面描述，程序需要包含以下一些内容

  • 首先得有每个页面的布局文件，还有小圆点的形式的布局文件，由于小圆点会和每个页面的布局文件重合，所以使用FragmentLayout布局，内嵌n个ImageView(包含圆点)。
  • 布局文件到View的转化对应，需要自定义的适配器
  • 切换页面的时候，对应的小圆点要有所变化，所以需要有切换页面的时间监听器
  • 布局文件和小圆点都应该有默认的样式，要初始化
  • 页面的变化应该有对应的圆点的变化，需要传递一个值，指示页面变化，传入圆点变化。

以下是示例代码：

主文件布局：一个ViewPager和四个圆点（FragmentLayout）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main2"
    tools:context="com.example.tianmengmeng.coding12.Main2Activity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "top"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:id="@+id/point_layout"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
    </LinearLayout>

</FrameLayout>

每个页面的布局：四个类似只写了一个

<?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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />
</LinearLayout>

Activity：文件资源的加载，事件的监听

public class Main2Activity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    //定义ViewPager和存放每个页面图片的容器
    private ViewPager viewPager;
    //每个页面是一个Layout，不能简单的用数组存放
    private ArrayList<View> views = new ArrayList<>();

    //定义存放圆点的数组，每个圆点是同类型的组件，可以直接用数组来定义
    private ImageView[] imageViews;

    //定义当前页
    private int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //初始化圆点，初始化页面
        initViews();
        initPoint();
    }
    
    //初始化页面
    private void initViews(){

        viewPager = (ViewPager) findViewById(R.id.viewPager);

        //获取图片资源
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2, null));
        views.add(getLayoutInflater().inflate(R.layout.layout3, null));
        views.add(getLayoutInflater().inflate(R.layout.layout4, null));

        //将图片资源通过适配器加入视图
        viewPager.setAdapter(new MyPagerAdapter());
        //监听页面的变化
        viewPager.setOnPageChangeListener(this);
    }


    //初始化圆点
    private void initPoint() {
        LinearLayout point_layout = (LinearLayout) findViewById(R.id.point_layout);
        imageViews = new ImageView[views.size()];
        for (int i = 0; i < imageViews.length; i++) {
            //获取linearlayout下的二级组件
            imageViews[i] = (ImageView) point_layout.getChildAt(i);
        }

        currentIndex = 0;
        imageViews[currentIndex].setImageResource(R.drawable.selected);
    }

    //当页面放生变化后，通关过传入的页面数，改变对应的圆点状态
   private void setCurentPoint(int position) {
        //注意：当前位置没有发生变化时，圆点的状态不用改变
        if(currentIndex<0 || currentIndex  == position || currentIndex > imageViews.length - 1){
            return;
        }
       
        //设置对应的图片的改变
        imageViews[currentIndex].setImageResource(R.drawable.start);
        imageViews[position].setImageResource(R.drawable.selected);

        //指向当前页面
        currentIndex = position;
    }
    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //监听页面的改变
    @Override
    public void onPageSelected(int position) {
        setCurentPoint(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //适配器
    class MyPagerAdapter extends PagerAdapter {

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

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

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

    }

}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,463评论 25赞 707
  • 《论语》学习心得  37
    原文 或谓孔子曰：“子奚不为政？”子日:“《书》云:“孝乎惟孝，友于兄弟，施于有政。”是亦为政，奚其为为政？” 释...
    番茄妈阅读 266评论 0赞 0
  • 除夕好
    没有烟花炮 还好朋友圈可以看到 没有新棉袄 还好写对联可以耍宝 没有祭祖庙 还好一家人可以吵闹 还好还好 晚会依旧...
    李辉3566阅读 226评论 0赞 0
  • 半生缘
    文/暄妍若梅 有些人， 爱了很久却依然没有结果，那么就试着放手吧， 也许我们缘尽半生， 今生今世只能相伴到此；就这...
    暄妍若梅阅读 380评论 -1赞 3