Android 之 分分鐘打造XViewPagerIndicator指示器

直接上代碼：

import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 
 * @author 作者：易皇星
 * 
 * @da2016年9月27日 時間：
 * 
 * @toTODO 類描述：
 */
public class XViewPagerIndicator extends LinearLayout {
    private static final String TAG = "ViewPagerIndicator";
    private Context context;
    private ViewPager mViewPager;
    private int COLOR_TEXT_NORMAL = 0xFF000000;
    private int COLOR_INDICATOR_COLOR = Color.RED;

    private String[] mTitles;
    //
    private int mTabCount;
    private float mTranslationX;
    private Paint mPaint = new Paint();
    private int mTabWidth;
    private List<TextView> textViews = new ArrayList<TextView>(); // 裝載TextView文本，用來切換字體顏色

    public XViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        this.context = context;
        mPaint.setColor(COLOR_INDICATOR_COLOR);
        mPaint.setStrokeWidth(9.0f);
    }

    public XViewPagerIndicator(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        this.context = context;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        mTabWidth = w / mTabCount;
    }
/**
 * 
 * @param indicatorColor  統一設置自己想要的顏色字體
 */
    public void setIndicatorColor(int indicatorColor) {
        this.COLOR_INDICATOR_COLOR = indicatorColor;
        if(null!=mPaint){
            mPaint.setColor(indicatorColor);
        }
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.save();
        canvas.translate(mTranslationX, getHeight() - 2);
        canvas.drawLine(0, 0, mTabWidth, 0, mPaint);
        canvas.restore();
    }

    public void scroll(int position, float offset) {

        mTranslationX = getWidth() / mTabCount * (position + offset);
        invalidate();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return super.dispatchTouchEvent(ev);
    }

    /**
     * 
     * @param titles
     *            當前ViewPagerIndicator 顯示的內容
     * @param viewPager
     *            當前viewPager
     */
    public void setTitles(String[] titles, ViewPager viewPager) {
        mTitles = titles;
        this.mViewPager = viewPager;
        mTabCount = titles.length;
        generateTitleView();

        setViewPagerOnPageChangeListener();

    }

    private void setViewPagerOnPageChangeListener() {
        if (null != mViewPager) {
            mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

                @Override
                public void onPageSelected(int arg0) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    // TODO Auto-generated method stub
                    scroll(position, positionOffset);
                    setCurrentTextColor(position);
                }

                @Override
                public void onPageScrollStateChanged(int arg0) {
                    // TODO Auto-generated method stub

                }
            });
        }

    }

    private void generateTitleView() {
        // TODO Auto-generated method stub
        if (getChildCount() > 0)
            this.removeAllViews();
        final int count = mTitles.length;

        setWeightSum(count);
        for (int i = 0; i < count; i++) {
            TextView tv = new TextView(getContext());
            LayoutParams lp = new LayoutParams(0, LayoutParams.MATCH_PARENT);
            lp.weight = 1;
            tv.setGravity(Gravity.CENTER);
            tv.setTextColor(COLOR_TEXT_NORMAL);
            tv.setText(mTitles[i]);
            tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            tv.setLayoutParams(lp);
            // 事件監聽
            final int currentIndex = i;
            tv.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    // Toast.makeText(context, mTitles[currentIndex].toString(),
                    // Toast.LENGTH_SHORT).show();
                    if (null != mViewPager) {

                        mViewPager.setCurrentItem(currentIndex);
                    } else {
                        Log.i(TAG, "請初始化Viewpager");
                    }

                }
            });
            addView(tv);
            textViews.add(tv);

        }

    }

    /**
     * 
     * 
     * @param currentIndex
     *            設置當前ViewPager滑動時title的顏色
     */
    public void setCurrentTextColor(int currentIndex) {
        for (int i = 0; i < mTitles.length; i++) {
            if (textViews.get(i).equals(textViews.get(currentIndex))) {
                textViews.get(currentIndex).setTextColor(COLOR_INDICATOR_COLOR);
            } else {
                textViews.get(i).setTextColor(COLOR_TEXT_NORMAL);
            }
        }
    }



}

沒什麼可講的，一般控件簡單的封裝了下

2。使用：

import java.util.ArrayList;
import java.util.List;

import com.example.xviewpagerindicator.fragment.OneFragment;
import com.example.xviewpagerindicator.fragment.ThreeFragment;
import com.example.xviewpagerindicator.fragment.TwoFragment;

import android.graphics.Color;
import android.os.Bundle;
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.view.ViewPager;

public class MainActivity extends FragmentActivity {

    private XViewPagerIndicator mViewPagerindicator;
    private String[] titles = { "簡介", "評價", "相關" };
    private ViewPager viewPager;
    private List<Fragment> fragments = new ArrayList<Fragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());

        mViewPagerindicator = (XViewPagerIndicator) findViewById(R.id.id_stickynavlayout_indicator);
        mViewPagerindicator.setIndicatorColor(Color.BLUE);
        viewPager = (ViewPager) findViewById(R.id.id_stickynavlayout_viewpager);
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

        mViewPagerindicator.setTitles(titles, viewPager);
        //      mViewPagerindicator.setIndicatorColor(Color.GRAY);


    }




    class ViewPagerAdapter extends FragmentPagerAdapter {

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub

        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragments.size();
        }

        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return fragments.get(arg0);
        }

    }

}

3。main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.example.xviewpagerindicator.XViewPagerIndicator
        android:id="@+id/id_stickynavlayout_indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp" >
    </com.example.xviewpagerindicator.XViewPagerIndicator>

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

</LinearLayout>

效果圖：

猛戳這裏：eclipse點擊下載