前言
android中滑动控件非常多，相信大部分同学接触的都是ListView这样的竖向滑动的控件，可是有时候我们也有横向滑动的需求，非常多应用眼下也做成了这个样子，以weiciyuan为例，例如以下图所看到的，上面的几个tabbutton都是能够滑动的。
Navigation Tabs
加入导航tab栏。是一种常见的设计样式，相信大家也常常看到它。Android2.x时代。一般大家都是用tabhost来实现（之前的项目採用这样的设计苦逼了好一阵）。自从google推出设计规范后，google大力倡导使用Navigation Tabs加上Fragment以及ViewPager来实现导航页面的点击切换和滑动切换。
例如以下图所看到的，这是Navigation Tabs的典型演示样例：
实现代码比較简单，由于是开源项目。我直接贴出来代码，方便大家学习參考。
public class MainUIActivity extends FragmentActivity {
private static final int CACHE_PAGER = 5;
private ViewPager mViewPager;
private MainUIPagerAdapter mainUIPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViewPager = new ViewPager(this);
mViewPager.setId(11);
setContentView(mViewPager);
buildPhoneInterface();
}
private void buildPhoneInterface() {
buildViewPager();
buildActionBarAndViewPagerTitles();
getActionBar().setSelectedNavigationItem(1);
}
private void buildViewPager() {
mViewPager = (ViewPager) findViewById(R.id.mainviewpager);
mainUIPagerAdapter = new MainUIPagerAdapter(getFragmentManager());
mViewPager.setOffscreenPageLimit(CACHE_PAGER);
mViewPager.setAdapter(mainUIPagerAdapter);
mViewPager.setOnPageChangeListener(onPageChangeListener);
}
private void buildActionBarAndViewPagerTitles() {
// 获取action bar的引用
ActionBar actionBar = getActionBar();
// 设置action bar的模式为导航模式，这样。action bar才会显示Tab标签
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// 仅仅显示navigation tabs，不显示actionbar上面的标题等布局
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
// 构建一个自己定义的adapter。将viewpager的切换和action bar tab的点击关联起来
MainTabListener mainTabListener = new MainTabListener();
actionBar.addTab(actionBar.newTab().setText(R.string.first).setTabListener(mainTabListener));
actionBar.addTab(actionBar.newTab().setText(R.string.second).setTabListener(mainTabListener));
actionBar.addTab(actionBar.newTab().setText(R.string.thrid).setTabListener(mainTabListener));
actionBar.addTab(actionBar.newTab().setText(R.string.fourth).setTabListener(mainTabListener));
}
private Fragment getFirstFragment() {
return getFragmentManager().findFragmentByTag(FirstFragment.class.getName());
}
private Fragment getSecondFragment() {
return getFragmentManager().findFragmentByTag(SecondFragment.class.getName());
}
private Fragment getThirdFragment() {
return getFragmentManager().findFragmentByTag(ThirdFragment.class.getName());
}
private Fragment getFourthFragment() {
return getFragmentManager().findFragmentByTag(FourthFragment.class.getName());
}
// 构建一个简单的Viewpager切换监听类，将tab的点击与viewpager的切换关联起来
ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
getActionBar().setSelectedNavigationItem(position);
}
};
private class MainUIPagerAdapter extends AppFragmentPagerAdapter {
List<Fragment> list = new ArrayList<Fragment>();
public MainUIPagerAdapter(FragmentManager fm) {
super(fm);
if (getFirstFragment() == null) {
list.add(new FirstFragment());
} else {
list.add(getFirstFragment());
}
if (getSecondFragment() == null) {
list.add(new SecondFragment());
} else {
list.add(getSecondFragment());
}
if (getThirdFragment() == null) {
list.add(new ThirdFragment());
} else {
list.add(getThirdFragment());
}
if (getFourthFragment() == null) {
list.add(new FourthFragment());
} else {
list.add(getFourthFragment());
}
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
protected String getTag(int position) {
List<String> tagsList = new ArrayList<String>();
tagsList.add(FirstFragment.class.getName());
tagsList.add(SecondFragment.class.getName());
tagsList.add(ThirdFragment.class.getName());
tagsList.add(FourthFragment.class.getName());
return tagsList.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
private class MainTabListener implements ActionBar.TabListener {
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
if (mViewPager.getCurrentItem() != tab.getPosition()) {
mViewPager.setCurrentItem(tab.getPosition());
}
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
}自己定义样式
这块样式定义还是有些负责的，能够看一下初始的样式，我也写了一个demo。截图例如以下：
之所以呈现这样的效果，是由于你使用的主题是Android原生主题，代码例如以下：
<activity
android:name="××××××"
android:theme="@android:style/Theme.Holo.Light">主题的定义位于Android源代码的framework文件夹，路径为：“frameworks/base/core/res/res/values/themes.xml”，当中与Action Bar相关的属性例如以下：
<!-- Action bar styles --> 1476 <item name="actionDropDownStyle">@android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar</item> 1477 <item name="actionButtonStyle">@android:style/Widget.Holo.Light.ActionButton</item> 1478 <item name="actionOverflowButtonStyle">@android:style/Widget.Holo.Light.ActionButton.Overflow</item> 1479 <item name="actionModeBackground">@android:drawable/cab_background_top_holo_light</item> 1480 <item name="actionModeSplitBackground">@android:drawable/cab_background_bottom_holo_light</item> 1481 <item name="actionModeCloseDrawable">@android:drawable/ic_cab_done_holo_light</item> 1482 <item name="actionBarTabStyle">@style/Widget.Holo.Light.ActionBar.TabView</item> 1483 <item name="actionBarTabBarStyle">@style/Widget.Holo.Light.ActionBar.TabBar</item> 1484 <item name="actionBarTabTextStyle">@style/Widget.Holo.Light.ActionBar.TabText</item> 1485 <item name="actionModeStyle">@style/Widget.Holo.Light.ActionMode</item> 1486 <item name="actionModeCloseButtonStyle">@style/Widget.Holo.Light.ActionButton.CloseMode</item> 1487 <item name="android:actionBarStyle">@android:style/Widget.Holo.Light.ActionBar.Solid</item> 1488 <item name="actionBarSize">@dimen/action_bar_default_height</item> 1489 <item name="actionModePopupWindowStyle">@android:style/Widget.Holo.Light.PopupWindow.ActionMode</item> 1490 <item name="actionBarWidgetTheme">@null</item> 1491 1492 <item name="actionModeCutDrawable">@android:drawable/ic_menu_cut_holo_light</item> 1493 <item name="actionModeCopyDrawable">@android:drawable/ic_menu_copy_holo_light</item> 1494 <item name="actionModePasteDrawable">@android:drawable/ic_menu_paste_holo_light</item> 1495 <item name="actionModeSelectAllDrawable">@android:drawable/ic_menu_selectall_holo_light</item> 1496 <item name="actionModeShareDrawable">@android:drawable/ic_menu_share_holo_light</item> 1497 <item name="actionModeFindDrawable">@android:drawable/ic_menu_find_holo_light</item> 1498 <item name="actionModeWebSearchDrawable">@android:drawable/ic_menu_search_holo_light</item> 1499 1500 <item name="dividerVertical">?android:attr/listDivider</item> 1501 <item name="dividerHorizontal">?android:attr/listDivider</item> 1502 <item name="buttonBarStyle">@android:style/Holo.Light.ButtonBar</item> 1503 <item name="buttonBarButtonStyle">?android:attr/borderlessButtonStyle</item> 1504 <item name="segmentedButtonStyle">@android:style/Holo.Light.SegmentedButton</item>
与Navigation Tab相关的属性例如以下：