今天在公司閒著沒事做，就寫了個頂部選單欄帶滑動圖片，類似手機通訊錄的頂部選單欄效果，主要使用的方式是Fragment+ViewPager.

注：android3.0之後google已經不推薦使用tableActivity,不過聽說QQ一直使用的是table來對底部選單欄進行佈局的,個人的看法而已，只要效果實現了就可以了，至於哪種做法看你自己喜好.  不廢話上效果圖和程式碼了，效果圖和下載地址在最下面.先貼上主要的程式碼，也是顯示介面的類,裡面有足夠詳細的註釋，如果有疑問的可以留言        

<img src="https://img-blog.csdn.net/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就設定不同的距離，這樣就可以實現底部滑動條的滑動效果了