Как правильно изменить цвет текста каждой вкладки в TabLayout, когда он выбран? - PullRequest
0 голосов
/ 22 сентября 2018

Мне было интересно, у меня есть custom_tab_layout для вкладок в TabLayout, которые имеют только TextView с идентификатором, однако я хотел сделать так, чтобы при нажатии / выделении текст указанного TextView изменял свой цвет, этоСледующий код работает, однако я не уверен, что это правильный способ для достижения этой функциональности, так как я новичок с Android, и мне кажется, что должен быть более хороший подход к этому.Вот код с некоторыми комментариями!Я просто использую ViewPager и создал собственный класс адаптера, расширяющий FragmentPagerAdapter.

public class MainActivity extends AppCompatActivity{

public static class CategoryPagerAdapter extends FragmentPagerAdapter{

    private static int NUM_PAGES = 4;

    public CategoryPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

        switch (position){

            case 0:{
                return new NumbersFragment();
            }

            case 1:{
                return new FamilyFragment();
            }

            case 2:{
                return new ColorsFragment();
            }

            case 3:{
                return new PhrasesFragment();
            }

            default:{
                return null;
            }

        }


    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_pager);

    TabLayout tlCategoryTab = this.findViewById(R.id.tlCategoryTab);
    final ViewPager vpPager = this.findViewById(R.id.vpPager);

    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));

    String [] categories = {"Numbers", "Family", "Colors", "Phrases"};

    for (int i = 0; i < categories.length; i++) {
        TabLayout.Tab tab = tlCategoryTab.getTabAt(i);

        //Here I get the custom tab layout
        View v = tab.getCustomView();

        //Assign the TextView and the Tab name
        TextView tvTabItem = v.findViewById(R.id.tvTabItem);
        tvTabItem.setText(categories[i]);

        //I was having issues when the app first started because it wasn't 
        //getting assigned the first color, so I came up with this kinda lame solution
        if(i == 0){
            tvTabItem.setTextColor(getResources().getColor(R.color.category_numbers));
            tab.setCustomView(v);
        }
    }

    CategoryPagerAdapter myAdapter = new CategoryPagerAdapter(this.getSupportFragmentManager());
    vpPager.setAdapter(myAdapter);
    vpPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tlCategoryTab));


    //And here is the actual functionality that changes the TextColor when it gets clicked/selected
    tlCategoryTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int colorToUse = 0;

            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);

            if(tvTabItem.getText().toString().equalsIgnoreCase("Numbers")){
                colorToUse = R.color.category_numbers;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Family")){
                colorToUse = R.color.category_family;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Colors")){
                colorToUse = R.color.category_colors;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Phrases")){
                colorToUse = R.color.category_phrases;
            }

            tvTabItem.setTextColor(getResources().getColor(colorToUse));
            tab.setCustomView(v);
            vpPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);
            tvTabItem.setTextColor(getResources().getColor(R.color.white));
            tab.setCustomView(v);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

}

Есть ли способ достичь той же цели более эффективным способом?Спасибо заранее и спасибо за ваше время, читая это!

Ответы [ 3 ]

0 голосов
/ 22 сентября 2018

Добавьте вкладку, выберите слушателя и затем измените цвет в зависимости от позиции:

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
0 голосов
/ 23 сентября 2018

В файле макета XML добавьте это в свой TabLayout:

app:tabSelectedTextColor="your color"

Или программно сделайте это:

tabLayout.setTabTextColors(int normal_color, int selected_color);
0 голосов
/ 22 сентября 2018

Вы можете сделать это двумя способами, в XML или в Java-коде.

В XML:

Используйте app:tabTextColor для невыбранного цвета вкладки и app:tabSelectedTextColor для выбранного цвета вкладки

<android.support.design.widget.TabLayout
    app:tabIndicatorColor="@color/yourColor"
    app:tabTextColor="@color/yourColor"
    app:tabSelectedTextColor="@color/yourColor">

В коде Java:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {

        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            super.onTabSelected(tab);
            tabLayout.setTabTextColors(

            // Unselected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.unselectedTabColor),

            // Selected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.selectedTabColor)
            );

      // Selected Tab Indicator Color

            tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.yourColor));
            tabLayout.setSelectedTabIndicatorHeight(5);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            super.onTabUnselected(tab);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            super.onTabReselected(tab);
        }
    });
...