Android ViewPagerIndicator仿今日头条标题栏效果（一）

以前在项目中遇到这个需求，和头条标题栏效果一样，现在我就把最简单的实现方式贴出来，一起学习下。目前各大网站三类似的效果框架比比皆是，但是作为学习还是值得借鉴的。。

实现关键方法：
由于我们需要title可以左右滑动，那么自然就想到HorizontalScrollView，我们viewpager滑动，需要让HorizontalScrollView一起跟着滑动，这个时候就涉及到计算坐标了，通过 child.getLeft() - (getWidth() - child.getWidth()) / 2;计算滑动的距离，这个方法是当item多的时候，我们吧高亮选中的item滑动到中间位置，具体位置我们还可以自己定义。
后面就是动画，文本的颜色变深，变浅，字体放大缩小，那么属性动画就是最好的选择

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.apple.Custom.ViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="80dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

自定义控件

public class ViewPagerIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener, View.OnClickListener {


    private final int DEFOULT_COLOR = Color.RED;
    private final String TAG = this.getClass().getSimpleName();

    private ViewPager viewPager;
    LinearLayout linearLayoutContent;
    ViewPager.OnPageChangeListener listener;

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

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

    public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    public void init(Context context, @Nullable AttributeSet attrs) {
        setHorizontalScrollBarEnabled(false);
        setFillViewport(true);
        linearLayoutContent = new LinearLayout(context);
        linearLayoutContent.setOrientation(LinearLayout.HORIZONTAL);
        this.addView(linearLayoutContent, new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));
    }

    public void setViewPager(ViewPager viewPager) {
        setViewPager(viewPager, 0);
    }

    public void setViewPager(ViewPager viewPager, int item) {
        if (viewPager == null) {
            return;
        }
        this.viewPager = viewPager;
        viewPager.addOnPageChangeListener(this);
        PagerAdapter adapter = viewPager.getAdapter();
        if (adapter != null) {
            linearLayoutContent.removeAllViews();
            int count = adapter.getCount();
            for (int i = 0; i < count; i++) {
                CharSequence pageTitle = adapter.getPageTitle(i);
                linearLayoutContent.addView(addNewsTab(i, pageTitle));
            }

        }
        setCurrent(item);
        requestLayout();
    }

    /**
     * 添加每一个tab
     *
     * @param i
     * @param pageTitle
     */
    private View addNewsTab(int i, CharSequence pageTitle) {
        TextView title = new TextView(getContext());
        title.setText(pageTitle);
        title.setTag(i);
        title.setGravity(Gravity.CENTER);
        title.setPadding(20, 0, 20, 0);
        title.setOnClickListener(this);
        title.setTextSize(20);
        title.setTextColor(DEFOULT_COLOR);
        addLayout(title);
        return title;
    }

    private void setCurrent(int item) {
        int childCount = linearLayoutContent.getChildCount();
        if (item <= childCount - 1) {
            for (int i = 0; i < childCount; i++) {
                View child = linearLayoutContent.getChildAt(i);
                if (item == i) {
                    animation(child, 1f, 1f);
                    scrolltotab(item);
                } else {
                    animation(child, 0.8f, 0.5f);
                }
            }
        }
    }

    private void animation(View view, float scaleXY, float alpha) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", scaleXY);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", scaleXY);
        ObjectAnimator fade = ObjectAnimator.ofFloat(view, "alpha", alpha);
        AnimatorSet animSet = new AnimatorSet();
        animSet.play(scaleX).with(scaleY).with(fade);
        animSet.setDuration(200);
        animSet.start();
    }

    private void scrolltotab(int item) {
        View child = linearLayoutContent.getChildAt(item);
        final int scrollPos = child.getLeft() - (getWidth() - child.getWidth()) / 2;
        smoothScrollTo(scrollPos, 0);
    }

    private void addLayout(TextView textView) {
        ViewGroup.LayoutParams layoutParams = textView.getLayoutParams();
        if (layoutParams == null) {
            layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        }
        textView.setLayoutParams(layoutParams);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (listener != null) {
            listener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        setCurrent(position);
        if (listener != null) {
            listener.onPageSelected(position);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (listener != null) {
            listener.onPageScrollStateChanged(state);
        }
    }


    /**
     * tab 点击事件
     *
     * @param v
     */
    @Override
    public void onClick(View v) {
        Object tag = v.getTag();
        Integer po = (Integer) tag;
        setCurrent(po);
        if (viewPager != null) {
            viewPager.setCurrentItem(po);
        }
    }
    public void setPageChageListener(ViewPager.OnPageChangeListener listener) {
        this.listener = listener;
    }

}

代码里面就没啥好说的了，一共就这么几行代码，是不是很简单。。