其實(shí)現(xiàn)在標(biāo)簽欄大家都用TabLayout來實(shí)現(xiàn)了，但是諸如官方的控件和第三方的一些控件貌似都不能設(shè)置一屏最多顯示的個(gè)數(shù)，而有時(shí)候我們可能在項(xiàng)目中需要做到這樣的效果，所以就自己定義一個(gè)用來簡(jiǎn)單使用。

要想有左右滑動(dòng)的功能，那么我們就可以自定義一個(gè)view繼承HorizontalScrollView，官方也是這么做的。然后我們?cè)诶锩姘粋€(gè)RadioGroup，再動(dòng)態(tài)添加RadioButton進(jìn)去就可以了，這里使用RadioButton是為了簡(jiǎn)單實(shí)現(xiàn)選中效果的切換。因此我們先寫一個(gè)RadioButton布局:

<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"  
             android:layout_width="wrap_content"    
             android:layout_height="match_parent"    
             android:button="@null"          
             android:gravity="center"       
             android:textColor="@drawable/radiobtn_more_checktype_bg">

設(shè)置上字體顏色的選中和未選效果。
然后在自定義view中動(dòng)態(tài)添加：

  mRadioGroup.removeAllViews();
  RadioButton rb = null;
  for (int i = 0; i < mArticleTypeList.size(); i++) {    
        rb = (RadioButton) mInflater.inflate(R.layout.item_radiogroup, this,false);        
        rb.setId(i);    
        rb.setText(title.get(i).getName());    
        rb.setBackground(null);    
        rb.setGravity(Gravity.CENTER);    
        rb.setLayoutParams(new LayoutParams(indicatorWidth, 
                  LayoutParams.MATCH_PARENT));    
        mRadioGroup.addView(rb);
  }

indicatorWidth我們可以根據(jù)屏幕寬度來計(jì)算，比如想要一屏最多顯示四個(gè)
indicatorWidth = ClientUtils.getScreenX(context) / 4;

以及我們可以關(guān)聯(lián)ViewPager，顯示聯(lián)動(dòng)效果。
初始化點(diǎn)擊事件：

    /** * 初始化點(diǎn)擊事件 */
    private void setListener() {    
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { 
             @Override        
             public void onCheckedChanged(RadioGroup group, final int checkedId) {     
                   if (mRadioGroup.getChildAt(checkedId) != null) {       
                           final ArticleTypeListInfoBean bean = mArticleTypeList.get(checkedId);
                           RadioButton tempButton = (RadioButton) findViewById(checkedId);                
                           tempButton.setOnClickListener(new OnClickListener() {   
                               @Override
                               public void onClick(View v) { 
                               mViewPager.setCurrentItem(checkedId, false);  
                                }                
                          });
                  }       
           }    
    });
}

關(guān)聯(lián)ViewPager

/** * 關(guān)聯(lián)ViewPager */
public void setUpWithViewPager() {
    if (mPageChangeListener == null) {
        mPageChangeListener = new
        CustomTabLayoutOnPageChangeListener(); 
 }    
mViewPager.addOnPageChangeListener(mPageChangeListener);}

class CustomTabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
    @Override
    public void onPageSelected(int position) {
        checkChild(position);
        if (position == mArticleTypeList.size() - 2) { 
           scrollTo(indicatorWidth, 0); 
       }
        if (position == 1) {
            scrollTo(-indicatorWidth, 0);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
}

然后我們只需要在外界調(diào)用mCustomTabLayout.setUpWithViewPager();就可以了。

完整代碼如下：

public class CustomTabLayout extends HorizontalScrollView {
    private LayoutInflater mInflater;
    private RadioGroup mRadioGroup;
    private int indicatorWidth;// 每個(gè)標(biāo)簽的寬度
    private List<ArticleTypeListInfoBean> mArticleTypeList;
    private ViewPager mViewPager;

    private CustomTabLayoutOnPageChangeListener mPageChangeListener; 
    public void initLayout(ViewPager mViewPager, List<ArticleTypeListInfoBean>            title, Context context, String contentType) {
        this.mViewPager = mViewPager;
        this.mArticleTypeList = title;
        mInflater = LayoutInflater.from(context);
        indicatorWidth = ClientUtils.getScreenX(context) / 4;
        init(title, contentType);
    }

    public CustomTabLayout(Context context) {
        super(context);
    } 

   public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private void init(List<ArticleTypeListInfoBean> title, String contentType) {
        mRadioGroup = (RadioGroup) this.findViewById(R.id.radio_group);
        initItemView(title, contentType);
       setListener();
    }

    public void checkChild(int postion) {
        mRadioGroup.check(postion);
    }

    private void initItemView(List<ArticleTypeListInfoBean> title, String contentType) {
        mRadioGroup.removeAllViews();
        RadioButton rb = null;
        for (int i = 0; i < mArticleTypeList.size(); i++) {
            rb = (RadioButton) mInflater.inflate(R.layout.item_radiogroup, this,false);
            rb.setId(i);
            rb.setText(title.get(i).getName());
            rb.setBackground(null);
            rb.setGravity(Gravity.CENTER);
            rb.setLayoutParams(new LayoutParams(indicatorWidth, LayoutParams.MATCH_PARENT));
            mRadioGroup.addView(rb);
        } 
       //設(shè)定初始選中 和滑動(dòng)位置
        for (int i = 0; i < mArticleTypeList.size(); i++) { 
           if (mArticleTypeList.get(i).getName().equals(contentType)) { 
               mRadioGroup.check(i); 
               if (i == mArticleTypeList.size() - 1) {
                    new Handler().postDelayed(new Runnable() {
                        @Override 
                       public void run() {
                            scrollTo(indicatorWidth, 0);
                        }
                    }, 5);
                } 
               mViewPager.setCurrentItem(i);
            }
        } 
   } 

   /**     * 關(guān)聯(lián)ViewPager     */ 
   public void setUpWithViewPager() {
        if (mPageChangeListener == null) {
            mPageChangeListener = new CustomTabLayoutOnPageChangeListener();
        }
        mViewPager.addOnPageChangeListener(mPageChangeListener);
    }
    /**     * 初始化點(diǎn)擊事件     */
    private void setListener() {  
      mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, final int checkedId) {
                if (mRadioGroup.getChildAt(checkedId) != null) { 
                   final ArticleTypeListInfoBean bean = mArticleTypeList.get(checkedId);
                    RadioButton tempButton = (RadioButton) findViewById(checkedId);
                    tempButton.setOnClickListener(new OnClickListener() {  
                      @Override
                        public void onClick(View v) { 
                           mViewPager.setCurrentItem(checkedId, false);                        }
                    });
                } 
           }
        }); 
   } 

   class CustomTabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageSelected(int position) { 
           checkChild(position);
            if (position == mArticleTypeList.size() - 2) { 
               scrollTo(indicatorWidth, 0);
            }
            if (position == 1) {
                scrollTo(-indicatorWidth, 0);
            }
        }
        @Override 
       public void onPageScrollStateChanged(int state) {

        } 

       @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
    }}

在布局用引用：

<CustomTabLayout
    android:id="@+id/custom_tablayout"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/dip_forty_one_point_four"
    android:layout_gravity="center_vertical"
    android:orientation="horizontal"
    android:scrollbars="none">

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"  
        android:layout_height="match_parent"   
        android:background="@color/white"
        android:orientation="horizontal"/>
</CustomTabLayout>

實(shí)際效果圖如下：

Paste_Image.png