当前位置: 首页 > 编程笔记 >

Android实现微信首页左右滑动切换效果

林魁
2023-03-14
本文向大家介绍Android实现微信首页左右滑动切换效果,包括了Android实现微信首页左右滑动切换效果的使用技巧和注意事项,需要的朋友参考一下

大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图:

之前也在博客上看到别人的实现,再次基础上,我做了些优化。首先说下实现原理,大神略过,o(╯□╰)o
页面上看到的三个页面是三个Fragment, 左右滑动使用viewpager,相信大家也都是这么再用,那么底部用的是什么技术呢,底部渐变其实就是重写了ImageView,以及在左右滑动时,改变了TextView的颜色值,是不是很简单...下面我们一步一步的来: 

1.自定义ImageView: 

 /**
  * 初始化资源图片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);
 }

这里定义了两个Bitmap,分别对应获得焦点和失去焦点时显示的bitmap图像,两个矩阵,在绘制过程中使用到,定义了一个外部调用的方法,在左右滑动过程中,通过偏移值改变透明值,两张图片叠加就是对应的过度效果。

然后通通过滑动过程中不断刷新view完成重新绘制,由此有了重写onDraw方法: 

 @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);
 }

这里可以看到同伙Paint改变传入的两个bitmap透明度,从而达到渐变效果,其中mSelectedAlpha为外部传入透明值 

2.自定义实现底部bar容器,这里通过重写LinearLayout实现(姑且叫做container),  在container中我们要做这么几件事:
1).定义外表调用接口,接收底部显示资源信息:
a.首先是初始化参数: 

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;
 }

这里传入了tab显示的文字数组、显示的图片资源数组、默认颜色和获得焦点时颜色值数组(数组大小=2),以及切换时是否显示过渡效果

b.设置布局文件及布局文件里对应的控件ID、显示图片时图片宽高参数,提供了三种方式:
 ①图文tab: 

/**
  * 设置布局文件及相关控件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;
 }

这里的layout及tab的布局文件, iconId对应的是自定义ImageView的资源Id, textId对应的是TextView的Id, 宽高指的是图片显示的宽高
②只有文字tab: 只显示文字tab时传入iconId即可
③只有图片tab: 相应的,是在图文tab提供的方法上,传入文本textId=0即可
c.注入ViewPager:这里需要监听ViewPager的滑动来改变渐变色

2).添加tab到容易container中:
这里需要判断iconId以及TextId是否大于0,=0即不显示,同时为了居中平分底部container长度, 所有tab等分底部container 

/**
  * <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);
  }
 }

3).监听viewPager的滑动事件,根据偏移值更新container,完成重绘操作

4).在container的onDraw中根据偏移量计算透明值,这里文本偏移值计算用了一个开源的代码

@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);
     }
    }

   }
  }
 }

3.定义个FragmentAdapter,这个就略过,比较简单了 

4.做了以上准备工作,就可以写个测试例子试试效果了,当然这里为了看到效果,我们需要事先准备好几张图片,以及几个fragment 

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));
 }

ManActivity对应的xml就比较简单了,可以参考源码,最后运行效果,就是上面的贴图了,到此防微信的滑动切换就完成了,源码请访问以下链接: 

源码下载:https://github.com/JarekWang/wechathome.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Vue.js实现微信过渡动画左右切换效果,包括了Vue.js实现微信过渡动画左右切换效果的使用技巧和注意事项,需要的朋友参考一下 前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用。 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 这里还用

  • 本文向大家介绍Android ViewPager实现左右滑动翻页效果,包括了Android ViewPager实现左右滑动翻页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: 布局文件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍flutter PageView实现左右滑动切换视图,包括了flutter PageView实现左右滑动切换视图的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序左右滑动切换页面详解及实例代码,包括了微信小程序左右滑动切换页面详解及实例代码的使用技巧和注意事项,需要的朋友参考一下 微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。 touchstart在触摸开始时触发事件; t

  • 本文向大家介绍Android开发之使用ViewPager实现图片左右滑动切换效果,包括了Android开发之使用ViewPager实现图片左右滑动切换效果的使用技巧和注意事项,需要的朋友参考一下 Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都

  • 本文向大家介绍Android ViewPager撤消左右滑动切换功能实现代码,包括了Android ViewPager撤消左右滑动切换功能实现代码的使用技巧和注意事项,需要的朋友参考一下 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动。下面通过本文给大家ViewPager取消左右滑动切换功能的实例代码,具体代码如下所示: IndexV