前言
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相关的属性例如以下: