Android之实现百度云主界面框架

2013-11-22 20:14 873人阅读 评论(11) 收藏 举报

源码奉上：http://download.csdn.net/detail/weidi1989/6595979

新版的Android版百度云界面效果非常炫，给人焕然一新的感觉，如下图所示。

其实仔细研究，会发现也并不是那么复杂：

1.整个界面主容器是一个ViewPager,只是在左下角有一个切换的Button。

2.ViewPager有两个界面，由Fragment实现，并且加入了ViewPager切换动画。

3.ViewPager的两个Fragment都是Tab风格，点击底部Tab又会呈现不同的子Fragment。

其实，就是Fragment用得比较灵活，效果优化得比较好。

下面是本人模仿过的效果：

基本的效果是差不多的，只是那个“传输列表”的Fragment没有再加3个子Fragment了，但是原理是一样的，我这里就步赘述了。

下面来看看代码分析：

1.整个例子只有一个Activity，即MainActivity，注释算是比较多的了，有兴趣的可以看看：

[java] view plain copy print ?

1. /**
2. * 仿百度云主界面框架
3. *
4. * 注意继承自FragmentActivity，才会有getSupportFragmentManager()函数
5. *
6. * @author way
7. *
8. */ 
9. public class MainActivity extends FragmentActivity implements 
10.         OnPageChangeListener { 
11.     private static final int NUM_PAGES = 2;// 总页数，2个Fragment 
12.     public static final int PAGE_PERSONAL = 0;// 第一个界面ID 
13.     public static final int PAGE_FILE_SYSTEM = 1;// 第二个界面ID 
14.     private static final int ROTATE_ANIM_DURATION = 300;// 左下角切换动画的时间 
15.  
16.     private int mCurPage = 0;// 当前页 
17.     private ViewPager mViewPager;// 父容器由一个ViewPager实现 
18.     private PagerAdapter mPagerAdapter;// ViewPager适配器 
19.     private ImageButton mSwitchImageButton;// 左下角切换Paper按钮 
20.     private ImageView mAnimView;// 动画View 
21.     private Animation mRotateRightAnim;// 向右旋转动画 
22.     private Animation mRotateLeftAnim;// 向左旋转动画 
23.  
24.     @Override 
25.     protected void onCreate(Bundle savedInstanceState) { 
26.         super.onCreate(savedInstanceState); 
27.         setContentView(R.layout.activity_main); 
28.         initView(); 
29.         initAnim(); 
30.     } 
31.  
32.     /**
33.      * 初始化Views
34.      */ 
35.     private void initView() { 
36.         mAnimView = (ImageView) findViewById(R.id.anim_icon); 
37.         mSwitchImageButton = (ImageButton) findViewById(R.id.switch_btn); 
38.  
39.         mViewPager = (ViewPager) findViewById(R.id.vp_pager); 
40.         mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager()); 
41.         mViewPager.setAdapter(mPagerAdapter); 
42.         mCurPage = PAGE_FILE_SYSTEM; 
43.         mViewPager.setCurrentItem(mCurPage); 
44.         mViewPager.setOnPageChangeListener(this); 
45.         mViewPager.setPageTransformer(true, new DepthPageTransformer()); 
46.     } 
47.  
48.     /**
49.      * 初始化动画
50.      */ 
51.     private void initAnim() { 
52.         mRotateRightAnim = new RotateAnimation(0.0f, 180.0f, 
53.                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 
54.                 0.5f); 
55.         mRotateRightAnim.setDuration(ROTATE_ANIM_DURATION); 
56.         mRotateRightAnim.setFillAfter(true); 
57.         mRotateLeftAnim = new RotateAnimation(180.0f, 0.0f, 
58.                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 
59.                 0.5f); 
60.         mRotateLeftAnim.setDuration(ROTATE_ANIM_DURATION); 
61.         mRotateLeftAnim.setFillAfter(true); 
62.         mRotateRightAnim.setAnimationListener(new AnimationListener() { 
63.  
64.             @Override 
65.             public void onAnimationStart(Animation animation) { 
66.             } 
67.  
68.             @Override 
69.             public void onAnimationRepeat(Animation animation) { 
70.             } 
71.  
72.             @Override 
73.             public void onAnimationEnd(Animation animation) { 
74.                 mAnimView.clearAnimation(); 
75.                 mAnimView.setVisibility(View.GONE); 
76.                 mSwitchImageButton.setVisibility(View.VISIBLE); 
77.                 mSwitchImageButton 
78.                         .setImageResource(R.drawable.ic_viewpager_switch_feedlist); 
79.             } 
80.         }); 
81.         mRotateLeftAnim.setAnimationListener(new AnimationListener() { 
82.  
83.             @Override 
84.             public void onAnimationStart(Animation animation) { 
85.             } 
86.  
87.             @Override 
88.             public void onAnimationRepeat(Animation animation) { 
89.             } 
90.  
91.             @Override 
92.             public void onAnimationEnd(Animation animation) { 
93.                 mAnimView.clearAnimation(); 
94.                 mAnimView.setVisibility(View.GONE); 
95.                 mSwitchImageButton.setVisibility(View.VISIBLE); 
96.                 mSwitchImageButton 
97.                         .setImageResource(R.drawable.ic_viewpager_switch_filesystem); 
98.             } 
99.         }); 
100.     } 
101.  
102.     /**
103.      * 点击左下角切换按钮的事件处理
104.      *
105.      * 需要事先在布局中声明 android:onClick="switchPage"
106.      *
107.      * @param view
108.      */ 
109.     public void switchPage(View view) { 
110.         if (mCurPage == PAGE_FILE_SYSTEM) { 
111.             mViewPager.setCurrentItem(PAGE_PERSONAL); 
112.         } else if (mCurPage == PAGE_PERSONAL) { 
113.             mViewPager.setCurrentItem(PAGE_FILE_SYSTEM); 
114.         } 
115.     } 
116.  
117.     /**
118.      * 开始动画
119.      *
120.      * @param pager
121.      *            当前页
122.      */ 
123.     private void startAmin(int pager) { 
124.         if (pager == PAGE_FILE_SYSTEM) { 
125.             mSwitchImageButton.setVisibility(View.INVISIBLE); 
126.             mAnimView.setVisibility(View.VISIBLE); 
127.             mAnimView.startAnimation(mRotateLeftAnim); 
128.         } else if (pager == PAGE_PERSONAL) { 
129.             mSwitchImageButton.setVisibility(View.INVISIBLE); 
130.             mAnimView.setVisibility(View.VISIBLE); 
131.             mAnimView.startAnimation(mRotateRightAnim); 
132.         } 
133.         mCurPage = pager; 
134.     } 
135.  
136.     /**
137.      * ViewPager的适配器，我这里只是一个例子，就作为内部类了。
138.      *
139.      * @author way
140.      *
141.      */ 
142.     private class ScreenSlidePagerAdapter extends FragmentPagerAdapter { 
143.  
144.         public ScreenSlidePagerAdapter(FragmentManager fm) { 
145.             super(fm); 
146.         } 
147.  
148.         /**
149.          * 这里可以将Fragment缓存一下，减少加载次数，提高用户体验，我未作处理
150.          */ 
151.         @Override 
152.         public Fragment getItem(int position) { 
153.             switch (position) { 
154.             case PAGE_PERSONAL: 
155.                 return new MainPersonalFragment(); 
156.             case PAGE_FILE_SYSTEM: 
157.                 return new MainFileSystemFragment(); 
158.             default: 
159.                 return null; 
160.             } 
161.         } 
162.  
163.         @Override 
164.         public int getCount() { 
165.             return NUM_PAGES; 
166.         } 
167.  
168.     } 
169.  
170.     @Override 
171.     public void onPageScrollStateChanged(int arg0) { 
172.     } 
173.  
174.     @Override 
175.     public void onPageScrolled(int arg0, float arg1, int arg2) { 
176.     } 
177.  
178.     @Override 
179.     public void onPageSelected(int arg0) { 
180.         startAmin(arg0);//手势滑动ViewPager时，也要播放一下动画 
181.     } 
182. } 

