Activity中的CirclePageIndicator未根据片段中的ViewPager进行动画处理

Question

我有的

我有一个具有Custom Toolbar的HomeActivity ，其中包含Buttons和CirclePageIndicator

我有一个HomeFragment有ViewPager，显示3个不同的Fragments

我想要的是

我想要的CirclePageIndicator在Activity根据做过渡动画（改变dotts） ViewPager在fragment

我的问题

Activity的CirclePageIndicator未根据片段中的ViewPager进行动画处理

CirclePageIndicator first dot only指示第first dot only ，滚动ViewPager时不更改为second dot

我的密码

activity_home.xml

<com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/circle_indicator"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_header_tittle"
                    android:layout_centerHorizontal="true"
                    android:layout_gravity="center"
                    android:layout_marginTop="2dp"
                    android:layout_marginBottom="2dp"
                    android:visibility="visible"
                    app:fillColor="@color/white"
                    app:pageColor="@color/cyan_dark"
                    app:strokeColor="@color/white" />

fragment_home.xml

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/cyan"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>

HomeFragment.java

viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
circlePageIndicator = (CirclePageIndicator) getActivity().findViewById(R.id.circle_indicator);
profilePagerAdapter = new ProfilePagerAdapter(getChildFragmentManager());
viewPager.setAdapter(profilePagerAdapter);
circlePageIndicator.setViewPager(viewPager);

ProfilePageAdapter.java

public class ProfilePagerAdapter extends FragmentPagerAdapter {
    // Tabs number
    private int numberOfTabs;

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

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                ProfilePhotosFragment profilePhotosFragment = new ProfilePhotosFragment();
                return profilePhotosFragment;
            case 1:
                ProfileAlbumFragment profileAlbumFragment = new ProfileAlbumFragment();
                return profileAlbumFragment;
            case 2:
                ProfileLocationFragment profileLocationFragment = new ProfileLocationFragment();
                return profileLocationFragment;
            default:
                return null;
        }

    }

    @Override
    public int getCount() {
        return 3;
    }
}

Answer 1

PageIndicator

/*---------------------------------------------------------------------------------------
    define following attributes in values folder attrs.xml file

    <declare-styleable name="PageIndicator">
        <attr name="indicatorCount" format="integer" />
        <attr name="indicatorSize" format="dimension" />
        <attr name="indicatorMargin" format="dimension" />
        <attr name="selectedIndicator" format="reference" />
        <attr name="unselectedIndicator" format="reference" />
    </declare-styleable>
 ----------------------------------------------------------------------------------------*/

public class PageIndicator extends LinearLayout {

    private static int INDICATOR_COUNT = 3;
    private static int INDICATOR_SIZE = 30;
    private static int INDICATOR_MARGIN = 8;
    private static int SELECTED_COLOR = Color.RED;
    private static int UNSELECTED_COLOR = Color.WHITE;
    private static Bitmap SELECTED_BITMAP = createSelectedIndicator();
    private static Bitmap UNSELECTED_BITMAP = createUnselectedIndicator();

    private ViewPager viewPager;
    private int currentPosition = 0;

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

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

    public PageIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PageIndicator);
        int selected = typedArray.getResourceId(R.styleable.PageIndicator_selectedIndicator, -1);
        int unselected = typedArray.getResourceId(R.styleable.PageIndicator_unselectedIndicator, -1);

        if (selected != -1) {
            SELECTED_BITMAP = BitmapFactory.decodeResource(context.getResources(), selected);
        }

        if (unselected != -1) {
            UNSELECTED_BITMAP = BitmapFactory.decodeResource(context.getResources(), unselected);
        }

        INDICATOR_COUNT = typedArray.getResourceId(R.styleable.PageIndicator_indicatorCount, INDICATOR_COUNT);
        INDICATOR_SIZE = typedArray.getDimensionPixelSize(R.styleable.PageIndicator_indicatorSize, INDICATOR_SIZE);
        INDICATOR_MARGIN = typedArray.getDimensionPixelSize(R.styleable.PageIndicator_indicatorMargin, INDICATOR_MARGIN);
        typedArray.recycle();

        // create indicator for sample
        createIndicator(INDICATOR_COUNT);
    }

    // set view pager
    public void setViewPager(ViewPager viewPager) {
        this.viewPager = viewPager;
        createIndicator();
    }

    /*
     *  create indicator
     */
    public void createIndicator() {
        removeAllViews();
        int count = viewPager.getAdapter().getCount();
        if (count <= 0)
            return;

        for (int i = 0; i < count; i++) {
            addIndiactor();
        }
        ImageView selectedIndicator = (ImageView) getChildAt(viewPager.getCurrentItem());
        selectedIndicator.setImageBitmap(SELECTED_BITMAP);
    }

    /**
     * create indicator for sample
     */
    public void createIndicator(int count) {
        removeAllViews();
        if (count <= 0)
            return;

        for (int i = 0; i < count; i++) {
            addIndiactor();
        }
        ImageView selectedIndicator = (ImageView) getChildAt(count / 2);
        selectedIndicator.setImageBitmap(SELECTED_BITMAP);
    }

    /*
     * add indicator
     */
    public void addIndiactor() {
        try {
            ImageView view = new ImageView(getContext());
            view.setImageBitmap(UNSELECTED_BITMAP);
            this.addView(view, INDICATOR_SIZE, INDICATOR_SIZE);
            LayoutParams params = (LayoutParams) view.getLayoutParams();
            params.leftMargin = INDICATOR_MARGIN;
            params.rightMargin = INDICATOR_MARGIN;
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * call this method from onPageSelected method of ViewPager.OnPageChangeListener
     *
     * @param position current page position
     */
    public void setPageSelected(int position) {

        ImageView currentIndicator = (ImageView) getChildAt(currentPosition);
        currentIndicator.setImageBitmap(UNSELECTED_BITMAP);

        ImageView selectedIndicator = (ImageView) getChildAt(position);
        selectedIndicator.setImageBitmap(SELECTED_BITMAP);

        currentPosition = position;
    }

    private static Bitmap createSelectedIndicator() {
        Bitmap bitmap = Bitmap.createBitmap(INDICATOR_SIZE * 2, INDICATOR_SIZE * 2, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        paint.setColor(SELECTED_COLOR);
        canvas.drawCircle(INDICATOR_SIZE, INDICATOR_SIZE, INDICATOR_SIZE, paint);
        return bitmap;
    }

    private static Bitmap createUnselectedIndicator() {
        Bitmap bitmap = Bitmap.createBitmap(INDICATOR_SIZE * 2, INDICATOR_SIZE * 2, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        paint.setColor(UNSELECTED_COLOR);
        canvas.drawCircle(INDICATOR_SIZE, INDICATOR_SIZE, INDICATOR_SIZE, paint);
        return bitmap;
    }

然后设置

viewPager.setOnPageChangeListener(context);

然后调用页面指示符方法

public void onPageSelected(int position) {
        pageIndicator.setPageSelected(position);
    }

Xml文件，

<com.app.customviews.PageIndicator
        android:id="@+id/pageIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/dimen30dp"
        android:layout_marginTop="@dimen/dimen10dp"
        app:indicatorCount="3"
        app:indicatorMargin="@dimen/dimen_indicator_margin"
        app:indicatorSize="@dimen/dimen_indicator_size"
        app:selectedIndicator="@drawable/dot_filled"
        app:unselectedIndicator="@drawable/dot_outlined" />

我希望这能帮到您。