这篇文章主要介绍了 Android 实现微信首页左右滑动切换效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部 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 就比较简单了,可以参考源码,最后运行效果,就是上面的贴图了,到此防微信的滑动切换就完成了,源码请访问以下链接:
源码下载:{aa0aa}
来源: http://www.phperz.com/article/17/0319/295236.html