程序员人生 网站导航

[置顶] 实现360手机助手TabHost的波纹效果

栏目:综合技术时间:2016-07-15 09:38:02

现在新版360手机助手的界面都做得挺漂亮的,在切换底部导航时的波纹效果也很好看,恰好最近看了个开源项目才了解到原来Drawable做动画效果也怎样好用,所以就仿照360实现了下带波纹的TabHost。源代码地址:https://github.com/Rukey7/XFragmentTabHost

先来看1下实现后的效果:


说明1下实现要点:

1. 由于我们项目之前用的是FragmentTabHost,所以我直接继承FragmentTabHost来实现动画效果更方便;

2. 波纹动画的实现实际上是自定义带动画效果的Drawable,然后将Drawable设置为Tab菜单的背景;

3. 其它的就是1些Tab菜单切换的处理了。

1. 自定义波纹Drawable

自定义Drawable只要继承Drawable并实现以下4个方法,同时实现Animatable接口

public class RippleDrawable extends Drawable implements Animatable { @Override public void draw(Canvas canvas) { // 绘图 } @Override public void setAlpha(int alpha) { // 设置透明度 } @Override public void setColorFilter(ColorFilter colorFilter) { // 设置色彩过滤 } @Override public int getOpacity() { // 设置色彩格式 return PixelFormat.RGBA_8888; } @Override public void start() { // 启动动画 } @Override public void stop() { // 停止动画 } @Override public boolean isRunning() { // 判断动画是不是运行 return false; } }
这几个方法中最重要的就是draw()方法了,相信自定义过View的都知道我们图形就是在这里绘制,这里也1样,其它方法在这里影响不大,最后1个方法用来设置Drawable的色彩格式。要实现动画Drawable需要实现Animatable接口,并实现3个方法以下,其实不实现这个接口也能做动画效果,但还是实现比较好。

下面是全部波纹Drawable的实现代码:

/** * Created by long on 2016/6/27. * 波纹Drawable */ public class RippleDrawable extends Drawable implements Animatable { /** * 3种模式:左侧、中间和右侧波纹 */ public static final int MODE_LEFT = 1; public static final int MODE_MIDDLE = 2; public static final int MODE_RIGHT = 3; private int mMode = MODE_MIDDLE; // 前风景和后风景画笔 private Paint mPaintFront; private Paint mPaintBehind; // 用来绘制扇形的矩形框 private RectF mRect; // 目标View的宽高的1半 private int mHalfWidth; private int mHalfHeight; // 分散半径 private int mRadius; // 前风景和背风景的分割距离 private int mDivideSpace; // 分散满视图需要的距离,中点到斜角的距离 private int mFullSpace; // 动画控制 private ValueAnimator mValueAnimator; public RippleDrawable(int frontColor, int behindColor, int mode) { mPaintFront = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintFront.setColor(frontColor); mPaintBehind = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintBehind.setColor(behindColor); mRect = new RectF(); mMode = mode; } @Override public void draw(Canvas canvas) { if (mRadius > mHalfWidth) { int count = canvas.save(); canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth, mPaintBehind); canvas.restoreToCount(count); count = canvas.save(); canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront); canvas.restoreToCount(count); } else if (mRadius > mDivideSpace) { int count = canvas.save(); canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintBehind); canvas.restoreToCount(count); count = canvas.save(); canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront); canvas.restoreToCount(count); } else { canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintFront); } // 左右两边才进行扇形绘制 if (mMode != MODE_MIDDLE) { mRect.left = mHalfWidth - mRadius; mRect.right = mHalfWidth + mRadius; mRect.top = mHalfHeight - mRadius; mRect.bottom = mHalfHeight + mRadius; } if (mMode == MODE_LEFT) { canvas.drawArc(mRect, 90, 180, true, mPaintFront); } else if (mMode == MODE_RIGHT) { canvas.drawArc(mRect, ⑼0, 180, true, mPaintFront); } } @Override public void setAlpha(int alpha) { } @Override public void setColorFilter(ColorFilter colorFilter) { } @Override public int getOpacity() { return PixelFormat.RGBA_8888; } @Override protected void onBoundsChange(Rect bounds) { super.onBoundsChange(bounds); mHalfHeight = (bounds.bottom - bounds.top) / 2; mHalfWidth = (bounds.right - bounds.left) / 2; mDivideSpace = Math.max(mHalfHeight, mHalfWidth) * 3 / 4; mFullSpace = (int) Math.sqrt(mHalfWidth * mHalfWidth + mHalfHeight * mHalfHeight); // 属性动画 mValueAnimator = ValueAnimator.ofInt(0, mFullSpace); mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mRadius = (int) animation.getAnimatedValue(); invalidateSelf(); } }); mValueAnimator.setDuration(200); start(); } @Override public void start() { mValueAnimator.start(); } @Override public void stop() { mValueAnimator.end(); } @Override public boolean isRunning() { return mValueAnimator != null && mValueAnimator.isRunning(); } }
整体还是比较简单的,主要就是绘图那里需要绘制3个图形,1个前风景的圆形、1个后风景的圆形和左右两边的扇形。在绘制前需要计算前风景和后风景绘制的半径,中点都为Tab视图的中心。这里需要实现onBoundsChange(Rect bounds)方法,在这里可以获得到Tab菜单项的尺寸信息,这里的mDivideSpace是前风景圆形的半径,也就是前景和后景的分割距离,而后风景圆形半径为Tab项宽度的1半。最后就剩下左右两边需要填充Tab边角的扇形半径mFullSpace了,距离就是中心到Tab边角点的距离了。

固然了,要实现动画效果肯定不止这些,还有1个重要的ValueAnimator,通过它来控制波纹的分散半径,用法还是很简单的,用过属性动画的应当都不陌生。这里面需要注意的是里面调用了1个方法invalidateSelf() ,Drawable是通过这个方法来进行重绘的,它会重新调用draw()方法来实现波纹效果。
2. 实现扩大的FragmentTabHost

要实现扩大的FragmentTabHost需要继承它并实现1个重要的方法setCurrentTab(int index),当FragmentTabHost在选择Tab菜单时会调用该方法,在这方法里我们可以得到当前选中的项和之前选中的项,并做动画处理。

在实现FragmentTabHost之前,我们的Tab菜单布局生成也通过这里实现,并提供方法让外面调用,首先是菜单布局:

<?xml version="1.0" encoding="utf⑻"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="@dimen/tab_height" android:minWidth="@dimen/tab_min_width" android:paddingTop="@dimen/tab_padding_top_inactive" android:paddingBottom="@dimen/tab_padding_bottom" android:background="?selectableItemBackgroundBorderless"> <ImageView android:id="@+id/tab_icon" android:layout_width="@dimen/tab_icon" android:layout_height="@dimen/tab_icon" android:layout_gravity="center_horizontal"/> <TextView android:id="@+id/tab_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:lines="1" android:text="首页" android:textColor="@color/colorInactive" android:textSize="@dimen/tab_text_size_inactive"/> </LinearLayout>
这个很简单,就是图标和标题,和正常使用没区分。然后是Tab菜单类:

/** * Created by long on 2016/4/15. * Tab项 */ public class TabItem { private String title; private int imageRes; public TabItem(String title, int imageRes) { this.title = title; this.imageRes = imageRes; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public int getImageRes() { return imageRes; } public void setImageRes(int imageRes) { this.imageRes = imageRes; } }
一样很简单,和布局文件对应1个图标和1个标题。

最后看下扩大FragmentTabHost的实现:

/** * Created by long on 2016/4/15. * 扩大TabHost */ public class XFragmentTabHost extends FragmentTabHost { private Context mContext; private List<View> mTabViews; private List<TabItem> mTabItems; // 字体激活色彩 private int mTextActiveColor; private int mTextInactiveColor; // 字体激活大小 private float mTextActiveSize; private float mTextInactiveSize; // 视图激活对顶部的偏移 private int mViewActivePaddingTop; private int mViewInactivePaddingTop; // 波纹模式的前景色彩和后景色彩 private int mFrontColor; private int mBehindColor; // TabHost模式 private TabMode mTabMode; public XFragmentTabHost(Context context) { super(context); _init(context); } public XFragmentTabHost(Context context, AttributeSet attrs) { super(context, attrs); _init(context); } private void _init(Context context) { mTabViews = new ArrayList<>(); mTabItems = new ArrayList<>(); mContext = context; mTextActiveColor = ContextCompat.getColor(mContext, R.color.colorActive); mTextInactiveColor = ContextCompat.getColor(mContext, R.color.colorInactive); mFrontColor = ContextCompat.getColor(mContext, R.color.colorFront); mBehindColor = ContextCompat.getColor(mContext, R.color.colorBehind); mTextActiveSize = getResources().getDimension(R.dimen.tab_text_size_active); mTextInactiveSize = getResources().getDimension(R.dimen.tab_text_size_inactive); mViewActivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_active); mViewInactivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_inactive); mTabMode = TabMode.MoveToTop; } /** * 覆写父类接口,并在这里做些动画殊效 * @param index 当前选中的Tab项 */ @Override public void setCurrentTab(int index) { // 获得之前选中的index int lastIndex = getCurrentTab(); super.setCurrentTab(index); // 选中不同的Tab项才做切换处理 if (lastIndex != index) { _switchTab(lastIndex, index); } } /** * 添加TabItem * @param item TabItem * @param fragClass fragment类名 * @param bundle 传给fragment的参数 */ public void addTabItem(TabItem item, Class<?> fragClass, Bundle bundle) { mTabItems.add(item); View view = _getIndicator(item); mTabViews.add(view); this.addTab(newTabSpec(item.getTitle()).setIndicator(view), fragClass, bundle); } /** * 获得TabItem视图 * @param item TabItem * @return */ private View _getIndicator(TabItem item) { View view = LayoutInflater.from(mContext).inflate(R.layout.tab_indicator, null); ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon); TextView title = (TextView) view.findViewById(R.id.tab_title); imageView.setImageResource(item.getImageRes()); title.setText(item.getTitle()); title.setTextColor(mTextInactiveColor); return view; } /** * 切换Tab * @param lastIndex 上1个选中索引 * @param nextIndex 下1个选中索引 */ private void _switchTab(int lastIndex, int nextIndex) { for (int i = 0; i < mTabViews.size(); i++) { if (i == lastIndex) { _doRipple(i, false); } else if (i == nextIndex) { _doRipple(i, true); } } } /** * 波纹处理 * @param index 索引 * @param isActivated 是不是激活 */ private void _doRipple(int index, boolean isActivated) { View view = mTabViews.get(index); View tabView = view.findViewById(R.id.tab_layout); TextView title = (TextView) view.findViewById(R.id.tab_title); if (index == 0) { _rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_LEFT, isActivated); } else if (index == (mTabViews.size() - 1)){ _rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_RIGHT, isActivated); } else { _rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_MIDDLE, isActivated); } if (isActivated) { title.setTextColor(mTextActiveColor); } else { title.setTextColor(mTextInactiveColor); } } /** * 波纹动画 * @param view * @param frontColor * @param behindColor * @param mode * @param isActivated */ @SuppressWarnings("deprecation") private void _rippleDrawable(final View view, int frontColor, int behindColor, int mode, boolean isActivated) { if (isActivated) { RippleDrawable rippleDrawable = new RippleDrawable(frontColor, behindColor, mode); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { view.setBackground(rippleDrawable); } else { view.setBackgroundDrawable(rippleDrawable); } } else { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { view.setBackground(null); } else { view.setBackgroundDrawable(null); } } } /** * 属性设置 * @return */ public int getTextActiveColor() { return mTextActiveColor; } public void setTextActiveColor(int textActiveColor) { mTextActiveColor = textActiveColor; } public int getTextInactiveColor() { return mTextInactiveColor; } public void setTextInactiveColor(int textInactiveColor) { mTextInactiveColor = textInactiveColor; } public int getFrontColor() { return mFrontColor; } public void setFrontColor(int frontColor) { mFrontColor = frontColor; } public int getBehindColor() { return mBehindColor; } public void setBehindColor(int behindColor) { mBehindColor = behindColor; } }
其实也不会复杂,就是在切换Tab菜单时,对选中菜单设置背景为RippleDrawable,对之前的菜单背景设置为空,就这么简单^ ^,使用的话大体和FragmentHost是基本1样的,就添加Tab菜单使用上面实现的方法addTabItem(TabItem item, Class<?> fragClass, Bundle bundle) 就好了,具体下载源代码查看。

这个TabHost实现还是不复杂,处理波纹效果外,源代码里还有1些其它动画效果,实现思路都1样,有兴趣也能够自己定制些更好看的动画效果~

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