最近的项目中有一两个界面需要实现带滑动的页卡效果,我这次的需求是大概是这样的:有三个tab,左边的tab要求他的左上角与左下角都是带圆角的,右上角和右下角都是不带圆角的。中间的tab左上角与左下角右上角和右下角都是不带圆角的,右边的tab要求他的左上角与左下角都是不带圆角的,右上角和右下角都是带圆角的;通常我都是使用ViewPagerIndicator这个库,但是由于我这次要实现的样式用ViewPagerIndicator实现起来比较麻烦。因为ViewPagerIndiator的每个Tab的样式都是一样的。于是我就使用RadioGroup+ViewPager+Fragment来实现。
布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="com.hotkeyfinance.finance.TradingRecordActivity">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/top_tab"
android:orientation="horizontal"
android:padding="15dp">
<RadioButton
android: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" />
<RadioButton
android: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" />
<RadioButton
android: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.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
java代码:
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;
@Override
protected 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);
}
@Override
public 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;
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public 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;
}
}
@Override
public 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;
}
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public 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页面也不会不一致了。具体原因我正在分析中,当然你要是知道原因不妨告诉我一下。