ViewPagerIndicator-master源碼分析 1

1.ListActivity的使用

Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.viewpagerindicator.sample/.ListSamples }

public class ListSamples extends ListActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = getIntent();
        String path = intent.getStringExtra("com.jakewharton.android.viewpagerindicator.sample.Path");
        if (path == null) {
            path = "";
        }
// 參數context：上下文，比如this。關聯SimpleAdapter運作的視圖上下文
// 參數data：Map清單，清單要顯示的資料，這部分需要自己實作，如例子中的getData()，類型要與上面的一緻，每條項目要與from中指定條目一緻
//  參數resource：ListView單項布局檔案的Id,這個布局就是你自定義的布局了，你想顯示什麼樣子的布局都在這個布局中。
//   這個布局中必須包括了to中定義的控件id
//  參數 from：一個被添加到Map上關聯每一個項目列名稱的清單，數組裡面是列名稱
//  參數 to：是一個int數組，數組裡面的id是自定義布局中各個控件的id，需要與上面的from對應
// 從from中擷取資料填充到to指定的id 的 view裡
        setListAdapter(new SimpleAdapter(this, getData(path),
                android.R.layout.simple_list_item_1, new String[] { "title" },
                new int[] { android.R.id.text1 }));
       // Enables or disables the type filter window. If enabled, typing when this view has focus //will filter the children to match the users input. Note that the Adapter used by this view must //implement the Filterable interface.
        getListView().setTextFilterEnabled(true);
    }

    protected List<Map<String, Object>> getData(String prefix) {
        List<Map<String, Object>> myData = new ArrayList<Map<String, Object>>();

        Intent mainIntent = new Intent(Intent.ACTION_MAIN, null);
        mainIntent.addCategory("com.jakewharton.android.viewpagerindicator.sample.SAMPLE");
        // <activity   原因，除了主Activity，其餘的配置
        //    android:name=".SampleCirclesDefault"
        //    android:label="Circles/Default">
        //    <intent-filter>
        //        <action android:name="android.intent.action.MAIN" />
        // <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
        //    </intent-filter>
       // </activity>

        PackageManager pm = getPackageManager();
        List<ResolveInfo> list = pm.queryIntentActivities(mainIntent, );

        if (null == list)
            return myData;

        String[] prefixPath;
        String prefixWithSlash = prefix;

        if (prefix.equals("")) {// 主Activity
            prefixPath = null; 
        } else { // 種類的Activity
            prefixPath = prefix.split("/");
            prefixWithSlash = prefix + "/";
        }

        int len = list.size();
        Map<String, Boolean> entries = new HashMap<String, Boolean>();
        // 此處要分兩種情況，第一是啟動頁面的Activity時，會将同一類的進行一次存儲，裡面的總數就是種類的個數，
        // 如 android:label="Circles/Default"---存儲Circles
        // 而對于某一種類的Activity，還會進入這個頁面的,此時存儲的是同一種類下的所有Activity
        // 如Circles/Default，Circles/Initial Page等等
        for (int i = ; i < len; i++) {
            ResolveInfo info = list.get(i);
            CharSequence labelSeq = info.loadLabel(pm);
            String label = labelSeq != null
                    ? labelSeq.toString()
                    : info.activityInfo.name;

            if (prefixWithSlash.length() ==  || label.startsWith(prefixWithSlash)) {
                String[] labelPath = label.split("/");
                // 主Activity的prefixPath == null
                String nextLabel = prefixPath == null ? labelPath[] : labelPath[prefixPath.length];

                if ((prefixPath != null ? prefixPath.length : ) == labelPath.length - ) {
                    addItem(myData, nextLabel, activityIntent(
                            info.activityInfo.applicationInfo.packageName,
                            info.activityInfo.name));
                } else { // 主Activity，隻存儲種類
                    if (entries.get(nextLabel) == null) {
                        addItem(myData, nextLabel, browseIntent(prefix.equals("") ? nextLabel : prefix + "/" + nextLabel));
                        entries.put(nextLabel, true);
                    }
                }
            }
        }  
        Collections.sort(myData, NAME_COMPARATOR);

        return myData;
    }

    // 比較字元串的比較器，傳回負數，則map1在前，map2在後
    private final static Comparator<Map<String, Object>> NAME_COMPARATOR =
        new Comparator<Map<String, Object>>() {
        private final Collator   collator = Collator.getInstance();

        public int compare(Map<String, Object> map1, Map<String, Object> map2) {
            return collator.compare(map1.get("title"), map2.get("title"));
        }
    };

    protected Intent activityIntent(String pkg, String componentName) {
        Intent result = new Intent(); // 具體的子Activity
        result.setClassName(pkg, componentName);
        return result;
    }

    protected Intent browseIntent(String path) {
        Intent result = new Intent(); // 某一種類的activity
        result.setClass(this, ListSamples.class);
        result.putExtra("com.jakewharton.android.viewpagerindicator.sample.Path", path);
        return result;
    }

    protected void addItem(List<Map<String, Object>> data, String name, Intent intent) {
        Map<String, Object> temp = new HashMap<String, Object>();
        temp.put("title", name);
        temp.put("intent", intent); // down
        data.add(temp);
    }

    @Override
    @SuppressWarnings("unchecked")
    protected void onListItemClick(ListView l, View v, int position, long id) {
        Map<String, Object> map = (Map<String, Object>)l.getItemAtPosition(position);
        Intent intent = (Intent) map.get("intent"); //up
        startActivity(intent);
    }
}
           

