android: ViewPager Indicator like Tinders 图片

Question

所以，我有一个 ViewPager，我想实现一个简单的 Page-Indicator，就像 Tinder 对其图片所做的那样：

我以为很容易找到图书馆，但我这辈子都找不到。

我不关心条形是通过操纵点的宽度还是使用可绘制对象实现的，库唯一应该做的就是拉伸条形，所以他们总是占 ViewPager.

宽度的 100%

任何人都知道这样的库，或者没有库的帮助很容易实现它？

Answer 1

让我们一步步解决这个问题。

首先，在您的项目中添加 Jake Wharton 的 ViewPager 库。转到您的 build.gradle（模块：应用程序）并添加此行并同步您的项目。

implementation 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

其次，在 viewPager 所在的 xml 文件中添加 LinePageIndicator。

<com.viewpagerindicator.LinePageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:strokeWidth="4dp"
        app:unselectedColor="#FF888888"
        app:selectedColor="#FF880000"/>

第三步也是最后一步，将适配器连接到您的 viewpager 后，添加此代码以获得所需的输出。

LinePageIndicator linePageIndicator = view.findViewById(R.id.indicator);
    linePageIndicator.setViewPager(viewPager);

    //As we are measuring screen width, you should put the calculation inside onGlobalLayoutListener to get the correct screen width
    linePageIndicator.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            int numberOfItems = viewPager.getChildCount();
            DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
            float widthPixel = displayMetrics.widthPixels;

            float itemWidth = widthPixel/numberOfItems;
            linePageIndicator.setLineWidth(itemWidth);
        }
    });

就是这样，你有一个全屏宽线指示器。

android: ViewPager Indicator like Tinders 图片

android: ViewPager Indicator like Tinders pictures

android

android-viewpager

viewpagerindicator