仿微信6.0底部菜单选择和滑动效果

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">第一次写博客。。作为一个新手来说通过写博客来记录自己的学习历程和问题总结是一件非常有意义的事情。。</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">多的不说先看效果</span>

为了方便。。我是随便找了几张图片。。并没有对微信进行反编译获取其中的图片，各位将就这看看吧。多的不说先看代码

首先布局分析：

滑动切换fragment显而易见使用的是ViewPager..至于下面的菜单栏我并没有使用传统的TabHost而是自定义控件。。。大家可以看出下面

滑动过程中颜色是渐变的。。

自定义控件代码：

public class MyTabExchangeView extends View{private int iconColor=0xff45c01a;private int textColor=0xff45c01a;private float textSize=14f;private String textString="首页";private Bitmap mBitmap;private Paint mPaint;private int rectWidth;private int rectHeight;private int iconWidth;private Rect iconRect;private Paint mTextPaint;private Rect mTextRect=new Rect();private float mAlpha=0f;private Bitmap iconBitmap;public MyTabExchangeView(Context context, AttributeSet attrs) {super(context, attrs);TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.MyTabExchangeView);for (int i = 0; i < array.getIndexCount(); i++) {int type=array.getIndex(i);switch (type) {case R.styleable.MyTabExchangeView_iconColor:iconColor=array.getColor(type, 0xff45c01a);break;case R.styleable.MyTabExchangeView_iconDrawable:Drawable iconBitmapDrawable = array.getDrawable(type);iconBitmap=((BitmapDrawable)iconBitmapDrawable).getBitmap();break;case R.styleable.MyTabExchangeView_textColor:textColor=array.getColor(type, 0xff45c01a);break;case R.styleable.MyTabExchangeView_textSize:textSize=array.getDimension(type, 10);break;case R.styleable.MyTabExchangeView_textString:textString =array.getString(type);break;default:break;}}array.recycle();int textLength=textString.length();mTextPaint=new Paint();mTextPaint.setColor(textColor);mTextPaint.setTextSize(textSize);mTextPaint.getTextBounds(textString, 0, textLength, mTextRect);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//清空画板canvas.drawBitmap(iconBitmap, null, iconRect, null);int alpha=(int) Math.ceil(mAlpha*255);onDrawMyCanvas(alpha);drawSrcText(canvas,alpha);drawDstText(canvas,alpha);canvas.drawBitmap(mBitmap, 0, 0, null);}private void drawDstText(Canvas canvas, int alpha) {mTextPaint.setColor(textColor);mTextPaint.setAlpha(alpha);mTextPaint.setTextSize(textSize);canvas.drawText(textString,iconRect.left+iconRect.width()/2-mTextRect.width()/2,iconRect.bottom+mTextRect.height(), mTextPaint);}private void drawSrcText(Canvas canvas, int alpha) {mTextPaint.setColor(Color.BLACK);mTextPaint.setAlpha(255-alpha);mTextPaint.setTextSize(textSize);canvas.drawText(textString,iconRect.left+iconRect.width()/2-mTextRect.width()/2,iconRect.bottom+mTextRect.height(), mTextPaint);}private void onDrawMyCanvas(int alpha) {mBitmap=Bitmap.createBitmap(rectWidth, rectHeight, Config.ARGB_8888);Canvas mCanvas=new Canvas(mBitmap);mPaint=new Paint();mPaint.setAntiAlias(true);mPaint.setDither(true);mPaint.setColor(iconColor);mPaint.setAlpha(alpha);mCanvas.drawRect(iconRect, mPaint);mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));mCanvas.drawBitmap(iconBitmap, null, iconRect, mPaint);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.onMeasure(widthMeasureSpec, heightMeasureSpec);rectWidth=getMeasuredWidth();rectHeight=getMeasuredHeight();iconWidth=Math.min(rectWidth-getPaddingLeft()-getPaddingRight(),rectHeight-getPaddingTop()-getPaddingBottom()-mTextRect.height());int left=(rectWidth-iconWidth)/2;int top=(rectHeight-mTextRect.height()-iconWidth)/2;iconRect=new Rect(left, top, left+iconWidth, top+iconWidth);}public void setAlpha(float alpha){this.mAlpha=alpha;if (Looper.getMainLooper()!=Looper.myLooper()) {postInvalidate();}else {invalidate();}}}

布局xml使用：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:ww="http://schemas.android.com/apk/res/com.ww.mybottomtitle"    android:layout_width="match_parent"    android:layout_height="match_parent"     >    <android.support.v4.view.ViewPager        android:id="@+id/fragment_pager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_above="@+id/bottom_title"    />    <LinearLayout        android:id="@+id/bottom_title"         android:layout_width="fill_parent"        android:layout_height="48dp"        android:layout_alignParentBottom="true"        android:orientation="horizontal"        android:background="#F0F0F0"        >        <com.ww.mybottomtitle.MyTabExchangeView            android:id="@+id/index"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            ww:textString="首页"            android:paddingTop="5dp"            android:paddingBottom="5dp"            ww:iconDrawable="@drawable/icon_home"            ww:textSize="10sp"            />        <com.ww.mybottomtitle.MyTabExchangeView            android:id="@+id/news"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:paddingTop="5dp"            android:paddingBottom="5dp"            ww:textString="咨询"            ww:iconDrawable="@drawable/icon_dingyue"            ww:textSize="10sp"            />        <com.ww.mybottomtitle.MyTabExchangeView            android:id="@+id/happy"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:paddingTop="5dp"            android:paddingBottom="5dp"            ww:textString="娱乐"            ww:iconDrawable="@drawable/icon_list"            ww:textSize="10sp"            />        <com.ww.mybottomtitle.MyTabExchangeView            android:id="@+id/myself"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:paddingTop="5dp"            android:paddingBottom="5dp"            ww:textString="我"            ww:iconDrawable="@drawable/icon_health_data"            ww:textSize="10sp"            />                </LinearLayout></RelativeLayout><strong></strong>

主界面逻辑控制代码：

public class MainActivity extends FragmentActivity implements OnPageChangeListener{private ViewPager viewPager;private String[] menu_text={"首页","咨询","娱乐","个人"};private ArrayList<MyTabExchangeView> list=new ArrayList<MyTabExchangeView>();private MyViewPagerAdapter adapter;private MyTabExchangeView index,news,happy,myself;private boolean onClick=false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView(){index=(MyTabExchangeView) findViewById(R.id.index);news=(MyTabExchangeView) findViewById(R.id.news);happy=(MyTabExchangeView) findViewById(R.id.happy);myself=(MyTabExchangeView) findViewById(R.id.myself);list.add(index);list.add(news);list.add(happy);list.add(myself);index.setOnClickListener(new onTitleButtonClickListener(0));news.setOnClickListener(new onTitleButtonClickListener(1));happy.setOnClickListener(new onTitleButtonClickListener(2));myself.setOnClickListener(new onTitleButtonClickListener(3));viewPager=(ViewPager) findViewById(R.id.fragment_pager);adapter=new MyViewPagerAdapter(getSupportFragmentManager(),menu_text);viewPager.setAdapter(adapter);viewPager.setOnPageChangeListener(this);viewPager.setOffscreenPageLimit(3);viewPager.setCurrentItem(0);index.setAlpha(1);}class onTitleButtonClickListener implements OnClickListener{private int position;public onTitleButtonClickListener(int position) {this.position=position;}@Overridepublic void onClick(View v) {onClick=true;list.get(viewPager.getCurrentItem()).setAlpha(0);viewPager.setCurrentItem(position);list.get(viewPager.getCurrentItem()).setAlpha(1);}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {if (arg1>0&&!onClick) {MyTabExchangeView left = list.get(arg0);MyTabExchangeView right = list.get(arg0+1);left.setAlpha(1-arg1);right.setAlpha(arg1);}else {onClick=false;}}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}}

至此代码差不多就到此结束了。。代码注释有些少。。以后再度添加。。