效果图
1.布局文件 avtivity_tab.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=""xmlns:tools=""android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#ffffff"android:orientation="vertical" ><com.ab.view.sliding.AbBottomTabViewandroid:id="@+id/mBottomTabView"android:layout_width="fill_parent"android:layout_height="fill_parent" /></RelativeLayout>
使用自定义的View
com.ab.view.sliding.AbBottomTabView的代码是
public class AbBottomTabView extends LinearLayout {/** The context. */private Context context;/** tab的线性布局. */private LinearLayout mTabLayout = null;/** The m view pager. */private ViewPager mViewPager;/** The m listener. */private ViewPager.OnPageChangeListener mListener;/** tab的列表. */private ArrayList<TextView> tabItemList = null;/** 内容的View. */private ArrayList<Fragment> pagerItemList = null;/** tab的文字. */private List<String> tabItemTextList = null;/** tab的图标. */private List<Drawable> tabItemDrawableList = null;/** 当前选中编号. */private int mSelectedTabIndex = 0;/** 内容区域的适配器. */private AbFragmentPagerAdapter mFragmentPagerAdapter = null;/** tab的背景. */private int tabBackgroundResource = -1;/** tab的文字大小. */private int tabTextSize = 15;/** tab的文字颜色. */private int tabTextColor = Color.BLACK;/** tab的选中文字颜色. */private int tabSelectColor = Color.WHITE;/** The m tab click listener. */private OnClickListener mTabClickListener = new OnClickListener() {public void onClick(View view) {AbTabItemView tabView = (AbTabItemView)view;setCurrentItem(tabView.getIndex());}};public AbBottomTabView(Context context, AttributeSet attrs) {super(context, attrs);this.context = context;this.setOrientation(LinearLayout.VERTICAL);//this.setBackgroundColor(Color.rgb(255, 255, 255));mTabLayout = new LinearLayout(context);mTabLayout.setOrientation(LinearLayout.HORIZONTAL);mTabLayout.setGravity(Gravity.CENTER);//内容的View的适配mViewPager = new ViewPager(context);//手动创建的ViewPager,必须调用setId()方法设置一个idmViewPager.setId(1985);pagerItemList = new ArrayList<Fragment>();this.addView(mViewPager,new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,0,1));addView(mTabLayout, new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));//定义Tab栏tabItemList = new ArrayList<TextView>();tabItemTextList = new ArrayList<String>();tabItemDrawableList = new ArrayList<Drawable>();//要求必须是FragmentActivity的实例if(!(this.context instanceof FragmentActivity)){}FragmentManager mFragmentManager = ((FragmentActivity)this.context).getFragmentManager();mFragmentPagerAdapter = new AbFragmentPagerAdapter(mFragmentManager, pagerItemList);mViewPager.setAdapter(mFragmentPagerAdapter);mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());mViewPager.setOffscreenPageLimit(3);}public class MyOnPageChangeListener implements OnPageChangeListener{/* (non-Javadoc) * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrollStateChanged(int) */@Overridepublic void onPageScrollStateChanged(int arg0) {}/* (non-Javadoc) * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int) */@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}/* (non-Javadoc) * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int) */@Overridepublic void onPageSelected(int arg0) {setCurrentItem(arg0);}}/** * 描述：设置显示哪一个. * * @param index the new current item */public void setCurrentItem(int index) {if (mViewPager == null) {throw new IllegalStateException("ViewPager has not been bound.");}mSelectedTabIndex = index;final int tabCount = mTabLayout.getChildCount();for (int i = 0; i < tabCount; i++) {final AbTabItemView child = (AbTabItemView)mTabLayout.getChildAt(i);final boolean isSelected = (i == index);child.setSelected(isSelected);if (isSelected) {child.setTabTextColor(tabSelectColor);if(tabBackgroundResource!=-1){child.setTabBackgroundResource(tabBackgroundResource);}if(tabItemDrawableList.size() >= tabCount*2){child.setTabCompoundDrawables(null, tabItemDrawableList.get(index*2+1), null, null);}else if(tabItemDrawableList.size() >= tabCount){child.setTabCompoundDrawables(null, tabItemDrawableList.get(index), null, null);}mViewPager.setCurrentItem(index);}else{if(tabBackgroundResource!=-1){child.setBackgroundDrawable(null);}if(tabItemDrawableList.size() >= tabCount*2){child.setTabCompoundDrawables(null, tabItemDrawableList.get(i*2), null, null);}child.setTabTextColor(tabTextColor);}}}/*** 描述：设置一个外部的监听器.** @param listener the new on page change listener*/public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {mListener = listener;}/* (non-Javadoc) * @see android.widget.LinearLayout#onMeasure(int, int) */@Overridepublic void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);}/** * 描述：设置单个tab的背景选择器. * * @param resid the new tab background resource */public void setTabBackgroundResource(int resid) {tabBackgroundResource = resid;}/** * 描述：设置Tab的背景. * * @param resid the new tab layout background resource */public void setTabLayoutBackgroundResource(int resid) {this.mTabLayout.setBackgroundResource(resid);}public void setTabBackgroundColor(int color){mTabLayout.setBackgroundColor(color);}/** * Gets the tab text size. * * @return the tab text size */public int getTabTextSize() {return tabTextSize;}/** * Sets the tab text size. * * @param tabTextSize the new tab text size */public void setTabTextSize(int tabTextSize) {this.tabTextSize = tabTextSize;}/** * 描述：设置tab文字的颜色. * * @param tabColor the new tab text color */public void setTabTextColor(int tabColor) {this.tabTextColor = tabColor;}/** * 描述：设置选中的颜色. * * @param tabColor the new tab select color */public void setTabSelectColor(int tabColor) {this.tabSelectColor = tabColor;}/*** 描述：创造一个Tab.** @param text the text* @param index the index*/private void addTab(String text, int index) {addTab(text,index,null);}/*** 描述：创造一个Tab.** @param text the text* @param index the index* @param top the top*/private void addTab(String text, int index,Drawable top) {AbTabItemView tabView = new AbTabItemView(this.context);if(top!=null){tabView.setTabCompoundDrawables(null, top, null, null);}tabView.setTabTextColor(tabTextColor);tabView.setTabTextSize(tabTextSize);tabView.init(index,text);tabItemList.add(tabView.getTextView());tabView.setOnClickListener(mTabClickListener);mTabLayout.addView(tabView, new LayoutParams(0,LayoutParams.WRAP_CONTENT,1));}/*** 描述：tab有变化刷新.*/public void notifyTabDataSetChanged() {mTabLayout.removeAllViews();tabItemList.clear();final int count = mFragmentPagerAdapter.getCount();for (int i = 0; i < count; i++) {if(tabItemDrawableList.size()>=count*2){addTab(tabItemTextList.get(i), i,tabItemDrawableList.get(i*2));}else if(tabItemDrawableList.size()>=count){addTab(tabItemTextList.get(i), i,tabItemDrawableList.get(i));}else{addTab(tabItemTextList.get(i), i);}}if (mSelectedTabIndex > count) {mSelectedTabIndex = count – 1;}setCurrentItem(mSelectedTabIndex);requestLayout();}/*** 描述：增加一组内容与tab.** @param tabTexts the tab texts* @param fragments the fragments*/public void addItemViews(List<String> tabTexts,List<Fragment> fragments){tabItemTextList.addAll(tabTexts);pagerItemList.addAll(fragments);mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：增加一组内容与tab附带顶部图片. * * @param tabTexts the tab texts * @param fragments the fragments * @param drawables the drawables */public void addItemViews(List<String> tabTexts,List<Fragment> fragments,List<Drawable> drawables){tabItemTextList.addAll(tabTexts);pagerItemList.addAll(fragments);tabItemDrawableList.addAll(drawables);mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：增加一个内容与tab. * * @param tabText the tab text * @param fragment the fragment */public void addItemView(String tabText,Fragment fragment){tabItemTextList.add(tabText);pagerItemList.add(fragment);mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：增加一个内容与tab. * * @param tabText the tab text * @param fragment the fragment * @param drawableNormal the drawable normal * @param drawablePressed the drawable pressed */public void addItemView(String tabText,Fragment fragment,Drawable drawableNormal,Drawable drawablePressed){tabItemTextList.add(tabText);pagerItemList.add(fragment);tabItemDrawableList.add(drawableNormal);tabItemDrawableList.add(drawablePressed);mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：删除某一个. * * @param index the index */public void removeItemView(int index){mTabLayout.removeViewAt(index);pagerItemList.remove(index);tabItemList.remove(index);tabItemDrawableList.remove(index);mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：删除所有. */public void removeAllItemViews(){mTabLayout.removeAllViews();pagerItemList.clear();tabItemList.clear();tabItemDrawableList.clear();mFragmentPagerAdapter.notifyDataSetChanged();notifyTabDataSetChanged();}/** * 描述：获取这个View的ViewPager. * * @return the view pager */public ViewPager getViewPager() {return mViewPager;}/** * 描述：设置每个tab的边距. * * @param left the left * @param top the top * @param right the right * @param bottom the bottom */public void setTabPadding(int left, int top, int right, int bottom) {for(int i = 0;i<tabItemList.size();i++){TextView tv = tabItemList.get(i);tv.setPadding(left, top, right, bottom);}}}每一个Item 自定义文件是 public class AbTabItemView extends LinearLayout { /** The m context. */ private Context mContext; //当前的索引 /** The m index. */ private int mIndex; //包含的TextView /** The m text view. */ private TextView mTextView; /** * Instantiates a new ab tab item view. * * @param context the context */ public AbTabItemView(Context context) { this(context,null); } /** * Instantiates a new ab tab item view. * * @param context the context * @param attrs the attrs */ public AbTabItemView(Context context, AttributeSet attrs) { super(context, attrs); this.setOrientation(LinearLayout.HORIZONTAL); this.mContext = context; mTextView = new TextView(context); mTextView.setGravity(Gravity.CENTER_HORIZONTAL); mTextView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT)); mTextView.setFocusable(true);// mTextView.setPadding(10, 0, 10, 0); mTextView.setSingleLine();// mTextView.setBackgroundResource(R.drawable.actionbar_bg); this.addView(mTextView); } /** * Inits the. * * @param index the index * @param text the text */ public void init(int index,String text) { mIndex = index; mTextView.setText(text); } /** * Gets the index. * * @return the index */ public int getIndex() { return mIndex; } /** * Gets the text view. * * @return the text view */ public TextView getTextView() { return mTextView; } /** * 描述：设置文字大小. * * @param tabTextSize the new tab text size */ public void setTabTextSize(int tabTextSize) { mTextView.setTextSize(tabTextSize); } /** * 描述：设置文字颜色. * * @param tabColor the new tab text color */ public void setTabTextColor(int tabColor) { mTextView.setTextColor(tabColor); } /** * 描述：设置文字图片. * * @param left the left * @param top the top * @param right the right * @param bottom the bottom */ public void setTabCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) { if(left!=null){ left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight()); } if(top!=null){ top.setBounds(0, 0, top.getIntrinsicWidth(), top.getIntrinsicHeight()); } if(right!=null){ right.setBounds(0, 0, right.getIntrinsicWidth(), right.getIntrinsicHeight()); } if(bottom!=null){ bottom.setBounds(0, 0, bottom.getIntrinsicWidth(), bottom.getIntrinsicHeight()); } mTextView.setCompoundDrawables(left, top, right, bottom); } /** * 描述：设置tab的背景选择. * * @param resid the new tab background resource */ public void setTabBackgroundResource(int resid) { this.setBackgroundResource(resid); } /** * 描述：设置tab的背景选择. * * @param d the new tab background drawable */ public void setTabBackgroundDrawable(Drawable d) { this.setBackgroundDrawable(d); } }适配器文件<pre name="code" class="java"> AbFragmentPagerAdapter public class AbFragmentPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> mFragmentList = null;public AbFragmentPagerAdapter(FragmentManager mFragmentManager,ArrayList<Fragment> fragmentList) {super(mFragmentManager);mFragmentList = fragmentList;}@Overridepublic int getCount() {return mFragmentList.size();}@Overridepublic Fragment getItem(int position) {Fragment fragment = null;if (position < mFragmentList.size()){fragment = mFragmentList.get(position);}else{fragment = mFragmentList.get(0);}return fragment;}}最后 Activity public class TabActivity extends FragmentActivity {private AbBottomTabView mBottomTabView;private List<Drawable> tabDrawables = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab);mBottomTabView = (AbBottomTabView) findViewById(R.id.mBottomTabView);mBottomTabView.getViewPager().setOffscreenPageLimit(5);FragmentLoad page1 = new FragmentLoad();FragmentLoad2 page2 = new FragmentLoad2();FragmentRefresh page3 = new FragmentRefresh();FragmentLoad2 page4 = new FragmentLoad2();List<Fragment> mFragments = new ArrayList<Fragment>();mFragments.add(page1);mFragments.add(page2);mFragments.add(page3);mFragments.add(page4);List<String> tabTexts = new ArrayList<String>();tabTexts.add("精选");tabTexts.add("发现");tabTexts.add("广场");tabTexts.add("我的");// 设置样式mBottomTabView.setTabTextColor(Color.BLACK);// 选中后的字体的颜色mBottomTabView.setTabSelectColor(Color.rgb(155, 190, 79));//mBottomTabView.setTabBackgroundResource(R.drawable.tab_bg2);mBottomTabView.setTabBackgroundColor(Color.WHITE);//mBottomTabView.setTabLayoutBackgroundResource(R.drawable.tablayout_bg2);// 注意图片的顺序tabDrawables = new ArrayList<Drawable>();tabDrawables.add(this.getResources().getDrawable(R.drawable.collect_normal));tabDrawables.add(this.getResources().getDrawable(R.drawable.collect_pressed));tabDrawables.add(this.getResources().getDrawable(R.drawable.find_normal));tabDrawables.add(this.getResources().getDrawable(R.drawable.find_pressed));tabDrawables.add(this.getResources().getDrawable(R.drawable.group_normal));tabDrawables.add(this.getResources().getDrawable(R.drawable.group_pressed));tabDrawables.add(this.getResources().getDrawable(R.drawable.mine_normal));tabDrawables.add(this.getResources().getDrawable(R.drawable.mine_pressed));// 演示增加一组mBottomTabView.addItemViews(tabTexts, mFragments, tabDrawables);mBottomTabView.setTabPadding(2,2, 2, 2);}}源码
，人之所以有一张嘴，而有两只耳朵，原因是听的要比说的多一倍。
