自定义的HorizontalScrollView与Viewpager组成tab之间的滑动

Android现在实现Tab类型的界面方式越来越多，之前做电商项目时，遇见了类似tab与viewpager之间的左右连带滑动，我查了一些资料这种效果是继承自定义的HorizontalScrollView和viewpager完成的，我认为效果蛮好的，也比较简便。效果图：，这里我是禁止了viewpager原生自带的左右滑动，我上传了一个类文件，里面有禁止viewpager左右滑动和自定义的HorizontalScrollView。下载地址：http://download.youkuaiyun.com/detail/qq_32365567/9525324

代码：

 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16

     

      
       

         <LinearLayout
       
       

                    android:layout_width="match_parent"
       
       

                    android:layout_height="wrap_content"
       
       

                    android:orientation="vertical" >
       
       

        

       
       

                    <cn.tay.Tools.PagerSlidingTabStrip
       
       

                        android:id="@+id/tabs"
       
       

                        android:layout_width="match_parent"
       
       

                        android:background="#ececec"
       
       

                        android:layout_height="51dp" />
       
       

                    <cn.tay.Tools.Fobidden
       
       

                        android:id="@+id/pager"
       
       

                        android:layout_marginTop="15dp"
       
       

                        android:layout_width="match_parent"
       
       

                        android:layout_height="wrap_content" />
       
       

                </LinearLayout>
       
     

这里需要注意的是,我这里是使用的<cn.tay.Tools.Fobidden 禁止左右滑动的viwepager,如果需要滑动可以调用安卓原生的viewager,android.support.v4.view.ViewPager。xml文件不好后，我们继续看activity里的方法。

  首先我们需要在on creat()方法中实例化 pager和tabs控件， pager = (ViewPager) findViewById(R.id.pager);
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);  还需要适配屏幕的尺寸，DisplayMetrics dm = getResources().getDisplayMetrics();   当然除了做这些外，我们肯定还要为ViewPager做适配的，也就是继承FragmentPagerAdapter。这里为什么会继承FragmentPagerAdapter，因为我下面的都是用Fragment填充视图的，说到这里，很显然我们需要创建3个Fragment，private  JinBi_all quanbu,JinBi_Add shouru,JinBi_Reduce zhichu。

创建好后，那就要给ViewPager做适配了，代码：

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

public class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } private final String[] titles = { "全部","收入","支出"}; @Override public CharSequence getPageTitle(int position) { return titles[position]; } @Override public int getCount() { return titles.length; } @Override public Fragment getItem(int position) { switch (position) { case 0: if (quanbu == null) { quanbu = new JinBi_all(); } return quanbu; case 1: if (shouru == null) { shouru = new JinBi_Add_shouru(); } return shouru; case 2: if (zhichu == null) { zhichu = new Reduce_zhichu(); } return zhichu; default: return null; } } }

上面的就是为pager做的适配Adapter方法，显然就是给tab设置的标题以及点击相对应的fragment界面，那我们还需要在on creat()方法里实例pager,  pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
tabs.setViewPager(pager); setTabsValue()；那写到这里，我们就需要给tab这些标题设置属性，比如填充满屏幕、分割线是透明的、Tab底部线的高度、等。如代码：

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

private void setTabsValue () { // 设置 Tab 是自动填充满屏幕的 tabs.setShouldExpand ( true ) ; // 设置 Tab 的分割线是透明的 tabs.setDividerColor ( Color.TRANSPARENT ) ; // 设置 Tab 底部线的高度 tabs.setUnderlineHeight (( int ) TypedValue.applyDimension ( TypedValue.COMPLEX_UNIT_DIP , 0 , dm )) ; // 设置 Tab Indicator 的高度 tabs.setIndicatorHeight (( int ) TypedValue.applyDimension ( TypedValue.COMPLEX_UNIT_DIP , 2 , dm )) ; // 设置 Tab 标题文字的大小 tabs.setTextSize (( int ) TypedValue.applyDimension ( TypedValue.COMPLEX_UNIT_SP , 14 , dm )) ; // 设置 Tab Indicator 的颜色 tabs.setIndicatorColor ( Color.parseColor ( " #e61e19")); tabs.setTextColorResource ( R.color.viewpage ) ; // 设置选中 Tab 文字的颜色 ( 这是我自定义的一个方法 ) tabs.setSelectedTextColor ( Color.parseColor ( " #e61e19")); }

这些方法都可以使用我们所需要的界面展示，如果你们还想创建其他炫酷的界面展示，可以在自定义HorizontalScrollView的类中添加需要的方法，以上这些属性都是在这里面添加的。写到这里基本上都把这些功能给实现了，但是这里我们还需要做一个关于tab中 使用到的标准常量，像超时、尺寸、距离，这样的一个工具类，我们还需创建一个方法放进on creat()：private void setOverflowShowingAlways() {
try {
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKeyField = ViewConfiguration.class
.getDeclaredField("MenuKey");
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
} catch (Exception e) {
e.printStackTrace();
}
}这里关于ViewConfiguration 类不懂的可以看一下，http://www.aichengxu.com/view/65180，到这里就能完全实现上图那种效果了。那每一个fragment就处理相应的界面数据，如果你那几个界面都是一样的，可以创建一个fragment，实现共用就行了，也比较简单只是处理数据不同而已，这样会节约很多时间。如果需要看其他的实现效果，可以看一下鸿洋老师的：http://blog.youkuaiyun.com/lmj623565791/article/details/24740977，我看了一下，貌似我这个还比较简单一点。

可能下一篇会贴出关于listview中头部和身部的item不同，就如上图中全部界面那种。好了，这个功能就介绍到这里了，有什么改进的地方，希望可以给我留言。