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

/**

*

添加tab view到当前容器

*/

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就比较简单了，可以参考源码，最后运行效果，就是上面的贴图了，到此防微信的滑动切换就完成了，源码请访问以下链接：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。