zoukankan      html  css  js  c++  java
  • viewpager+fragment学习笔记

    有暇,总结一下viewpager+fragment的使用。
    先来看看效果图:
    这里写图片描述
    有三个标题,三个fragment,滑动时标题的颜色会随着变化。

    MainActivity.java

    public class MainActivity extends FragmentActivity {
    
        private ViewPager vp;
        private Fragment f1, f2, f3;
        //把所有的Fragment装到一个List中
        private List<Fragment> fs;
        private FragmentPagerAdapter fpa;
        private TextView tv1, tv2, tv3;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            vp = (ViewPager) this.findViewById(R.id.vp1);
    
            initView();
    
            //一个适配器,里边存的都是Fragment
            fpa = new FragmentPagerAdapter(getSupportFragmentManager()) {
    
                @Override
                public int getCount() {
                    return fs.size();
                }
    
                @Override
                public Fragment getItem(int arg0) {
                    return fs.get(arg0);
                }
            };
    
            vp.setAdapter(fpa);
    
            /**
             * 三个方法的执行顺序为:用手指拖动翻页时,最先执行一遍onPageScrollStateChanged(1),
             * 然后不断执行onPageScrolled,放手指的时候,直接立即执行一次onPageScrollStateChanged(2),
             * 然后立即执行一次onPageSelected,然后再不断执行onPageScrolled,
             * 最后执行一次onPageScrollStateChanged(0)。
             */
            vp.setOnPageChangeListener(new OnPageChangeListener() {
    
                /**
                 * position代表哪个页面被选中
                 */
                @Override
                public void onPageSelected(int position) {
                    switch (position) {
                    case 0:
                        changeTitleBackground(0);
                        break;
                    case 1:
                        changeTitleBackground(1);
                        break;
                    case 2:
                        changeTitleBackground(2);
                        break;
                    default:
                        break;
                    }
                    Log.i("lenve", "onPageSelected"+position);
                }
    
                /**
                 * 有三个参数,第一个position,这个参数要特别注意一下。当用手指滑动时,如果手指按在页面上不动,
                 * position和当前页面index是一致的
                 * 如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,
                 * 只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动),
                 * 这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。
                 * 当直接设置setCurrentItem翻页时,如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面),
                 * 如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面;如果向左翻动,position和目标页面是一致的。
                 * 这和用手指拖动页面翻动是基本一致的。
                 * 如果不是相邻的情况,比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1,
                 * 然后逐步变成2;我从第三个页面跳到第一个页面, position先是1,然后逐步变成0,并没有出现为2的情况。
                 * positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0。
                 * 如果页面向左翻动,这个值不断变小,最后变为0。
                 * positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致。
                 */
                // 在屏幕滚动过程中不断被调用
                @Override
                public void onPageScrolled(int position,float positionOffset, int positionOffsetPixels) {
                    Log.i("lenve", "onPageScrolled"+position);
                }
    
                /**
                 * onPageScrollStateChanged(int state):这个方法在手指操作屏幕的时候发生变化。
                 * 有三个值:0(END),1(PRESS) , 2(UP) 。 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1
                 * 手指抬起时,如果发生了滑动(即使很小),这个值会变为2,然后最后变为0
                 * 总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生,这个时候只会调用这个方法两次,state值分别是1,0 。
                 * 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 。
                 */
                @Override
                public void onPageScrollStateChanged(int state) {
                    Log.i("lenve", "onPageScrollStateChanged"+state);
                }
            });
            //设置默认显示页
            vp.setCurrentItem(0);
        }
    
        private void initView() {
    
            tv1 = (TextView) this.findViewById(R.id.tv1);
            tv2 = (TextView) this.findViewById(R.id.tv2);
            tv3 = (TextView) this.findViewById(R.id.tv3);
            //设置tv1的默认颜色
            tv1.setTextColor(Color.GREEN);
    
            fs = new ArrayList<Fragment>();
    
            f1 = new Fragment1();
            f2 = new Fragment2();
            f3 = new Fragment3();
            fs.add(f1);
            fs.add(f2);
            fs.add(f3);
        }
    
        //滑动时修改标题颜色
        private void changeTitleBackground(int i) {
            switch (i) {
            case 0:
                tv1.setTextColor(Color.GREEN);
                tv2.setTextColor(Color.GRAY);
                tv3.setTextColor(Color.GRAY);
                break;
            case 1:
                tv1.setTextColor(Color.GRAY);
                tv2.setTextColor(Color.GREEN);
                tv3.setTextColor(Color.GRAY);
                break;
            case 2:
                tv1.setTextColor(Color.GRAY);
                tv2.setTextColor(Color.GRAY);
                tv3.setTextColor(Color.GREEN);
                break;
            default:
                break;
            }
        }
    }

    注释里边说的比较清楚了,再看看布局文件:

    <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"
        tools:context="com.example.viewpagertest.MainActivity" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <TextView
                android:id="@+id/tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="f1" />
    
            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="f2" />
    
            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="f3" />
        </LinearLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/vp1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>

    另外,三个fragment都是普通的fragment,这里就不贴代码了。

    本项目源码下载

  • 相关阅读:
    刘志博 作业 2.15
    刘志博 作业2.6
    作业一
    2.6
    张靖悦
    java 2.15
    java 2.6
    java 1.12
    java 1.8
    java 1.3
  • 原文地址:https://www.cnblogs.com/qitian1/p/6461780.html
Copyright © 2011-2022 走看看