android - saltos - salto de linea xml

Eliminar salto de línea en TabLayout

Question

Acabo de agregar el nuevo componente TabLayout a mi aplicación. Como ya sabrá, hay dos modos diferentes para la app:tabMode="scrollable" pestañas app:tabMode="scrollable" y app:tabMode="fixed" .

Cuando uso la app:tabMode="fixed" obtengo el siguiente resultado:

No hay margen / relleno en el lado izquierdo y derecho, pero el texto está envuelto.

Pero cuando uso app:tabMode="scrollable" obtengo el siguiente resultado:

El texto no está envuelto, pero aquí hay un margen extraño en el lado derecho y no puedo deshacerme de él.

También intenté configurar tabGravity en cualquiera de las app:tabGravity="center" o app:tabGravity="fill" pero no app:tabGravity="fill" ningún cambio.

Sería bueno si alguno de ustedes, chicos y chicas inteligentes, tuviera una solución para mí.

Saludos, Lukas

Answer 1

Aquí hay un truco rápido, mucho más corto que usar setCustomView() : use el atributo android:theme en su 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"/>

Luego, en sus temas XML:

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

Tenemos que hacerlo de esta manera, porque desafortunadamente el atributo android:singleLine se ignora en la app:tabTextAppearance establecida en TabLayout. app:tabTextAppearance realmente solo es útil para cambiar el tamaño del texto.

Answer 2

Con este código, puede eliminar el relleno predeterminado. Para mí funcionó hacer textos un poco más largos dentro de una línea

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

Desde aquí: http://panavtec.me/playing-with-the-new-support-tablayout

Answer 3

En su diseño XML, si está usando TextView , use android:maxLines="1" o android:singleLine="true" Vea si esto funciona. Y si no es TextView , coloque su xml aquí.

Answer 4

Mostrar "..." en los títulos de las pestañas no será una buena experiencia de UI. Sugiero que establezca el modo de pestañas en desplazable y deje que los títulos de pestañas ocupen todo el espacio que deseen.

  <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" />

Answer 5

Resolvió mi problema asignando estilo a la aplicación: tabTextAppearance

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

estilo:

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

Puede configurar textSize también.

Answer 6

Si es una opción, puede centrar las pestañas con un diseño relativo y configurar android: layout_centerHorizontal = "true"

Esto le dará un margen igual en el lado izquierdo y derecho.

p.ej

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

Answer 7

Una solución aquí es inflar un diseño personalizado para cada pestaña, lo que le dará más control sobre la apariencia de cada pestaña. Esto se hace con el método setCustomView() .

Tenga en cuenta que se verá diferente en diferentes resoluciones de pantalla.

Siempre es difícil hacer que se vea perfecto en todos los dispositivos, pero al menos usar este método le brinda más control, ya que puede usar diferentes archivos xml de diseño personalizado para diferentes resoluciones / tamaños de pantalla.

Un enfoque sería hacer que el tamaño de fuente sea lo más grande posible sin que se corte el tamaño de cada pantalla.

Obtuve un ejemplo simple de trabajo, que restringe el texto en cada pestaña a una línea, sin embargo, en este ejemplo simple también hace que el texto largo en las pestañas laterales se elipse sin cambiar el tamaño de la fuente. Su próximo paso sería determinar el tamaño de fuente óptimo para cada tamaño de pantalla y crear un diseño de pestaña específico xml para cada uno.

Aquí está el archivo custom_tab.xml, con android:singleLine="true" especificado:

<?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>

Aquí está el diseño de 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>

Aquí está el código de actividad, que incluye el 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;
        }

    }
}

Y aquí está el resultado con el código anterior:

Tenga en cuenta que si elimina android:singleLine="true" , se ve así, similar a cómo se ve en su pregunta:

Answer 8

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