使用 ViewPager 和 RadioGroup 封装的一个导航控件

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import java.lang.reflect.Field;
import java.util.List;

/**
 * 使用 ViewPager 和 RadioGroup 封装的一个导航控件<p/>
 * 有2种布局方式:<br/>
 * 1. ViewPager +　图标在上文本在下的tab 栏<br/>
 * 2. 仅有文本的tab + ViewPager<br/>
 * 只需要调用 viewPagerIndicator.bind(fragments, indicatorEntityList) 方法<br/>
 * 其中如果indicatorEntityList 中如果传入图标,就是布局方式1,否则就是布局方式2<br/>
 * <br/> Fragment需要用v4的 ,Activity需要继承自 FragmentActivity
 */
public class ViewPagerIndicator extends LinearLayout implements RadioGroup.OnCheckedChangeListener {

    /**
     * 需要的实体类<p/>
     * 如果只设置tab的名字, 则不会显示图标<br/>
     * 如果设置了图标,会显示对应的图标
     */
    public static class IndicatorEntity {
        /** tab的名字 */
        String indicator;
        /** tab的选中状态和非选中状态的图标 */
        int selectedRes, unSelectedRes;
        boolean isShowIconEnable;

        /**
         * @param indicator tab的名字
         */
        public IndicatorEntity(String indicator) {
            this.indicator = indicator;
            isShowIconEnable = false;
        }

        /**
         * @param indicator     tab的名字
         * @param selectedRes   tab的选中状态的图标
         * @param unSelectedRes tab的非选中状态的图标
         */
        public IndicatorEntity(String indicator, int selectedRes, int unSelectedRes) {
            this.indicator = indicator;
            this.selectedRes = selectedRes;
            this.unSelectedRes = unSelectedRes;
            isShowIconEnable = true;
        }
    }

    /** 选中和非选中tab的前景色, 也就是字体颜色 */
    public static final int selected_fg_Color = 0xff0000ff, unselected_fg_Color = 0xFF000000;
    /** 选中和非选中tab的背景色 */
    public static final int selected_bg_Color = 0xff00ff00, unselected_bg_Color = 0xcccccccc;
    /** 分隔线的颜色 */
    public static final int divide_line_color = 0xFF000000;
    /** 指示条的颜色 */
    public static final int indicator_color = 0xFF0000FF;

    // 是否允许ViewPager 滑动
    private boolean scrollable = true;
    // radioGroup 即tab 栏的高度,可以使用 DimenUtil 传入dp单位的高度
    private int radioGroupShowIconHeight = 54 * 3;
    private int radioGroupGoneIconHeight = 36 * 3;
    private int radioGroupHeight = radioGroupShowIconHeight;
    private Context context;
    // 屏幕宽度
    private int mScreenWidth;
    private RadioGroup mRadioGroup;
    private MyViewPager mViewPager;
    private List<IndicatorEntity> indicatorEntityList;
    // 是否显示图标
    private boolean isShowIconEnable = true;

    /** 上一次的指示条的位置 */
    private int lastSelectedIndex;
    /** 指示条控件 */
    private View indicatorView;

