Удалить разрыв строки в TabLayout

Я просто добавил новый компонент TabLayout в свое приложение. Как вы знаете, существуют два разных режима для вкладок app:tabMode="scrollable" и app:tabMode="fixed".

Когда я использую app:tabMode="fixed", я получаю следующий результат:

введите описание изображения здесь

Нет полей/дополнений слева и справа, но текст завернут.

Но когда я использую app:tabMode="scrollable", я получаю следующий результат:

введите описание изображения здесь

Текст не обернут, но здесь есть странный край с правой стороны, и я не могу избавиться от него.

Я также попытался установить tabGravity как на app:tabGravity="center", так и на app:tabGravity="fill", но не добился каких-либо изменений.

Было бы хорошо, если бы кто-нибудь из вас, умных парней и девушек, получил решение для меня.

Приветствия, Лукас

ОТВЕТЫ

Ответ 1

Одним из решений здесь является раздувание пользовательского макета для каждой вкладки, что даст вам больше контроля над появлением каждой вкладки. Это делается с помощью метода setCustomView().

Обратите внимание, что он будет выглядеть по-разному на разных разрешениях экрана.

Всегда сложно сделать его идеальным на каждом устройстве, но, по крайней мере, используя этот метод, вы получаете больше контроля, так как вы можете использовать разные XML файлы с разным размером для разных разрешений/размеров экрана.

Один из подходов заключался бы в том, чтобы размер шрифта был как можно большим, без обрезания на каждом размере экрана.

У меня есть простой пример работы, который ограничивает текст на каждой вкладке одной строкой, однако в этом простом примере он также заставляет длинный текст на боковых вкладках эллипсизировать без изменения размера шрифта. Следующим шагом будет выяснить оптимальный размер шрифта для каждого размера экрана и создать для каждой отдельной макеты xml каждой вкладки.

Вот файл custom_tab.xml, с android:singleLine="true" указанным:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/custom_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:textSize="16dip"
        android:textColor="#ffffff"
        android:singleLine="true"
        />
</LinearLayout>

Вот макет для MainActivity:

<RelativeLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

Вот код действия, который включает в себя FragmentPagerAdapter:

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Get the ViewPager and set it PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        PagerAdapter pagerAdapter =
                new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }


    class PagerAdapter extends FragmentPagerAdapter {

        String tabTitles[] = new String[] { "Aufzeichnung", "Berichte", "Neue Aufgabe", };
        Context context;

        public PagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new BlankFragment();
                case 1:
                    return new BlankFragment();
                case 2:
                    return new BlankFragment();
            }

            return null;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // Generate title based on item position
            return tabTitles[position];
        }

        public View getTabView(int position) {
            View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView tv = (TextView) tab.findViewById(R.id.custom_text);
            tv.setText(tabTitles[position]);
            return tab;
        }

    }
}

И вот результат с приведенным выше кодом:

введите описание изображения здесь

Обратите внимание, что если вы удалите android:singleLine="true", это будет выглядеть так, как это выглядит в вашем вопросе:

введите описание изображения здесь

Ответ 2

Здесь быстрый взлом, намного короче, чем использование setCustomView(): используйте атрибут android:theme на вашем TabLayout:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TabLayout_Theme"
    app:tabMode="fixed"/>

Затем в ваших темах XML:

<style name="TabLayout_Theme" parent="@style/AppTheme">
    <item name="android:singleLine">true</item>
</style>

Мы должны сделать это таким образом, потому что, к сожалению, атрибут android:singleLine игнорируется в app:tabTextAppearance, установленном в TabLayout. app:tabTextAppearance действительно полезен только для изменения размера текста.

Ответ 3

Отображение "..." в названиях таблеток не даст хорошего опыта пользовательского интерфейса. Я предлагаю вам установить tabmode на прокручиваемый и позволить заголовкам таблеток занимать столько места они хотят.

  <android.support.design.widget.TabLayout
                android:id="@+id/htab_tabs"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="scrollable" />

Ответ 4

Если это опция, вы можете центрировать вкладки с помощью RelativeLayout и установкой android: layout_centerHorizontal = "true"

Это даст вам равный запас как с левой, так и с правой стороны.

например.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:tabMode="scrollable" />
    </RelativeLayout>

Ответ 5

В вашем макете XML, если вы являетесь usign TextView, используйте android:maxLines="1" или android:singleLine="true" Посмотрите, работает ли это. И если Not TextView, то, пожалуйста, разместите свой xml здесь.

Ответ 6

Устранила мою проблему, назначив стиль для приложения: tabTextAppearance

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/MyCustomTabTextAppearance">

стиль:

<style name="MyCustomTabTextAppearance" parent="@style/AppTheme">
    <item name="android:singleLine">true</item>
    <item name="android:textSize">@dimen/_5sdp</item>
</style>

Вы также можете установить textSize.

Ответ 7

float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

Ответ 8

С помощью этого кода вы можете удалить заполнение по умолчанию. Для меня это работало, чтобы сделать немного более длинные тексты в одну строку

<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"

Отсюда: http://panavtec.me/playing-with-the-new-support-tablayout

Ответ 9

TabLayout.class:
TabLayout.class

Вы можете создать макет в вашем приложении с именем design_layout_tab_text, вместо этого он будет поддерживать макет JAR.

Ваш индивидуальный макет:
Your customized layout