带有底部圆点的 Android ViewPager [英] Android ViewPager with bottom dots
问题描述
我想在我的 ViewPager 中添加 3 个底部点,就像这样.
我使用 FragmentActivity 并支持库 ViewPager.
不需要那么多代码.
只需将 viewpager
与 tablayout
结合使用,您无需编写太多代码即可完成所有这些工作.>
您的主要布局:
<android.support.v4.view.ViewPagerandroid:id="@+id/pager";android:layout_width=match_parent"android:layout_height=match_parent"></android.support.v4.view.ViewPager><android.support.design.widget.TabLayoutandroid: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);
就是这样,你可以走了.
您需要在 drawable 文件夹中创建以下 xml 资源文件.
tab_indicator_selected.xml
<形状android:innerRadius=0dp"机器人:形状=环"机器人:厚度=4dp"android:useLevel="false";xmlns:android=http://schemas.android.com/apk/res/android"><solid android:color="@color/colorAccent"/></形状>
tab_indicator_default.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadius=0dp"机器人:形状=椭圆形"机器人:厚度=2dp"android:useLevel="false"><solid android:color="@android:color/darker_gray"/></形状>
tab_selector.xml
<选择器 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"/></选择器>
和我一样懒惰?好了,上面所有的代码都转换成一个库了!用法在您的 gradle 中添加以下内容:实现'com.chabbal:slidingdotsplash:1.0.2'
将以下内容添加到您的 Activity 或 Fragment 布局中.
<com.chabbal.slidingdotsplash.SlidingSplashViewandroid:id="@+id/闪屏";android:layout_width=match_parent"android:layout_height=match_parent"app:imageResources="@array/img_id_arr"/>
在 strings.xml
中创建一个整数数组,例如
<整数数组名称=img_id_arr"><item>@drawable/img1</item><item>@drawable/img2</item><item>@drawable/img3</item><item>@drawable/img4</item></整数数组>
完成!额外为了监听页面变化使用addOnPageChangeListener(listener);
Github 链接.
I want to add 3 bottom dots to my ViewPager, like this.
I use FragmentActivity and support library ViewPager.
No need for that much code.
You can do all this stuff without coding so much by using only viewpager
with tablayout
.
Your main Layout:
<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>
Hook up your UI elements inactivity or fragment as follows:
Java Code:
mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);
That's it, you are good to go.
You will need to create the following xml resource file in the drawable folder.
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>
Feeling as lazy as I am? Well, all the above code is converted into a library!
Usage
Add the following in your gradle:
implementation 'com.chabbal:slidingdotsplash:1.0.2'
Add the following to your Activity or Fragment layout.
<com.chabbal.slidingdotsplash.SlidingSplashView
android:id="@+id/splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imageResources="@array/img_id_arr"/>
Create an integer array in strings.xml
e.g.
<integer-array name="img_id_arr">
<item>@drawable/img1</item>
<item>@drawable/img2</item>
<item>@drawable/img3</item>
<item>@drawable/img4</item>
</integer-array>
Done!
Extra in order to listen page changes use addOnPageChangeListener(listener);
Github link.
这篇关于带有底部圆点的 Android ViewPager的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!