【问题标题】:Remove line break in TabLayout删除 TabLayout 中的换行符
【发布时间】:2015-10-20 08:01:03
【问题描述】:

我刚刚将新的 TabLayout 组件添加到我的应用程序中。您可能知道标签app:tabMode="scrollable"app:tabMode="fixed" 有两种不同的模式。

当我使用app:tabMode="fixed" 时,我得到以下结果:

左右两边没有边距/内边距,但文字被换行了。

但是当我使用app:tabMode="scrollable" 时,我得到以下结果:

文本未换行,但右侧有一个奇怪的边距,我无法摆脱它。

我还尝试将 tabGravity 设置为 app:tabGravity="center"app:tabGravity="fill",但没有实现任何更改。

如果你们中的任何一个聪明的男孩和女孩能为我找到解决方案,那就太好了。

干杯,卢卡斯

【问题讨论】:

  • 这是 TabLayout 的两种模式。如果您使用固定,则所有选项卡的大小相同。这意味着您的选项卡 1 和 3 的空间较小。如果您使用可滚动,则文本位于单行上,并且选项卡占用最少的空间并具有左重力。对于 Android 开发,无论如何您都不应该担心单一的屏幕尺寸。也许您应该考虑实现类似:stackoverflow.com/a/31363206/2977237.
  • 您为什么不尝试创建自己的标签布局并进行相应的管理。使用自定义布局作为您的选项卡,并为子布局提供侦听器。

标签: android xml layout tabs android-support-library


【解决方案1】:

在您的布局 XML 中,如果您使用 TextView ,请使用 android:maxLines="1"android:singleLine="true" 看看这是否有效。如果不是TextView,请把你的xml放在这里。

【讨论】:

  • 正如我上面所写的,我使用了设计支持库中的 TabLayout 组件。如果你想看看,这是我的 XML:pastebin.com/cLCvYTw3
  • 我认为它有一个名为“textAppearance”的属性,您可以在样式文件中定义 singleLine 状态并将其设置为您的 textAppearance
  • @NguyễnHoàiNam TabLayout 确实有属性app:tabTextAppearance,但遗憾的是它忽略了singleLinemaxLines。相反,它适用于textSizetextAllCaps 等。
【解决方案2】:

这里的一个解决方案是为每个标签添加自定义布局,这样您就可以更好地控制每个标签的外观。 这是通过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;
        }

    }
}

这是上面代码的结果:

请注意,如果您删除 android:singleLine="true",它看起来像这样,类似于它在您的问题中的样子:

【讨论】:

【解决方案3】:

这是一个快速的技巧,比使用 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 确实只对更改文本大小有用。

【讨论】:

  • 我没试过,但由于标签布局 /design_layout_tab_text.xml 是用maxLines=2 硬编码的,我看不出这有什么帮助。
【解决方案4】:

在标签标题中显示“...”不会带来良好的 UI 体验 我建议您应该将 tabmode 设置为 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" />

【讨论】:

  • 完美解决方案。为我工作。
  • 最简单的解决方案
【解决方案5】:

如果这是一个选项,您可以使用 RelativeLayout 和设置 android:layout_centerHorizo​​ntal="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>

【讨论】:

  • 如果我将 TabLayout 包裹在 RelativeLayout 中,我的 TabLayout 就会消失
【解决方案6】:

通过将样式分配给 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。

【讨论】:

  • 它不会按要求工作。 TextAppearance 仅使用样式属性,请参阅 TextView 中的“setTextAppearance”源代码。不会使用 singleLine,只会减小文本大小。
【解决方案7】:

使用此代码,您可以删除默认填充。对我来说,它可以在一行内制作稍长的文本

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

从这里: http://panavtec.me/playing-with-the-new-support-tablayout

【讨论】:

  • 我不知道为什么这被否决了,这是处理固定宽度选项卡的不同字体大小/可访问性选项的绝佳技巧/解决方法。谢谢!
【解决方案8】:
float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

【讨论】:

  • 基本上,我必须手动计算 tabLayout 的宽度,然后根据 tabLayout 是否适合设备设置选项卡模式。并且在这两种情况下都可以正常工作。
【解决方案9】:

我已添加:

app:tabMaxWidth="0dp"

在元素中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-26
    相关资源
    最近更新 更多