删除 TabLayout 中的换行符
Remove line break in TabLayout
我刚刚将新的 TabLayout 组件添加到我的应用程序中。您可能知道选项卡 app:tabMode="scrollable"
和 app:tabMode="fixed"
有两种不同的模式。
当我使用 app:tabMode="fixed"
时,我得到以下结果:
左右两边没有margin/padding但是文字被换行了
但是当我使用 app:tabMode="scrollable"
时,我得到以下结果:
文本没有换行,但右侧有一个奇怪的边距,我无法摆脱它。
我也尝试将 tabGravity 设置为 app:tabGravity="center"
或 app:tabGravity="fill"
但没有实现任何更改。
如果你们中的任何聪明人能为我提供解决方案,那就太好了。
干杯,卢卡斯
在您的布局 XML 中,如果您使用 TextView
,请使用 android:maxLines="1"
或 android:singleLine="true"
看看这是否有效。如果不是 TextView
那么请把你的 xml 放在这里。
这里的一个解决方案是为每个选项卡扩展自定义布局,这样您就可以更好地控制每个选项卡的外观。
这是通过 setCustomView() 方法完成的。
请注意,它在不同的屏幕分辨率下看起来会有所不同。
总是很难让它在每台设备上看起来都完美,但至少使用这种方法可以让你有更多的控制权,因为你可以为不同的屏幕使用不同的自定义布局 xml 文件 resolutions/sizes。
一种方法是使字体尽可能大,而不会在每个屏幕尺寸上被截断。
我得到了一个简单的示例,它将每个选项卡中的文本限制为一行,但是在这个简单的示例中,它还导致侧面选项卡中的长文本在不更改字体大小的情况下变成椭圆形。您的下一步是找出每个屏幕尺寸的最佳字体大小,并为每个创建一个特定的选项卡布局。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;
}
}
}
这是上面代码的结果:
请注意,如果您删除 android:singleLine="true"
,它看起来像这样,类似于您问题中的样子:
这是一个快速技巧,比使用 setCustomView()
短得多:使用 TabLayout
上的 android:theme
属性:
<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
属性在 TabLayout 上设置的 app:tabTextAppearance
上被忽略了。 app:tabTextAppearance
实际上只对更改文本大小有用。
在选项卡标题中显示“...”不会带来良好的 UI 体验 我建议您将 tabmode 设置为 scrollable 并让选项卡标题随心所欲 space 。
<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" />
如果这是一个选项,您可以使用 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>
通过将样式分配给 app: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。
使用此代码,您可以删除默认填充。对我来说,它可以在一行中制作稍长的文本
<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
从这里开始:
http://panavtec.me/playing-with-the-new-support-tablayout
float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
我已添加:
app:tabMaxWidth="0dp"
在元素中。
我找到的最简单的解决方案是将 TextAppearance.Design.Tab 样式应用于 app:tabTextAppearance。这将调整该选项卡的字体大小,而不是换行。
将其应用于 TabLayout:
<android.support.design.widget.TabLayout
app:tabTextAppearance="@style/TextAppearance.Design.Tab"
...
/>
我刚刚将新的 TabLayout 组件添加到我的应用程序中。您可能知道选项卡 app:tabMode="scrollable"
和 app:tabMode="fixed"
有两种不同的模式。
当我使用 app:tabMode="fixed"
时,我得到以下结果:
左右两边没有margin/padding但是文字被换行了
但是当我使用 app:tabMode="scrollable"
时,我得到以下结果:
文本没有换行,但右侧有一个奇怪的边距,我无法摆脱它。
我也尝试将 tabGravity 设置为 app:tabGravity="center"
或 app:tabGravity="fill"
但没有实现任何更改。
如果你们中的任何聪明人能为我提供解决方案,那就太好了。
干杯,卢卡斯
在您的布局 XML 中,如果您使用 TextView
,请使用 android:maxLines="1"
或 android:singleLine="true"
看看这是否有效。如果不是 TextView
那么请把你的 xml 放在这里。
这里的一个解决方案是为每个选项卡扩展自定义布局,这样您就可以更好地控制每个选项卡的外观。 这是通过 setCustomView() 方法完成的。
请注意,它在不同的屏幕分辨率下看起来会有所不同。
总是很难让它在每台设备上看起来都完美,但至少使用这种方法可以让你有更多的控制权,因为你可以为不同的屏幕使用不同的自定义布局 xml 文件 resolutions/sizes。
一种方法是使字体尽可能大,而不会在每个屏幕尺寸上被截断。
我得到了一个简单的示例,它将每个选项卡中的文本限制为一行,但是在这个简单的示例中,它还导致侧面选项卡中的长文本在不更改字体大小的情况下变成椭圆形。您的下一步是找出每个屏幕尺寸的最佳字体大小,并为每个创建一个特定的选项卡布局。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;
}
}
}
这是上面代码的结果:
请注意,如果您删除 android:singleLine="true"
,它看起来像这样,类似于您问题中的样子:
这是一个快速技巧,比使用 setCustomView()
短得多:使用 TabLayout
上的 android:theme
属性:
<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
属性在 TabLayout 上设置的 app:tabTextAppearance
上被忽略了。 app:tabTextAppearance
实际上只对更改文本大小有用。
在选项卡标题中显示“...”不会带来良好的 UI 体验 我建议您将 tabmode 设置为 scrollable 并让选项卡标题随心所欲 space 。
<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" />
如果这是一个选项,您可以使用 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>
通过将样式分配给 app: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。
使用此代码,您可以删除默认填充。对我来说,它可以在一行中制作稍长的文本
<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
从这里开始: http://panavtec.me/playing-with-the-new-support-tablayout
float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
我已添加:
app:tabMaxWidth="0dp"
在元素中。
我找到的最简单的解决方案是将 TextAppearance.Design.Tab 样式应用于 app:tabTextAppearance。这将调整该选项卡的字体大小,而不是换行。
将其应用于 TabLayout:
<android.support.design.widget.TabLayout
app:tabTextAppearance="@style/TextAppearance.Design.Tab"
...
/>