나는 a TabLayout와 함께 사용하고 있으며 ViewPagerTabLayout에서 선택한 탭의 아이콘 색상을 가장 효율적으로 변경할 수있는 방법이 궁금합니다.
이것이 어떻게 구현되는지에 대한 완벽한 참조는 Google의 Youtube 앱 입니다. 메인 페이지에는 짙은 회색으로 표시된 4 개의 아이콘이 있습니다. 특정 탭을 선택하면 탭 아이콘이 흰색으로 바뀝니다.
타사 라이브러리없이 어떻게 동일한 효과를 얻을 수 있습니까?
한 가지 가능한 해결책은 분명히 선택자를 사용하는 것입니다. 그러나이 경우 흰색과 회색 버전의 아이콘을 모두 찾은 다음 탭이 선택되거나 선택 취소되면 아이콘을 전환해야합니다. 아이콘 색상 등 만 강조 표시 할 수있는 더 효과적인 방법이 있는지 궁금합니다. 나는 어떤 튜토리얼에서도 이것을 찾을 수 없었습니다.
편집하다
위에서 직접 언급 한 솔루션은 각 탭의 아이콘에 대해 두 개의 드로어 블을 사용해야합니다. 각 탭의 아이콘에 대해 하나의 드로어 블을 사용 하여 프로그래밍 방식으로 수행 할 수있는 방법이 있는지 궁금 합니다.
답변
쉬운 방법을 찾았습니다.
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(
new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
@Override
public void onTabSelected(TabLayout.Tab tab) {
super.onTabSelected(tab);
int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
super.onTabUnselected(tab);
int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
super.onTabReselected(tab);
}
}
);
답변
이것은 매우 간단하게 전적으로 xml로 수행 할 수 있습니다.
app:tabIconTint="@color/your_color_selector"아래와 같이 xml의 TabLayout에 한 줄을 추가 합니다.
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIconTint="@color/your_color_selector"
app:tabIndicatorColor="@color/selected_color"/>
그런 다음 res / color 디렉토리에 색상 선택기 파일 (위의 “your_color_selector.xml”)을 만듭니다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/selected_color" android:state_selected="true"/>
<item android:color="@color/unselected_color"/>
</selector>
colors.xml 파일에 “selected_color”및 “unselected_color”의 두 가지 색상이 있다고 가정합니다.
답변
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);
tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
답변
ColorStateList를 사용할 수 있습니다.
먼저 /color/tab_icon.xml다음과 같은 xml 파일 (예 :)을 만들고 서로 다른 상태에 대해 서로 다른 색조를 정의합니다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/icon_light"
android:state_selected="true" />
<item android:color="@color/icon_light_inactive" />
</selector>
그런 다음 코드에 다음을 추가하십시오.
ColorStateList colors;
if (Build.VERSION.SDK_INT >= 23) {
colors = getResources().getColorStateList(R.color.tab_icon, getTheme());
}
else {
colors = getResources().getColorStateList(R.color.tab_icon);
}
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
Drawable icon = tab.getIcon();
if (icon != null) {
icon = DrawableCompat.wrap(icon);
DrawableCompat.setTintList(icon, colors);
}
}
먼저 XML에서 ColorStateList를 가져옵니다 (테마가없는 메서드는 더 이상 사용되지 않지만 Marshmallow 이전 장치에 필요함). 그런 다음 각 탭의 아이콘에 대해 TintList를 ColorStateList로 설정합니다. DrawableCompat (지원 라이브러리)를 사용하여 이전 버전도 지원합니다.
그게 다야!
답변
이를 위해 다음과 같이 각 탭에 대한 선택기 클래스를 사용하여 탭 아이콘을 사용자 정의해야합니다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/advisory_selected" android:state_selected="true" />
<item android:drawable="@drawable/advisory_normal" android:state_selected="false" />
답변
res > colors디렉토리 아래에 추가하십시오 .
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@android:color/holo_orange_dark"/>
<item android:color="@android:color/holo_red_light"/>
</selector>
xml의 탭보기에 코드를 추가합니다.
app:tabIconTint="@color/selector_tab"
답변
아이콘에 아이콘 글꼴 (예 : 멋진 글꼴)을 사용하지 않는 이유는 무엇입니까? 그런 다음 탭 텍스트의 글꼴을 원하는 글꼴 아이콘 .ttf로 변경하고 선택한 텍스트 색상을 탭 아이콘으로 변경하십시오!
나 자신이이 방법을 사용했는데 정말 멋지고 깨끗합니다. 🙂
먼저 원하는 아이콘 글꼴에서 제목을 설정합니다.
string.xml에서 :
<string name="ic_calculator"></string>
<string name="ic_bank"></string>
그런 다음 MainActivity.Java에서 :
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank));
adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator));
viewPager.setAdapter(adapter);
}
그런 다음 탭 제목의 글꼴을 font-awesome으로 변경해야합니다.
Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
if (tabViewChild instanceof TextView) {
((TextView) tabViewChild).setTypeface(typeFaceFont);
}
}
}
마지막으로 관련 .xml 파일에서 tabTextColor 및 tabSelectedTextColor에 대한 색상을 설정합니다.
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:background="@color/colorPrimaryDark"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/textColorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.TabLayout>
그리고 colors.xml에서 :
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorHighlight">#FFFFFF</color>
<color name="textColorPrimary">#E1E3F3</color>
</resources>
