模仿最新微信主页面UI

    看到微信和易信的最新界面，一定都觉得用着很爽很方便， 所以就想做一个像微信和易信上的滑动导航的UI，部分代码参考网上的例子，由于下载很久了，也不知道用的是谁的，所以这里就不在特别说明。

    废话不多说，直接上代码，代码主要部分已注释比较清楚，故不另作说明：

主界面：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fcfcfc"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#ff303537"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/title_ll"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_marginLeft="14dp"
                android:layout_marginRight="2dp"
                android:background="@drawable/home_logo" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:text="微信"
            android:textColor="#ffffffff"
            android:textSize="18dp" />
    </LinearLayout>
    
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/background_top" />

        <LinearLayout
            android:id="@+id/tab_bar"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_liaotian"
                android:clickable="true"
                style="@style/TabItem"
                android:text="@string/chat"
                android:textColor="@color/text_color_selector" />

            <TextView
                android:id="@+id/tv_faxian"
                 android:clickable="true"
                style="@style/TabItem"
                android:text="@string/find"
                android:textColor="@color/text_color_selector" />

            <TextView
                android:id="@+id/tv_tongxunlu"
                android:clickable="true"
                style="@style/TabItem"
                android:text="@string/contact"
                android:textColor="@color/text_color_selector" />
        </LinearLayout>
    </RelativeLayout>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#D6D6D6" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:layout_weight="1">
        
    </android.support.v4.view.ViewPager>

</LinearLayout>

主要代码部分：

package com.example.viewpage_demo;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.Toast;

