我想在ViewPager中添加3个底部点,像这样。

我使用FragmentActivity和支持库ViewPager。


当前回答

下面是我如何做到这一点,有点类似于上面的解决方案。只要确保在下载完所有图像后调用loadDots()方法即可。

    private int dotsCount;
    private TextView dotsTextView[];

    private void setupAdapter() {
        adapter = new SomeAdapter(getContext(), images);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
    }

    private final ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < dotsCount; i++)
                dotsTextView[i].setTextColor(Color.GRAY);

            dotsTextView[position].setTextColor(Color.WHITE);
        }

        @Override
        public void onPageScrollStateChanged(int state) {}
    };

    protected void loadDots() {
        dotsCount = adapter.getCount();
        dotsTextView = new TextView[dotsCount];
        for (int i = 0; i < dotsCount; i++) {
            dotsTextView[i] = new TextView(getContext());
            dotsTextView[i].setText(R.string.dot);
            dotsTextView[i].setTextSize(45);
            dotsTextView[i].setTypeface(null, Typeface.BOLD);
            dotsTextView[i].setTextColor(android.graphics.Color.GRAY);
            mDotsLayout.addView(dotsTextView[i]);
        }
        dotsTextView[0].setTextColor(Color.WHITE);
    }

XML

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#00000000"/>


    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/introImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:id="@+id/image_count"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        android:gravity="center|bottom"
        android:orientation="horizontal"/>
</FrameLayout>

其他回答

我创建了一个库来解决ViewPager中页面指示器的需求。我的库中包含一个名为DotIndicator的视图。要使用我的库,请在gradle构建文件中添加compile 'com.matthew-tamlin:sliding- introduce -screen:3.2.0'。

视图可以通过添加以下内容添加到布局中:

    <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:numberOfDots=YOUR_INT_HERE
            app:selectedDotIndex=YOUR_INT_HERE/>

上面的代码完美地复制了谷歌启动器主屏幕上的点的功能,但是如果你想进一步自定义它,那么可以添加以下属性:

app:unselectedDotDiameter和app:selectedDotDiameter设置圆点的直径 app:unselectedDotColor和app:selectedDotColor设置圆点的颜色 app:spacingBetweenDots来改变点之间的距离 app:dotTransitionDuration设置动画从小到大(然后返回)的变化的时间

此外,视图可以通过以下方式创建:

DotIndicator indicator = new DotIndicator(context);

方法用于修改属性,类似于属性。要更新指示器以显示所选的不同页面,只需调用方法指示器。setSelectedItem(int, true)来自viewpager . onpagechangelister . onpageselected (int)。

下面是一个使用它的例子:

如果你感兴趣的话,这个库实际上是为了制作上面gif中显示的介绍屏幕而设计的。

Github源代码可在这里:https://github.com/MatthewTamlin/SlidingIntroScreen

viewPager.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {

                switch (position) {
    case 0:
        img_page1.setImageResource(R.drawable.dot_selected);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 1:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot_selected);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 2:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot_selected);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 3:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot_selected);
        break;

    default:
        break;
    }


            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });

自2012年以来,ViewPagerIndicator一直没有更新,并得到了几个从未修复的错误。

我终于找到了一个替代的光库,显示漂亮的点为viewpager,这里是链接:

https://github.com/ongakuer/CircleIndicator

易于实施!

@Junaid提供的解决方案可以简化。 而不是创建一个选择器(tab_selector.xml),你可以简单地直接在TabLayout上设置绘图。

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:tabBackground="@drawable/tab_indicator_default"
        app:tabIndicator="@drawable/tab_indicator_selected"
        app:tabIndicatorColor="<youColor>"
        app:tabIndicatorGravity="center"
        app:tabIndicatorHeight="8dp" />

app:tabIndicatorHeight与“tab_indicator_selected.xml”中的值保持一致。 按照这种方法,你可以保持TabLayout的默认动画。 通过编程,你必须将选项卡设置为所选:

object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        val tab = binding.tabLayout.getTabAt(position)
        binding.tabLayout.selectTab(tab, true)
    }
}

请注意,我使用了ViewPager2。应该有使用ViewPager的等效方法。

下面是我如何做到这一点,有点类似于上面的解决方案。只要确保在下载完所有图像后调用loadDots()方法即可。

    private int dotsCount;
    private TextView dotsTextView[];

    private void setupAdapter() {
        adapter = new SomeAdapter(getContext(), images);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
    }

    private final ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < dotsCount; i++)
                dotsTextView[i].setTextColor(Color.GRAY);

            dotsTextView[position].setTextColor(Color.WHITE);
        }

        @Override
        public void onPageScrollStateChanged(int state) {}
    };

    protected void loadDots() {
        dotsCount = adapter.getCount();
        dotsTextView = new TextView[dotsCount];
        for (int i = 0; i < dotsCount; i++) {
            dotsTextView[i] = new TextView(getContext());
            dotsTextView[i].setText(R.string.dot);
            dotsTextView[i].setTextSize(45);
            dotsTextView[i].setTypeface(null, Typeface.BOLD);
            dotsTextView[i].setTextColor(android.graphics.Color.GRAY);
            mDotsLayout.addView(dotsTextView[i]);
        }
        dotsTextView[0].setTextColor(Color.WHITE);
    }

XML

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#00000000"/>


    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/introImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:id="@+id/image_count"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        android:gravity="center|bottom"
        android:orientation="horizontal"/>
</FrameLayout>