/**
 * 仿百度云主界面框架
 * 
 * 注意继承自FragmentActivity，才会有getSupportFragmentManager()函数
 * 
 * @author way
 * 
 */
public class MainActivity extends FragmentActivity implements
		OnPageChangeListener {
	private static final int NUM_PAGES = 2;// 总页数，2个Fragment
	public static final int PAGE_PERSONAL = 0;// 第一个界面ID
	public static final int PAGE_FILE_SYSTEM = 1;// 第二个界面ID
	private static final int ROTATE_ANIM_DURATION = 300;// 左下角切换动画的时间

	private int mCurPage = 0;// 当前页
	private ViewPager mViewPager;// 父容器由一个ViewPager实现
	private PagerAdapter mPagerAdapter;// ViewPager适配器
	private ImageButton mSwitchImageButton;// 左下角切换Paper按钮
	private ImageView mAnimView;// 动画View
	private Animation mRotateRightAnim;// 向右旋转动画
	private Animation mRotateLeftAnim;// 向左旋转动画

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		initAnim();
	}

	/**
	 * 初始化Views
	 */
	private void initView() {
		mAnimView = (ImageView) findViewById(R.id.anim_icon);
		mSwitchImageButton = (ImageButton) findViewById(R.id.switch_btn);

		mViewPager = (ViewPager) findViewById(R.id.vp_pager);
		mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mPagerAdapter);
		mCurPage = PAGE_FILE_SYSTEM;
		mViewPager.setCurrentItem(mCurPage);
		mViewPager.setOnPageChangeListener(this);
		mViewPager.setPageTransformer(true, new DepthPageTransformer());
	}

	/**
	 * 初始化动画
	 */
	private void initAnim() {
		mRotateRightAnim = new RotateAnimation(0.0f, 180.0f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		mRotateRightAnim.setDuration(ROTATE_ANIM_DURATION);
		mRotateRightAnim.setFillAfter(true);
		mRotateLeftAnim = new RotateAnimation(180.0f, 0.0f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		mRotateLeftAnim.setDuration(ROTATE_ANIM_DURATION);
		mRotateLeftAnim.setFillAfter(true);
		mRotateRightAnim.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				mAnimView.clearAnimation();
				mAnimView.setVisibility(View.GONE);
				mSwitchImageButton.setVisibility(View.VISIBLE);
				mSwitchImageButton
						.setImageResource(R.drawable.ic_viewpager_switch_feedlist);
			}
		});
		mRotateLeftAnim.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				mAnimView.clearAnimation();
				mAnimView.setVisibility(View.GONE);
				mSwitchImageButton.setVisibility(View.VISIBLE);
				mSwitchImageButton
						.setImageResource(R.drawable.ic_viewpager_switch_filesystem);
			}
		});
	}

	/**
	 * 点击左下角切换按钮的事件处理
	 * 
	 * 需要事先在布局中声明 android:onClick="switchPage"
	 * 
	 * @param view
	 */
	public void switchPage(View view) {
		if (mCurPage == PAGE_FILE_SYSTEM) {
			mViewPager.setCurrentItem(PAGE_PERSONAL);
		} else if (mCurPage == PAGE_PERSONAL) {
			mViewPager.setCurrentItem(PAGE_FILE_SYSTEM);
		}
	}

	/**
	 * 开始动画
	 * 
	 * @param pager
	 *            当前页
	 */
	private void startAmin(int pager) {
		if (pager == PAGE_FILE_SYSTEM) {
			mSwitchImageButton.setVisibility(View.INVISIBLE);
			mAnimView.setVisibility(View.VISIBLE);
			mAnimView.startAnimation(mRotateLeftAnim);
		} else if (pager == PAGE_PERSONAL) {
			mSwitchImageButton.setVisibility(View.INVISIBLE);
			mAnimView.setVisibility(View.VISIBLE);
			mAnimView.startAnimation(mRotateRightAnim);
		}
		mCurPage = pager;
	}

	/**
	 * ViewPager的适配器，我这里只是一个例子，就作为内部类了。
	 * 
	 * @author way
	 * 
	 */
	private class ScreenSlidePagerAdapter extends FragmentPagerAdapter {

		public ScreenSlidePagerAdapter(FragmentManager fm) {
			super(fm);
		}

		/**
		 * 这里可以将Fragment缓存一下，减少加载次数，提高用户体验，我未作处理
		 */
		@Override
		public Fragment getItem(int position) {
			switch (position) {
			case PAGE_PERSONAL:
				return new MainPersonalFragment();
			case PAGE_FILE_SYSTEM:
				return new MainFileSystemFragment();
			default:
				return null;
			}
		}

		@Override
		public int getCount() {
			return NUM_PAGES;
		}

	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	@Override
	public void onPageSelected(int arg0) {
		startAmin(arg0);//手势滑动ViewPager时，也要播放一下动画
	}
}

