ViewPager实现方法

2015-09-20 10:33:43

传统ViewPager实现

ViewPager（一）

2015-09-21 09:51:29

Fragment+ViewPager

为每个layout创建一个Fragment。
例如：

1. 创建一个类继承Fragment。
2. 装载该布局。
3. 创建一个适配器继承FragmentPagerAdapter。
4. MainActivity中 讲Fragment集合作为参数传给Adapter即可。

主要代码如下：

if (fragments.size() == 0) {  

       if (foundFragment == null) {
           foundFragment = new FoundFragment();
       }
       if (mineFragment == null) {
           mineFragment = new MineFragment();
       }
       if (msgFragment == null) {
           msgFragment = new MsgFragment();
       }
       if (teachFragment == null) {
           teachFragment = new TeachFragment();
       }
       //此处必须注意fragment顺序
       fragments.add(teachFragment);
       fragments.add(msgFragment);
       fragments.add(foundFragment);
       fragments.add(mineFragment);
   }
   adapter = new MainAdapter(getSupportFragmentManager(), fragments);

2015-09-30 15:06:04

ViewPager 添加小圆点实际开发（广告横幅开发）

描述：

小圆点开发类似上述微信ViewPager开发,不同的是小圆点的数量是根据图片的多少来确定,因此需要用到java代码来进行布局。

思路：

1. 在主布局文件里，定义一个LinearLayout并设置id。（用于装小圆点）
2. 声明一个ImageView数组,用于显示小圆点。
3. 根据服务器下发的图片数量实例化上述ImageView数组。(new ImageView[pic.size()])
4. 根据图片数量创建ImageView,设置相关属性,设置背景图,赋值给ImageView数组。
5. 把该数组加入到上述LinearLayout中即可。(addView)

6. 重写Viewpager的addOnPageChangeListener里的onPageSelected方法,调用下面的方法,将viewPager与小圆点绑定。

   代码一：

   // mImageViews 是服务器下发图片的长度
     cycleImgs = new ImageView[mImageViews.size()];
       for (int i = 0; i < mImageViews.size(); i++) {
           imageView = new ImageView(getActivity());
           lp = new LinearLayout.LayoutParams(50, 50);
           lp.setMargins(15, 0, 15, 0);
           imageView.setLayoutParams(lp);
           cycleImgs[i] = imageView;
           if (i == 0) {
   //小圆点初始化,第一张图为选中
               cycleImgs[i].setSelected(true);
           }
           cycleImgs[i].setBackgroundResource(R.drawable.common_indicator_shape);
           llCycleImages.addView(cycleImgs[i]);
       }
   

   代码二：

   @Override
      public void onPageSelected(int position) {
          sendScrollMessage(interval);
          IsClick(cycleImgs, position % cycleImgs.length);
      //position%cycleImgs.length保证循环显示
      }  
   

   代码三：

private void IsClick(ImageView[] listImages, int position) {
    for (int i = 0; i < listImages.length; i++) {
        if (i == position) {
            listImages[i].setSelected(true);
        } else {
            listImages[i].setSelected(false);
        }
    }
}

Check参考

2015-09-30 17:34:38

Tag+ViewPager

该框架实现的效果是tabhost 跟fragment合用的效果

1. 下载包
   compile ‘com.astuetz:pagerslidingtabstrip:1.0.1’
2. 在主布局里定义控件

<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_below="@+id/mfragment"
android:layout_width="fill_parent"
android:layout_height="50dp">
</com.astuetz.PagerSlidingTabStrip>

<android.support.v4.view.ViewPager
android:layout_below="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:id="@+id/viewpager">
</android.support.v4.view.ViewPager>  

PagerSlidingTabStrip 一定要放在ViewPager上面

1. 创建一个Adapter类，继承FragmentPageAdapter（Viewpager设置数据）
   重写GetItem方法（创建Fragment），重写getPageTitle方法。
2. PagerSlidingTabStrip装载ViewPager控件 tabs.setViewPager(viewPager);

2015-10-01 17:11:25

为tab添加滑动图

实现效果：

1. 准备一张图,用于指示当前的tab。
2. 获取屏幕宽度，根据tab的数量获取平均长度值。 (假设有4个tab)
3. 获取每个tab到y轴的距离。
4. 重写onPageSelected方法。
5. 声明一个变量index用于保存之前的index。
6. 利用动画TranslateAnimation进行位移。(图片停留在动画结束的位置利用setFillAfter方法)。

示例代码：

width = getResources().getDisplayMetrics().widthPixels; //获取屏幕宽度
offset = width / 4;//取平均值
int zero = 0;//获取每个tab 到Y轴的距离
int one = offset;
int two = offset * 2;
int three = offset * 3;

//重写onPageSelected  
 if (position == 0) {  //写的第一个tab的动画
    IsClick(ivTeach, ivFound, ivMsg, ivMine);
    if (currentIndex == 1) {
         animation = new TranslateAnimation(one, zero, 0, 0);
    } else if (currentIndex == 2) {
        animation = new TranslateAnimation(two, zero, 0, 0);
    } else if (currentIndex == 3) {
        animation = new TranslateAnimation(three, zero, 0, 0);
  }else if(positoin == 1){ // 第二个tab的动画
    if (currentIndex == 0) {
        animation = new TranslateAnimation(zero, one, 0, 0);
    } else if (currentIndex == 2) {
        animation = new TranslateAnimation(two, one, 0, 0);
    } else if (currentIndex == 3) {
        animation = new TranslateAnimation(three, one, 0, 0);
    }
  }

    .  
    .  
    .  
    .  
currentIndex = position;
animation.setFillAfter(true);//设置图片停留在动画结束的位置
animation.setDuration(150);
ivTab.startAnimation(animation); //ivTab是指示器