Viewpager切换的淡入淡出切换(页面不移动)

本文转载自:http://blog.csdn.net/qq_22770457/article/details/52133288


纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(页面不移动!)切换以及文字动画。

下面是效果演示:


实现思路+心路历程...:

其实别的都还蛮简单的,就是这个ViewPager的淡入淡出切换动画比较棘手,以前都没有做过,然后去网上找了好久好久。

其中碰到各种坑无数,大概90%的人是引的 JazzyViewPager的包然后就balabala说自己实现了种种功能,真是醉了....

结论是国内根本找不到这个效果的实现嘛....

然后 在Github下了JazzyViewPager的包里也并没有看到我需要实现的效果:淡入淡出并且页面不滑动!不滑动!不动!

不过最后终于摸索出了方法...

对没错就是PageTransformer,在其中通过控制左右视图View的位置移动使得向右滑动时右视图不移动过来。(在下面会详细解释)。

代码实现:

GuideActivity.java

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. package com.whale.nangua.toquan;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentActivity;  
  6. import android.support.v4.app.FragmentPagerAdapter;  
  7. import android.support.v4.view.ViewPager;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.view.WindowManager;  
  11. import android.widget.ImageButton;  
  12. import android.widget.TextView;  
  13. import com.whale.nangua.toquan.frag.Guide1Fragment;  
  14. import com.whale.nangua.toquan.frag.Guide2Fragment;  
  15. import com.whale.nangua.toquan.frag.Guide3Fragment;  
  16. import com.whale.nangua.toquan.frag.Guide4Fragment;  
  17. import com.whale.nangua.toquan.view.NGGuidePageTransformer;  
  18. import java.util.ArrayList;  
  19. import java.util.List;  
  20.   
  21. /** 
  22.  * Created by nangua on 2016/8/1. 
  23.  */  
  24. public class GuideActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener {  
  25.     // 主界面适配器  
  26.     private FragmentPagerAdapter guidePagerAdapter;  
  27.     // 所有的Tab  
  28.     private List<View> views;  
  29.     // 碎片每个碎片为一个布局  
  30.     private ArrayList<Fragment> fragments;  
  31.     // 导航式Tab  
  32.     private ViewPager vp;  
  33.     //四个Choice按钮id  
  34.      private int[] choicebtnids = {R.id.imgbtn_guide_choice1, R.id.imgbtn_guide_choice2,  
  35.             R.id.imgbtn_guide_choice3, R.id.imgbtn_guide_choice4};  
  36.     //四个Choice按钮  
  37.     private ImageButton[] choicebtns;  
  38.     //右移按钮  
  39.     private ImageButton btn_guide_next;  
  40.     //跳过按钮  
  41.     private TextView btn_guide_skip;  
  42.   
  43.     @Override  
  44.     protected void onCreate(Bundle savedInstanceState) {  
  45.         super.onCreate(savedInstanceState);  
  46.         setContentView(R.layout.activity_guide);  
  47.         // 创建碎片集合  
  48.         fragments = new ArrayList<Fragment>();  
  49.         initView();  
  50.     }  
  51.   
  52.     private void initView() {  
  53.         WindowManager wm = this.getWindowManager();  
  54.         screenWith = wm.getDefaultDisplay().getWidth();    //屏幕宽度  
  55.         //右移按钮  
  56.         btn_guide_next = (ImageButton) findViewById(R.id.btn_guide_next);  
  57.         btn_guide_next.setOnClickListener(this);  
  58.         //跳过  
  59.         btn_guide_skip = (TextView) findViewById(R.id.btn_guide_skip);  
  60.         btn_guide_skip.setOnClickListener(this);  
  61.         //绑定按钮组件  
  62.         choicebtns = new ImageButton[4];  
  63.         for (int i = 0; i < 4; i++) {  
  64.             final int j = i;  
  65.             choicebtns[i] = (ImageButton) findViewById(choicebtnids[i]);  
  66.             choicebtns[i].setOnClickListener(new View.OnClickListener() {  
  67.                 @Override  
  68.                 public void onClick(View v) {  
  69.                     changeTagView(j);  
  70.                 }  
  71.             });  
  72.         }  
  73.         LayoutInflater inflater = LayoutInflater.from(this);  
  74.         // 添加滑动  
  75.         views = new ArrayList<>();  
  76.         views.add(inflater.inflate(R.layout.fragment_guide1, null));  
  77.         views.add(inflater.inflate(R.layout.fragment_guide2, null));  
  78.         views.add(inflater.inflate(R.layout.fragment_guide3, null));  
  79.         views.add(inflater.inflate(R.layout.fragment_guide4, null));  
  80.         vp = (ViewPager) findViewById(R.id.vp_guide);  
  81.         guidePagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
  82.             @Override  
  83.             public int getCount() {  
  84.                 return fragments.size();  
  85.             }  
  86.   
  87.             @Override  
  88.             public Fragment getItem(int arg0) {  
  89.                 return fragments.get(arg0);  
  90.             }  
  91.         };  
  92.         // 声明各个Tab的实例  
  93.         Guide1Fragment guide1Fragment = new Guide1Fragment();  
  94.         Guide2Fragment guide2Fragment = new Guide2Fragment();  
  95.         Guide3Fragment guide3Fragment = new Guide3Fragment();  
  96.         Guide4Fragment guide4Fragment = new Guide4Fragment();  
  97.         fragments.add(guide1Fragment);  
  98.         fragments.add(guide2Fragment);  
  99.         fragments.add(guide3Fragment);  
  100.         fragments.add(guide4Fragment);  
  101.         ngGuidePageTransformer = new NGGuidePageTransformer();  
  102.         ngGuidePageTransformer.setCurrentItem(this0, fragments);  
  103.         vp.setPageTransformer(true, ngGuidePageTransformer);  
  104.         vp.setAdapter(guidePagerAdapter);  
  105.         vp.setOnPageChangeListener(this);  
  106.         //注意,设置Page 即缓存页面的个数,数过小时会出现fragment重复加载的问题  
  107.         vp.setOffscreenPageLimit(4);  
  108.     }  
  109.   
  110.     NGGuidePageTransformer ngGuidePageTransformer;  
  111.     TranslationInterface tempfrag;  
  112.   
  113.     @Override  
  114.     public void onClick(View v) {  
  115.         switch (v.getId()) {  
  116.             //下一个  
  117.             case R.id.btn_guide_next:  
  118.                 int nextPage;  
  119.                 if (nowPage == 3) {  
  120.                     nextPage = 0;  
  121.                 }else {  
  122.                     nextPage = nowPage+1;  
  123.                 }  
  124.                 onPageSelected(nextPage);  
  125.                 changeTagView(nextPage);  
  126.                 break;  
  127.             //跳过  
  128.             case R.id.btn_guide_skip:  
  129.                 //TODO 跳过操作  
  130.   
  131.                 break;  
  132.         }  
  133.     }  
  134.   
  135.     public interface TranslationInterface {  
  136.         void translation(float x);  
  137.     }  
  138.   
  139.     int screenWith ;//屏幕宽度  
  140.   
  141.     /** 
  142.      * TODO 动画修改 
  143.      * @param position 
  144.      * @param positionOffset 
  145.      * @param positionOffsetPixels 
  146.      */  
  147.     @Override  
  148.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  149.         //如果向右  
  150.             switch (position) {  
  151.                 case 0:  
  152.                     tempfrag = (Guide1Fragment) fragments.get(0);  
  153.                     tempfrag.translation(positionOffsetPixels);  
  154.                     break;  
  155.                 case 1:  
  156.                     tempfrag = (Guide2Fragment) fragments.get(1);  
  157.                     tempfrag.translation(positionOffsetPixels);  
  158.                     break;  
  159.                 case 2:  
  160.                     tempfrag = (Guide3Fragment) fragments.get(2);  
  161.                     tempfrag.translation(positionOffsetPixels);  
  162.                     break;  
  163.                 case 3:  
  164.                     tempfrag = (Guide4Fragment) fragments.get(3);  
  165.                     tempfrag.translation(positionOffsetPixels);  
  166.                     break;  
  167.             }  
  168.     }  
  169.   
  170.     private int nowPage = 0;  
  171.     /** 
  172.      * 自定义按钮选择的方法 
  173.      * @param position 
  174.      */  
  175.     private void pageCheck(int position) {  
  176.         choicebtns[position].setBackgroundResource(R.drawable.shape_guide_choice);  
  177.         for (int i = 0;i<4;i++) {  
  178.             if (i!= position) {  
  179.                 choicebtns[i].setBackgroundResource(R.drawable.shape_guide_unchoice);  
  180.             }  
  181.         }  
  182.     }  
  183.   
  184.     @Override  
  185.     public void onPageSelected(int position) {  
  186.         nowPage = position;  
  187.         ngGuidePageTransformer.setCurrentItem(position);  
  188.         pageCheck(position);  
  189.     }  
  190.   
  191.     @Override  
  192.     public void onPageScrollStateChanged(int state) {  
  193.     }  
  194.   
  195.     // 更换标签  
  196.     private void changeTagView(int change) {  
  197.         vp.setCurrentItem(change, false);  
  198.     }  
  199. }  

