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

最新推荐文章于 2024-09-06 16:52:55 发布

sugaryaruan

最新推荐文章于 2024-09-06 16:52:55 发布

阅读量4.2k

点赞数 2

分类专栏： Android开发文章标签： ViewPager 淡入淡出 PageTransformer

Android开发专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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

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

下面是效果演示：

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

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

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

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

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

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

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

代码实现：

GuideActivity.java

[java]view plaincopy 
   
 package com.whale.nangua.toquan;  
   
 import android.os.Bundle;  
 import android.support.v4.app.Fragment;  
 import android.support.v4.app.FragmentActivity;  
 import android.support.v4.app.FragmentPagerAdapter;  
 import android.support.v4.view.ViewPager;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.WindowManager;  
 import android.widget.ImageButton;  
 import android.widget.TextView;  
 import com.whale.nangua.toquan.frag.Guide1Fragment;  
 import com.whale.nangua.toquan.frag.Guide2Fragment;  
 import com.whale.nangua.toquan.frag.Guide3Fragment;  
 import com.whale.nangua.toquan.frag.Guide4Fragment;  
 import com.whale.nangua.toquan.view.NGGuidePageTransformer;  
 import java.util.ArrayList;  
 import java.util.List;  
   
 /** 
  * Created by nangua on 2016/8/1. 
  */  
 public class GuideActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener {  
     // 主界面适配器  
     private FragmentPagerAdapter guidePagerAdapter;  
     // 所有的Tab  
     private List<View> views;  
     // 碎片每个碎片为一个布局  
     private ArrayList<Fragment> fragments;  
     // 导航式Tab  
     private ViewPager vp;  
     //四个Choice按钮id  
      private int[] choicebtnids = {R.id.imgbtn_guide_choice1, R.id.imgbtn_guide_choice2,  
             R.id.imgbtn_guide_choice3, R.id.imgbtn_guide_choice4};  
     //四个Choice按钮  
     private ImageButton[] choicebtns;  
     //右移按钮  
     private ImageButton btn_guide_next;  
     //跳过按钮  
     private TextView btn_guide_skip;  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_guide);  
         // 创建碎片集合  
         fragments = new ArrayList<Fragment>();  
         initView();  
     }  
   
     private void initView() {  
         WindowManager wm = this.getWindowManager();  
         screenWith = wm.getDefaultDisplay().getWidth();    //屏幕宽度  
         //右移按钮  
         btn_guide_next = (ImageButton) findViewById(R.id.btn_guide_next);  
         btn_guide_next.setOnClickListener(this);  
         //跳过  
         btn_guide_skip = (TextView) findViewById(R.id.btn_guide_skip);  
         btn_guide_skip.setOnClickListener(this);  
         //绑定按钮组件  
         choicebtns = new ImageButton[4];  
         for (int i = 0; i < 4; i++) {  
             final int j = i;  
             choicebtns[i] = (ImageButton) findViewById(choicebtnids[i]);  
             choicebtns[i].setOnClickListener(new View.OnClickListener() {  
                 @Override  
                 public void onClick(View v) {  
                     changeTagView(j);  
                 }  
             });  
         }  
         LayoutInflater inflater = LayoutInflater.from(this);  
         // 添加滑动  
         views = new ArrayList<>();  
         views.add(inflater.inflate(R.layout.fragment_guide1, null));  
         views.add(inflater.inflate(R.layout.fragment_guide2, null));  
         views.add(inflater.inflate(R.layout.fragment_guide3, null));  
         views.add(inflater.inflate(R.layout.fragment_guide4, null));  
         vp = (ViewPager) findViewById(R.id.vp_guide);  
         guidePagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
             @Override  
             public int getCount() {  
                 return fragments.size();  
             }  
   
             @Override  
             public Fragment getItem(int arg0) {  
                 return fragments.get(arg0);  
             }  
         };  
         // 声明各个Tab的实例  
         Guide1Fragment guide1Fragment = new Guide1Fragment();  
         Guide2Fragment guide2Fragment = new Guide2Fragment();  
         Guide3Fragment guide3Fragment = new Guide3Fragment();  
         Guide4Fragment guide4Fragment = new Guide4Fragment();  
         fragments.add(guide1Fragment);  
         fragments.add(guide2Fragment);  
         fragments.add(guide3Fragment);  
         fragments.add(guide4Fragment);  
         ngGuidePageTransformer = new NGGuidePageTransformer();  
         ngGuidePageTransformer.setCurrentItem(this, 0, fragments);  
         vp.setPageTransformer(true, ngGuidePageTransformer);  
         vp.setAdapter(guidePagerAdapter);  
         vp.setOnPageChangeListener(this);  
         //注意，设置Page 即缓存页面的个数，数过小时会出现fragment重复加载的问题  
         vp.setOffscreenPageLimit(4);  
     }  
   
     NGGuidePageTransformer ngGuidePageTransformer;  
     TranslationInterface tempfrag;  
   
     @Override  
     public void onClick(View v) {  
         switch (v.getId()) {  
             //下一个  
             case R.id.btn_guide_next:  
                 int nextPage;  
                 if (nowPage == 3) {  
                     nextPage = 0;  
                 }else {  
                     nextPage = nowPage+1;  
                 }  
                 onPageSelected(nextPage);  
                 changeTagView(nextPage);  
                 break;  
             //跳过  
             case R.id.btn_guide_skip:  
                 //TODO 跳过操作  
   
                 break;  
         }  
     }  
   
     public interface TranslationInterface {  
         void translation(float x);  
     }  
   
     int screenWith ;//屏幕宽度  
   
     /** 
      * TODO 动画修改 
      * @param position 
      * @param positionOffset 
      * @param positionOffsetPixels 
      */  
     @Override  
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
         //如果向右  
             switch (position) {  
                 case 0:  
                     tempfrag = (Guide1Fragment) fragments.get(0);  
                     tempfrag.translation(positionOffsetPixels);  
                     break;  
                 case 1:  
                     tempfrag = (Guide2Fragment) fragments.get(1);  
                     tempfrag.translation(positionOffsetPixels);  
                     break;  
                 case 2:  
                     tempfrag = (Guide3Fragment) fragments.get(2);  
                     tempfrag.translation(positionOffsetPixels);  
                     break;  
                 case 3:  
                     tempfrag = (Guide4Fragment) fragments.get(3);  
                     tempfrag.translation(positionOffsetPixels);  
                     break;  
             }  
     }  
   
     private int nowPage = 0;  
     /** 
      * 自定义按钮选择的方法 
      * @param position 
      */  
     private void pageCheck(int position) {  
         choicebtns[position].setBackgroundResource(R.drawable.shape_guide_choice);  
         for (int i = 0;i<4;i++) {  
             if (i!= position) {  
                 choicebtns[i].setBackgroundResource(R.drawable.shape_guide_unchoice);  
             }  
         }  
     }  
   
     @Override  
     public void onPageSelected(int position) {  
         nowPage = position;  
         ngGuidePageTransformer.setCurrentItem(position);  
         pageCheck(position);  
     }  
   
     @Override  
     public void onPageScrollStateChanged(int state) {  
     }  
   
     // 更换标签  
     private void changeTagView(int change) {  
         vp.setCurrentItem(change, false);  
     }  
 }  

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

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

