android自定义tabhost实现选项卡功能

本例子借鉴与网上的部分内容，目的在于实现选项卡功能，自定义的添加选项卡，自动生成选项条，并且可以自由设置选项卡颜色，设置字体大小，大部分功能都集成到自定义的类里面，我们以后碰到此类功能，只需要调用这个类即可

运行效果截图：

（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中绑定控件，调用类的方法，并且设置适配器内容显示

//fragment效果，参考网址：https://blog.csdn.net/qq_33425116/article/details/52599818

//绑定控件
 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);
    }
}