接下来是ViewPager的子Fragment，由于两个Fragment的原理是差不多的，我这里就只贴出一个MainFileSystemFragment的代码了，这里的重点是点击对应Tab按钮切换Fragment，没有过多的使用缓存，待优化：

[java] view plain copy print ?

1. /**
2. * 文件系统的Fragment
3. *
4. * 由于与另一个Fragment是对称的，我就只注释此类了，敬请谅解!
5. *
6. * @author way
7. *
8. */ 
9. public class MainFileSystemFragment extends Fragment implements 
10.         OnCheckedChangeListener { 
11.     private FragmentManager mFragmentManager;// Fragment管理类 
12.     private FragmentTransaction mFragmentTransaction; 
13.     private String mCurrentFragmentTag;// 当前显示的二级Fragment标签 
14.     // 底部三个Tab的按钮 
15.     RadioButton mFileListRadioButton; 
16.     RadioButton mToolsRadioButton; 
17.     RadioButton mTransFileRadioButton; 
18.  
19.     @Override 
20.     public void onCreate(Bundle savedInstanceState) { 
21.         super.onCreate(savedInstanceState); 
22.         // 初始化FragmentManager，再次提醒需要Activity继承FragmentActivity 
23.         mFragmentManager = getActivity().getSupportFragmentManager(); 
24.     } 
25.  
26.     @Override 
27.     public void onResume() { 
28.         super.onResume(); 
29.         // 默认显示Tab为第一个，其实可以记住一下状态onSaveInstanceState，我为简洁未作处理 
30.         onCheckedChanged(mFileListRadioButton, true); 
31.         mFileListRadioButton.setChecked(true); 
32.         mCurrentFragmentTag = getActivity().getResources().getString( 
33.                 R.string.tab_filelist); 
34.     } 
35.  
36.     @Override 
37.     public View onCreateView(LayoutInflater inflater, ViewGroup container, 
38.             Bundle savedInstanceState) { 
39.         return inflater.inflate(R.layout.main_filesystem, container, false); 
40.     } 
41.  
42.     @Override 
43.     public void onViewCreated(View view, Bundle savedInstanceState) { 
44.         super.onViewCreated(view, savedInstanceState); 
45.         // find views和setAction 
46.         mFileListRadioButton = (RadioButton) view 
47.                 .findViewById(R.id.rb_filelist); 
48.         mToolsRadioButton = (RadioButton) view.findViewById(R.id.rb_tools); 
49.         mTransFileRadioButton = (RadioButton) view 
50.                 .findViewById(R.id.rb_transferlist_right); 
51.         mFileListRadioButton.setOnCheckedChangeListener(this); 
52.         mToolsRadioButton.setOnCheckedChangeListener(this); 
53.         mTransFileRadioButton.setOnCheckedChangeListener(this); 
54.     } 
55.  
56.     /**
57.      * 初始化FragmentTransaction
58.      *
59.      * @return FragmentTransaction实例
60.      */ 
61.     protected FragmentTransaction ensureTransaction() { 
62.         if (mFragmentTransaction == null) { 
63.             mFragmentTransaction = mFragmentManager.beginTransaction(); 
64.             mFragmentTransaction 
65.                     .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 
66.         } 
67.         return mFragmentTransaction; 
68.     } 
69.  
70.     /**
71.      * 根据tag获取对应的Fragment
72.      *
73.      * @param tag
74.      *            标签
75.      * @return 对应tag的Fragment实例
76.      */ 
77.     private Fragment getFragment(String tag) { 
78.         Fragment f = mFragmentManager.findFragmentByTag(tag); 
79.         if (f == null) { 
80.             // 在这里判断tag,不同则实例化对应的fragment， 
81.             f = SampleFragment.newInstance(tag, MainActivity.PAGE_FILE_SYSTEM); 
82.         } 
83.  
84.         return f; 
85.     } 
86.  
87.     /**
88.      * 将对应的fragment添加到容器中
89.      *
90.      * @param layout
91.      *            父容器
92.      * @param f
93.      *            fragment实例
94.      * @param tag
95.      *            标签
96.      */ 
97.     protected void attachFragment(int layout, Fragment f, String tag) { 
98.         if (f != null) { 
99.             if (f.isDetached()) {// 如果当前fragment只是隐藏，则显示出来 
100.                 ensureTransaction(); 
101.                 mFragmentTransaction.attach(f); 
102.             } else if (!f.isAdded()) {// 如果当前fragment没有添加到容器中，则先要添加到容器中 
103.                 ensureTransaction(); 
104.                 mFragmentTransaction.add(layout, f, tag); 
105.             } 
106.         } 
107.     } 
108.  
109.     /**
110.      * 将对应fragment隐藏
111.      *
112.      * @param f
113.      *            需要隐藏的fragment
114.      */ 
115.     protected void detachFragment(Fragment f) { 
116.         if (f != null && !f.isDetached()) { 
117.             ensureTransaction(); 
118.             mFragmentTransaction.detach(f); 
119.         } 
120.     } 
121.  
122.     /**
123.      * 保存fragment状态，添加或隐藏fragment最后都需要调用此函数
124.      */ 
125.     protected void commitTransactions() { 
126.         if (mFragmentTransaction != null && !mFragmentTransaction.isEmpty()) { 
127.             mFragmentTransaction.commit(); 
128.             mFragmentTransaction = null; 
129.         } 
130.     } 
131.  
132.     /**
133.      * 点击不同的Tab切换fragment
134.      *
135.      * @param tag
136.      */ 
137.     private void switchFragmen(String tag) { 
138.         if (TextUtils.equals(mCurrentFragmentTag, tag)) 
139.             return; 
140.         if (mCurrentFragmentTag != null) 
141.             detachFragment(getFragment(mCurrentFragmentTag)); 
142.         attachFragment(R.id.sliding_layer_frame_right, getFragment(tag), tag); 
143.         mCurrentFragmentTag = tag; 
144.         commitTransactions(); 
145.     } 
146.  
147.     @Override 
148.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
149.         if (!isChecked) 
150.             return; 
151.         Log.i("way", "mCurrentFragmentTag = " + mCurrentFragmentTag); 
152.         switch (buttonView.getId()) { 
153.         case R.id.rb_filelist: 
154.             switchFragmen(getActivity().getString(R.string.tab_filelist)); 
155.             break; 
156.         case R.id.rb_tools: 
157.             switchFragmen(getActivity().getString(R.string.tab_tools)); 
158.             break; 
159.         case R.id.rb_transferlist_right: 
160.             switchFragmen(getActivity().getString(R.string.tab_transferlist)); 
161.             break; 
162.         default: 
163.             break; 
164.         } 
165.     } 
166. } 

