it-swarm.com.ru

Как поменять индикатор таблаута сверху вниз?

Я хочу изменить индикатор tablayout снизу вверх.

мой код

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

как сделать 

спасибо за вопрос и извините за плохой английский.

11
Wuttipong Khemphetjetsada

Это можно сделать с помощью атрибута 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

Не используйте масштаб = -1 и тому подобное. 

Из XML вы можете использовать app:tabIndicatorGravity="top"

Из кода вы можете использовать setSelectedTabIndicatorGravity(INDICATOR_GRAVITY_TOP)

10
Michael Bolboceanu

К сожалению, вы не можете сделать это, установив атрибут или установив его в коде . TabLayout имеет свойство mTabStrip объекта SlidingTabStrip (внутренний класс), которое установлено как закрытое final

private final SlidingTabStrip mTabStrip;

, так что вы не можете получить к нему доступ, расширив TabLayout.

Так что SlidingTabStrip (который расширяет LinearLayoyut) является представлением, которое переопределяет метод рисования

@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);
        }
    }

Итак, вы можете видеть, что он рисует прямоугольник со свойствами top и bottom.

Может быть, в будущем у них будет флаг, чтобы изменить его.

4
Damir Mailybayev

У меня другой подход к этому ..

  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

Вы можете добиться этого, вращая TabLayout следующим образом:

tabLayout.setRotationX(180);

Затем вы должны повернуть все его дочерние элементы TextView назад, или вы можете установить TabLayout для пользовательского представления вместо рекурсивного поиска TextView:

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

2
box

Это невозможно сделать с помощью атрибута 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
Kartik_Agarwal

Я знаю, что этот вопрос был задан 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"
/>

Примечание: вам не нужно 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
    I solved using this method

     set scaleY="-1" , this will rotate TabLayout to 180 degrees, as a result tab layout rotated reverse with text and rotate your TextView to Horizontally to 180 degrees, that will solve the problem, see the code below

     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