两种实现选项卡功能----自定义和TabLayout
选项卡在应用中使用的特别多，也特别常见，以前实现选项卡功能，使用第三方库来实现，一般TabPageIndicator+viewPager，有时觉得比较笨重，没有必要
现在自己写个功能来实现下，实现效果如下图，滑动时，红色指示线也跟着滑动：
1，此功能主要是imageView的位移动画+ViewPager来实现，布局代码如下：activity_define.xml
2，两个Fragment，比较简单：
/**
* 未消費券Fragment类
*/
@SuppressLint("InflateParams")
public class MyCouponNotSpendingFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView tv = new TextView(getActivity());
tv.setTextSize(24.f);
tv.setPadding(15,10,15,10);
tv.setText("未消费");
return tv;
}
}
/**
* 已消費券Fragment类
*/
@SuppressLint("InflateParams")
public class MyCouponYetSpentFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView tv = new TextView(getActivity());
tv.setTextSize(24.f);
tv.setPadding(15,10,15,10);
tv.setText("已消费");
return tv;
}
}
/**
* 我的券Fragment 页面适配器
*/
public class MyCouponFragmentAdapter extends FragmentPagerAdapter {
public MyCouponFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
// 我的券未消费
case 0:
fragment = new MyCouponNotSpendingFragment();
break;
// 我的券已消费
case 1:
fragment = new MyCouponYetSpentFragment();
break;
}
return fragment;
}
@Override
public int getCount() {
return 2;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object);
}
}4，主程序界面代码 ，DefineActivity.java：
/**
* 自定义tab导航
*/
public class DefineActivity extends FragmentActivity implements View.OnClickListener {
private ViewPager mViewPager;
// ViewPager适配器
private MyCouponFragmentAdapter adapter = null;
private int tabWidth;
private DisplayMetrics dm = new DisplayMetrics();
private ImageView img_tabLine;
// 已消费
private TextView tv_yet_spent;
// 未消费
private TextView tv_not_spending;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_define);
// 初始化控件
initView();
//初始化数据
initData();
// 绑定券页面
bindPageData();
// 注册监听
registerListener();
}
/**
* 初始化控件
*/
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.vp_coupon);
img_tabLine = (ImageView) findViewById(R.id.img_tabLine);
tv_not_spending = (TextView) findViewById(R.id.tv_not_spending);
tv_yet_spent = (TextView) findViewById(R.id.tv_yet_spent);
tv_not_spending.setTextColor(getResources().getColor(R.color.textcolor_mine_red));
}
/**
* 初始化数据
*/
private void initData() {
getWindowManager().getDefaultDisplay().getMetrics(dm);
tabWidth = dm.widthPixels / 2;
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.tab_line);
// /Bitmap b = Bitmap.createBitmap(bitmap, 0, 0, tabWidth, 8);
// 设置tab的宽度和高度
Bitmap bitmap2 = Bitmap.createScaledBitmap(bitmap, tabWidth, 8, true);
img_tabLine.setImageBitmap(bitmap2);
}
/**
* 绑定我的券页面及数据
*/
private void bindPageData() {
adapter = new MyCouponFragmentAdapter(getSupportFragmentManager());
mViewPager.setAdapter(adapter);
}
/**
* 注册事件监听
*/
private void registerListener() {
tv_not_spending.setOnClickListener(this);
tv_yet_spent.setOnClickListener(this);
mViewPager.setOnPageChangeListener(new PageListener());
}
@Override
public void onClick(View v) {
switch (v.getId()) {
// 未消费
case R.id.tv_not_spending: {
resetTab();
tv_not_spending.setTextColor(getResources().getColor(R.color.textcolor_mine_red));
mViewPager.setCurrentItem(0);
}
break;
// 已消费
case R.id.tv_yet_spent: {
resetTab();
tv_yet_spent.setTextColor(getResources().getColor(R.color.textcolor_mine_red));
mViewPager.setCurrentItem(1);
}
break;
default:
break;
}
}
/**
* viewPager滑动监听
*/
public class PageListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// new一个矩阵
Matrix matrix = new Matrix();
// 设置激活条的最终位置
switch (arg0) {
case 0:
// 使用set直接设置到那个位置
matrix.setTranslate(0, 0);
break;
case 1:
matrix.setTranslate(tabWidth, 0);
break;
}
// 在滑动的过程中，计算出激活条应该要滑动的距离
float t = (tabWidth) * arg1;
// 使用post追加数值
matrix.postTranslate(t, 0);
img_tabLine.setImageMatrix(matrix);
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0: {
resetTab();
tv_not_spending.setTextColor(getResources().getColor(R.color.textcolor_mine_red));
mViewPager.setCurrentItem(0);
}
break;
case 1: {
resetTab();
tv_yet_spent.setTextColor(getResources().getColor(R.color.textcolor_mine_red));
mViewPager.setCurrentItem(1);
}
break;
default:
break;
}
}
}
/**
* 文字全部重置为默认状态
*/
private void resetTab() {
tv_not_spending.setTextColor(getResources().getColor(R.color.details));
tv_yet_spent.setTextColor(getResources().getColor(R.color.details));
}
}现在google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。使用的 android studio进行开发的，所以引用TabLayout很简单，只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。
下面使用TabLayout来实现以上功能，效果图如下：
1，界面布局TabLayout+ViewPager,如下：
/**
* TabLayout导航
*/
public class TabActivity extends Activity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private List mTitle = new ArrayList();
private List mDatas = new ArrayList();
private MyPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_tab);
mTabLayout = (TabLayout) findViewById(R.id.tab_FindFragment_title);
mViewPager = (ViewPager) findViewById(R.id.vp_FindFragment_pager);
initDatas();
mAdapter = new MyPagerAdapter();
//1，设置Tab的标题来自PagerAdapter.getPageTitle()
mTabLayout.setTabsFromPagerAdapter(mAdapter);
//2，设置TabLayout的选项卡监听
/*mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});*/
//3，设置TabLayout.TabLayoutOnPageChangeListener监听给ViewPager
/*TabLayout.TabLayoutOnPageChangeListener listener =
new TabLayout.TabLayoutOnPageChangeListener(mTabLayout);
mViewPager.addOnPageChangeListener(listener);*/
//4，viewpager设置适配器
mViewPager.setAdapter(mAdapter);
//这个方法是addOnPageChangeListener和setOnTabSelectedListener的封装。代替2,3步骤
mTabLayout.setupWithViewPager(mViewPager);
}
class MyPagerAdapter extends PagerAdapter {
@Override
public CharSequence getPageTitle(int position) {
return mTitle.get(position);
}
@Override
public int getCount() {
return mDatas.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(View container, int position) {
TextView tv = new TextView(TabActivity.this);
tv.setTextSize(24.f);
tv.setPadding(15,10,15,10);
tv.setText(mDatas.get(position));
((ViewPager) container).addView(tv);
return tv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
}
public void initDatas(){
mTitle.add("热门推荐");
mTitle.add("热门收藏");
mTitle.add("本月热榜");
mTitle.add("今日热榜");
mDatas.add("热门推荐");
mDatas.add("热门收藏");
mDatas.add("本月热榜");
mDatas.add("今日热榜");
}
} 比如：
app:tabTextAppearance = "@style/tabLayoutTextSize"
这样是不是很简单。
至此，基本功能已实现，如有疑问欢迎留言或加群讨论：196615382，如需源码，点击下载。。。