我想在ViewPager中添加3个底部点，像这样。
我使用FragmentActivity和支持库ViewPager。
当前回答
我创建了一个库来解决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
其他回答
@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的等效方法。
我创建了一个库来解决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
下面是我如何做到这一点，有点类似于上面的解决方案。只要确保在下载完所有图像后调用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>
不需要那么多代码。
你可以只使用带有tablayout的viewpager来完成所有这些事情，而不需要编写太多代码。
你的主要布局:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"/>
</RelativeLayout>
将你的UI元素按如下方式连接起来:
Java代码:
mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);
就这样，你可以开始了。
您需要在可绘制文件夹中创建以下xml资源文件。
tab_indicator_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent"/>
</shape>
tab_indicator_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:thickness="2dp"
android:useLevel="false">
<solid android:color="@android:color/darker_gray"/>
</shape>
tab_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_indicator_selected"
android:state_selected="true"/>
<item android:drawable="@drawable/tab_indicator_default"/>
</selector>
感觉和我一样懒惰吗?好了，上面所有的代码都转换成一个库! 使用 在gradle中添加以下内容: 实现“com.chabbal: slidingdotsplash: 1.0.2” 将以下内容添加到您的活动或片段布局中。
<com.chabbal.slidingdotsplash.SlidingSplashView
android:id="@+id/splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imageResources="@array/img_id_arr"/>
在strings.xml中创建一个整数数组。
<integer-array name="img_id_arr">
<item>@drawable/img1</item>
<item>@drawable/img2</item>
<item>@drawable/img3</item>
<item>@drawable/img4</item>
</integer-array>
完成了! 额外的为了监听页面更改使用addOnPageChangeListener(监听器); Github链接。
自2012年以来，ViewPagerIndicator一直没有更新，并得到了几个从未修复的错误。
我终于找到了一个替代的光库，显示漂亮的点为viewpager，这里是链接:
https://github.com/ongakuer/CircleIndicator
易于实施!
推荐文章
- 无法解析主机"<URL here>"没有与主机名关联的地址
- getActivity()在Fragment函数中返回null
- 按钮背景是透明的
- 在Mac OS X上哪里安装Android SDK ?
- 我如何获得图像缩放功能?
- 在Android应用程序中显示当前时间和日期
- BottomSheetDialogFragment的圆角
- 在应用程序启动时出现“无法获得BatchedBridge，请确保您的bundle被正确打包”的错误
- 我如何改变默认对话框按钮的文本颜色在安卓5
- 更改单选按钮的圆圈颜色
- 如何在android中复制一个文件?
- adb找不到我的设备/手机(MacOS X)
- 如何在新的材质主题中改变背面箭头的颜色?
- androidviewpager与底部点
- 相同的导航抽屉在不同的活动
