如何更改 viewpager 中每个片段的点指示器（活动和非活动）的颜色？

Posted 2023-04-19

【中文标题】如何更改 viewpager 中每个片段的点指示器（活动和非活动）的颜色？

【英文标题】：How to change the color of dots indicator (both active and inactive) per fragment in viewpager?

【发布时间】：2020-11-06 21:49:46

【问题描述】：

A picture of what I'm trying to achieve

我已经使用 XML 设置了点指示器的活动和非活动状态的颜色。但是，我对如何更改每个屏幕的活动和非活动状态的颜色感到非常困惑，如图所示。 我已经使用片段和 viewpager 创建了布局，并添加了一个 tablayout。

MainActivity.kt

class MainActivity : AppCompatActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adapter = MyViewPagerAdapter(supportFragmentManager)
        adapter.addFragment(TakeFragment())
        adapter.addFragment(UploadFragment())
        adapter.addFragment(PaidFragment())
        viewPager.adapter = adapter
        tab_layout.setupWithViewPager(viewPager)

    

    class MyViewPagerAdapter(fragmentManager: FragmentManager) : FragmentPagerAdapter(fragmentManager)

        val fragmentList : MutableList<Fragment> = ArrayList()

        override fun getItem(position: Int): Fragment 
            return fragmentList[position]
        

        override fun getCount(): Int 
            return fragmentList.size
        

        fun addFragment(fragment: Fragment)
            fragmentList.add(fragment)
        
    

activity_main.xml

    <FrameLayout
        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:id="@+id/frag_container"
        android:layout_
        android:layout_
        tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_
        android:layout_>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_
            android:layout_
            android:background="#00000000"
            app:tabBackground="@drawable/tab_selector"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp" />

    </androidx.viewpager.widget.ViewPager>

</FrameLayout>

tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

selected_dot.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="#8EBFE8"/>
        </shape>
    </item>
</layer-list>

default_dot.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="#AAD6F9"/>
        </shape>
    </item>
</layer-list>

【问题讨论】：

参考这个-->droidmentor.com/create-onboard-screens-using-viewpager

【参考方案1】：

为了简单起见，假设您已经实现了 ViewPager.OnPageChangeListener

@Override
    public void onPageSelected(int i) 
        Log.v(TAG, " ++++++++    onPageSelected:  " + i);
        mViewPager.setCurrentItem(i);

        //TODO You can use this position: to write other dependent logic
        if (i == 0) 
            System.out.println("0");
            mImv1.setBackgroundResource(R.drawable.activate_one);
            mImv2.setBackgroundResource(R.drawable.default_one);

         else 
            System.out.println("1");
            mImv1.setBackgroundResource(R.drawable.default_one);
            mImv2.setBackgroundResource(R.drawable.activate_one);
        

    

【讨论】：

嘿，这里的mImv1和mImv2是什么？

有没有办法在不使用 2 个单独的可绘制对象的情况下更改它的颜色？

【参考方案2】：

private int dotsCount;
private ImageView[] dots;

private void addViewPagerDots() 

    dotsCount = viewPagerAdapter.getCount();
    dots = new ImageView[dotsCount];

    for (int i = 0; i < dotsCount; i++) 
        dots[i] = new ImageView(this);
        dots[i].setImageDrawable(getResources().getDrawable(R.drawable.default_dot));

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );

        params.setMargins(5, 0, 5, 0);

        final int presentPosition = i;
        dots[presentPosition].setOnTouchListener(new View.OnTouchListener() 
            @Override
            public boolean onTouch(View v, MotionEvent event) 
                viewPager.setCurrentItem(presentPosition);
                return true;
            

        );
        dotsLayout.addView(dots[i], params);
    
    dots[0].setImageDrawable(getResources().getDrawable(R.drawable.selected_dot));