wake-up-neo.com

Zeilenumbruch in TabLayout entfernen

Ich habe gerade die neue TabLayout-Komponente zu meiner App hinzugefügt. Wie Sie vielleicht wissen, gibt es zwei verschiedene Modi für die Registerkarten app:tabMode="scrollable" und app:tabMode="fixed"

Wenn ich app:tabMode="fixed" verwende, erhalte ich folgendes Ergebnis:

 enter image description here

Links und rechts gibt es keinen Rand/Polster, der Text ist jedoch umbrochen.

Wenn ich jedoch app:tabMode="scrollable" verwende, erhalte ich folgendes Ergebnis:

 enter image description here

Der Text ist nicht eingepackt, aber auf der rechten Seite befindet sich ein seltsamer Rand, und ich kann ihn nicht loswerden.

Ich habe auch versucht, die tabGravity auf app:tabGravity="center" oder app:tabGravity="fill" einzustellen, habe aber keine Änderungen vorgenommen.

Wäre nett, wenn einer von euch klugen Jungs und Mädchen eine Lösung für mich hätte.

Prost, Lukas

36
finki

Eine Lösung hier ist das Aufblasen eines benutzerdefinierten Layouts für jede Registerkarte, wodurch Sie mehr Kontrolle über das Erscheinungsbild der einzelnen Registerkarten haben .. .. Dies erfolgt mit der Methode setCustomView () .

Beachten Sie, dass es bei verschiedenen Bildschirmauflösungen anders aussehen wird.

Es ist immer schwierig, es auf jedem Gerät perfekt aussehen zu lassen, aber mit dieser Methode haben Sie zumindest mehr Kontrolle, da Sie verschiedene benutzerdefinierte Layout-XML-Dateien für unterschiedliche Bildschirmauflösungen größen verwenden können. 

Ein Ansatz wäre, die Schriftgröße so groß wie möglich zu machen, ohne die Bildschirmgröße zu beeinträchtigen.

Ich habe ein einfaches Beispiel erhalten, das den Text in jeder Registerkarte auf eine Zeile beschränkt. In diesem einfachen Beispiel bewirkt dies jedoch auch, dass der lange Text in den Seitenregistern ellipsen wird, ohne die Schriftgröße zu ändern. Der nächste Schritt besteht darin, die optimale Schriftgröße für jede Bildschirmgröße zu ermitteln und für jede eine eigene Layout-XML für die Registerkarten zu erstellen.

Hier ist die Datei custom_tab.xml mit dem angegebenen 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>

Hier ist das Layout für 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>

Hier ist der Aktivitätscode, der den FragmentPagerAdapter enthält:

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;
        }

    }
}

Und hier ist das Ergebnis mit dem obigen Code:

/ - enter image description here

Wenn Sie Android:singleLine="true" entfernen, sieht es so aus, ähnlich wie es in Ihrer Frage aussieht:

 enter image description here

24
Daniel Nugent

Hier ist ein kurzer Hack, viel kürzer als mit setCustomView(): Verwenden Sie das Android:theme-Attribut für Ihre 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"/>

Dann in deinen Themes XML:

<style name="TabLayout_Theme" parent="@style/AppTheme">
    <item name="Android:singleLine">true</item>
</style>

Wir müssen es auf diese Weise tun, da das Android:singleLine-Attribut in der app:tabTextAppearance-Einstellung des TabLayout ignoriert wird. app:tabTextAppearance ist wirklich nur zum Ändern der Textgröße nützlich.

27
TalkLittle

Wenn in Tab-Titeln "..." angezeigt wird, ist dies keine gute Benutzeroberfläche. Ich empfehle Ihnen, tabmode auf scrollbar zu setzen und Tab-Titeln so viel Platz zu beanspruchen, wie sie möchten. 

  <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

Wenn dies eine Option ist, können Sie die Registerkarten mit einem RelativeLayout zentrieren und Android einstellen: layout_centerHorizontal = "true"

Dadurch haben Sie auf der linken und rechten Seite einen gleichen Rand.

z.B.

    <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

Mein Problem wurde gelöst, indem der App ein Stil zugewiesen wurde: tabTextAppearance

<Android.support.design.widget.TabLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:tabTextAppearance="@style/MyCustomTabTextAppearance">

stil:

<style name="MyCustomTabTextAppearance" parent="@style/AppTheme">
    <item name="Android:singleLine">true</item>
    <item name="Android:textSize">@dimen/_5sdp</item>
</style>

Sie können auch textSize einstellen.

0
Hardik Lakhani

Wenn Sie in Ihrer Layout-XML TextView verwenden, verwenden Sie Android:maxLines="1" oder Android:singleLine="true" Prüfen Sie, ob dies funktioniert. Und wenn nicht TextView, dann geben Sie bitte Ihre XML hier ein.

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