Android防微信首页左右滑动切换

lxfmu4814 7年前
   <p>大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f416c46b29c218dcaad2e44728c5ca3d.gif"></p>    <p>之前也在博客上看到别人的实现,再次基础上,我做了些优化。首先说下实现原理。</p>    <p>页面上看到的三个页面是三个Fragment, 左右滑动使用viewpager,相信大家也都是这么再用,那么底部用的是什么技术呢,底部渐变其实就是重写了ImageView,以及在左右滑动时,改变了TextView的颜色值,是不是很简单...下面我们一步一步的来:</p>    <h3><strong>1.自定义ImageView:</strong></h3>    <pre>  <code class="language-java">    /**       * 初始化资源图片bitmap及相关绘制对象       * @param normal normals       * @param selected focus       */      public final void init(int normal, int selected, int width, int height) {          this.mNormalIcon = createBitmap(normal);          this.mSelectedIcon = createBitmap(selected);          this.mNormalRect = new Rect(0, 0, width, height);          this.mSelectedRect = new Rect(0, 0, width, height);          this.mPaint = new Paint(1);      }  </code></pre>    <p>这里定义了两个Bitmap,分别对应获得焦点和失去焦点时显示的bitmap图像,两个矩阵,在绘制过程中使用到,定义了一个外部调用的方法,在左右滑动过程中,通过偏移值改变透明值,两张图片叠加就是对应的过度效果。</p>    <p>然后通通过滑动过程中不断刷新view完成重新绘制,由此有了重写onDraw方法:</p>    <pre>  <code class="language-java">    @Override      protected void onDraw(Canvas canvas) {          super.onDraw(canvas);          if (this.mPaint == null) {              return;          }          this.mPaint.setAlpha(255 - this.mSelectedAlpha);          canvas.drawBitmap(this.mNormalIcon, null, this.mNormalRect, this.mPaint);          this.mPaint.setAlpha(this.mSelectedAlpha);          canvas.drawBitmap(this.mSelectedIcon, null, this.mSelectedRect, this.mPaint);      }  </code></pre>    <p>这里可以看到同伙Paint改变传入的两个bitmap透明度,从而达到渐变效果,其中mSelectedAlpha为外部传入透明值</p>    <p><strong>2.自定义实现底部bar容器,这里通过重写LinearLayout实现(姑且叫做container),  在container中我们要做这么几件事:</strong></p>    <p>1).定义外表调用接口,接收底部显示资源信息:</p>    <p>a.首先是初始化参数:</p>    <pre>  <code class="language-java">    public void initContainer (String[] titles, int[][] iconsRes, int[] colors, boolean showTransitionColor) {          this.mTitles = titles;          this.mIconRes = iconsRes;          this.mTextNormalColor = getResources().getColor(colors[0]);          this.mTextSelectedColor = getResources().getColor(colors[1]);          this.mShowTransitionColor = showTransitionColor;      }  </code></pre>    <p>这里传入了tab显示的文字数组、显示的图片资源数组、默认颜色和获得焦点时颜色值数组(数组大小=2),以及切换时是否显示过渡效果</p>    <p>b.设置布局文件及布局文件里对应的控件ID、显示图片时图片宽高参数,提供了三种方式:</p>    <p>①图文tab:</p>    <pre>  <code class="language-java">    /**       * 设置布局文件及相关控件id       * @param layout layout布局文件 id       * @param iconId ImageView 控件 id id <=0 时不显示       * @param textId TextView 控件 id id <=0 时不显示       * @param width  icon 宽度       * @param height icon 高度       */      public void setContainerLayout (int layout, int iconId, int textId, int width, int height) {          mLayoutId = layout;          mTextViewId = textId;          mIconVIewId = iconId;          mIconWidth = width;          mIconHeight = height;      }  </code></pre>    <p>这里的layout及tab的布局文件, iconId对应的是自定义ImageView的资源Id, textId对应的是TextView的Id, 宽高指的是图片显示的宽高</p>    <p>②只有文字tab: 只显示文字tab时传入iconId即可</p>    <p>③只有图片tab: 相应的,是在图文tab提供的方法上,传入文本textId=0即可</p>    <p>c.注入ViewPager:这里需要监听ViewPager的滑动来改变渐变色</p>    <p>2).添加tab到容易container中:</p>    <p>这里需要判断iconId以及TextId是否大于0,=0即不显示,同时为了居中平分底部container长度, 所有tab等分底部container</p>    <pre>  <code class="language-java">/**       * <p>添加tab view到当前容器</p>       */      private void addTabViewToContainer() {          final PagerAdapter adapter = mViewPager.getAdapter();            mTabView = new View[adapter.getCount()]; //这里根据adapter判断底部要显示的tab总数            for (int index = 0, len = adapter.getCount(); index < len; index++) {                final View tabView = LayoutInflater.from(getContext()).inflate(mLayoutId, this, false);  //加载tab布局              mTabView[index] = tabView;                /*tabIconView初始化*/              TabIconView iconView = null;              if (mIconVIewId > 0) { //  传入的图片资源文件ID不为0时,表示需要显示icon,然后初始化该View                  iconView = (TabIconView) tabView.findViewById(mIconVIewId);                  iconView.init(mIconRes[index][0], mIconRes[index][1], mIconWidth, mIconHeight);  //这里调了自定义ImageView的init方法              }                /*tabTextView初始化*/              TextView textView = null;              if (mTextViewId > 0) {                  textView = (TextView) tabView.findViewById(mTextViewId);                  textView.setText(mTitles[index]);                }                /*设置宽度,等分container*/              LayoutParams lp = (LayoutParams) tabView.getLayoutParams();              lp.width = 0;              lp.weight = 1;                /*添加tab点击事件*/              addTabOnClickListener(tabView, index);                /*设置当前状态*/              if (index == mViewPager.getCurrentItem()) {  //当先显示tab,设置初始状态为获得焦点状态                  if (iconView != null) {                      iconView.offsetChanged(0);                  }                  tabView.setSelected(true);                  if (textView != null) {                      textView.setTextColor(mTextSelectedColor);                  }              }                addView(tabView);          }      }  </code></pre>    <p>3).监听viewPager的滑动事件,根据偏移值更新container,完成重绘操作</p>    <p>4).在container的onDraw中根据偏移量计算透明值,这里文本偏移值计算用了一个开源的代码</p>    <pre>  <code class="language-java">@Override      protected void onDraw(Canvas canvas) {          super.onDraw(canvas);          final int childCount = getChildCount();          if (childCount > 0) {              /*当发生偏移时,绘制渐变区域*/              if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1) && mShowTransitionColor) {                    /*获取当前tab和下一tab view */                  View selectedTab = getChildAt(mSelectedPosition);                  View nextTab = getChildAt(mSelectedPosition + 1);                    /*显示tab icon时,刷新各自view 透明度*/                  if (mIconVIewId > 0) {                      View selectedIconView = selectedTab.findViewById(mIconVIewId);                      View nextIconView = nextTab.findViewById(mIconVIewId);                        //draw icon alpha                      if (selectedIconView instanceof TabIconView && nextIconView instanceof TabIconView) {                          ((TabIconView) selectedIconView).offsetChanged(mSelectionOffset);                          ((TabIconView) nextIconView).offsetChanged(1 - mSelectionOffset);                      }                  }                     /*显示tab text,刷新各自view 透明度*/                  if  (mTextViewId > 0) {                      View selectedTextView = selectedTab.findViewById(mTextViewId);                      View nextTextView = nextTab.findViewById(mTextViewId);                        //draw text color                      Integer selectedColor = (Integer) evaluate(mSelectionOffset, mTextSelectedColor, mTextNormalColor);                      Integer nextColor = (Integer) evaluate(1 - mSelectionOffset, mTextSelectedColor, mTextNormalColor);                        if (selectedTextView instanceof TextView && nextTextView instanceof TextView) {                          ((TextView) selectedTextView).setTextColor(selectedColor);                          ((TextView) nextTextView).setTextColor(nextColor);                      }                  }                }          }      }  </code></pre>    <p><strong>3.定义个FragmentAdapter,这个就略过,比较简单了</strong></p>    <p><strong>4.做了以上准备工作,就可以写个测试例子试试效果了,当然这里为了看到效果,我们需要事先准备好几张图片,以及几个fragment</strong></p>    <pre>  <code class="language-java">    private void initViews() {          //得到apdater          TabFragmentAdapter mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments);          ViewPager mPager = (ViewPager) findViewById(R.id.tab_pager);          mPager.setAdapter(mAdapter);           //如果当前类需要对viewPager做监听          TabContainerView mTabLayout = (TabContainerView) findViewById(R.id.ll_tab_container);          mTabLayout.setOnPageChangeListener(this);            mTabLayout.initContainer(getResources().getStringArray(R.array.tab_main_title), ICONS_RES, TAB_COLORS, true);            int width = getResources().getDimensionPixelSize(R.dimen.tab_icon_width);          int height = getResources().getDimensionPixelSize(R.dimen.tab_icon_height);          mTabLayout.setContainerLayout(R.layout.tab_container_view, R.id.iv_tab_icon, R.id.tv_tab_text, width, height);  //        mTabLayout.setSingleTextLayout(R.layout.tab_container_view, R.id.tv_tab_text);  //        mTabLayout.setSingleIconLayout(R.layout.tab_container_view, R.id.iv_tab_icon);            mTabLayout.setViewPager(mPager);          mPager.setCurrentItem(getIntent().getIntExtra("tab", 0));      }  </code></pre>    <p>ManActivity对应的xml就比较简单了,可以参考源码,最后运行效果,就是上面的贴图了,到此防微信的滑动切换就完成了。</p>    <p> </p>    <p>来自:http://www.cnblogs.com/jarek/p/5857615.html</p>    <p> </p>