这是我在主要活动中的代码
public class FilterActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_filter);
// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
viewPager.setAdapter(pageAdapter);
// Give the TabLayout the ViewPager
final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
}
}
这是我在 XML 中的代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="@+id/app_bar"
layout="@layout/app_bar">
</include>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="fill_parent"
style="@style/MyCustomTabLayout"
android:layout_height="48dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</LinearLayout>
我想在选择一个选项卡时更改其背景颜色
最终对我有用的内容与@如果我是DJ建议的类似,但
tabBackground
应该位于layout
文件中,而not位于style
内,所以它看起来像:
res/layout/somefile.xml
:
<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>
和选择器
res/drawable/tab_color_selector.xml
:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
<item android:drawable="@color/tab_background_unselected"/>
</selector>
你可以试试这个:
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabBackground">@drawable/background</item>
</style>
在您的后台 xml 文件中:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/white" />
<item android:drawable="@color/black" />
</selector>
在xml中添加属性:
<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>
并在drawable文件夹中创建tab_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
<item android:drawable="@color/tab_background_unselected"/>
</selector>
我能找到的方法之一是使用这样的选项卡指示器:
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/normal_unselected_color"
app:tabIndicatorColor="@color/selected_color"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="150dp"
app:tabSelectedTextColor="@color/selected_text_color"
app:tabTextColor="@color/unselected_text_color">
..... tab items here .....
</com.google.android.material.tabs.TabLayout>
诀窍是:
这也可以保证切换选项卡时的流畅动画
您可以在 xml 中找到它。
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@color/colorGray"
app:tabSelectedTextColor="@color/colorWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
经过一番混乱之后,这就是我获得所需外观的方式(至少在模拟器中),并且它保持了连锁反应。
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_selector"
app:tabIconTint="@drawable/tab_selector"
app:tabIconTintMode="src_atop"
app:tabTextColor="@drawable/tab_selector" />
还有
@drawable/tab_selector
:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorPrimary" android:drawable="@color/colorPrimaryDark" android:state_selected="true" />
<item android:color="@color/colorPrimaryDark" android:drawable="@color/colorPrimary" />
</selector>
仅供参考:这是在我将
color
参数添加到 @drawable/tab_selector
之前模拟器显示的内容:
您尝试过检查API吗?
OnTabSelectedListener
事件创建一个侦听器,然后当用户选择任何选项卡时,您应该检查它是否正确,然后使用 tabLayout.setBackgroundColor(int color)
更改背景颜色,或者如果它不是正确的选项卡正确的选项卡确保您使用相同的方法再次变回正常颜色。
因为我找到了最适合我的选项,它也适用于动画。
您可以使用
indicator
它本身作为背景。
您可以设置
app:tabIndicatorGravity="stretch"
属性用作背景。
示例:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorGravity="stretch"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/colorAccent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chef" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" />
</android.support.design.widget.TabLayout>
希望对您有帮助。
由于 ViewPager 倾向于被 ViewPager2 取代,我们需要迁移到它。
使用 Java 的快速解决方法如下:
final List<String> colors = new ArrayList<String>(){
{
add("#FF0000");
add("#800000");
add("#FFFF00");
}
};
ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(your_data_structure);
viewPager.setAdapter(adapter);
final TabLayout tabs = findViewById(R.id.tabs);
tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.view.setAlpha((float) 0.5);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.view.setAlpha(1);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
TabLayoutMediator mediator = new TabLayoutMediator(tabs, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
tab.setText("Tab" + position);
/*
* With this feature the TabIndicator color is ignored
* or covered by the new color ex.(if alpha channel is changed the indicator can be seen through)
*/
tab.view.setBackgroundColor(Color.parseColor(colors.get(position))); //You can use your HEX string color
}
});
mediator.attach();
您可以像这样更改每个选项卡的背景或波纹颜色:
//set ripple color for each tab
for(int n = 0; n < mTabLayout.getTabCount(); n++){
View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);
if(tab != null && tab.getBackground() instanceof RippleDrawable){
RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
if (rippleDrawable != null) {
rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
}
}
}
您可以通过此属性更改选项卡的背景颜色
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'
您可以简单地在 tabLayout.addOnTabSelectedListener 中使用 tab.view.setBackground(drawable) 如下所示:
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.view.setBackground(getResources().getDrawable(R.drawable.ic_rectangle_1345));
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.view.setBackgroundColor(Color.TRANSPARENT);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
针对某些顽固情况的另一个修复是将 TabLayout 的背景设置为形状选择器,如下例所示:
tablayout_bg.xml 位于 /res/drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/white" />
</shape>
fragment_layout.xml
<com.google.android.material.tabs.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tablayout_bg"
app:tabMode="scrollable"
>
最简单的解决方案之一是从 color.xml 文件更改 colorPrimary。