使用视图翻页器实现点的动画效果

Question

我正在开发一个包含ViewPager的FragmentActivity。使用FragmentPagerAdapter提供了三个片段给ViewPager。所以我能够使用viewpager实现滑动屏幕。我可以滑动页面，并在点击下一页按钮时，也可以移动到下一页/片段。以下代码对我有效：

1.WelcomeFragmentActivity.java

public class WelcomeFragmentActivity extends FragmentActivity {
    private List<Fragment> listFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_activity_welcome);

        //FindViewByID
        final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        Button btnNext = (Button) findViewById(R.id.btnNext);

        //Initializing the List
        listFragments = new ArrayList<Fragment>();

        //initializing the fragments
        WelcomeOneFragment welcomeOneFragment = new WelcomeOneFragment();
        WelcomeTwoFragment welcomeTwoFragment = new WelcomeTwoFragment();
        WelcomeThreeFragment welcomeThreeFragment = new WelcomeThreeFragment();

        //Adding Fragments to List
        listFragments.add(welcomeOneFragment);
        listFragments.add(welcomeTwoFragment);
        listFragments.add(welcomeThreeFragment);

        //initializing PagerAdapterWelcome
        PagerAdapterWelcome pagerAdapterWelcome = new PagerAdapterWelcome(getSupportFragmentManager(), listFragments);
        viewPager.setAdapter(pagerAdapterWelcome);

        //On clicking next button move to next fragment
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.e("Current position", String.valueOf(viewPager.getCurrentItem()));
                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                // If view pager is displaying the 3rd fragment ,move to WelcomeActivity
                if (viewPager.getCurrentItem() == 2) {
                    Log.e("Curent position", String.valueOf(viewPager.getCurrentItem()));
                    startActivity(new Intent(WelcomeFragmentActivity.this, WelcomeActivity.class));
                }
            }
        });

    }
}

2.PagerAdapterWelcome.java

public class PagerAdapterWelcome extends FragmentPagerAdapter {

    private List<Fragment> listFragments;


    public PagerAdapterWelcome(FragmentManager fm, List<Fragment> listFragments) {
        super(fm);
        this.listFragments = listFragments;
    }

    @Override
    public Fragment getItem(int i) {
        return listFragments.get(i);
    }

    @Override
    public int getCount() {
        return listFragments.size();
    }
}

我想要实现以下屏幕：

这三个屏幕将在向左滑动或点击下一步按钮后依次显示。点的橙色告诉我当前正在哪个片段上工作。请指导我如何为这些点添加动画效果？

编辑后的代码：

我使用RadioGroup实现了这个概念。请考虑以下代码：

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            position = viewPager.getCurrentItem();
            Log.e("Position", String.valueOf(position));
            if (position == 0)
                radioGroup.check(R.id.radioBtnOne);
            else if (position == 1) {
                radioGroup.check(R.id.radioBtnTwo);
            } else
                radioGroup.check(R.id.radioBtnThree);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

它在某种程度上起作用，但我没有得到设计中提到的确切颜色。请查看以下截图：

在按照Ankit Aggrawal建议为单选按钮添加了一些样式后，我得到了以下结果：

- Deepak Rattan

---

http://www.androprogrammer.com/2015/06/view-pager-with-circular-indicator.html - IntelliJ Amiya

http://nilukad.blogspot.in/2014/01/image-gallary-with-dot-indicater.html - IntelliJ Amiya

请查看我的解决方案：https://dev59.com/a1kT5IYBdhLWcg3wh__s#38459310 - RediOne1

Answer 1

我通过使用radiogroup实现了这个功能。使用相对布局将radiogroup定位在viewpager的上方。创建一个具有所需数量点的radiobuttons的radiogroup。不要给单选按钮添加任何文本。 编辑：以下是完全可用的代码。

按照以下方式创建您的布局。

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

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:id="@+id/radioGroup">

        <RadioButton
            android:id="@+id/radioBtnOne"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/radioBtnTwo"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/radioBtnThree"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

    </RadioGroup>

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

</RelativeLayout>

现在在viewpager中，加入一个onPageChangeListener。

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                radioGroup.check(radioGroup.getChildAt(position).getId());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

以下是单选按钮 button_selector.xml 的选择器。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
        android:state_checked="true"
        android:state_pressed="false"
        android:drawable="@drawable/toggle_button_selected"/>

    <item
        android:state_checked="false"
        android:state_pressed="false"
        android:drawable="@drawable/toggle_button_unselected"/>

    <item
        android:state_checked="true"
        android:state_pressed="true"
        android:drawable="@drawable/toggle_button_selected"/>

    <item
        android:state_checked="false"
        android:state_pressed="true"
        android:drawable="@drawable/toggle_button_unselected"/>

</selector>

现在为选定的按钮创建toggle_button_selected_drawable.xml文件。

<?xml version="1.0" encoding="utf-8" ?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="10dp" />
    <solid
        android:color="@color/your_selection_color" />
</shape>

同样地，对于未选中的按钮，请创建toggle_button_unselected_drawable.xml。

<?xml version="1.0" encoding="utf-8" ?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="10dp" />
    <solid
        android:color="@color/grey" />
</shape>

- Ankit Aggarwal

---

请将代码放在单选按钮选择器中。现在检查一下，告诉我你能否实现它。 - Ankit Aggarwal

添加样式后，我得到了奇怪的单选按钮颜色。请查看编辑后的代码以获取屏幕截图。 - Deepak Rattan

警告！此解决方案使用单选按钮，因此它看起来不像第一张橙色的截图。它更像灰色的截图，一个圆圈里面还有一个圆圈。不要浪费时间！ - CoolMind

@CoolMind 如果你仔细检查的话，就会发现单选按钮是通过使用 toggle_button_selected_drawable.xml 和 toggle_button_unselected_drawable.xml 进行自定义的。这两个可绘制对象用于使它们看起来像第一个橙色截图，而不是第二个截图。 - Ankit Aggarwal

@AnkitAggarwal，不好意思，如果我错了的话。我也尝试过应用这些XML（但是使用椭圆形），结果并不理想。但我还没有进展太多，也许那是我的错误。 - CoolMind

Answer 2

这个库可能会帮助你...... https://github.com/PaoloRotolo/AppIntro/

- Anand Kumar Jha

Answer 3

你可以使用Jake Wharton的ViewPagerIndicator为ViewPager中的每个选项卡添加标题或简单圆圈。

Jake Wharton在GitHub上提供了大量示例代码，您还可以参考Jake Wharton网站上的usage section。

- Shoeb Siddique

Answer 4

使用ViewPagerCircleIndicator库。 http://viewpagerindicator.com/

- Nauman Ali Shah