/**
 * 文件系统的Fragment
 * 
 * 由于与另一个Fragment是对称的，我就只注释此类了，敬请谅解!
 * 
 * @author way
 * 
 */
public class MainFileSystemFragment extends Fragment implements
		OnCheckedChangeListener {
	private FragmentManager mFragmentManager;// Fragment管理类
	private FragmentTransaction mFragmentTransaction;
	private String mCurrentFragmentTag;// 当前显示的二级Fragment标签
	// 底部三个Tab的按钮
	RadioButton mFileListRadioButton;
	RadioButton mToolsRadioButton;
	RadioButton mTransFileRadioButton;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 初始化FragmentManager，再次提醒需要Activity继承FragmentActivity
		mFragmentManager = getActivity().getSupportFragmentManager();
	}

	@Override
	public void onResume() {
		super.onResume();
		// 默认显示Tab为第一个，其实可以记住一下状态onSaveInstanceState，我为简洁未作处理
		onCheckedChanged(mFileListRadioButton, true);
		mFileListRadioButton.setChecked(true);
		mCurrentFragmentTag = getActivity().getResources().getString(
				R.string.tab_filelist);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.main_filesystem, container, false);
	}

	@Override
	public void onViewCreated(View view, Bundle savedInstanceState) {
		super.onViewCreated(view, savedInstanceState);
		// find views和setAction
		mFileListRadioButton = (RadioButton) view
				.findViewById(R.id.rb_filelist);
		mToolsRadioButton = (RadioButton) view.findViewById(R.id.rb_tools);
		mTransFileRadioButton = (RadioButton) view
				.findViewById(R.id.rb_transferlist_right);
		mFileListRadioButton.setOnCheckedChangeListener(this);
		mToolsRadioButton.setOnCheckedChangeListener(this);
		mTransFileRadioButton.setOnCheckedChangeListener(this);
	}

	/**
	 * 初始化FragmentTransaction
	 * 
	 * @return FragmentTransaction实例
	 */
	protected FragmentTransaction ensureTransaction() {
		if (mFragmentTransaction == null) {
			mFragmentTransaction = mFragmentManager.beginTransaction();
			mFragmentTransaction
					.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
		}
		return mFragmentTransaction;
	}

	/**
	 * 根据tag获取对应的Fragment
	 * 
	 * @param tag
	 *            标签
	 * @return 对应tag的Fragment实例
	 */
	private Fragment getFragment(String tag) {
		Fragment f = mFragmentManager.findFragmentByTag(tag);
		if (f == null) {
			// 在这里判断tag,不同则实例化对应的fragment，
			f = SampleFragment.newInstance(tag, MainActivity.PAGE_FILE_SYSTEM);
		}

		return f;
	}

	/**
	 * 将对应的fragment添加到容器中
	 * 
	 * @param layout
	 *            父容器
	 * @param f
	 *            fragment实例
	 * @param tag
	 *            标签
	 */
	protected void attachFragment(int layout, Fragment f, String tag) {
		if (f != null) {
			if (f.isDetached()) {// 如果当前fragment只是隐藏，则显示出来
				ensureTransaction();
				mFragmentTransaction.attach(f);
			} else if (!f.isAdded()) {// 如果当前fragment没有添加到容器中，则先要添加到容器中
				ensureTransaction();
				mFragmentTransaction.add(layout, f, tag);
			}
		}
	}

	/**
	 * 将对应fragment隐藏
	 * 
	 * @param f
	 *            需要隐藏的fragment
	 */
	protected void detachFragment(Fragment f) {
		if (f != null && !f.isDetached()) {
			ensureTransaction();
			mFragmentTransaction.detach(f);
		}
	}

	/**
	 * 保存fragment状态，添加或隐藏fragment最后都需要调用此函数
	 */
	protected void commitTransactions() {
		if (mFragmentTransaction != null && !mFragmentTransaction.isEmpty()) {
			mFragmentTransaction.commit();
			mFragmentTransaction = null;
		}
	}

	/**
	 * 点击不同的Tab切换fragment
	 * 
	 * @param tag
	 */
	private void switchFragmen(String tag) {
		if (TextUtils.equals(mCurrentFragmentTag, tag))
			return;
		if (mCurrentFragmentTag != null)
			detachFragment(getFragment(mCurrentFragmentTag));
		attachFragment(R.id.sliding_layer_frame_right, getFragment(tag), tag);
		mCurrentFragmentTag = tag;
		commitTransactions();
	}

	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		if (!isChecked)
			return;
		Log.i("way", "mCurrentFragmentTag = " + mCurrentFragmentTag);
		switch (buttonView.getId()) {
		case R.id.rb_filelist:
			switchFragmen(getActivity().getString(R.string.tab_filelist));
			break;
		case R.id.rb_tools:
			switchFragmen(getActivity().getString(R.string.tab_tools));
			break;
		case R.id.rb_transferlist_right:
			switchFragmen(getActivity().getString(R.string.tab_transferlist));
			break;
		default:
			break;
		}
	}
}

