单击或滑动操作栏选项卡上的更改图标 - Android
Change icon on ActionBar tab click or swipe - Android
我花了很长时间才将我的 ActionBar 选项卡图标显示在拆分 ActionBar 中，并将选项卡指示器颜色设置为白色。所以现在我需要做的就是在未选中时将图标换成不同的颜色。所选图标（和指示器）应保持白色。但是怎么办？我使用 Android Action Bar Style Generator 来制作我的大部分标签，所以我对触摸我的 styles.xml 有点紧张（那里已经有很多东西了）。我曾经做过一个较旧的应用程序，您可以在其中使用可绘制状态选择器 xml，但我使用的是 TabHost，现在已经非常贬值了，所以我不能再使用它了。但是，如果您知道一种简单的方法来使用可绘制文件或我的 styles.xml 中的其他内容，或者可能是点击监听器？我不知道，但我很想学习。基本上未选中的图标应该是浅蓝色的。
我也在 ViewPager 中使用滑动标签，所以当我滑动时，未选中和选中的图标应该是它们正确的颜色。
更新： 原来我必须将代码添加到我的 onTabSelected() 和 onTabUnselected()，然后它就像魔术一样工作：
@Override
public void onTabSelected(ActionBar.Tab tab,
android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
if (tab.getPosition() == PHOTO_TAB)
photo.setIcon(R.drawable.ab_camera);
else if (tab.getPosition() == VIDEO_TAB)
video.setIcon(R.drawable.ab_video);
else if (tab.getPosition() == AUDIO_TAB)
audio.setIcon(R.drawable.ab_microphone);
else if (tab.getPosition() == TEXT_TAB)
text.setIcon(R.drawable.ab_write);
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
android.support.v4.app.FragmentTransaction fragmentTransaction) {
photo.setIcon(R.drawable.ab_camera_unselected);
video.setIcon(R.drawable.ab_video_unselected);
audio.setIcon(R.drawable.ab_sounds_unselected);
text.setIcon(R.drawable.ab_write_unselected);
}
CuteCollection.java
package org.azurespot.cutecollection;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;
import android.view.MenuItem;
import org.azurespot.R;
/**
* Created by mizu on 1/26/15.
*/
public class CuteCollection extends ActionBarActivity implements TabListener{
private static final int PHOTO_TAB = 0;
private static final int VIDEO_TAB = 1;
private static final int AUDIO_TAB = 2;
private static final int TEXT_TAB = 3;
PhotoTab photoTab;
TextTab textTab;
VideoTab videoTab;
AudioTab audioTab;
ViewPager pager;
TabsAdapter tabsAdapter = new TabsAdapter(getSupportFragmentManager());
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_cute_collection);
// Instantiate tabs
photoTab = new PhotoTab();
textTab = new TextTab();
videoTab = new VideoTab();
audioTab = new AudioTab();
// Set up the action bar.
final ActionBar actionBar = getSupportActionBar();
getSupportActionBar().setStackedBackgroundDrawable
(new ColorDrawable(Color.parseColor("#7e8287")));
// Specify that we will be displaying tabs in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Shows the up carat near app icon in ActionBar
getSupportActionBar().setDisplayUseLogoEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Initialize the ViewPager and set an adapter
pager = (ViewPager) findViewById(R.id.viewpager);
pager.setAdapter(tabsAdapter);
pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// When swiping between different app sections, select the corresponding tab.
// We can also use ActionBar.Tab#select() to do this if we have a reference to the
// Tab.
actionBar.setSelectedNavigationItem(position);
}
});
Tab photo = getSupportActionBar().newTab().setIcon(R.drawable.ab_camera).setTabListener(this);
Tab video = getSupportActionBar().newTab().setIcon(R.drawable.ab_video).setTabListener(this);
Tab audio = getSupportActionBar().newTab().setIcon(R.drawable.ab_microphone).setTabListener(this);
Tab text = getSupportActionBar().newTab().setIcon(R.drawable.ab_write).setTabListener(this);
getSupportActionBar().addTab(photo);
getSupportActionBar().addTab(video);
getSupportActionBar().addTab(audio);
getSupportActionBar().addTab(text);
}
// Next 3 methods are mandatory for interface
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
}
private class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
/**
* @return the number of pages (tabs) to display
*/
@Override
public int getCount() {
return 4;
}
// @Override
// public CharSequence getPageTitle(int position) {
// switch (position) {
// case 0:
// return "Photos";
// case 1:
// return "Videos";
// case 2:
// return "Sounds";
// case 3:
// return "Poems";
// }
//
// return null;
// }
@Override
public Fragment getItem(int position) {
switch(position){
case PHOTO_TAB:
return photoTab;
case VIDEO_TAB :
return videoTab;
case AUDIO_TAB:
return audioTab;
case TEXT_TAB:
return textTab;
default:
return null;
}
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Makes the UP caret go back to the previous fragment MakeCuteHome
switch (item.getItemId()) {
case android.R.id.home:
android.app.FragmentManager fm= getFragmentManager();
fm.popBackStack();
finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Tabs" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">@drawable/selectable_background_tabs</item>
<item name="popupMenuStyle">@style/PopupMenu.Tabs</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Tabs</item>
<item name="actionBarTabStyle">@style/ActionBarTabStyle.Tabs</item>
<item name="actionDropDownStyle">@style/DropDownNav.Tabs</item>
<item name="actionBarStyle">@style/ActionBar.Solid.Tabs</item>
<item name="actionModeBackground">@drawable/cab_background_top_tabs</item>
<item name="actionModeSplitBackground">@drawable/cab_background_bottom_tabs</item>
<item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Tabs</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">@style/Theme.Tabs.Widget</item>
</style>
<style name="ActionBar.Solid.Tabs" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">@drawable/ab_solid_tabs</item>
<item name="backgroundStacked">@drawable/ab_stacked_solid_tabs</item>
<item name="backgroundSplit">@drawable/ab_bottom_solid_tabs</item>
<item name="progressBarStyle">@style/ProgressBar.Tabs</item>
</style>
<style name="ActionBar.Transparent.Tabs" parent="@style/Widget.AppCompat.ActionBar">
<item name="background">@drawable/ab_transparent_tabs</item>
<item name="progressBarStyle">@style/ProgressBar.Tabs</item>
</style>
<style name="PopupMenu.Tabs" parent="@style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">@drawable/menu_dropdown_panel_tabs</item>
</style>
<style name="DropDownListView.Tabs" parent="@style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">@drawable/selectable_background_tabs</item>
</style>
<style name="ActionBarTabStyle.Tabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">@drawable/tab_indicator_ab_tabs</item>
</style>
<style name="DropDownNav.Tabs" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">@drawable/spinner_background_ab_tabs</item>
<item name="android:popupBackground">@drawable/menu_dropdown_panel_tabs</item>
<item name="android:dropDownSelector">@drawable/selectable_background_tabs</item>
</style>
<style name="ProgressBar.Tabs" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">@drawable/progress_horizontal_tabs</item>
</style>
<style name="ActionButton.CloseMode.Tabs" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">@drawable/btn_cab_done_tabs</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Tabs.Widget" parent="@style/Theme.AppCompat">
<item name="popupMenuStyle">@style/PopupMenu.Tabs</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Tabs</item>
</style>
</resources>
您可以通过执行以下操作更改选项卡的图标：
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
//to set tab's icon
tab.setIcon(id_of_the_icon_to_change_to);
//or if you don't have a new icon to change to, change the alpha of the current icon to make tab darker/lighter (0 means fully transparent, and 255 means fully opaque.)
tab.getIcon().setAlpha(255);
}
我花了很长时间才将我的 ActionBar 选项卡图标显示在拆分 ActionBar 中，并将选项卡指示器颜色设置为白色。所以现在我需要做的就是在未选中时将图标换成不同的颜色。所选图标（和指示器）应保持白色。但是怎么办？我使用 Android Action Bar Style Generator 来制作我的大部分标签，所以我对触摸我的 styles.xml 有点紧张（那里已经有很多东西了）。我曾经做过一个较旧的应用程序，您可以在其中使用可绘制状态选择器 xml，但我使用的是 TabHost，现在已经非常贬值了，所以我不能再使用它了。但是，如果您知道一种简单的方法来使用可绘制文件或我的 styles.xml 中的其他内容，或者可能是点击监听器？我不知道，但我很想学习。基本上未选中的图标应该是浅蓝色的。
我也在 ViewPager 中使用滑动标签，所以当我滑动时，未选中和选中的图标应该是它们正确的颜色。
更新： 原来我必须将代码添加到我的 onTabSelected() 和 onTabUnselected()，然后它就像魔术一样工作：
@Override
public void onTabSelected(ActionBar.Tab tab,
android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
if (tab.getPosition() == PHOTO_TAB)
photo.setIcon(R.drawable.ab_camera);
else if (tab.getPosition() == VIDEO_TAB)
video.setIcon(R.drawable.ab_video);
else if (tab.getPosition() == AUDIO_TAB)
audio.setIcon(R.drawable.ab_microphone);
else if (tab.getPosition() == TEXT_TAB)
text.setIcon(R.drawable.ab_write);
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
android.support.v4.app.FragmentTransaction fragmentTransaction) {
photo.setIcon(R.drawable.ab_camera_unselected);
video.setIcon(R.drawable.ab_video_unselected);
audio.setIcon(R.drawable.ab_sounds_unselected);
text.setIcon(R.drawable.ab_write_unselected);
}
CuteCollection.java
package org.azurespot.cutecollection;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;
import android.view.MenuItem;
import org.azurespot.R;
/**
* Created by mizu on 1/26/15.
*/
public class CuteCollection extends ActionBarActivity implements TabListener{
private static final int PHOTO_TAB = 0;
private static final int VIDEO_TAB = 1;
private static final int AUDIO_TAB = 2;
private static final int TEXT_TAB = 3;
PhotoTab photoTab;
TextTab textTab;
VideoTab videoTab;
AudioTab audioTab;
ViewPager pager;
TabsAdapter tabsAdapter = new TabsAdapter(getSupportFragmentManager());
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_cute_collection);
// Instantiate tabs
photoTab = new PhotoTab();
textTab = new TextTab();
videoTab = new VideoTab();
audioTab = new AudioTab();
// Set up the action bar.
final ActionBar actionBar = getSupportActionBar();
getSupportActionBar().setStackedBackgroundDrawable
(new ColorDrawable(Color.parseColor("#7e8287")));
// Specify that we will be displaying tabs in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Shows the up carat near app icon in ActionBar
getSupportActionBar().setDisplayUseLogoEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Initialize the ViewPager and set an adapter
pager = (ViewPager) findViewById(R.id.viewpager);
pager.setAdapter(tabsAdapter);
pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// When swiping between different app sections, select the corresponding tab.
// We can also use ActionBar.Tab#select() to do this if we have a reference to the
// Tab.
actionBar.setSelectedNavigationItem(position);
}
});
Tab photo = getSupportActionBar().newTab().setIcon(R.drawable.ab_camera).setTabListener(this);
Tab video = getSupportActionBar().newTab().setIcon(R.drawable.ab_video).setTabListener(this);
Tab audio = getSupportActionBar().newTab().setIcon(R.drawable.ab_microphone).setTabListener(this);
Tab text = getSupportActionBar().newTab().setIcon(R.drawable.ab_write).setTabListener(this);
getSupportActionBar().addTab(photo);
getSupportActionBar().addTab(video);
getSupportActionBar().addTab(audio);
getSupportActionBar().addTab(text);
}
// Next 3 methods are mandatory for interface
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
}
private class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
/**
* @return the number of pages (tabs) to display
*/
@Override
public int getCount() {
return 4;
}
// @Override
// public CharSequence getPageTitle(int position) {
// switch (position) {
// case 0:
// return "Photos";
// case 1:
// return "Videos";
// case 2:
// return "Sounds";
// case 3:
// return "Poems";
// }
//
// return null;
// }
@Override
public Fragment getItem(int position) {
switch(position){
case PHOTO_TAB:
return photoTab;
case VIDEO_TAB :
return videoTab;
case AUDIO_TAB:
return audioTab;
case TEXT_TAB:
return textTab;
default:
return null;
}
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Makes the UP caret go back to the previous fragment MakeCuteHome
switch (item.getItemId()) {
case android.R.id.home:
android.app.FragmentManager fm= getFragmentManager();
fm.popBackStack();
finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Tabs" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">@drawable/selectable_background_tabs</item>
<item name="popupMenuStyle">@style/PopupMenu.Tabs</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Tabs</item>
<item name="actionBarTabStyle">@style/ActionBarTabStyle.Tabs</item>
<item name="actionDropDownStyle">@style/DropDownNav.Tabs</item>
<item name="actionBarStyle">@style/ActionBar.Solid.Tabs</item>
<item name="actionModeBackground">@drawable/cab_background_top_tabs</item>
<item name="actionModeSplitBackground">@drawable/cab_background_bottom_tabs</item>
<item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Tabs</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">@style/Theme.Tabs.Widget</item>
</style>
<style name="ActionBar.Solid.Tabs" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">@drawable/ab_solid_tabs</item>
<item name="backgroundStacked">@drawable/ab_stacked_solid_tabs</item>
<item name="backgroundSplit">@drawable/ab_bottom_solid_tabs</item>
<item name="progressBarStyle">@style/ProgressBar.Tabs</item>
</style>
<style name="ActionBar.Transparent.Tabs" parent="@style/Widget.AppCompat.ActionBar">
<item name="background">@drawable/ab_transparent_tabs</item>
<item name="progressBarStyle">@style/ProgressBar.Tabs</item>
</style>
<style name="PopupMenu.Tabs" parent="@style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">@drawable/menu_dropdown_panel_tabs</item>
</style>
<style name="DropDownListView.Tabs" parent="@style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">@drawable/selectable_background_tabs</item>
</style>
<style name="ActionBarTabStyle.Tabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">@drawable/tab_indicator_ab_tabs</item>
</style>
<style name="DropDownNav.Tabs" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">@drawable/spinner_background_ab_tabs</item>
<item name="android:popupBackground">@drawable/menu_dropdown_panel_tabs</item>
<item name="android:dropDownSelector">@drawable/selectable_background_tabs</item>
</style>
<style name="ProgressBar.Tabs" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">@drawable/progress_horizontal_tabs</item>
</style>
<style name="ActionButton.CloseMode.Tabs" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">@drawable/btn_cab_done_tabs</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Tabs.Widget" parent="@style/Theme.AppCompat">
<item name="popupMenuStyle">@style/PopupMenu.Tabs</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Tabs</item>
</style>
</resources>
您可以通过执行以下操作更改选项卡的图标：
@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
pager.setCurrentItem(tab.getPosition());
//to set tab's icon
tab.setIcon(id_of_the_icon_to_change_to);
//or if you don't have a new icon to change to, change the alpha of the current icon to make tab darker/lighter (0 means fully transparent, and 255 means fully opaque.)
tab.getIcon().setAlpha(255);
}