使用RadioGroup+ViewPager+Fragment实现带滑动的页卡效果TabHost

最近的项目中有一两个界面需要实现带滑动的页卡效果,我这次的需求是大概是这样的:有三个tab,左边的tab要求他的左上角与左下角都是带圆角的,右上角和右下角都是不带圆角的。中间的tab左上角与左下角右上角和右下角都是不带圆角的,右边的tab要求他的左上角与左下角都是不带圆角的,右上角和右下角都是带圆角的;通常我都是使用ViewPagerIndicator这个库,但是由于我这次要实现的样式用ViewPagerIndicator实现起来比较麻烦。因为ViewPagerIndiator的每个Tab的样式都是一样的。于是我就使用RadioGroup+ViewPager+Fragment来实现。布局文件:<pre code_snippet_id="654490" snippet_file_name="blog_20150427_2_1589897" name="code" class="html"><LinearLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:orientation="vertical"android:layout_height="match_parent"tools:context="com.hotkeyfinance.finance.TradingRecordActivity"><RadioGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/top_tab"android:orientation="horizontal"android:padding="15dp"><RadioButtonandroid:id="@+id/left_tab"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/investment_tab_left_selector"android:button="@null"android:checked="true"android:gravity="center"android:padding="10dp"android:text="招标中"android:textColor="@color/investment_tab_color_list" /><RadioButtonandroid:id="@+id/center_tab"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/investment_tab_center_selector"android:button="@null"android:gravity="center"android:padding="10dp"android:text="还款中"android:textColor="@color/investment_tab_color_list" /><RadioButtonandroid:id="@+id/right_tab"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/investment_tab_right_selector"android:button="@null"android:gravity="center"android:padding="10dp"android:text="已还清"android:textColor="@color/investment_tab_color_list" /></RadioGroup><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>java代码:<pre name="code" class="html">package com.hotkeyfinance.finance;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.widget.RadioButton;import android.widget.RadioGroup;import com.hotkeyfinance.finance.fragment.BiddingFragment;import com.hotkeyfinance.finance.fragment.PaymentingFragment;import java.util.ArrayList;public class InvestmentManagementActivity extends BaseActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {private ViewPager mViewPager;private RadioGroup mTopTab;private TradingRecordPagerAdapter mAdapter;private ArrayList<Fragment> mFragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_investment_management);initView();}private void initView() {setTitle("交易记录");mViewPager = (ViewPager) findViewById(R.id.view_pager);mViewPager.setOnPageChangeListener(this);mTopTab = (RadioGroup) findViewById(R.id.top_tab);mTopTab.setOnCheckedChangeListener(this);mFragments = new ArrayList<Fragment>();mFragments.add(new BiddingFragment());mFragments.add(new PaymentingFragment());mFragments.add(new BiddingFragment());mAdapter = new TradingRecordPagerAdapter(getSupportFragmentManager());mAdapter.bindData(mFragments);mViewPager.setAdapter(mAdapter);}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {int currentItem = mViewPager.getCurrentItem();switch (checkedId) {case R.id.left_tab:if (currentItem != 0) {mViewPager.setCurrentItem(0);}break;case R.id.center_tab:if (currentItem != 1) {mViewPager.setCurrentItem(1);}break;case R.id.right_tab:if (currentItem != 2) {mViewPager.setCurrentItem(2);}break;}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {switch (position) {case 0:mTopTab.check(R.id.left_tab);break;case 1:mTopTab.check(R.id.center_tab);break;case 2:mTopTab.check(R.id.right_tab);break;}}@Overridepublic void onPageScrollStateChanged(int state) {}private static class TradingRecordPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> fragments = new ArrayList<Fragment>();public TradingRecordPagerAdapter(FragmentManager fm) {super(fm);}public void bindData(ArrayList<Fragment> fragments) {if (fragments != null) {this.fragments = fragments;}}@Overridepublic Fragment getItem(int position) {return fragments.get(position);}@Overridepublic int getCount() {return fragments.size();}}}这样就基本实现我要的效果了,,我也是认为我完成了这个效果了,但是当我使用别人的软件的时候发现它们的滑动很流畅。而我的却有一点小卡。当我慢慢滑动ViewPager的时候发现它还会出现tab与他指示的ViewPager页面不一致的问题(快速滑动ViewPager不会出现这个问题,那会我闲得蛋疼,就慢慢的滑动ViewPager居然出现了这个bug),后来通过不懈的努力终于解决了这个问题。其实方法很简单,就是把上边的switch (position) {case 0:mTopTab.check(R.id.left_tab);break;case 1:mTopTab.check(R.id.center_tab);break;case 2:mTopTab.check(R.id.right_tab);break;}替换成:((RadioButton)mTopTab.getChildAt(position)).performClick();然后发现ViewPager的滑动流畅了,tab与他指示的ViewPager页面也不会不一致了。具体原因我正在分析中,当然你要是知道原因不妨告诉我一下。

可就是这样,还是有人,期望过多的温暖。

使用RadioGroup+ViewPager+Fragment实现带滑动的页卡效果TabHost

相关文章:

你感兴趣的文章:

标签云: