web-dev-qa-db-ja.com

SlidingTabLayoutでカスタム選択さ​​れたタブテキストの色

GoogleのSlidingTabLayoutを使用しています（ https://developer.Android.com/samples/SlidingTabsBasic/src/com.example.Android.common/view/SlidingTabLayout.html ）。

それはうまく機能しますが、私が望んでいるのは、選択したタイトルを太字で異なる色で配置することです...

この投稿に関して： SlidingTabLayoutのカスタム選択さ​​れていないタブテキストの色

セレクターを使用して、drawableでtext_tab.xmlを作成します。

 <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
 <item Android:color="@Android:color/selected" Android:state_selected="true" />
 <item Android:color="@Android:color/unselected" />
 </selector>

PopulateTabStrip（）メソッドに入れたとき

 tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.text_tab));

色は常に未選択のものです...

私はおそらく何か間違ったことをしている、または選択したタブのタイトルをカスタマイズする別の方法があるかもしれません。

誰かがアイデアを持っていますか？

ありがとう

androidcolorstabs
23
Chol

問題は、スライドレイアウトがアイテムの状態をselectedに設定しないことです。ここに問題を解決するための私のアプローチがあります。

1）ビューに[〜＃〜] color [〜＃〜]セレクター（ColorStateList）を作成します。次のように想像できます。

/ res/color/tab_text_color.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:color="@color/white" Android:state_selected="true"/>
  <item Android:color="@color/black"/>
</selector>

2）作成したセレクターをアイテムのビューtextColor（またはその他の必須）属性に配置します。

<TextView
  ...
  Android:textColor="@color/tab_text_color"
  ... />

3）ファイルSlidingTabLayout.Javaで次の変更を行います。

View oldSelection = null; // new field indicating old selected item

// method to remove `selected` state from old one
private void removeOldSelection() { 
    if(oldSelection != null) {
        oldSelection.setSelected(false);
    }
}

// improve method scrollToTab() as follows
private void scrollToTab(int tabIndex, int positionOffset) {
    final int tabStripChildCount = mTabStrip.getChildCount();
    if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
        return;
    }

    View selectedChild = mTabStrip.getChildAt(tabIndex);
    if (selectedChild != null) {

        if(positionOffset == 0 && selectedChild != oldSelection) { // added part
            selectedChild.setSelected(true);
            removeOldSelection();
            oldSelection = selectedChild;
        }

        int targetScrollX = selectedChild.getLeft() + positionOffset;

        if (tabIndex > 0 || positionOffset > 0) {
            // If we're not at the first child and are mid-scroll, make sure we obey the offset
            targetScrollX -= mTitleOffset;
        }

        scrollTo(targetScrollX, 0);
    }
}

private void populateTabStrip() {
    removeOldSelection(); // add those two lines
    oldSelection = null;
    ...
}
26
skywall

1）まず、res（/ res/color）の下にカラーフォルダーを作成します
2）/ res/colorフォルダーの下にxmlファイルselector.xmlを作成します

<?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/white" />
<item Android:state_focused="true" Android:color="@Android:color/white" />
<item Android:state_pressed="true" Android:color="@Android:color/white" />
<item Android:color="#504f4f" /> 
</selector>

3）次に、SlidingTabLayoutのpopulateTabStrip（）メソッドにこれを配置します

tabTitleView.setTextColor(getResources().getColorStateList(R.color.selector));

セレクターがあり、必要なイベントのテキストの色を変更できます

それが機能しない場合は、次のコード行を追加します。
a）最後にpopulateTabStrip（）メソッドでこれを追加します

if (i == mViewPager.getCurrentItem()) {
    tabView.setSelected(true);
}

b）onPageSelected（）メソッドをこれに変更します

    @Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }
        for (int i = 0; i < mTabStrip.getChildCount(); i++) {
            mTabStrip.getChildAt(i).setSelected(position == i);
        }
        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }
    }
25
Panayiotis Irakleous

同様の問題がありましたが、アイコンとテキストを含むカスタムページタイトルビューを使用していました。タブの選択/選択解除時にカスタムカラーを設定するには、@ PanayiotisIrakleousによって作成されたセレクターを使用しました。投稿してくれた彼に感謝します。

ここに私がそれをした方法があります：-

1-セレクターのxmlファイルを作成します。ファイルを作成しました、slidingtab_title_color.xmlおよびDrawableフォルダーに配置します。

<?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/white" />
    <item Android:state_focused="true" Android:color="@Android:color/white" />
    <item Android:state_pressed="true" Android:color="@Android:color/white" />
    <item Android:color="#504f4f" />
</selector>

2-タブタイトルのカスタムレイアウトを開き、selectorファイルをAndroid:textColor属性。カスタムファイルの名前はslidingtab_title_color.xmlと次のコードがあります-

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    Android:padding="10dp"
    Android:background="@drawable/ripple_effect">

    <ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"/>
<!--Adding the selector file in textColor attribute-->
    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="New Text"
        Android:textColor="@drawable/slidingtab_title_color"/>    
</LinearLayout>

3 オプション）インジケーターの色とスライドタブの背景を変更する場合は、SlidingTabLayout-を初期化するファイルに次の行を追加します

mSlidingTab.setBackgroundColor(getResources().getColor(R.color.primaryColor));
mSlidingTab.setSelectedIndicatorColors(getResources().getColor(R.color.accentColor));

ViewPagerにSlidingTabLayoutを設定する前に、これらの行を追加していることを確認してください。

これで終わりです。次のようになります。SlidingTab with tab selector

まだ問題がある場合は、プロジェクトソースの---（bitbucket リンクと、マテリアルデザインのすべてのプロジェクトの this リンクがあります。

6
Rohan Kandwal

Selector XMLリソースファイルを使用せずに別のソリューションに興味がある人のために、@ Panayiotisの回答に何らかの形で基づいています。

以下のメソッドをSlidingTabStrip.Javaクラスに追加します。

public void setTabTitlesTextColor(int selectedPosition) {
    for (int i = 0; i < getChildCount(); i++) {
        if (TextView.class.isInstance(getChildAt(i))) {
            ((TextView) getChildAt(i)).setTextColor((selectedPosition == i) ? getTabColorizer().getIndicatorColor(i) : Color.argb(90, 0,0,0)  );
        }
    }
}

public SlidingTabLayout.TabColorizer getTabColorizer() {
    if (mCustomTabColorizer != null)
        return mCustomTabColorizer;
    else
        return mDefaultTabColorizer;
}

新しく作成されたsetTabTitlesTextColor（）メソッドをonPageSelectedおよびsetViewPagerでSlidingTabLayout.Javaクラスで呼び出します：

public void setViewPager(ViewPager viewPager) {
    mTabStrip.removeAllViews();

    mViewPager = viewPager;
    if (viewPager != null) {
        viewPager.setOnPageChangeListener(new InternalViewPagerListener());
        populateTabStrip();
        mTabStrip.setTabTitlesTextColor(viewPager.getCurrentItem());
    }
}

@Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }

        mTabStrip.setTabTitlesTextColor(position);

        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }
    }
2
velval

OnCreate（）メソッドでこのコードを試してください。

tabTitleView.setTabTextColors(
    getResources().getColor(R.color.active), 
    getResources().getColor(R.color.inactive));
0
Kathiravan S

関数を作成しました

private void setTabTextSelected(TextView textView, boolean selected){
        if (selected){
            textView.setTextColor(getResources().getColor(R.color.Black));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
        }
        else{
            textView.setTextColor(getResources().getColor(R.color.ColorPrimaryDark));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 13);

        }

    }

slidingTabLayoutの2つの関数で呼び出しました。

  1. populateTabStripの最後：
setTabTextSelected(tabTitleView, i == mViewPager.getCurrentItem());
  1. onPageSelectedで：
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
              TextView textView = (TextView) mTabStrip.getChildAt(i);
              setTabTextSelected(textView, position == i);
            }
0
bat-el.g