Android Support Design TabLayout: Gravity Center dan Mode Scrollable

Saya mencoba menggunakan Design TabLayout baru dalam proyek saya. Saya ingin tata letaknya beradaptasi dengan setiap ukuran dan orientasi layar, tetapi tata letaknya dapat dilihat dengan benar dalam satu orientasi.

Saya berurusan dengan Gravity dan Mode yang mengatur tabLayout saya sebagai:

    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Jadi saya harapkan kalau tidak ada ruang, tabLayout bisa di-scroll, tapi kalau ada ruang, itu tengah.

Dari panduan:

GRAVITY_CENTER Gravity public int static final digunakan untuk meletakkan tab di tengah TabLayout.

GRAVITY_FILL public int static final digunakan untuk mengisi TabLayout sebanyak mungkin. Opsi ini hanya berlaku jika digunakan dengan MODE_FIXED.

MODE_FIXED public int static final Tab tetap menampilkan semua tab secara bersamaan dan paling baik digunakan dengan konten yang diuntungkan dari pivot cepat antar tab. Jumlah maksimum tab dibatasi oleh lebar tampilan. Tab tetap memiliki lebar yang sama, berdasarkan label tab terluas.

MODE_SCROLLABLE public int static final Tab scrollable menampilkan subset tab pada saat tertentu, dan dapat berisi label tab yang lebih panjang dan lebih banyak tab. Mereka paling baik digunakan untuk menjelajahi konteks di antarmuka sentuh saat pengguna tidak perlu membandingkan label tab secara langsung.

Jadi GRAVITY_FILL hanya kompatibel dengan MODE_FIXED tetapi, di tidak menentukan apa pun untuk GRAVITY_CENTER, saya berharap ini kompatibel dengan MODE_SCROLLABLE, tetapi inilah yang saya dapatkan dengan menggunakan GRAVITY_CENTER dan MODE_SCROLLABLE

Jadi ini menggunakan SCROLLABLE di kedua orientasi, tetapi tidak menggunakan GRAVITY_CENTER.

Inilah yang saya harapkan untuk lanskap; tetapi untuk memiliki ini, saya perlu mengatur MODE_FIXED, jadi yang saya dapatkan dalam potret adalah:

Mengapa GRAVITY_CENTER tidak berfungsi untuk SCROLLABLE jika tabLayout pas dengan layar? Apakah ada cara untuk mengatur gravitasi dan mode secara dinamis (dan untuk melihat apa yang saya harapkan)?

Terima kasih banyak!

DIEDIT: Ini adalah Tata Letak TabLayout saya:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:background="@color/orange_pager"
    android:layout_height="wrap_content" />

Efek hanya gravitasi tab MODE_FIXED.

Salah satu solusi yang mungkin adalah menyetel layout_widthke wrap_contentdan layout_gravityke center_horizontal:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    app:tabMode="scrollable" />

Jika tab lebih kecil dari lebar layar, maka tab TabLayoutitu sendiri juga akan lebih kecil dan akan dipusatkan karena gravitasi. Jika tab lebih besar dari lebar layar, maka TabLayoutakan cocok dengan lebar layar dan pengguliran akan aktif.

ini adalah bagaimana saya melakukannya

TabLayout.xml

<android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@android:color/transparent"
            app:tabGravity="fill"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/TextAppearance.Design.Tab"
            app:tabSelectedTextColor="@color/myPrimaryColor"
            app:tabIndicatorColor="@color/myPrimaryColor"
            android:overScrollMode="never"
            />

Oncreate

@Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
        mTabLayout = (TabLayout)findViewById(R.id.tab_layout);
        mTabLayout.setOnTabSelectedListener(this);
        setSupportActionBar(mToolbar);

        mTabLayout.addTab(mTabLayout.newTab().setText("Dashboard"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Signature"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Booking/Sampling"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Calendar"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Customer Detail"));

        mTabLayout.post(mTabLayout_config);
    }

    Runnable mTabLayout_config = new Runnable()
    {
        @Override
        public void run()
        {

           if(mTabLayout.getWidth() < MainActivity.this.getResources().getDisplayMetrics().widthPixels)
            {
                mTabLayout.setTabMode(TabLayout.MODE_FIXED);
                ViewGroup.LayoutParams mParams = mTabLayout.getLayoutParams();
                mParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
                mTabLayout.setLayoutParams(mParams);

            }
            else
            {
                mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            }
        }
    };

