Android ViewPager-动态宽度和多个可见页面

Question

My issue is quite complex and I have hard time finding a solution to achieve the following :

I need to have a sort of legend (a stepper) layout where a child is made of left bar, followed by a circle, followed by a right bar. Strickly speaking somethind like "-o-". So a serie of children looks like this : "-ooooo". When the legend focuses on a child meaning that the current child is this one, this child has a bigger circle and longer bars: "--O--".

The final rendering looks therefore like this : "-oo--O--oo-".

Each child ("-o-") corresponds to a specific item in a database. When a child gets focuses ("--O--"), the relative item is displayed below. When the user swipes from right to left, the next item is showed, whereas a swipe from left to right will display the previous item.

When swiping, to show which child will display its corresponding item, say child will be animated to show it has focus. I use a Animator to :

1. increase the bars widths and the circle size of the child that is getting the focus
2. to decrease these values of the previously focused child.

Displaying a legend requires to see what's before and what's next.

I believe using a ViewPager will help me achieve the following :

1. it has an "anchor effect", meaning a swipe will move from child to child, centering on the circle : the circle between the bars is the anchor, so to speak.
2. I can display multiple pages on the screen by overriding the getPageWidth() method of my custom adapter

The other solution I had in mind is the HorizontalScrollView . If I were to use it, depending on the swipe properties (strengh, speed), the legend would indeterminately scroll without anchoring the circle.

But using the ViewPager has a big problem: each page has the same width. However, the anchored child of the legend needs to be bigger (so needs more width).

So how can I change the width dynamically ?

Unless I can customize a HorizontalScrollView to add the anchor effect by intercepting in swipe ?

Answer 1

我还认为CarouselLayoutManager可能包含您想要的效果。

Answer 2

If you are using a ViewPager , I think the best way to do this would be with an OnPageChangeListener . You will get callbacks as the user is swiping left/right so that you can size your indicators based on the location of the user's swipe.

    private int mCurrentPage = 0;

    viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // positionOffset goes from 0.0 to just under 1.0 for the leftmost page

            float otherOffset = 1.0 - positionOffset;

            if (position == mCurrentPage) { // user is incrementing page, i.e. swiping left
                // size of current page indicator based on otherOffset
                // size of next page indicator based on positionOffset

            } else { // user is decrementing page, i.e. swiping right

                // size of current page indicator based on positionOffset
                // size of previous page indicator based on otherOffset
            }
        }

        @Override
        public void onPageSelected(int position) {
            mCurrentPage = position;

            // ... set final sizes: page @ position = 1.0 all others 0.0
        }
    });

Here's how to understand position and positionOffset : When a page has settled, it is centered. Let's say the current page position == 1 (ie page 2).

• First case: User swipes left to get to the next page. Say the user swipes 10% of the distance to get to the next page. position will be 1 (leftmost displayed) and positionOffset will be 0.1 (viewport left edge is at 10% of leftmost page). So as user swipes, positionOffset will go from 0.0 to just below 1.0 .

• Second case: User swipes right to get to the previous page. When the user swipes 10% of the distance to the previous page, position will be 0 (leftmost displayed) and positionOffset will be 0.9 (viewport left edge is at 90% of the leftmost page). So as user swipes, positionOffset will go from just under 1.0 to 0.0 .

As for the indicators themselves, I did a similar pager indicator where I used a LinearLayout with a horizontal orientation, adding a child indicator view for each page. I used pagerAdapter.getCount() to get the number of views to add.

Your indicator is more complex with the animation, but if I were to do this, I would use a plain View with ScaleDrawable backgrounds for graphics that could change size.