2 CirclePageIndicator

public class CirclePageIndicator extends View implements PageIndicator {
    private static final int INVALID_POINTER = -;

    private float mRadius;// 圓的半徑，兩個圓心之間的距離是3個R，所有外間距是R
    private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG); // 畫未選中圓内部的實心
    private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG); // 畫未選中圓的外輪廓
    private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG); // 畫選中的圓
    private ViewPager mViewPager;
    private ViewPager.OnPageChangeListener mListener;
    private int mCurrentPage; // 注意滑動時随時變化
    private int mSnapPage;
    private float mPageOffset;
    private int mScrollState;
    private int mOrientation;
    private boolean mCentered;
    private boolean mSnap;

    private int mTouchSlop;
    private float mLastMotionX = -;
    private int mActivePointerId = INVALID_POINTER;
    private boolean mIsDragging;

    public CirclePageIndicator(Context context) {
        this(context, null);
    }
    public CirclePageIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.vpiCirclePageIndicatorStyle);// 必要時從主題中擷取屬性
    }
    public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (isInEditMode()) return;

        //Load defaults from resources
        final Resources res = getResources();
        final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
        // 略....

        //Retrieve styles attributes
        // 注意，defStyle代表如果優先級滿足了則從主題中擷取需要的屬性，因為有些Activity的主題中配置了CirclePageIndicator的屬性
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CirclePageIndicator, defStyle, );
        mCentered = a.getBoolean(R.styleable.CirclePageIndicator_centered, defaultCentered);
        mOrientation = a.getInt(R.styleable.CirclePageIndicator_android_orientation, defaultOrientation);
        mPaintPageFill.setStyle(Style.FILL);
        mPaintPageFill.setColor(a.getColor(R.styleable.CirclePageIndicator_pageColor, defaultPageColor));
        mPaintPageFill.setColor(Color.parseColor("#FFFF0000"));
        mPaintStroke.setStyle(Style.STROKE);
        mPaintStroke.setColor(a.getColor(R.styleable.CirclePageIndicator_strokeColor, defaultStrokeColor));
        mPaintStroke.setStrokeWidth(a.getDimension(R.styleable.CirclePageIndicator_strokeWidth, defaultStrokeWidth));
        mPaintFill.setStyle(Style.FILL);
        mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));
        mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);
        mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);

        Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);
        if (background != null) {
            setBackgroundDrawable(background);
        }
        a.recycle();
        // ViewConfigurationCompat的字尾Compat注意，v4
        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
    }
    // get set 方法   略...

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mViewPager == null) {
            return;
        }
        final int count = mViewPager.getAdapter().getCount();
        if (count == ) {
            return;
        }
        if (mCurrentPage >= count) {
            setCurrentItem(count - );
            return;
        }
        int longSize;
        int longPaddingBefore;
        int longPaddingAfter;
        int shortPaddingBefore;
        if (mOrientation == HORIZONTAL) {
            longSize = getWidth();
            longPaddingBefore = getPaddingLeft();
            longPaddingAfter = getPaddingRight();
            shortPaddingBefore = getPaddingTop();
        } else {
            longSize = getHeight();
            longPaddingBefore = getPaddingTop();
            longPaddingAfter = getPaddingBottom();
            shortPaddingBefore = getPaddingLeft();
        }
        final float threeRadius = mRadius * ; //除了第一個，其餘每個圓要占據3R的長度，即左邊距R和自身的2R
        // 但是第一個圓左邊是半個R，最後一個圓右邊是半個R，這樣才完美
        final float shortOffset = shortPaddingBefore + mRadius; //高度中心值，參考下面onMeasure的設定
        // 前提1，移動到了第一個圓的圓心位置處，之是以是圓心，因為在這個橫坐标就開始畫圓了，這樣左邊距是半R
        float longOffset = longPaddingBefore + mRadius; 
        if (mCentered) {
        // 先不考慮上面前提1，這裡即計算出了圓們的開始位置，包括邊距
            longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / f) - ((count * threeRadius) / f);
            // 這裡會有一處小bug，即當寬度設定為wrap-content時，如果mCentered仍為true，當在xml中配置padding
            // 為0時，上面計算的結果就是負的了，即第一個圓左邊會有一小塊看不到了，原因就在下面的onMeasure，
            // 因為longSize的值小于count *threeRadius，longSize就是getWidth()，就是onMeasure設定的
        }
        float dX;
        float dY;
        float pageFillRadius = mRadius;
        if (mPaintStroke.getStrokeWidth() > ) { //内部實心小圓
            pageFillRadius -= mPaintStroke.getStrokeWidth() / f;
        }
        //Draw stroked circles
        for (int iLoop = ; iLoop < count; iLoop++) {
            float drawLong = longOffset + (iLoop * threeRadius);
            if (mOrientation == HORIZONTAL) {
                dX = drawLong;
                dY = shortOffset;
            } else {
                dX = shortOffset;
                dY = drawLong;
            }
//             Only paint fill if not completely transparent
            if (mPaintPageFill.getAlpha() > ) {
                canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
            }
            // Only paint stroke if a stroke width was non-zero
            if (pageFillRadius != mRadius) {
                canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
            }
        }

        //Draw the filled circle according to the current scroll
        float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
        if (!mSnap) { // mSnap為true代表pager切換以後再動，切換的結果，而false為切換的過程
            cx += mPageOffset * threeRadius;//跟随pager的細微滑動而動，否則就是pager切換以後再動
        }
        if (mOrientation == HORIZONTAL) {
            dX = longOffset + cx;
            dY = shortOffset;
        } else {
            dX = shortOffset;
            dY = longOffset + cx;
        }
        canvas.drawCircle(dX, dY, mRadius, mPaintFill);
    }

    public boolean onTouchEvent(android.view.MotionEvent ev) {
        if (super.onTouchEvent(ev)) {
            return true;
        }
        if ((mViewPager == null) || (mViewPager.getAdapter().getCount() == )) {
            return false;
        }
        // 同樣，注意MotionEventCompat的字尾Compat, v4
        // 總結，根據index拿id和x坐标的方法，MotionEventCompat.getPointerId和MotionEventCompat.getX
        // 而根據id需要找index的，是以MotionEventCompat.findPointerIndex
        // 根據多手指事件down或者up時，尋找index為MotionEventCompat.getActionIndex
        final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mActivePointerId = MotionEventCompat.getPointerId(ev, );// index肯定是0啦
                mLastMotionX = ev.getX();// down時直接拿就是了
                break;

            case MotionEvent.ACTION_MOVE: {
                final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
                final float x = MotionEventCompat.getX(ev, activePointerIndex);
                final float deltaX = x - mLastMotionX;
                if (!mIsDragging) {
                    if (Math.abs(deltaX) > mTouchSlop) {
                        mIsDragging = true;
                    }
                }
                if (mIsDragging) { // 如何代碼操縱viewpager滑動!!!!!!!!!!!!!
                    mLastMotionX = x;
                    if (mViewPager.isFakeDragging() || mViewPager.beginFakeDrag()) {
                        mViewPager.fakeDragBy(deltaX);
                    }
                }
                break;
            }

            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (!mIsDragging) {// 點選的效果
                    final int count = mViewPager.getAdapter().getCount();
                    final int width = getWidth();
                    final float halfWidth = width / f;
                    final float sixthWidth = width / f;

                    if ((mCurrentPage > ) && (ev.getX() < halfWidth - sixthWidth)) {//點到左邊了
                        if (action != MotionEvent.ACTION_CANCEL) {
                            mViewPager.setCurrentItem(mCurrentPage - );
                        }
                        return true;
                    } else if ((mCurrentPage < count - ) && (ev.getX() > halfWidth + sixthWidth)) {
                        if (action != MotionEvent.ACTION_CANCEL) {
                            mViewPager.setCurrentItem(mCurrentPage + );
                        }
                        return true;
                    }
                }
                mIsDragging = false;
                mActivePointerId = INVALID_POINTER;
                if (mViewPager.isFakeDragging()) mViewPager.endFakeDrag();// 取消滑動控制
                break;

            case MotionEventCompat.ACTION_POINTER_DOWN: {
                final int index = MotionEventCompat.getActionIndex(ev);
                mLastMotionX = MotionEventCompat.getX(ev, index);
                mActivePointerId = MotionEventCompat.getPointerId(ev, index);
                break;
            }

            case MotionEventCompat.ACTION_POINTER_UP:
                final int pointerIndex = MotionEventCompat.getActionIndex(ev);
                final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
                if (pointerId == mActivePointerId) {//參考的手指擡起了，換一個就是了
                    final int newPointerIndex = pointerIndex ==  ?  : ;
                    mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
                }
                mLastMotionX = MotionEventCompat.getX(ev, MotionEventCompat.findPointerIndex(ev, mActivePointerId));
                break;
        }

        return true;
    }

    @Override
    public void setViewPager(ViewPager view) {
        if (mViewPager == view) {
            return;
        }
        if (mViewPager != null) {
            mViewPager.setOnPageChangeListener(null);
        }
        if (view.getAdapter() == null) {
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
        mViewPager = view;
        mViewPager.setOnPageChangeListener(this);
        invalidate();
    }

    @Override
    public void setViewPager(ViewPager view, int initialPosition) {
        setViewPager(view);
        setCurrentItem(initialPosition);
    }

    @Override
    public void setCurrentItem(int item) {
        if (mViewPager == null) {
            throw new IllegalStateException("ViewPager has not been bound.");
        }
        mViewPager.setCurrentItem(item);
        mCurrentPage = item;
        invalidate();
    }

    @Override
    public void notifyDataSetChanged() {
        invalidate();
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        mScrollState = state; // 随時記錄狀态
        if (mListener != null) {
            mListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        mCurrentPage = position; // 重要，滑動時随時更新mCurrentPage
        mPageOffset = positionOffset;
        invalidate();
        if (mListener != null) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mCurrentPage = position;
            mSnapPage = position;
            invalidate();
        }
        if (mListener != null) {
            mListener.onPageSelected(position);
        }
    }

    /*
     * (non-Javadoc)
     *
     * @see android.view.View#onMeasure(int, int)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mOrientation == HORIZONTAL) {
            setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
        } else {
            setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
        }
    }

    /**
     * Determines the width of this view
     *
     * @param measureSpec A measureSpec packed into an int
     * @return The width of the view, honoring constraints from measureSpec
     */
    private int measureLong(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
            //We were told how big to be
            result = specSize;
        } else {
            //Calculate the width according the views count
            final int count = mViewPager.getAdapter().getCount();
            // 實際占據的寬度值，從第一個圓左邊到最後一個圓右邊，加1為了誤差吧
            // count * 2 * mRadius為圓的長度，(count - 1)為間距的長度
            result = (int) (getPaddingLeft() + getPaddingRight()
                    + (count *  * mRadius) + (count - ) * mRadius + );
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    /**
     * Determines the height of this view
     *
     * @param measureSpec A measureSpec packed into an int
     * @return The height of the view, honoring constraints from measureSpec
     */
    private int measureShort(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            //We were told how big to be
            result = specSize;
        } else {
            //Measure the height 加1是為了顔值高吧，對應上面的高度設定，正好處于中心位置
            result = (int) ( * mRadius + getPaddingTop() + getPaddingBottom() + );
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    @Override
    public void onRestoreInstanceState(Parcelable state) {
        SavedState savedState = (SavedState) state;
        super.onRestoreInstanceState(savedState.getSuperState());
        mCurrentPage = savedState.currentPage;
        mSnapPage = savedState.currentPage;
        requestLayout();
    }

    @Override
    public Parcelable onSaveInstanceState() {
        Parcelable superState = super.onSaveInstanceState();
        SavedState savedState = new SavedState(superState);
        savedState.currentPage = mCurrentPage;
        return savedState;
    }

    static class SavedState extends BaseSavedState {
        int currentPage;

        public SavedState(Parcelable superState) {
            super(superState);
        }

        private SavedState(Parcel in) {
            super(in);
            currentPage = in.readInt();
        }

        @Override
        public void writeToParcel(Parcel dest, int flags) {
            super.writeToParcel(dest, flags);
            dest.writeInt(currentPage);
        }

        @SuppressWarnings("UnusedDeclaration")
        public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
            @Override
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            @Override
            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }
}
           

3 TestFragment

public final class TestFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";

    public static TestFragment newInstance(String content) {
        TestFragment fragment = new TestFragment();

        StringBuilder builder = new StringBuilder();
        for (int i = ; i < ; i++) {
            builder.append(content).append(" ");
        }
        builder.deleteCharAt(builder.length() - );
        fragment.mContent = builder.toString();
        return fragment;
    }

    private String mContent = "???";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getString(KEY_CONTENT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView text = new TextView(getActivity());
        text.setGravity(Gravity.CENTER);
        text.setText(mContent);
        text.setTextSize( * getResources().getDisplayMetrics().density);
        text.setPadding(, , , );

        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.addView(text);
        return layout;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putString(KEY_CONTENT, mContent);
    }
}