整体页面的布局,其中比较重要的点时设置Viewpager的PageTransformer,以及设置文字动画的效果。

下面是最重要的类:PageTransformer.java

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. package com.whale.nangua.toquan.view;  
  2.   
  3. import android.content.Context;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.view.ViewPager;  
  6. import android.view.View;  
  7. import java.util.ArrayList;  
  8.   
  9. public class NGGuidePageTransformer implements ViewPager.PageTransformer {  
  10.     private static final float MIN_ALPHA = 0.0f;    //最小透明度  
  11.   
  12.     public void transformPage(View view, float position) {  
  13.         int pageWidth = view.getWidth();    //得到view宽  
  14.   
  15.         if (position < -1) { // [-Infinity,-1)  
  16.             // This page is way off-screen to the left. 出了左边屏幕  
  17.             view.setAlpha(0);  
  18.   
  19.         } else if (position <= 1) { // [-1,1]  
  20.             if (position < 0) {  
  21.                 //消失的页面  
  22.                 view.setTranslationX(-pageWidth * position);  //阻止消失页面的滑动  
  23.             } else {  
  24.                 //出现的页面  
  25.                 view.setTranslationX(pageWidth);        //直接设置出现的页面到底  
  26.                 view.setTranslationX(-pageWidth * position);  //阻止出现页面的滑动  
  27.             }  
  28.             // Fade the page relative to its size.  
  29.             float alphaFactor = Math.max(MIN_ALPHA, 1 - Math.abs(position));  
  30.             //透明度改变Log  
  31.             view.setAlpha(alphaFactor);  
  32.         } else { // (1,+Infinity]  
  33.             // This page is way off-screen to the right.    出了右边屏幕  
  34.             view.setAlpha(0);  
  35.         }  
  36.     }  
  37.   
  38.     int nowPostion = 0//当前页面  
  39.     Context context;  
  40.     ArrayList<Fragment> fragments;  
  41.   
  42.     public void setCurrentItem(Context context, int nowPostion, ArrayList<Fragment> fragments) {  
  43.         this.nowPostion = nowPostion;  
  44.         this.context = context;  
  45.         this.fragments = fragments;  
  46.     }  
  47.   
  48.     public void setCurrentItem(int nowPostion) {  
  49.         this.nowPostion = nowPostion;  
  50.     }  
  51.   
  52. }  

实现的思路注释也比较详细,但是我还是说明一下:

就是先判断滑动的位置,如果是向右滑动,则首先要阻止当前页面(消失ing的页面)随着Viewpager的特性向左边滑动,以及右边要出现的界面向左滑动(在此之前先直接设置右边的界面到屏幕最左边)。要注意的是这里区分位置以及区分左右边是根据position来判断的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值