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

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

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

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

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

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

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

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

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

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

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

Solutions Collecting From Web of "Удалить разрыв строки в TabLayout"

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

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

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

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

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

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

Отображение «…» в заголовках табуляции не даст хорошего опыта пользовательского интерфейса. Я предлагаю вам настроить прокрутку 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" /> 

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

Если это опция, вы можете центрировать вкладки с помощью 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> 

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