[java]view plaincopy 
   
 package com.whale.nangua.toquan.view;  
   
 import android.content.Context;  
 import android.support.v4.app.Fragment;  
 import android.support.v4.view.ViewPager;  
 import android.view.View;  
 import java.util.ArrayList;  
   
 public class NGGuidePageTransformer implements ViewPager.PageTransformer {  
     private static final float MIN_ALPHA = 0.0f;    //最小透明度  
   
     public void transformPage(View view, float position) {  
         int pageWidth = view.getWidth();    //得到view宽  
   
         if (position < -1) { // [-Infinity,-1)  
             // This page is way off-screen to the left. 出了左边屏幕  
             view.setAlpha(0);  
   
         } else if (position <= 1) { // [-1,1]  
             if (position < 0) {  
                 //消失的页面  
                 view.setTranslationX(-pageWidth * position);  //阻止消失页面的滑动  
             } else {  
                 //出现的页面  
                 view.setTranslationX(pageWidth);        //直接设置出现的页面到底  
                 view.setTranslationX(-pageWidth * position);  //阻止出现页面的滑动  
             }  
             // Fade the page relative to its size.  
             float alphaFactor = Math.max(MIN_ALPHA, 1 - Math.abs(position));  
             //透明度改变Log  
             view.setAlpha(alphaFactor);  
         } else { // (1,+Infinity]  
             // This page is way off-screen to the right.    出了右边屏幕  
             view.setAlpha(0);  
         }  
     }  
   
     int nowPostion = 0; //当前页面  
     Context context;  
     ArrayList<Fragment> fragments;  
   
     public void setCurrentItem(Context context, int nowPostion, ArrayList<Fragment> fragments) {  
         this.nowPostion = nowPostion;  
         this.context = context;  
         this.fragments = fragments;  
     }  
   
     public void setCurrentItem(int nowPostion) {  
         this.nowPostion = nowPostion;  
     }  
   
 }  