Как настроить вкладку «Материал» так, чтобы ее заголовок отображался только при выборе? - PullRequest
Новая
       34

Как настроить вкладку «Материал» так, чтобы ее заголовок отображался только при выборе?

0 голосов
/ 08 июля 2019

Я хочу создать пользовательскую вкладку «Материал», которая отображает текст только при выборе самой вкладки. В противном случае значок должен отображаться один.

Кроме того, значки должны перераспределять свободное пространство и занимать столько места, сколько необходимо.

Пример видео: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1SkeVD6imJA_MwjipNR-DbNh1xw4au9yy%2F02-rally-tabs.mp4

Как я могу это понять?

1 Ответ

0 голосов
/ 08 июля 2019

Вы можете использовать TabLayout.getTab(position), чтобы получить выбранную вкладку и не выбранные вкладки. Как только вы Tab экземпляр, вы можете позвонить Tab.setText(""), и это должно удалить заголовок для вкладки. 

val titles = listOf("tab1", "tab2", "tab3")

val tabs = titles.map {
    tabLayout.newTab().also {
        tabLayout.addTab(it)
        it.setIcon(R.mipmap.ic_launcher)
    }
}

tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        tab?.text = ""
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
        val index = tabs.indexOfFirst { it == tab }
        tab?.text = titles[index]

    }

})

GIF of the tab behavior

Обновление

Эффект можно получить с помощью настраиваемого представления для вкладки.

1 Создайте макет представления для своей вкладки. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    tools:layout_height="48dp"
    android:padding="4dp">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="36dp"
        android:layout_height="36dp"
        tools:srcCompat="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:padding="8dp"
        android:textSize="18sp"
        tools:text="Tab title"/>

</LinearLayout>

2 Используйте пользовательский вид в вашем Tab

val tabs = titles.map {
    tabLayout.newTab().also {
        tabLayout.addTab(it)
        val tabView = LayoutInflater.from(this).inflate(R.layout.tab_item_layout, tabLayout, false)
        tabView.findViewById<ImageView>(R.id.tab_icon).setImageResource(R.mipmap.ic_launcher)
        tabView.findViewById<TextView>(R.id.tab_title).text = title
        it.customView = tabView
    }
}

3 Обновить видимость заголовка при выборе вкладки. 

tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        tab?.customView?.findViewById<TextView>(R.id.tab_title)?.apply {
            visibility = View.GONE
        }
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
        tab?.customView?.findViewById<TextView>(R.id.tab_title)?.apply {
            visibility = View.VISIBLE
        }

    }

})

4 В декларации TabLayout в XML вам нужно добавить app:tabMode="scrollable"

Resize-able Tabs

...