web-dev-qa-db-ja.com

タブレイアウトのインジケーターを下から上に変更するにはどうすればよいですか？

タブレイアウトのインジケーターを下から上に変更したい。

私のコード

activity_tab.xml

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"

    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"

        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"

        app:tabIndicatorColor="#000000"

        app:tabMode="scrollable"
        />
</Android.support.design.widget.AppBarLayout>

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

この結果が欲しい。

enter image description here

実行する方法

tHX私に尋ねて、悪い英語をごめんなさい。

androidandroid-layoutandroid-fragmentsandroid-intentandroid-activity
12
Wuttipong Khemphetjetsada

Scale = -1などは使用しないでください。

XMLから_app:tabIndicatorGravity="top"_を使用できます

コードからsetSelectedTabIndicatorGravity(INDICATOR_GRAVITY_TOP)を使用できます

16
Michael Bolboceanu

Xml属性で実行できます。Android:scaleY="-1" xmlコード。ビューは垂直に反転します。同じ方法を使用して、タブのタイトルで使用されているテキストと画像を修正します。

Xmlファイル：

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/colorPrimary"
    Android:minHeight="?attr/actionBarSize"
    Android:scaleY="-1"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

Javaコード

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

// Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("Section 1"));
tabLayout.addTab(tabLayout.newTab().setText("Section 2"));
tabLayout.addTab(tabLayout.newTab().setText("Section 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

TextView tv1 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(0)).getChildAt(1));
tv1.setScaleY(-1);
TextView tv2 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(1)).getChildAt(1));
tv2.setScaleY(-1);
TextView tv3 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(2)).getChildAt(1));
tv3.setScaleY(-1);

Sample screenshot

13
muhammed arshad k

残念ながら、属性を設定したり、コードで設定したりすることはできません。 TabLayout には、プライベートファイナルとして設定されるSlidingTabStrip（内部クラス）のプロパティmTabStripがあります。

private final SlidingTabStrip mTabStrip;

なので、TabLayoutを拡張してアクセスすることはできません。

したがって、SlidingTabStrip（LinearLayoyutを拡張）は、drawメソッドをオーバーライドするビューです。

@Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        // Thick colored underline below the current selection
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                    mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
        }
    }

これで、上と下のプロパティを持つ長方形が描かれていることがわかります。

将来的には、それを変更するフラグが表示される可能性があります。

4
Damir Mailybayev

これを実現するには、次のようにTabLayoutを回転させます。

tabLayout.setRotationX(180);

次に、TextViewのすべての子を回転して戻す必要があります。または、TextViewを再帰的に検索する代わりに、TabLayoutをカスタムビューに設定できます。

TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.layout_tab_view);

layout_tab_view.xml

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:rotationX="180"
        Android:text="HOME"/>

PagerAdapterからのフラグメントタイトルの命名やTextViewの無効な外観などのカスタムビューを設定すると、いくつかのデフォルト機能が失われると思いますが、別の方法で何らかの方法でバインドできます。

enter image description here

3
box

私はそれを行うための別のアプローチを持っています。

  1. タブインジケーターの色をタブレイアウトの背景色と同じに設定します（下部にタブインジケーターが表示されないようにします）。

  2. ビューを含むタブレイアウト（タブの数と同じ数）のすぐ上に線形レイアウト（水平）を追加します。

_<LinearLayout Android:layout_width="match_parent" Android:layout_height="5dp" Android:orientation="horizontal" Android:background="@color/tab_bg" Android:weightSum="3">_

_<View
    Android:id="@+id/view1"
    Android:layout_width="0dp"
    Android:layout_height="match_parent"
    Android:layout_weight="1"
    Android:elevation="10dp"
    Android:background="@drawable/selector_tab_indicator_white"/>

<View
    Android:id="@+id/view2"
    Android:layout_width="0dp"
    Android:layout_height="match_parent"
    Android:layout_weight="1"
    Android:elevation="10dp"
    Android:background="@drawable/selector_tab_indicator_blue"/>

<View
    Android:id="@+id/view3"
    Android:layout_width="0dp"
    Android:layout_height="match_parent"
    Android:layout_weight="1"
    Android:elevation="10dp"
    Android:background="@drawable/selector_tab_indicator_blue"/>
_

_</LinearLayout>_

  1. 次に、プログラムでビューの背景を調整します。

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    _}

@Override
public void onPageSelected(int position) {
    setTitle(getPageTitle(position));

    switch(position){

        case 0:
            view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
            view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            break;

        case 1:
            view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            view2.setBackgroundResource( R.drawable.selector_tab_indicator_white );
            view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            break;

        case 2:
            view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            view3.setBackgroundResource( R.drawable.selector_tab_indicator_white );
            break;

        default:
            view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
            view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
            break;
    }
}

@Override
public void onPageScrollStateChanged(int state) {

}
_

    _});_

これらのセレクターを使用してビューをカスタマイズする

selector_tab_indicator_white.xml

_<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:shape="rectangle">
<corners
    Android:radius="50dp"/>
<stroke
    Android:width="1dp"
    Android:color="#c4c0c0" />
<solid
    Android:color="#fafafa" />
_

selector_tab_indicator_blue.xml

_<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:shape="rectangle">
<corners
    Android:radius="0dp"/>
<stroke
    Android:width="1dp"
    Android:color="@color/tab_bg" />
<solid
    Android:color="@color/tab_bg" />
_

結果： - enter image description here

2
Nayan

あなたはそれらの行だけが必要です

tabLayout.setRotationX(180);

    tabListed = ((LinearLayout)tabLayout.getChildAt(0));
    for(int position = 0;position<tabListed.getChildCount();position++) {
        LinearLayout item=((LinearLayout) tabListed.getChildAt(position));
        item.setBackground(getDrawable(R.drawable.square_tab));
        item.setRotationX(180);
    }

最初のタブ回転でタブレイアウトを180度回転すると、すべてのタブが表示され、180度回転します。だから彼らはまた元気になる。

enter image description here

2
Daniel Jose Padilla Peña

これはxml属性では実行できませんが、タブの背景に画像を設定し、上部を塗りつぶし、下部を透明にして設定できます。

 <Android.support.design.widget.TabLayout
          ...
            app:tabBackground="@drawable/bg_tab"
            ...
 />

bg_tab.xml

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

cap.png

enter image description here

下部が透明

1
kartikag01

私はこの質問が2年前に尋ねられたことを知っていますが、ライブラリを使用せずに簡単な解決策を見つけることができませんでした（smartTabLayoutにはSelectedTextColourプロパティがありません）。

tabLayoutを反転して、インジケーターを上部に表示します
Android:rotationX="180"
これにより、そのタブのテキストも反転するため、これに対抗します
カスタムタブビューを作成する必要があります。 xmlファイルを作成します。例：layout_custom_tab

<TextView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/tab.text"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:gravity="center"
Android:maxLines="1"
Android:padding="10dp"
Android:rotationX="180"
Android:textAllCaps="true"
Android:textSize="12sp"
Android:textColor="@color/white"
/>

注：要素が1つしかない場合は、RelativeLayoutなどは必要ありません。

独自のTabLayoutを作成し、customViewをそれに設定します。

public class TabLayoutPlus extends TabLayout {

public TabLayoutPlus(Context context) {
    super(context);
}

public TabLayoutPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public TabLayoutPlus(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void setupWithViewPager(ViewPager viewPager) {
    super.setupWithViewPager(viewPager);
    this.removeAllTabs();

    PagerAdapter adapter = viewPager.getAdapter();

    for (int i = 0, count = adapter.getCount(); i < count; i++) {
        Tab tab = this.newTab();
        View customView = LayoutInflater.from(getContext()).inflate(R.layout.layout_custom_tab, null);
        TextViewPlus tv = (TextViewPlus) customView.findViewById(R.id.tab_text);
        tv.setText(adapter.getPageTitle(i));
        tab.setCustomView(customView);
        this.addTab(tab.setText(adapter.getPageTitle(i)));
    }
 }    
}

アクティビティのTabLayoutは次のようになります

<TabLayoutPlus
    Android:id="@+id/tablayout"
    Android:layout_width="match_parent"
    Android:layout_height="36dp"
    Android:layout_above="@+id/camera.buttons.layout"
    Android:layout_centerHorizontal="true"
    Android:background="@color/cardscan.background"
    Android:rotationX="180"
    app:tabGravity="center"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/white"
    />

選択したタブのテキストの色を強調表示する必要がある場合

private void setSelectedTab(TabLayoutPlus.Tab tab) {
    View view = tab.getCustomView();
    TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
    tabtext.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary)); // color you want to highlight your text with
}

private void setUnselectedTab(TabLayoutPlus.Tab tab){
    View view = tab.getCustomView();
    TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
    tabtext.setTextColor(ContextCompat.getColor(this, R.color.white)); // color you want to lowlight your text with
}

次に、OnTabSelectedListenerを追加します

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

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

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            setSelectedTab(tab);
        }
    });
1
Akshay More

私はこの方法を使用して解決しました

scaleY = "-1"を設定すると、これによりTabLayoutが180度に回転し、結果としてタブレイアウトがテキストとともに逆回転し、TextViewを水平に180度に回転します。これにより問題が解決します。以下のコードを参照してください

  1. activity.xml

     <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">


        <Android.support.v4.view.ViewPager
            Android:id="@+id/viewpager_exp"
            Android:layout_above="@+id/tabs_RL"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />



        <RelativeLayout
            Android:id="@+id/tabs_RL"
            Android:layout_alignParentBottom="true"
            Android:layout_width="match_parent"
            Android:layout_height="@dimen/footer_height">


            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="@dimen/dimen_60"
                Android:background="@color/white"
                Android:clipToPadding="false"
                Android:paddingLeft="0dp"
                Android:paddingRight="0dp"
                Android:scaleY="-1"
                app:layout_scrollFlags="snap|enterAlways"
                app:tabGravity="fill"
                app:tabMaxWidth="0dp"
                app:tabIndicatorHeight="4dp"
                app:tabIndicatorColor="@color/dark_pink1"
                app:tabMinWidth="50dp"
                app:tabPaddingEnd="0dp"
                app:tabPaddingStart="0dp"
                app:tabMode="fixed" />

        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

  2. custom_tab.xml

    <customviews.CusMediumTextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/tab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:gravity="center_horizontal"
Android:textColor="#000000"
Android:textSize="@dimen/dimen_12"
Android:rotationX="180"
Android:textStyle="bold" />

  3. MainActivity.class

        tabLayout.setupWithViewPager(viewPager);

    tabOne = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText("Tab1");
    tabOne.setTextColor(getResources().getColor(R.color.light_black));
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.home_icon, 0, 0);


    tabTwo = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabTwo.setText("Tab2");
    tabTwo.setTextColor(getResources().getColor(R.color.light_black));
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.settin_icon, 0, 0);


    tabThree = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabThree.setText("Tab3");
    tabThree.setTextColor(getResources().getColor(R.color.light_black));
    tabThree.setCompoundDrawablesWithIntrinsicBounds( 0,R.drawable.delete_icon, 0, 0);


    tabFour = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabFour.setText("Tab4");
    tabFour.setTextColor(getResources().getColor(R.color.light_black));
    tabFour.setCompoundDrawablesWithIntrinsicBounds( 0, R.drawable.msg_icon,0, 0);

    tabLayout.getTabAt(0).setCustomView(tabOne);
    tabLayout.getTabAt(1).setCustomView(tabTwo);
    tabLayout.getTabAt(2).setCustomView(tabThree);
    tabLayout.getTabAt(3).setCustomView(tabFour);
0
Rishi