Android 模仿搜狐新聞的ViewpagerIndicator

好久沒寫博客了，今天沒事怒更一記。

如標題今天我們來模仿一下搜狐新聞，先上個效果圖.

 

 

1，接下來我們就來分析一下這個效果

下面的內容應該是用viewpager，頭部的選項卡我們用一個LinearLayout+HorizontalScrollView也可以實現，滾動效果的話我們可以用到我們學會的scrollTo，大致的思路理清，我們就開始碼代碼吧！

2，自定義LinearLayout

我們可以觀察到那個紅色的矩形應該是和整體的LinearLayout在一起，所以我們可以自定義LinearLayout畫出那個矩形，滾動就是改變畫矩形的位置即可

 

public class ViewpagerIndicator extends LinearLayout {

    /**
     * 畫筆，底部矩形
     */
    private Paint paint;
    /**
     * 子View個數
     */
    private int mCount;
    private int mTop;
    private int mWidth;
    private int mLeft;
    private int mHeight = 5;
    public OnTextClick onTextClick;
    public ViewpagerIndicator(Context context) {
        super(context);
    }

    public ViewpagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        setBackgroundColor(Color.TRANSPARENT);
        paint = new Paint();
        paint.setColor(getResources().getColor(R.color.red));
        paint.setAntiAlias(true);

    }

    public interface OnTextClick{
       public void textViewClick(int position);
    }

    public void setOnTextClick(OnTextClick onTextClick){
        this.onTextClick = onTextClick;

    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //整體高度
        mTop = getMeasuredHeight();
        //整體寬度
        int width = getMeasuredWidth();
        //加上指示器高度
        int height = mTop + mHeight;
        //指示器的寬度
        mWidth = width / mCount;
        setMeasuredDimension(width, height);
    }

在onMeasure中我們拿到我們想要的關於位置距離的值，接下來我們就可以在onDraw中畫出想要的矩形了

 

 

/**
     * 畫出指示器
     * @param canvas
     */
    protected void onDraw(Canvas canvas) {
        Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);
        canvas.drawRect(rect, paint);
    }

 

沒錯，就是倆句代碼，之後通過不斷的改變left就可以實現跟隨滾動的效果。

 

  /**
     * 滾動效果
     * @param position
     * @param positionOffset
     */
    public void scrollTo(int position, float positionOffset) {
        mLeft = (int) ((position + positionOffset) * mWidth);
        postInvalidate();
    }

方法中的倆個參數我們可以通過viewpager的回調方法onPageScrolled中得到，position就是當前的選項卡,positionOffset相當於滑動的百分比0.0~0.0之間.

 

3,使用自定義控件

ok，大致的思路都已經理清，接下來我們就可以使用自己做的Indicator了。

 

先不要被眼前多如狗的TextView嚇到，其實都是粘貼復制上去的改了一個text就行，我們也可以在自己的LinearLayout中通過TextView t = new TextView();然後add進去，這倆種方法都可以。

 

但是我們顯然都不想給這麼多的textview都取id然後拿到它的實例再setOnClick,所以我們就可以在自定義的ViewGroup中直接set

 

 @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mCount = getChildCount();

        /**
         * 監聽點擊事件，回調接口
         */
        for (int i = 0 ;i

通過回調接口我們就輕易的拿到了所點擊的是哪一頁選項卡,接下來我們來看看使用方法

 

 

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener,ViewpagerIndicator.OnTextClick{

    private ViewPager viewPager;
    private int lastX = 0;
    private ViewpagerIndicator indicator;
    private HorizontalScrollView horizontalScrollView;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        indicator = (ViewpagerIndicator) findViewById(R.id.indicator);
        indicator.setOnTextClick(this);
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizon);
        viewPager.setAdapter(new MyAdapter());
        viewPager.setOnPageChangeListener(this);
    }

一些必要的實例化.

 

 

  /**
     * 只有當從第一項滾動第二項或者從第二項滾動第一項時，整體不動指示器單獨滾動，其余都是整個布局滾動
     * @param position
     * @param positionOffset
     * @param positionOffsetPixels
     */
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (!(position == 0 && positionOffset - lastX >= 0) || !(position == 1 && positionOffset - lastX <= 0)){
            horizontalScrollView.scrollTo((int)((positionOffset+position-1)*indicator.getIndicatorWidth()), 0);
        }
        indicator.scrollTo(position, positionOffset);
        lastX = (int) positionOffset;
    }

    @Override
    public void onPageSelected(int position) {
        indicator.resetTextViewColor();
         indicator.setFocusTextView(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

通過觀察搜狐新聞我們可以看到，當從第一頁滑動到第二頁時，只有Indicator滾動了，之後都是整體滾動，所以我們要做好判斷，整體滾動的時候indicator就相當於停留在了顯示出來的第二個選項卡，接下來我們看看實際效果.

 

效果還是闊以的嘛，咔咔。

 

項目源碼