ViewPager中自定义title indicator

2016-04-15  本文已影响1017人  wbxjack

需求

继续死磕Launcher的文件夹模式,按照UI的设计(韩国团队,果然思考的非主流),对类APUS文件夹滑动显示的要求是:当前的文件夹名字要居中高亮大字体(如果是第一个文件夹也是要居中,左侧空白;如果不是第一个文件夹,那么左右显示的文件夹名字都是小字体,而且距离当前文件夹名字的间距相同)。如下图所示:


folder indicator demo

话说看到这个设计的时候,我的内心是崩溃的,为啥不用主流的显示方式,类似头条新闻,APUS之类的,顺序排列,哪个当前显示,哪个下面有下划线即可。现在有很多写好的控件,拿来直接用即可。但是,还是要实现这个效果。

分析

需要实现如下的功能:

文件夹名字显示的实现

参考了github上ViewPagerIndicator其中TitlePageIndicator的实现,即通过直接继承View来实现上诉的需求。因为现有的控件不足于让我们完成title的绘制和展示。
首先我们自定义的TitlePageIndicator要继承View并且实现ViewPager的接口OnPageChangeListener,这样viewpager滑动的时候,我们可以通过回调函数来控制相关title的滑动显示。

public class TitlePageIndicator extends View implements OnPageChangeListener {

因为本身TitlePageIndicator是个自定义的view,所以我们把它加到我们的布局文件中

<com.android.launcher3.TitlePageIndicator android:id="@+id/folder_group_indicator" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10.0dp" > </com.android.launcher3.TitlePageIndicator> <com.android.launcher3.FolderViewPager android:id="@+id/viewpager" android:layout_below="@id/folder_group" android:layout_width="match_parent" android:layout_height="match_parent" > </com.android.launcher3.FolderViewPager>

这样,在TitlePageIndicator的onDraw函数里面就可以展示我们的文件夹名称了。
所以重点在onDraw里面怎么画出这些titles。

canvas.drawText(pageTitle, 0, pageTitle.length(), bound.left + offset, bound.bottom + mTopPadding, mPaintText);
我们最后关心的只有offset这个参数(不滑动的时候为0,不表),需要单独算出来。

  1. 非最后一页的offset
         gap = (rightBound.right + rightBound.left) / 2 - halfWidth(屏幕宽的一半);
            offset = (int)(gap * mPageOffset);
  1. 最后一页的offset
         float gap = (halfWidth - w / 2) - leftBound.left;
            offset = (int)(gap * (1 - mPageOffset));

Note:
关于ViewPager左右滑动,mCurrentPage的变化是不一样的。所以通过gap算offset的公式也不一样。

关于点击文件夹名字切换文件夹的实现

重写了onTouchEvent函数,当ACTION_UP的时候,说明完成了点击事件。那么这个时候判断点击的位置落到哪个title上,然后调用viewpager的setCurrentItem函数来完成切换。比较简单。

最后的效果

现有的效果

后记

实现的还是比较粗糙,后面还要继续优化。感觉好的UI控件还是要慢慢雕琢才可以。

上一篇下一篇

猜你喜欢

热点阅读