在如今移动端的即时通讯APP中,微信可谓是江湖霸主。
在做即时通讯的项目时,考虑到用户学习成本,BOSS们往往喜欢“学习微信”一把。
在做项目一期的时候,高仿的微信。
做了俩月,改成独立设计的界面。
是为二期。又是俩月。
二期演示之后,觉得界面太炫花里胡哨。
于是三期又改为仿微信。
此时微信的主界面已由文字Indicator切换为透明过渡的Indicator了。
不管了,做出一个两者都有的通用模板。
下次使用的时候便可快速运用了。
微信透明渐变的原理是用2个图片(绿色和灰色图片)层叠在Framelayout中。
根据手指滑动的距离来决定相关的透明度。
而底部颜色条的指示块的原理是根据滑动的距离在TabIndicator(继承自LinearLayout)中绘制一个矩形。
核心代码如下:
/**
* 重要方法,根据scroll距离每次进行绘制
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mUnderLineWidth = getWidth() / size;
int tabID = mSelectedTab;
//下面是计算本次滑动的距离
float scroll_x = (mCurrentScroll - ((tabID) * getWidth())) / size;
//下面就是如何画线了
Path path = mPath;
path.rewind();
float offset = 0;
float left_x = mSelectedTab * mUnderLineWidth + offset + scroll_x;
float right_x = (mSelectedTab + 1) * mUnderLineWidth - offset + scroll_x;
float top_y = getHeight() - 16f;
float bottom_y = getHeight();
path.moveTo(left_x, top_y + 1f);
path.lineTo(right_x, top_y + 1f);
path.lineTo(right_x, bottom_y + 1f);
path.lineTo(left_x, bottom_y + 1f);
path.close();
canvas.drawPath(path, mPaintIndicator);
}
//当页面滚动的时候,重新绘制滚动条
public void onScrolled(int h) {
mCurrentScroll = h;
invalidate();
}
工程结构比较简单:
默认状态效果图:
第三个tab左滑到第二个tab效果图:
下载地址: