本例子借鉴与网上的部分内容,目的在于实现选项卡功能,自定义的添加选项卡,自动生成选项条,并且可以自由设置选项卡颜色,设置字体大小,大部分功能都集成到自定义的类里面,我们以后碰到此类功能,只需要调用这个类即可
运行效果截图:
(1)新建一个xml,用于展示tabhost,注意红色部分为当前项目包名,需要根据实际情况修改:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
>
<com.example.administrator.testb.TabsView
android:id="@+id/tabslayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
(2)新建一个适配器的类MyAdapter,这个类用于实现选项卡滑动的效果
public class MyAdapter extends PagerAdapter {
private List<View> list;
public MyAdapter(List<View> list) {
this.list = list;
}
@Override
public int getCount() {
if (list != null && list.size() > 0) {
return list.size();
} else {
return 0;
}
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
(3)在MainActivity中绑定控件,调用类的方法,并且设置适配器内容显示
//绑定控件
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabs = (TabsView) findViewById(R.id.tabslayout);
views = new ArrayList<View>();
View view1 = getLayoutInflater().inflate(R.layout.item_one,null);
View view2 = getLayoutInflater().inflate(R.layout.item_two,null);
View view3 = getLayoutInflater().inflate(R.layout.item_three,null);
View view4 = getLayoutInflater().inflate(R.layout.item_four,null);
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
//设置适配器
adapter = new MyAdapter(views);
mViewPager.setAdapter(adapter);
//初始化选项卡
mTabs.setTabs("选项卡1","选项卡2","选项卡3","选项卡4");
mTabs.setOnTabsItemClickListener(new TabsView.OnTabsItemClickListener() {
@Override
public void onClick(View view, int position) {
mViewPager.setCurrentItem(position, true);
}
});
//选项卡事件监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
mTabs.setCurrentTab(position, true);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
(5)自定义的类 TabsView, 注意在xml中引用此类需要修改包名
public class TabsView extends LinearLayout {
private int mSelectedColor = 0xff000000;// 选中的字体颜色
private int mNotSelectedColor = ((mSelectedColor >>> 25) << 24) | (mSelectedColor & 0x00ffffff);// 未选中的字体颜色
private int mIndicatorColor = 0xff00BFFF;// 指示器的颜色
private LinearLayout mTabsContainer;// 放置tab的容器
private View mIndicator, mBottomLine;// 指示器和底部横线
private OnTabsItemClickListener listener;
public TabsView(Context context) {
this(context, null);
}
public TabsView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(VERTICAL);
// 初始化容器
mTabsContainer = new LinearLayout(getContext());
mTabsContainer.setOrientation(HORIZONTAL);
mTabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
addView(mTabsContainer);
// 初始化指示器
mIndicator = new View(getContext());
mIndicator.setBackgroundColor(mIndicatorColor);
mIndicator.setLayoutParams(new LayoutParams(300, 8));// 先任意设置宽度
addView(mIndicator);
// 初始化底部横线
mBottomLine = new View(getContext());
mBottomLine.setBackgroundColor(mIndicatorColor);
mBottomLine.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 4));
addView(mBottomLine);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
resetIndicator();
}
/**
* 重新设置指示器
*/
private void resetIndicator() {
int childCount = mTabsContainer.getChildCount();
ViewGroup.LayoutParams layoutParams = mIndicator.getLayoutParams();
if (childCount <= 0) {
layoutParams.width = 0;
} else {
layoutParams.width = getWidth() / childCount;
}
mIndicator.setLayoutParams(layoutParams);
// mIndicator.setX(0f);
}
/**
* 设置选项卡
*
* @param titles
*/
public void setTabs(String... titles) {
mTabsContainer.removeAllViews();
if (titles != null) {
for (int i = 0; i < titles.length; i++) {
TextView textView = new TextView(getContext());
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 22);
// textView.setTextColor(mNotSelectedColor);
textView.setText(titles[i]);
textView.setClickable(true);
textView.setPadding(0, 10, 0, 10);
textView.setGravity(Gravity.CENTER);
textView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f));
textView.setTag(i);
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
setCurrentTab(position, true);
if (listener != null) {
listener.onClick(v, position);
}
}
});
mTabsContainer.addView(textView);
}
// 初始化,默认选中第一个
setCurrentTab(0, false);
// 设置指示器
post(new Runnable() {
@Override
public void run() {
// 设置指示器
resetIndicator();
}
});
}
}
/**
* 设置当前的tab
*
* @param position
*/
public void setCurrentTab(int position, boolean anim) {
int childCount = mTabsContainer.getChildCount();
if (position < 0 || position >= childCount) {
return;
}
// 设置每个tab的状态
for (int i = 0; i < childCount; i++) {
TextView childView = (TextView) mTabsContainer.getChildAt(i);
if (i == position) {
childView.setTextColor(mSelectedColor);
} else {
childView.setTextColor(mNotSelectedColor);
}
}
// 指示器的移动
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mIndicator, "x", position * mIndicator.getWidth());
if (anim) {
objectAnimator.setDuration(200).start();
} else {
objectAnimator.setDuration(0).start();
}
}
/**
* Tabs点击的监听事件
*
* @param listener
*/
public void setOnTabsItemClickListener(OnTabsItemClickListener listener) {
this.listener = listener;
}
public interface OnTabsItemClickListener {
public void onClick(View view, int position);
}
}