如何更改 viewpager 中每个片段的点指示器(活动和非活动)的颜色?
How to change the color of dots indicator (both active and inactive) per fragment in viewpager?
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
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));
}
为了简单起见,假设您已经实现了 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);
}
}
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
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));
}
为了简单起见,假设您已经实现了 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);
}
}