带有底点的 Android ViewPager [英] Android ViewPager with bottom dots

问题描述

我想在我的 ViewPager 中添加 3 个底部点，就像这样.

我使用 FragmentActivity 并支持库 ViewPager.

解决方案

不需要那么多代码.

您可以通过仅使用 viewpager 和 tablayout 来完成所有这些工作，而无需编写太多代码..p>

您的主要布局:

<RelativeLayoutxmlns: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">

如下连接您的 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

tab_indicator_default.xml


tab_selector.xml

感觉像我一样懒惰?好了，上面所有的代码都被转换成一个库了！用法在您的 gradle 中添加以下内容:实现 'com.chabbal:slidingdotsplash:1.0.2'将以下内容添加到您的 Activity 或 Fragment 布局中.

<com.chabbal.slidingdotsplash.SlidingSplashViewandroid:id=@+id/splash"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></整数数组>

完成！Extra 为了监听页面变化，使用 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屋！