自定义简单的viewpager指示器

最新推荐文章于 2024-06-23 09:46:46 发布

u013908616

最新推荐文章于 2024-06-23 09:46:46 发布

阅读量605

点赞数

分类专栏： Indicator 文章标签： fragmentPagerIndicator

本文链接：https://blog.csdn.net/u013908616/article/details/79035528

版权

Indicator 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先说说思路：

1：viewpager不用说，直接和fragemntStatepageAdapter配合使用，就可以了，无需多言

2：在布局中的viewpager的上方，插入一个linearLayout，来放指示器：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.maoyudun.testviewpagerfragment.MainActivity">

    <LinearLayout
        android:id="@+id/indicator_Layout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:paddingTop="5dp"
        android:paddingBottom="5dp">
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/indicator_Layout"
        app:layout_constraintRight_toRightOf="@id/indicator_Layout"
        app:layout_constraintTop_toBottomOf="@id/indicator_Layout"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp" />

</android.support.constraint.ConstraintLayout>

3：在代码中，给indicator_Layout添加item：

final String[] tabs = {"全部", "未付款", "未发货", "已发货", "已评价"};
for (int i = 0; i < 5; i++)
{
    TextView indicatorTextView = new TextView(this);
    indicatorTextView.setText(tabs[i]);
    indicatorTextView.setTextColor(getResources().getColor((i == 0) ? R.color.red : R.color.yellow));
    indicatorTextView.setTextSize(16);
    indicatorTextView.setGravity(Gravity.CENTER);
    indicatorTextView.setPadding(0, 0, 0, 0 );
    indicatorTextView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));
    indicatorLayout.addView(indicatorTextView);
}

4：然后给viewpager添加OnPageChangeListener，监听页面的更改状态，并根据页面的更改状态改变上方linearlayout中的item的颜色，达到指示器的作用：

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
    {}
    @Override
    public void onPageSelected(int position)
    {
        for (int i = 0; i < tabs.length; i++)
        {
            int color = getResources().getColor(R.color.yellow);
            if(i == position)
            {
                color = getResources().getColor(R.color.red);
            }
            TextView textView = (TextView)indicatorLayout.getChildAt(i);
            textView.setTextColor(color);
        }
    }
    @Override
    public void onPageScrollStateChanged(int state)
    {}
});