it-swarm.com.ru

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

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

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

 enter image description here

Там нет полей/отступов на левой и правой стороне, но текст обернут.

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

 enter image description here

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

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

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

Ура, Лукас

36
finki

Одним из решений здесь является создание пользовательского макета для каждой вкладки, который даст вам больше контроля над внешним видом каждой вкладки .... Это делается с помощью метода 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>

Вот код Activity, который включает в себя 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's 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;
        }

    }
}

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

 enter image description here

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

 enter image description here

24
Daniel Nugent

Вот быстрый взлом, намного короче, чем использование 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 действительно полезен только для изменения размера текста.

27
TalkLittle

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

  <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" />
11
Hitesh Sahu

Если это опция, вы можете центрировать вкладки с помощью RelativeLayout и установив Android: layout_centerHor horizontal = "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>
1
AndiDev

Решил мою проблему, назначив стиль для приложения: 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.

0
Hardik Lakhani

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

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