MainFileSystemFragment对应的布局，main_filesystem.xml，使用RadioGroup和RadioButton实现Tab。

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="fill_parent" 
5.     android:background="@color/black" > 
6.  
7.     <RadioGroup 
8.         android:id="@+id/rg_tabs" 
9.         android:layout_width="fill_parent" 
10.         android:layout_height="wrap_content" 
11.         android:layout_alignParentBottom="true" 
12.         android:layout_toRightOf="@android:id/icon" 
13.         android:background="@drawable/tabbar_background" 
14.         android:gravity="bottom" 
15.         android:orientation="horizontal" 
16.         android:paddingBottom="0.0dip" 
17.         android:paddingLeft="50.0dip" 
18.         android:paddingRight="0.0dip" 
19.         android:paddingTop="4.0dip" > 
20.  
21.         <RadioButton 
22.             android:id="@+id/rb_filelist" 
23.             style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray" 
24.             android:layout_width="fill_parent" 
25.             android:layout_height="fill_parent" 
26.             android:layout_weight="1.0" 
27.             android:background="@android:color/transparent" 
28.             android:button="@null" 
29.             android:drawableTop="@drawable/tab_filelist" 
30.             android:gravity="center" 
31.             android:paddingTop="4.0dip" 
32.             android:text="@string/tab_filelist" /> 
33.  
34.         <RadioButton 
35.             android:id="@+id/rb_tools" 
36.             style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray" 
37.             android:layout_width="fill_parent" 
38.             android:layout_height="fill_parent" 
39.             android:layout_weight="1.0" 
40.             android:background="@android:color/transparent" 
41.             android:button="@null" 
42.             android:drawableTop="@drawable/tab_tools" 
43.             android:gravity="center" 
44.             android:paddingTop="4.0dip" 
45.             android:text="@string/tab_tools" /> 
46.  
47.         <RadioButton 
48.             android:id="@+id/rb_transferlist_right" 
49.             style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray" 
50.             android:layout_width="fill_parent" 
51.             android:layout_height="fill_parent" 
52.             android:layout_weight="1.0" 
53.             android:background="@android:color/transparent" 
54.             android:button="@null" 
55.             android:drawableTop="@drawable/tab_transferlist" 
56.             android:gravity="center" 
57.             android:paddingTop="4.0dip" 
58.             android:text="@string/tab_transferlist" /> 
59.     </RadioGroup> 
60.  
61.     <FrameLayout 
62.         android:id="@+id/sliding_layer_frame_right" 
63.         android:layout_width="match_parent" 
64.         android:layout_height="match_parent" 
65.         android:layout_above="@id/rg_tabs" 
66.         android:background="@color/black" /> 
67.  
68.     <ImageView 
69.         android:id="@+id/iv_guide" 
70.         android:layout_width="wrap_content" 
71.         android:layout_height="wrap_content" 
72.         android:layout_alignParentBottom="true" 
73.         android:layout_marginBottom="169.0dip" 
74.         android:src="@drawable/ic_swipe_guide_right" 
75.         android:visibility="gone" /> 
76.  
77. </RelativeLayout> 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/black" >

    <RadioGroup
        android:id="@+id/rg_tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@android:id/icon"
        android:background="@drawable/tabbar_background"
        android:gravity="bottom"
        android:orientation="horizontal"
        android:paddingBottom="0.0dip"
        android:paddingLeft="50.0dip"
        android:paddingRight="0.0dip"
        android:paddingTop="4.0dip" >

        <RadioButton
            android:id="@+id/rb_filelist"
            style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:background="@android:color/transparent"
            android:button="@null"
            android:drawableTop="@drawable/tab_filelist"
            android:gravity="center"
            android:paddingTop="4.0dip"
            android:text="@string/tab_filelist" />

        <RadioButton
            android:id="@+id/rb_tools"
            style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:background="@android:color/transparent"
            android:button="@null"
            android:drawableTop="@drawable/tab_tools"
            android:gravity="center"
            android:paddingTop="4.0dip"
            android:text="@string/tab_tools" />

        <RadioButton
            android:id="@+id/rb_transferlist_right"
            style="@style/NetDisk.Unified.Smaller.Blue2TabBarGray"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:background="@android:color/transparent"
            android:button="@null"
            android:drawableTop="@drawable/tab_transferlist"
            android:gravity="center"
            android:paddingTop="4.0dip"
            android:text="@string/tab_transferlist" />
    </RadioGroup>

    <FrameLayout
        android:id="@+id/sliding_layer_frame_right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/rg_tabs"
        android:background="@color/black" />

    <ImageView
        android:id="@+id/iv_guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="169.0dip"
        android:src="@drawable/ic_swipe_guide_right"
        android:visibility="gone" />

