如何动态更改 Viewpager 选项卡颜色？
How to change Viewpager tab colour dynamically?
如何像这样改变标签的颜色？当我 click/swipe 到绿色或任何其他选项卡时，选项卡颜色应更改为相应的颜色，其余选项卡颜色应更改为黑色。我怎样才能做到这一点？我正在使用 Viewpager。
我在 onpagelistener 中试过这段代码：
if(position == 0) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
}
else if(position == 1) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
}
但是上面的代码没有效果。
我正在使用此代码：Android Viewpager tutorial Androidhive
我遇到了类似的问题。就我而言，每当用户单击导航抽屉中的片段之一时，我想更改操作栏的颜色。
这是我用来解决这个问题的代码。
由于无法从片段访问操作栏，因此必须在主菜单中创建它。这是我使用的方法。
public void restoreActionBar(int parsedColor) {
this.parsedColor = parsedColor;
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
}
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
// Only show items in the action bar relevant to this screen
// if the drawer is not showing. Otherwise, let the drawer
// decide what to show in the action bar.
getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
restoreActionBar(parsedColor);
return true;
}
return super.onCreateOptionsMenu(menu);
}
现在在扩展片段的 class 中：
public void onAttach(Activity activity) {
super.onAttach(activity);
((MainActivityTrekkly)activity).onSectionAttached(4);
MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
mA.restoreActionBar(Color.parseColor("#028482"));
}
我在导航抽屉中使用了它，因此您可能需要调整此代码。
这有帮助吗？
有教程Styling tabs in the Android action bar。对于 API>=3，您可以选择 parent theme 作为 Theme.Holo，或者对于支持库 V7 等选择 Theme.AppCompat
此外，对于 <item name="android:background">，您可以将其设置为您为选项卡状态更改创建的选择器：
android:background="@drawable/selector_tab"
对于 selector_tab 可以是：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/pressed_color"
android:state_pressed="true" />
<item android:color="@color/selected_color"
android:state_selected="true" />
<item android:color="@color/normal_color" />
</selector>
[更新]
要动态更改选项卡颜色，建议使用带有选项卡的自定义视图：
//your_custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/tab_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="1" />
</LinearLayout>
LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);
然后 setCustomeView(customView) 添加标签到 ActionBar。在您的 tab/page 更改侦听器中：
Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);
要消除由自定义视图引起的选项卡周围可能存在的间隙，您可以设置选项卡样式：
<style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
并相应地使用您的主题母体。
希望对您有所帮助！
终于解决了。感谢@Xcihnegn 的想法。这是解决方案：
/* For setting default selected tab */
actionBar.setSelectedNavigationItem(0);
actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
/*on changing the page make respected tab selected */
actionBar.setSelectedNavigationItem(position);
if(position == 0)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
}else if(position == 1)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
}else if(position == 2)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
}
当一个选项卡被取消选中时，setCustomView(null) 将其布局更改回其原始黑色。所以只有选定的标签会改变颜色。取消选择选项卡会将其布局更改为原始形式。
@Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
if(tab.getPosition() == 0)
{
actionBar.getTabAt(0).setCustomView(null);
}else if(tab.getPosition() == 1)
{
actionBar.getTabAt(1).setCustomView(null);
}else if(tab.getPosition() == 2)
{
actionBar.getTabAt(2).setCustomView(null);
}
}
}
要删除设置自定义视图时出现的不必要的填充，我们应该在 styles.xml 中使用此代码。
<style name="Custom.ActionBar.TabView.Empty" parent="@android:style/Widget.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
<item name="android:actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
</style>
不要忘记在 activity.
的 setcontentview 上方添加这段代码
settheme(R.styles.CustomActionbartab);
选项卡的自定义布局。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="RED"
android:textStyle="bold"
android:gravity="center"
android:textColor="#ffffff"/>
</RelativeLayout>
如何像这样改变标签的颜色？当我 click/swipe 到绿色或任何其他选项卡时，选项卡颜色应更改为相应的颜色，其余选项卡颜色应更改为黑色。我怎样才能做到这一点？我正在使用 Viewpager。
我在 onpagelistener 中试过这段代码：
if(position == 0) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
}
else if(position == 1) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
}
但是上面的代码没有效果。
我正在使用此代码：Android Viewpager tutorial Androidhive
我遇到了类似的问题。就我而言，每当用户单击导航抽屉中的片段之一时，我想更改操作栏的颜色。
这是我用来解决这个问题的代码。
由于无法从片段访问操作栏，因此必须在主菜单中创建它。这是我使用的方法。
public void restoreActionBar(int parsedColor) {
this.parsedColor = parsedColor;
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
}
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
// Only show items in the action bar relevant to this screen
// if the drawer is not showing. Otherwise, let the drawer
// decide what to show in the action bar.
getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
restoreActionBar(parsedColor);
return true;
}
return super.onCreateOptionsMenu(menu);
}
现在在扩展片段的 class 中：
public void onAttach(Activity activity) {
super.onAttach(activity);
((MainActivityTrekkly)activity).onSectionAttached(4);
MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
mA.restoreActionBar(Color.parseColor("#028482"));
}
我在导航抽屉中使用了它，因此您可能需要调整此代码。
这有帮助吗？
有教程Styling tabs in the Android action bar。对于 API>=3，您可以选择 parent theme 作为 Theme.Holo，或者对于支持库 V7 等选择 Theme.AppCompat
此外，对于 <item name="android:background">，您可以将其设置为您为选项卡状态更改创建的选择器：
android:background="@drawable/selector_tab"
对于 selector_tab 可以是：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/pressed_color"
android:state_pressed="true" />
<item android:color="@color/selected_color"
android:state_selected="true" />
<item android:color="@color/normal_color" />
</selector>
[更新]
要动态更改选项卡颜色，建议使用带有选项卡的自定义视图：
//your_custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/tab_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="1" />
</LinearLayout>
LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);
然后 setCustomeView(customView) 添加标签到 ActionBar。在您的 tab/page 更改侦听器中：
Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);
要消除由自定义视图引起的选项卡周围可能存在的间隙，您可以设置选项卡样式：
<style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
并相应地使用您的主题母体。
希望对您有所帮助！
终于解决了。感谢@Xcihnegn 的想法。这是解决方案：
/* For setting default selected tab */
actionBar.setSelectedNavigationItem(0);
actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
/*on changing the page make respected tab selected */
actionBar.setSelectedNavigationItem(position);
if(position == 0)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
}else if(position == 1)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
}else if(position == 2)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
}
当一个选项卡被取消选中时，setCustomView(null) 将其布局更改回其原始黑色。所以只有选定的标签会改变颜色。取消选择选项卡会将其布局更改为原始形式。
@Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
if(tab.getPosition() == 0)
{
actionBar.getTabAt(0).setCustomView(null);
}else if(tab.getPosition() == 1)
{
actionBar.getTabAt(1).setCustomView(null);
}else if(tab.getPosition() == 2)
{
actionBar.getTabAt(2).setCustomView(null);
}
}
}
要删除设置自定义视图时出现的不必要的填充，我们应该在 styles.xml 中使用此代码。
<style name="Custom.ActionBar.TabView.Empty" parent="@android:style/Widget.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
<item name="android:actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
</style>
不要忘记在 activity.
的 setcontentview 上方添加这段代码settheme(R.styles.CustomActionbartab);
选项卡的自定义布局。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="RED"
android:textStyle="bold"
android:gravity="center"
android:textColor="#ffffff"/>
</RelativeLayout>