Saya membuat perubahan kecil pada solusi @Mario Velasco di bagian yang dapat dijalankan

membuat semuanya tetap sederhana cukup tambahkan app: tabMode = "scrollable" dan android: layout_gravity = "bottom"

seperti ini

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorAccent" />

Karena saya tidak menemukan mengapa perilaku ini terjadi, saya telah menggunakan kode berikut:

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

Pada dasarnya, saya harus menghitung secara manual lebar tabLayout saya dan kemudian saya mengatur Mode Tab tergantung pada apakah tabLayout cocok di perangkat atau tidak.

Alasan mengapa saya mendapatkan ukuran layout secara manual adalah karena tidak semua tab memiliki lebar yang sama dalam mode Scrollable, dan ini bisa memancing beberapa nama menggunakan 2 baris seperti yang terjadi pada saya di contoh.

Lihat android-tablayouthelper

Alihkan TabLayout.MODE_FIXED dan TabLayout.MODE_SCROLLABLE secara otomatis bergantung pada lebar tab total.

Ini adalah solusi yang saya gunakan untuk secara otomatis mengubah antara SCROLLABLEdan FIXED+ FILL. Ini adalah kode lengkap untuk solusi @ Fighter42:

(Kode di bawah ini menunjukkan di mana harus meletakkan modifikasi jika Anda telah menggunakan templat aktivitas tab Google)

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    // Create the adapter that will return a fragment for each of the three
    // primary sections of the activity.
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    // Set up the ViewPager with the sections adapter.
    mViewPager = (ViewPager) findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);

    // Set up the tabs
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);

    // Mario Velasco's code
    tabLayout.post(new Runnable()
    {
        @Override
        public void run()
        {
            int tabLayoutWidth = tabLayout.getWidth();

            DisplayMetrics metrics = new DisplayMetrics();
            ActivityMain.this.getWindowManager().getDefaultDisplay().getMetrics(metrics);
            int deviceWidth = metrics.widthPixels;

            if (tabLayoutWidth < deviceWidth)
            {
                tabLayout.setTabMode(TabLayout.MODE_FIXED);
                tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
            } else
            {
                tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            }
        }
    });
}

Tata Letak:

    <android.support.design.widget.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

Jika Anda tidak perlu mengisi lebar, lebih baik gunakan solusi @karaokyo.

Saya membuat kelas AdaptiveTabLayout untuk mencapai ini. Ini adalah satu-satunya cara yang saya temukan untuk benar-benar memecahkan masalah, menjawab pertanyaan dan menghindari / mengatasi masalah yang tidak dapat dilakukan oleh jawaban lain di sini.

Catatan:

• Menangani tata letak ponsel / tablet.
• Menangani kasus di mana ada cukup ruang MODE_SCROLLABLEtetapi tidak cukup ruang untuk itu MODE_FIXED. Jika Anda tidak menangani kasus ini, ini akan terjadi pada beberapa perangkat Anda akan melihat ukuran teks yang berbeda atau oven dua baris teks di beberapa tab, yang terlihat buruk.
• Itu mendapat ukuran nyata dan tidak membuat asumsi apa pun (seperti layar lebar 360dp atau apa pun ...). Ini berfungsi dengan ukuran layar nyata dan ukuran tab nyata. Ini berarti bekerja dengan baik dengan terjemahan karena tidak mengasumsikan ukuran tab apa pun, tab mendapatkan ukuran.
• Menangani operan berbeda pada fase onLayout untuk menghindari pekerjaan tambahan.
• Lebar tata letak harus wrap_contentpada xml. Jangan setel mode atau gravitasi apa pun pada xml.