</RelativeLayout>

最后是每个Tab的Fragment了，由于我这里仅仅是一个例子，所以6个Tab对应的Fragment都是使用的此Fragment，只是在切换不同的Tab时，改变了标题栏名称和背景颜色而已：

[java] view plain copy print ?

1. /**
2. * 每个Tab中的fragment
3. *
4. * @author way
5. *
6. */ 
7. public class SampleFragment extends Fragment { 
8.  
9.     private static final String ARG_TEXT = "text"; 
10.     private static final String ARG_PAGER = "pager"; 
11.  
12.     public static SampleFragment newInstance(String text, int pager) { 
13.         SampleFragment f = new SampleFragment(); 
14.  
15.         Bundle args = new Bundle(); 
16.         args.putString(ARG_TEXT, text); 
17.         args.putInt(ARG_PAGER, pager); 
18.         f.setArguments(args); 
19.  
20.         return f; 
21.     } 
22.  
23.     @Override 
24.     public View onCreateView(LayoutInflater inflater, ViewGroup container, 
25.             Bundle savedInstanceState) { 
26.         View v = inflater.inflate(R.layout.fragment_sample, container, false); 
27.  
28.         ((TextView) v.findViewById(R.id.text)).setText(getArguments() 
29.                 .getString(ARG_TEXT)); 
30.         TextView title = (TextView) v.findViewById(R.id.title); 
31.         title.setText(getArguments().getString(ARG_TEXT)); 
32.         int pager = getArguments().getInt(ARG_PAGER); 
33.         if (pager == MainActivity.PAGE_FILE_SYSTEM)// 如果是文件系统的Fragment 
34.             title.setBackgroundColor(Color.parseColor("#ff3995e3"));// 蓝色标题栏 
35.         else 
36.             title.setBackgroundColor(Color.parseColor("#ffde4125")); 
37.         return v; 
38.     } 
39. } 

