仿微信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);
		
	}
	@Override
	protected 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);
		
	}
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.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;
	@Override
	protected 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;
		}
		@Override
		public void onClick(View v) {
			onClick=true;
			list.get(viewPager.getCurrentItem()).setAlpha(0);
			viewPager.setCurrentItem(position);
			list.get(viewPager.getCurrentItem()).setAlpha(1);
		}
		
	}
	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub
	}
	@Override
	public 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;
		}
	}
	@Override
	public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		
	}
	
}

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