public class ViewPageDemoActivity extends FragmentActivity implements
		OnClickListener {

	private ViewPager pager;
	private ImageView mImageView;
	private int mScreenWidth; // 获取屏幕宽度
	private int item_width; // 下划线宽度

	private int endPosition;
	private int beginPosition;
	private int currentFragmentIndex;
	private boolean isEnd;

	private TextView liaotian, faxian, tongxunlu;

	private ArrayList<Fragment> fragments;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_view_page_demo);

		// 初始化view
		initView();

		// 初始化viewPager
		initViewPager();
	}

	public void initView() {
		/**
		 * 给顶部工具栏绑定监听器
		 */

		liaotian = (TextView) findViewById(R.id.tv_liaotian);
		faxian = (TextView) findViewById(R.id.tv_faxian);
		tongxunlu = (TextView) findViewById(R.id.tv_tongxunlu);

		liaotian.setOnClickListener(this);
		faxian.setOnClickListener(this);
		tongxunlu.setOnClickListener(this);

		/**
		 * 修改顶部蓝色ImageView的宽度
		 */
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		mScreenWidth = dm.widthPixels;
		mImageView = (ImageView) findViewById(R.id.top_image);
		item_width = (int) ((mScreenWidth / 3.0 + 0.5f));

		LayoutParams params = (LayoutParams) mImageView.getLayoutParams();
		params.width = item_width;
		mImageView.setLayoutParams(params);

		pager = (ViewPager) findViewById(R.id.pager);
	}

	//初始化Viewpager
	private void initViewPager() {
		fragments = new ArrayList<Fragment>();

		BaseFragment fragment = new BaseFragment();
		fragments.add(fragment);

		BaseFragment1 fm = new BaseFragment1();
		fragments.add(fm);

		BaseFragment2 fragment2 = new BaseFragment2();
		fragments.add(fragment2);

		MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(
				getSupportFragmentManager(), fragments);
		pager.setAdapter(fragmentPagerAdapter);
		fragmentPagerAdapter.setFragments(fragments);
		pager.setOnPageChangeListener(new MyOnPageChangeListener());
		pager.setCurrentItem(0);
		liaotian.setEnabled(false);
	}

	//响应TextView点击事件
	@Override
	public void onClick(View v) {

		switch (v.getId()) {
		case R.id.tv_liaotian:
			// 会触发OnPageChangeListener的onPageSelected(index)
			pager.setCurrentItem(0);
			break;

		case R.id.tv_faxian:
			// 会触发OnPageChangeListener的onPageSelected(index)
			pager.setCurrentItem(1);
			break;

		case R.id.tv_tongxunlu:
			// 会触发OnPageChangeListener的onPageSelected(index)
			pager.setCurrentItem(2);
			break;

		default:
			break;
		}
	}

	//配置FragmentPagerAdapter
	private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
		private ArrayList<Fragment> fragments;
		private FragmentManager fm;

		public MyFragmentPagerAdapter(FragmentManager fm) {
			super(fm);
			this.fm = fm;
		}

		public MyFragmentPagerAdapter(FragmentManager fm,
				ArrayList<Fragment> fragments) {
			super(fm);
			this.fm = fm;
			this.fragments = fragments;
		}

		@Override
		public int getCount() {
			return fragments.size();
		}

		@Override
		public Fragment getItem(int position) {
			return fragments.get(position);
		}

		@Override
		public int getItemPosition(Object object) {
			return POSITION_NONE;
		}

		public void setFragments(ArrayList<Fragment> fragments) {
			if (this.fragments != null) {
				FragmentTransaction ft = fm.beginTransaction();
				for (Fragment f : this.fragments) {
					ft.remove(f);
				}
				ft.commit();
				ft = null;
				fm.executePendingTransactions();
			}
			this.fragments = fragments;
			notifyDataSetChanged();
		}

		@Override
		public Object instantiateItem(ViewGroup container, final int position) {
			Object obj = super.instantiateItem(container, position);
			return obj;
		}

	}

	//配置滑动事件
	public class MyOnPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageSelected(final int position) {
			Animation animation = new TranslateAnimation(endPosition, position
					* item_width, 0, 0);

			beginPosition = position * item_width;

			currentFragmentIndex = position;
			if (animation != null) {
				animation.setFillAfter(true); // 设置为true，动画就会停留在最后的地方
				animation.setDuration(100); // 设置持续时间
				mImageView.startAnimation(animation);
			}

			Toast.makeText(getApplicationContext(), "selected" + position,
					Toast.LENGTH_LONG).show();
			switch (position) {
			case 0:
				liaotian.setEnabled(false);
				faxian.setEnabled(true);
				tongxunlu.setEnabled(true);
				break;
			case 1:
				liaotian.setEnabled(true);
				faxian.setEnabled(false);
				tongxunlu.setEnabled(true);
				break;
			case 2:
				liaotian.setEnabled(true);
				faxian.setEnabled(true);
				tongxunlu.setEnabled(false);
				break;

			default:
				break;
			}

		}

		// 表示在前一个页面滑动到后一个页面的时候，在前一个页面滑动前调用的方法
		// position :当前页面，及你点击滑动的页面
		// positionOffset:当前页面偏移的百分比
		// positionOffsetPixels:当前页面偏移的像素位置
		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			if (!isEnd) {
				if (currentFragmentIndex == position) {
					endPosition = item_width * currentFragmentIndex
							+ (int) (item_width * positionOffset);
				}
				if (currentFragmentIndex == position + 1) {
					endPosition = item_width * currentFragmentIndex
							- (int) (item_width * (1 - positionOffset));
				}

				Animation mAnimation = new TranslateAnimation(beginPosition,
						endPosition, 0, 0);
				mAnimation.setFillAfter(true);
				mAnimation.setDuration(100);
				mImageView.startAnimation(mAnimation);
				beginPosition = endPosition;
			}
		}

		// state ==1的时候表示正在滑动，state==2的时候表示滑动完毕了，state==0的时候表示什么都没做，就是停在那
		@Override
		public void onPageScrollStateChanged(int state) {
			if (state == ViewPager.SCROLL_STATE_DRAGGING) {
				isEnd = false;
			} else if (state == ViewPager.SCROLL_STATE_SETTLING) {
				isEnd = true;
				beginPosition = currentFragmentIndex * item_width;
				if (pager.getCurrentItem() == currentFragmentIndex) {
					// 未跳入下一个页面
					mImageView.clearAnimation();
					Animation animation = null;
					// 恢复位置
					animation = new TranslateAnimation(endPosition,
							currentFragmentIndex * item_width, 0, 0);
					animation.setFillAfter(true);
					animation.setDuration(100);
					mImageView.startAnimation(animation);
					endPosition = currentFragmentIndex * item_width;
				}

			}
		}

	}

}

其中的BaseFragment:

package com.example.viewpage_demo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class BaseFragment extends Fragment {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		super.onCreateView(inflater, container, savedInstanceState);
		View view =inflater.inflate(R.layout.layout, null); 
		TextView tv_fragment = (TextView) view.findViewById(R.id.tv_fragment);
		tv_fragment.setText("xiaoxi");
		return view;
	}
}

界面布局就一个TextView 自己写吧。

由于这里用的三个Fragment都是样例，都如上，这里就不全部贴出来了。

其中部分属性这里就不一一说明，源代码地址下载：

http://download.csdn.net/detail/xiaorenwu1206/7762213

现还属于实习生，如有部分不妥，欢迎拍砖指教。

我一直认为不贴图的博客不是好博客，所以上图吧：