/**
 * 每个Tab中的fragment
 * 
 * @author way
 * 
 */
public class SampleFragment extends Fragment {

	private static final String ARG_TEXT = "text";
	private static final String ARG_PAGER = "pager";

	public static SampleFragment newInstance(String text, int pager) {
		SampleFragment f = new SampleFragment();

		Bundle args = new Bundle();
		args.putString(ARG_TEXT, text);
		args.putInt(ARG_PAGER, pager);
		f.setArguments(args);

		return f;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v = inflater.inflate(R.layout.fragment_sample, container, false);

		((TextView) v.findViewById(R.id.text)).setText(getArguments()
				.getString(ARG_TEXT));
		TextView title = (TextView) v.findViewById(R.id.title);
		title.setText(getArguments().getString(ARG_TEXT));
		int pager = getArguments().getInt(ARG_PAGER);
		if (pager == MainActivity.PAGE_FILE_SYSTEM)// 如果是文件系统的Fragment
			title.setBackgroundColor(Color.parseColor("#ff3995e3"));// 蓝色标题栏
		else
			title.setBackgroundColor(Color.parseColor("#ffde4125"));
		return v;
	}
}

OK，谢谢你看到了文章末尾，由于在公司无法上传代码，回家后将源码奉上，请稍安勿燥！

急着下班，文章讲解不够，如果各位有啥问题，欢迎留言。Thanks!

更多