前一段时间做过TabHost切换窗口的Demo,但是TabHost不再建议使用,所以做了一个ActionBar+Fragment+ViewPager实现仿微信滑动切换窗口的Demo。
不多说,直接上代码,后文附上Demo。
1.首先建四个fragment
2.MainActivity.java:
public class MainActivity extends ActionBarActivity implements ActionBar.TabListener, ViewPager.OnPageChangeListener {
private List<MyTab> mTabs = new ArrayList<MyTab>();
private ViewPager mViewPager;
private ActionBar mActionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabs.add(new MyTab(R.string.chart, ChartFrament.class));
mTabs.add(new MyTab(R.string.friend, FriendFragment.class));
mTabs.add(new MyTab(R.string.moment, MomentFrament.class));
mTabs.add(new MyTab(R.string.mine, MineFragment.class));
initActionBar();
}
/*
* 初始化ActionBar
* */
private void initActionBar() {
//实例化ViewPager
mViewPager = (ViewPager) this.findViewById(R.id.pager);
mActionBar = getSupportActionBar();
mActionBar.setDisplayHomeAsUpEnabled(false);
mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//循环添加Tab
for (MyTab t : mTabs) {
ActionBar.Tab tab = mActionBar.newTab();
tab.setText(t.getTxt());
//添加一个ActionBar的监听器
tab.setTabListener(this);
mActionBar.addTab(tab);
}
mViewPager.setAdapter(new TabFragmentPagerAdapter(getSupportFragmentManager()));
//添加ViewPager的监听器
mViewPager.setOnPageChangeListener(this);
}
/ActionBar的监听方法
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
//Tab选择时ViewPager随之改变
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
/ViewPager的监听方法
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//ViewPager滑动时,Tab根据position随之切换
mActionBar.selectTab(mActionBar.getTabAt(position));
}
@Override
public void onPageScrollStateChanged(int state) {
}
class MyTab {
private int txt;
private Class fragment;
public MyTab() {
}
MyTab(int txt, Class fragment) {
this.txt = txt;
this.fragment = fragment;
}
public int getTxt() {
return txt;
}
public void setTxt(int txt) {
this.txt = txt;
}
public Class getFragment() {
return fragment;
}
public void setFragment(Class fragment) {
this.fragment = fragment;
}
}
class TabFragmentPagerAdapter extends FragmentPagerAdapter {
public TabFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
try {
return (Fragment) mTabs.get(position).getFragment().newInstance();
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
return null;
}
@Override
public int getCount() {
return mTabs.size();
}
}
}
3.通过第1、2步基本实现了滑动切换窗口,但是非常难看,要实现与微信类似,就要进行自定义Style
style.xml:
<resources>
<style name="Theme.ActionBar" parent="Theme.AppCompat">
<item name="android:actionBarStyle">@style/actionbar.base.style</item>
<item name="android:actionBarTabStyle">@style/actionBarTabStyle</item>
<item name="android:actionBarTabTextStyle">@style/actionBarTabTextStyle</item>
<!--Support2.1及以上-->
<item name="actionBarStyle">@style/actionbar.base.style</item>
<item name="actionBarTabStyle">@style/actionBarTabStyle</item>
<item name="actionBarTabTextStyle">@style/actionBarTabTextStyle</item>
</style>
<!-- 自定义ActionBar 基础样式 -->
<style name="actionbar.base.style" parent="Widget.AppCompat.ActionBar">
<item name="android:background">@color/background_actionbar</item>
<item name="android:backgroundStacked">@color/white</item>
<item name="android:titleTextStyle">@style/actionBarTitleStyle</item>
<!--Support2.1及以上-->
<item name="background">@color/background_actionbar</item>
<item name="backgroundStacked">@color/white</item>
<item name="titleTextStyle">@style/actionBarTitleStyle</item>
</style>
<!-- 自定义ActionBarTitle基础样式 -->
<style name="actionBarTitleStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/white</item>
<item name="android:textSize">18sp</item>
</style>
<!-- 自定义ActionBarTab基础样式 -->
<style name="actionBarTabStyle" parent="Widget.AppCompat.ActionBar.TabView">
<item name="android:background">@drawable/tab_indicator_ab_actionbar</item>
<!-- Support2.1 -->
<item name="background">@drawable/tab_indicator_ab_actionbar</item>
</style>
<!-- 自定义ActionBarTabText基础样式 -->
<style name="actionBarTabTextStyle" parent="Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/tab_text</item>
<item name="android:textSize">14sp</item>
</style>
</resources>
最后结果演示(可能我的真机有点问题,ActionBar的颜色设置只设置了一半),Demo下载地址:链接:http://pan.baidu.com/s/1jG3VFfw 密码:52op