其實現在標簽欄大家都用TabLayout來實現了，但是諸如官方的控件和第三方的一些控件貌似都不能設置一屏最多顯示的個數，而有時候我們可能在項目中需要做到這樣的效果，所以就自己定義一個用來簡單使用。
要想有左右滑動的功能，那么我們就可以自定義一個view繼承HorizontalScrollView，官方也是這么做的。然后我們在里面包裹一個RadioGroup，再動態添加RadioButton進去就可以了，這里使用RadioButton是為了簡單實現選中效果的切換。因此我們先寫一個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">
設置上字體顏色的選中和未選效果。
然后在自定義view中動態添加：
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我們可以根據屏幕寬度來計算，比如想要一屏最多顯示四個
indicatorWidth = ClientUtils.getScreenX(context) / 4;
以及我們可以關聯ViewPager，顯示聯動效果。
初始化點擊事件：
/** * 初始化點擊事件 */
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);
}
});
}
}
});
}
關聯ViewPager
/** * 關聯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) {
}
}
然后我們只需要在外界調用mCustomTabLayout.setUpWithViewPager();就可以了。
完整代碼如下：
public class CustomTabLayout extends HorizontalScrollView {
private LayoutInflater mInflater;
private RadioGroup mRadioGroup;
private int indicatorWidth;// 每個標簽的寬度
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);
}
//設定初始選中 和滑動位置
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);
}
}
}
/** * 關聯ViewPager */
public void setUpWithViewPager() {
if (mPageChangeListener == null) {
mPageChangeListener = new CustomTabLayoutOnPageChangeListener();
}
mViewPager.addOnPageChangeListener(mPageChangeListener);
}
/** * 初始化點擊事件 */
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>
實際效果圖如下：
Paste_Image.png