AdaptiveTabLayout.java

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class AdaptiveTabLayout extends TabLayout
{
    private boolean mGravityAndModeSeUpNeeded = true;

    public AdaptiveTabLayout(@NonNull final Context context)
    {
        this(context, null);
    }

    public AdaptiveTabLayout(@NonNull final Context context, @Nullable final AttributeSet attrs)
    {
        this(context, attrs, 0);
    }

    public AdaptiveTabLayout
    (
            @NonNull final Context context,
            @Nullable final AttributeSet attrs,
            final int defStyleAttr
    )
    {
        super(context, attrs, defStyleAttr);
        setTabMode(MODE_SCROLLABLE);
    }

    @Override
    protected void onLayout(final boolean changed, final int l, final int t, final int r, final int b)
    {
        super.onLayout(changed, l, t, r, b);

        if (mGravityAndModeSeUpNeeded)
        {
            setModeAndGravity();
        }
    }

    private void setModeAndGravity()
    {
        final int tabCount = getTabCount();
        final int screenWidth = UtilsDevice.getScreenWidth();
        final int minWidthNeedForMixedMode = getMinSpaceNeededForFixedMode(tabCount);

        if (minWidthNeedForMixedMode == 0)
        {
            return;
        }
        else if (minWidthNeedForMixedMode < screenWidth)
        {
            setTabMode(MODE_FIXED);
            setTabGravity(UtilsDevice.isBigTablet() ? GRAVITY_CENTER : GRAVITY_FILL) ;
        }
        else
        {
            setTabMode(TabLayout.MODE_SCROLLABLE);
        }

        setLayoutParams(new LinearLayout.LayoutParams
                (LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

        mGravityAndModeSeUpNeeded = false;
    }

    private int getMinSpaceNeededForFixedMode(final int tabCount)
    {
        final LinearLayout linearLayout = (LinearLayout) getChildAt(0);
        int widestTab = 0;
        int currentWidth;

        for (int i = 0; i < tabCount; i++)
        {
            currentWidth = linearLayout.getChildAt(i).getWidth();

            if (currentWidth == 0) return 0;

            if (currentWidth > widestTab)
            {
                widestTab = currentWidth;
            }
        }

        return widestTab * tabCount;
    }

}

Dan ini adalah kelas DeviceUtils:

import android.content.res.Resources;

public class UtilsDevice extends Utils
{
    private static final int sWIDTH_FOR_BIG_TABLET_IN_DP = 720;

    private UtilsDevice() {}

    public static int pixelToDp(final int pixels)
    {
        return (int) (pixels / Resources.getSystem().getDisplayMetrics().density);
    }

    public static int getScreenWidth()
    {
        return Resources
                .getSystem()
                .getDisplayMetrics()
                .widthPixels;
    }

    public static boolean isBigTablet()
    {
        return pixelToDp(getScreenWidth()) >= sWIDTH_FOR_BIG_TABLET_IN_DP;
    }

}

Gunakan contoh:

<?xml version="1.0" encoding="utf-8"?>

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

    <com.com.stackoverflow.example.AdaptiveTabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?colorPrimary"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/text_white_primary"
        app:tabTextColor="@color/text_white_secondary"
        tools:layout_width="match_parent"/>

</FrameLayout>

Inti

Masalah / Minta bantuan:

• Anda akan melihat ini:

Logcat:

W/View: requestLayout() improperly called by android.support.design.widget.TabLayout$SlidingTabStrip{3e1ebcd6 V.ED.... ......ID 0,0-466,96} during layout: running second layout pass
W/View: requestLayout() improperly called by android.support.design.widget.TabLayout$TabView{3423cb57 VFE...C. ..S...ID 0,0-144,96} during layout: running second layout pass
W/View: requestLayout() improperly called by android.support.design.widget.TabLayout$TabView{377c4644 VFE...C. ......ID 144,0-322,96} during layout: running second layout pass
W/View: requestLayout() improperly called by android.support.design.widget.TabLayout$TabView{19ead32d VFE...C. ......ID 322,0-466,96} during layout: running second layout pass

Saya tidak yakin bagaimana mengatasinya. Ada saran?

• Untuk membuat anak TabLayout mengukur, saya membuat beberapa pengecoran dan asumsi (Seperti anak adalah LinearLayout yang berisi tampilan lain ....) Ini mungkin menyebabkan masalah dalam pembaruan Pustaka Dukungan Desain lebih lanjut. Pendekatan / saran yang lebih baik?

 <android.support.design.widget.TabLayout
                    android:id="@+id/tabList"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    app:tabMode="scrollable"/>

Contoh yang sangat sederhana dan selalu berhasil.

/**
 * Setup stretch and scrollable TabLayout.
 * The TabLayout initial parameters in layout must be:
 * android:layout_width="wrap_content"
 * app:tabMaxWidth="0dp"
 * app:tabGravity="fill"
 * app:tabMode="fixed"
 *
 * @param context   your Context
 * @param tabLayout your TabLayout
 */
public static void setupStretchTabLayout(Context context, TabLayout tabLayout) {
    tabLayout.post(() -> {

        ViewGroup.LayoutParams params = tabLayout.getLayoutParams();
        if (params.width == ViewGroup.LayoutParams.MATCH_PARENT) { // is already set up for stretch
            return;
        }

        int deviceWidth = context.getResources()
                                 .getDisplayMetrics().widthPixels;

        if (tabLayout.getWidth() < deviceWidth) {
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            params.width = ViewGroup.LayoutParams.MATCH_PARENT;
        } else {
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            params.width = ViewGroup.LayoutParams.WRAP_CONTENT;
        }
        tabLayout.setLayoutParams(params);

    });

}

Ini adalah satu-satunya kode yang berhasil untuk saya:

public static void adjustTabLayoutBounds(final TabLayout tabLayout,
                                         final DisplayMetrics displayMetrics){

    final ViewTreeObserver vto = tabLayout.getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

        @Override
        public void onGlobalLayout() {

            tabLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);

            int totalTabPaddingPlusWidth = 0;
            for(int i=0; i < tabLayout.getTabCount(); i++){

                final LinearLayout tabView = ((LinearLayout)((LinearLayout) tabLayout.getChildAt(0)).getChildAt(i));
                totalTabPaddingPlusWidth += (tabView.getMeasuredWidth() + tabView.getPaddingLeft() + tabView.getPaddingRight());
            }

            if (totalTabPaddingPlusWidth <= displayMetrics.widthPixels){

                tabLayout.setTabMode(TabLayout.MODE_FIXED);
                tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

            }else{
                tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            }

            tabLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        }
    });
}

