在 TabLayout 中删除换行符 [英] Remove line break in TabLayout
问题描述
我刚刚将新的 TabLayout 组件添加到我的应用程序中.您可能知道标签 app:tabMode="scrollable" 和 app:tabMode="fixed" 有两种不同的模式.
当我使用 app:tabMode="fixed" 我得到以下结果:
左侧和右侧没有边距/填充，但文本已换行.
但是当我使用 app:tabMode="scrollable" 我得到以下结果:
文本没有换行，但右侧有一个奇怪的边距，我无法摆脱它.
我还尝试将 tabGravity 设置为 app:tabGravity="center" 或 app:tabGravity="fill" 但没有实现任何更改.
如果你们中的任何一个聪明的男孩和女孩为我提供解决方案，那就太好了.
干杯，卢卡斯
这里的一个解决方案是为每个选项卡增加自定义布局，这将使您更好地控制每个选项卡的外观.这是通过
请注意，如果您删除 android:singleLine="true"，它看起来像这样，类似于您在问题中的样子:
I just added the new TabLayout component to my app. As you may know there are two different modes for tabs app:tabMode="scrollable" and app:tabMode="fixed".
When I use app:tabMode="fixed" I get following result:
There's no margin/padding on the left and right side but the text is wrapped.
But when I use app:tabMode="scrollable" I get following result:
The text is not wrapped but here is a weird margin on the right side and I can't get rid of it.
I also tried setting the tabGravity to either app:tabGravity="center" or app:tabGravity="fill" but did not achieve any changes.
Would be nice if any of you smart guys and girls got a solution for me.
Cheers, Lukas
One solution here is to inflate a custom layout for each tab, which will give you more control over the appearance of each tab. This is done with the setCustomView() method.
Note that it will look different on different screen resolutions.
It's always tough to make it look perfect on every device, but at least using this method gives you more control, as you can use different custom layout xml files for different screen resolutions/sizes.
One approach would be to make the font size as big as possible without getting cut off on each screen size.
I got a simple example working, which restricts the text in each tab to one line, however in this simple example it also causes the long text in the side tabs to ellipsize without changing the font size. Your next step would be to figure out the optimal font size for each screen size, and create a specific tab layout xml for each.
Here is the custom_tab.xml file, with android:singleLine="true" specified:
<?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>
Here is the layout for 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>
Here is the Activity code, which includes the 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;
}
}
}
And here is the result with the code above:
Note that if you remove android:singleLine="true", it looks like this, similar to how it looks in your question:
这篇关于在 TabLayout 中删除换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
