android顶部菜单栏+滑动图片

    今天在公司闲着没事做，就写了个顶部菜单栏带滑动图片，类似手机通讯录的顶部菜单栏效果，主要使用的方式是Fragment+ViewPager.

注：android3.0之后google已经不推荐使用tableActivity,不过听说QQ一直使用的是table来对底部菜单栏进行布局的,个人的看法而已，只要效果实现了就可以了，至于哪种做法看你自己喜好.  不废话上效果图和代码了，效果图和下载地址在最下面.先贴上主要的代码，也是显示界面的类,里面有足够详细的注释，如果有疑问的可以留言        

<img src="https://img-blog.youkuaiyun.com/20150104183055350?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluZ2ZlbmcyYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</pre><pre code_snippet_id="571363" snippet_file_name="blog_20150104_4_2315938" name="code" class="java">

public class Main extends BaseFragmentActivity {
	private ViewPager mPager;// 页卡内容
	private View cursor;// 动画图片
	private int bmpW;// 动画图片宽度，屏幕自适应
	private int offset = 0;// 滑动移动偏移量
	private int currIndex = 0;// 当前页卡编号
	private TextView txtConference, txtRelationship, txtArchive, txtNeed;
	List<Fragment> list;
	FrgPagerAdapter adapter;

	@Override
	protected void onCreate(Bundle arg0) {
		// TODO Auto-generated method stub
		super.onCreate(arg0);
		setContentView(R.layout.main);
		list = new ArrayList<Fragment>();
		initView();
		initViewPager();
		initLine();
	}

	private void initLine() {
		// TODO Auto-generated method stub
		cursor = findViewById(R.id.myConfCursor);
		bmpW = getWindowManager().getDefaultDisplay().getWidth() / 4;
		Logs.i("bmpW:" + bmpW);
		RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) cursor
				.getLayoutParams();
		layoutParams.width = bmpW;//将底部动画条设置成自适应屏幕宽度
		
	}

	private void initViewPager() {
		// TODO Auto-generated method stub
		mPager = (ViewPager) findViewById(R.id.vpager);
		One one = new One();
		Two two = new Two();
		Three three = new Three();
		Four four = new Four();
		list.add(one);
		list.add(two);
		list.add(three);
		list.add(four);
		adapter = new FrgPagerAdapter(getSupportFragmentManager(), list);
		mPager.setAdapter(adapter);
		mPager.setCurrentItem(0);// 默认选中第一个
		mPager.setOnPageChangeListener(new MyPagerListener());

	}

	private void initView() {
		// TODO Auto-generated method stub
		txtConference = (TextView) findViewById(R.id.txtAllConferenceList);
		txtRelationship = (TextView) findViewById(R.id.txtAllRelationship);
		txtArchive = (TextView) findViewById(R.id.txtAllArchList);
		txtNeed = (TextView) findViewById(R.id.txtAllNeed);
		txtConference.setOnClickListener(new MyOnClickListener(0));
		txtRelationship.setOnClickListener(new MyOnClickListener(1));
		txtArchive.setOnClickListener(new MyOnClickListener(2));
		txtNeed.setOnClickListener(new MyOnClickListener(3));

	}

	class MyOnClickListener implements OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			// TODO Auto-generated constructor stub
			index = i;
		}
   
		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			mPager.setCurrentItem(index);
		}
	}

	class MyPagerListener implements OnPageChangeListener {
		
		@Override
		public void onPageSelected(int position) {
			TranslateAnimation animation = null;
			int blackColor = getResources().getColor(R.color.black);
			int sectorColor = getResources().getColor(R.color.orange);
			int one = offset * 2 + bmpW;
			int two = one * 2;
			int three = one * 3;
			// 先把所有的菜单栏文本默认黑色字体，选中哪个时就置为黄色
			txtConference.setTextColor(blackColor);
			txtRelationship.setTextColor(blackColor);
			txtArchive.setTextColor(blackColor);
			txtNeed.setTextColor(blackColor);
			Logs.i("one:" + one);
			Logs.i("position:" + position);
			Logs.i("currIndex:" + currIndex);
			switch (position) {
			case 0:
				txtConference.setTextColor(sectorColor);
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, 0, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, 0, 0, 0);
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, 0, 0, 0);
				}
				break;
			case 1:

				txtRelationship.setTextColor(sectorColor);
				if (currIndex == 0) {
					animation = new TranslateAnimation(offset, one, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, one, 0, 0);
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, one, 0, 0);
				}
				break;
			case 2:
				txtArchive.setTextColor(sectorColor);
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, two, 0, 0);
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, two, 0, 0);
				} else if (currIndex == 0) {
					animation = new TranslateAnimation(offset, two, 0, 0);
				}
				break;
			case 3:
				txtNeed.setTextColor(sectorColor);
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, three, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, three, 0, 0);
				} else if (currIndex == 0) {
					animation = new TranslateAnimation(offset, three, 0, 0);
				}
				break;
			}
			currIndex = position;
			mPager.setCurrentItem(currIndex);// 根据下标设置当前页
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(100);// 设置滚动时间
			cursor.startAnimation(animation);
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
		}

	}
}

          fragment+viewpager这2个我想大多数童鞋都应该掌握了，不过下面的这个动画滑动效果有点麻烦，基本思想就是根据viewpager滑动时的下标值，给出一个平移距离，不同的position就设置不同的距离，这样就可以实现底部滑动条的滑动效果了

        

                   下载地址见此处：http://pan.baidu.com/s/1qW9I6lQ