DisplayMetrics dapat diambil menggunakan ini:

public DisplayMetrics getDisplayMetrics() {

    final WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
    final Display display = wm.getDefaultDisplay();
    final DisplayMetrics displayMetrics = new DisplayMetrics();

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
        display.getMetrics(displayMetrics);

    }else{
        display.getRealMetrics(displayMetrics);
    }

    return displayMetrics;
}

Dan XML TabLayout Anda akan terlihat seperti ini (jangan lupa untuk menyetel tabMaxWidth ke 0):

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabMaxWidth="0dp"/>

Yang Anda butuhkan hanyalah menambahkan yang berikut ini ke TabLayout Anda

custom:tabGravity="fill"

Jadi, Anda akan memiliki:

xmlns:custom="http://schemas.android.com/apk/res-auto"
<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:tabGravity="fill"
        />

Saya menyelesaikan ini menggunakan berikut

if(tabLayout_chemistCategory.getTabCount()<4)
    {
        tabLayout_chemistCategory.setTabGravity(TabLayout.GRAVITY_FILL);
    }else
    {
        tabLayout_chemistCategory.setTabMode(TabLayout.MODE_SCROLLABLE);

    }

Solusi terakhir saya

class DynamicModeTabLayout : TabLayout {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun setupWithViewPager(viewPager: ViewPager?) {
        super.setupWithViewPager(viewPager)

        val view = getChildAt(0) ?: return
        view.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED)
        val size = view.measuredWidth

        if (size > measuredWidth) {
            tabMode = MODE_SCROLLABLE
            tabGravity = GRAVITY_CENTER
        } else {
            tabMode = MODE_FIXED
            tabGravity = GRAVITY_FILL
        }
    }
}