其实现在标签栏大家都用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
网友评论