    public ViewPagerIndicator(Context context) {
        this(context, null);
    }

    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        this.setOrientation(VERTICAL);
        // 获取屏幕宽度
        DisplayMetrics outMetrics = new DisplayMetrics();
        ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;
    }

    /** 设置是否允许ViewPager 滑动 */
    public void setScrollable(boolean scrollable) {
        this.scrollable = scrollable;
    }

    /**
     * 绑定页面<br/>
     * fragments 和 indicatorEntityList 的数量必须一致
     * <p/>
     *
     * @param fragments           绑定的fragment
     * @param indicatorEntityList 绑定的tab的名字或者图标
     */
    public void bind(List<Fragment> fragments, List<IndicatorEntity> indicatorEntityList) {
        if (fragments == null || fragments.size() <= 0 || indicatorEntityList == null || indicatorEntityList.size() <= 0 || fragments.size() != indicatorEntityList.size())
            return;
        this.indicatorEntityList = indicatorEntityList;
        isShowIconEnable = indicatorEntityList.get(0).isShowIconEnable;
        initViews();
        mViewPager.setFragments(fragments);
        for (int i = 0; i < indicatorEntityList.size(); i++) {
            mRadioGroup.addView(generateRadioButton(i));
        }
        //设置第一个tab为选中状态
        ((RadioButton) mRadioGroup.getChildAt(0)).setChecked(true);
        mViewPager.setCurrentItem(0);
    }

    /** 分隔线 */
    private View generateDivideLine() {
        View view = new View(context);
        view.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1));
        view.setBackgroundColor(divide_line_color);
        return view;
    }

    private void initViewPager() {
        mViewPager = new MyViewPager(context);
        LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
        layoutParams.weight = 1;
        mViewPager.setLayoutParams(layoutParams);
        mViewPager.setId((int) (System.currentTimeMillis() % 10000)); // Id 必须设置,不然会有 NotFoundException 异常
        mViewPager.addOnPageChangeListener(mOnPageChangeListener);
    }

    private void initRadioGroup() {
        radioGroupHeight = isShowIconEnable ? radioGroupShowIconHeight : radioGroupGoneIconHeight;
        mRadioGroup = new RadioGroup(context);
        mRadioGroup.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, radioGroupHeight));
        mRadioGroup.setOrientation(HORIZONTAL);
        mRadioGroup.setOnCheckedChangeListener(this);
    }

    /** 初始化需要添加的添加控件以及事件 */
    private void initViews() {
        initViewPager();
        initRadioGroup();
        if (isShowIconEnable) {
            this.addView(mViewPager);
            this.addView(generateDivideLine());
            this.addView(mRadioGroup);
        } else {
            this.addView(mRadioGroup);
            initIndicatorView();
            this.addView(indicatorView);
            this.addView(generateDivideLine());
            this.addView(mViewPager);
        }
    }

    private void initIndicatorView() {
        indicatorView = new View(context);
        LayoutParams layoutParams = new LayoutParams((int) (mScreenWidth / indicatorEntityList.size() * 0.8f), radioGroupHeight / 10);
        layoutParams.setMargins((int) (mScreenWidth / indicatorEntityList.size() * 0.1f), -layoutParams.height, 0, 0);
        indicatorView.setLayoutParams(layoutParams);
        indicatorView.setBackgroundColor(indicator_color);
    }

    private RadioButton generateRadioButton(int index) {
        RadioButton rb = new RadioButton(context);
        // 均分宽度,TODO 不知道这里用 weight 为什么无法显示出来
        rb.setLayoutParams(new LayoutParams(mScreenWidth / indicatorEntityList.size(), ViewGroup.LayoutParams.MATCH_PARENT));
        rb.setId(index);
        rb.setGravity(Gravity.CENTER);
        rb.setText(indicatorEntityList.get(index).indicator);
        rb.setPadding(0, radioGroupHeight / 10, 0, radioGroupHeight / 10); // 设置上下边距,不至于挨着边
//        rb.setCompoundDrawablePadding(2); // 文本和图片的间距
        rb.setButtonDrawable(android.R.color.transparent); // 去掉圆圈圈
        return rb;
    }

    /** 处理tab切换以后的ui状态 */
    private void setSelectedItem(int position) {
        for (int i = 0; i < indicatorEntityList.size(); i++) {
            ((RadioButton) mRadioGroup.getChildAt(i)).setTextColor(i == position ? selected_fg_Color : unselected_fg_Color); // 字体颜色
            if (isShowIconEnable) {
                Drawable drawable = ContextCompat.getDrawable(context, i == position ? indicatorEntityList.get(i).selectedRes : indicatorEntityList.get(i).unSelectedRes);
                drawable.setBounds(0, 0, radioGroupHeight / 2, radioGroupHeight / 2);
                ((RadioButton) mRadioGroup.getChildAt(i)).setCompoundDrawables(null, drawable, null, null);// 图标
            } else {
                mRadioGroup.getChildAt(i).setBackgroundColor(i == position ? selected_bg_Color : unselected_bg_Color); // 背景颜色
            }
        }
        // 设置 indicatorView 动画 TODO indicatorView 动画是在 ViewPager 滑动动画完成后执行的,不是和 ViewPager 同步的
        if (indicatorView != null && lastSelectedIndex != position) {
            ObjectAnimator.ofFloat(indicatorView, "TranslationX", lastSelectedIndex * mScreenWidth / indicatorEntityList.size(), position * mScreenWidth / indicatorEntityList.size())
                    .setDuration(300).start();
            lastSelectedIndex = position;
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (mViewPager != null) mViewPager.setCurrentItem(checkedId);
        setSelectedItem(checkedId);
    }

    private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            setSelectedItem(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

    /**
     * 自定义ViewPager<p/>
     * Override onTouchEvent() 和  onInterceptTouchEvent()  是为了屏蔽滑动事件<br/>
     * Override setCurrentItem()  是为了在点击非相邻的tab时,避免中间滚动太多<br/>
     */
    class MyViewPager extends ViewPager {

        private Context context;
        private List<Fragment> mFragments;
        private MyFragmentPagerAdapter mAdapter;

        public MyViewPager(Context context) {
            this(context, null);
        }

        public MyViewPager(Context context, AttributeSet attrs) {
            super(context, attrs);
            this.context = context;
        }

        /**
         * 如果Activity不是继承 FragmentActivity,会crash掉
         *
         * @param fragments
         */
        public void setFragments(List<Fragment> fragments) {
            if (!(context instanceof FragmentActivity)) {
                throw new ClassCastException("activity need to extents FragmentActivity");
            }
            mAdapter = new MyFragmentPagerAdapter(((FragmentActivity) context).getSupportFragmentManager());
            this.setAdapter(mAdapter);
            mFragments = fragments;
            mAdapter.notifyDataSetChanged();
        }

        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            return scrollable && super.onTouchEvent(ev);
        }

        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return scrollable && super.onInterceptTouchEvent(ev);
        }

        @Override
        public void setCurrentItem(int item) {
            try {
                Field mFirstLayout = ViewPager.class.getDeclaredField("mFirstLayout");
                mFirstLayout.setAccessible(true);
                mFirstLayout.set(this, true);
                getAdapter().notifyDataSetChanged();
                super.setCurrentItem(item);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

            public MyFragmentPagerAdapter(FragmentManager fm) {
                super(fm);
            }

            @Override
            public Fragment getItem(int position) {
                return mFragments == null ? null : mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments == null ? 0 : mFragments.size();
            }
        }
    }
}