自定義的HorizontalScrollView與Viewpager組成tab之間的滑動

Android現在實作Tab類型的界面方式越來越多，之前做電商項目時，遇見了類似tab與viewpager之間的左右連帶滑動，我查了一些資料這種效果是繼承自定義的HorizontalScrollView和viewpager完成的，我認為效果蠻好的，也比較簡便。效果圖：

，這裡我是禁止了viewpager原生自帶的左右滑動，我上傳了一個類檔案，裡面有禁止viewpager左右滑動和自定義的HorizontalScrollView。下載下傳位址：http://download.csdn.net/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做适配了，代碼：

1 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底部線的高度、等。如代碼：

1 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.csdn.net/lmj623565791/article/details/24740977，我看了一下，貌似我這個還比較簡單一點。

可能下一篇會貼出關于listview中頭部和身部的item不同，就如上圖中全部界面那種。好了，這個功能就介紹到這裡了，有什麼改進的地方，希望可以給我留言。