Wie erstelle ich eine App-Leiste mit Icons mit TabLayout Android Design?

Ich versuche, die neue TabLayout in den android-design-Bibliothek zum erstellen von app-Leiste mit icons.

public void setupTabLayout(TabLayout tabLayout) {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setupWithViewPager(mViewpager);
    tabLayout.getTabAt(0).setIcon(R.drawable.ic_tabbar_library);
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_tabbar_recents);
    tabLayout.getTabAt(2).setIcon(R.drawable.ic_tabbar_favorites);
    tabLayout.getTabAt(3).setIcon(R.drawable.ic_tabbar_notifications);
    tabLayout.getTabAt(4).setIcon(R.drawable.ic_tabbar_settings);
}

Ergebnis:

Wie erstelle ich eine App-Leiste mit Icons mit TabLayout Android Design?

Mir bitte helfen, zu erstellen Sie app-Leiste ähnlich:

Wie erstelle ich eine App-Leiste mit Icons mit TabLayout Android Design?

Sorry mein Englisch ist nicht gut.Dank Voraus !

InformationsquelleAutor der Frage natuan241 | 2015-06-03

  1. 28

    Aus der Dokumentation :

    https://developer.android.com/reference/android/support/design/widget/TabLayout.Tab.html#setCustomView(android.view.View)

    Legen Sie eine benutzerdefinierte Ansicht verwendet werden, die für diese Registerkarte. Dieser überschreibt Werte gesetzt
    durch setText(CharSequence) und setIcon(Drawable).

    haben Sie zum festlegen des Titels Werte selbst

    Aus deinem Beispiel:

    public void setupTabLayout(TabLayout tabLayout) {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setupWithViewPager(mViewpager);

    TextView tab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tab.setText("Library");
    tab.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tabbar_library, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tab);
    //..
}

    custom_tab.xml

    <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tab" />

    Update

    Die api wurde geändert, damit Sie zum festlegen einer benutzerdefinierten id, so dass Sie nicht haben, um den text/drawable manuell. Es wird die Verwendung des Adapters Werte.

    Wenn der bereitgestellte Stadtplan enthält eine TextView mit der ID " text1 dann, dass
    aktualisiert wird mit dem Wert gegeben setText(CharSequence).
    Ebenso, wenn dieses layout enthält eine Bildansicht mit ID-Symbol, dann ist es
    aktualisiert wird mit dem Wert für die setIcon(Drawable).

    InformationsquelleAutor der Antwort Chris Dinon

  2. 2

    Als Dokumentation sagte Sie Elemente hinzufügen können, um TabLayout durch die xml-Daten durch Benutzung von TabItem. Ein Beispiel für die Verwendung ist wie:

     <android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

    InformationsquelleAutor der Antwort Amir

  3. 2

    Können Sie mithilfe der attribute android:layout von TabItem so stellen Sie eine benutzerdefinierte Ansicht.
    In eigene view xml-Datei, denken Sie daran, id von Symbol und text anzeigen zu @android:id/icon und android:id="@android:id/text1", dann wird die Bibliothek um den rest kümmern.

    Hier ein Beispiel:

    . custom_tab_item.xml

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

  <ImageView
      android:id="@android:id/icon"
      android:layout_width="16dp"
      android:layout_height="16dp"
      android:layout_marginTop="4dp"
      android:scaleType="centerInside"/>

  <TextView
      android:id="@android:id/text1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="8dp"
      android:textSize="16dp"/>

</LinearLayout>

    . main.xml

    <android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <android.support.design.widget.TabItem
      android:id="@+id/ti_activities"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:icon="@drawable/ic_question"
      android:layout="@layout/custom_tab_item"
      android:text="@string/activities"/>

  <android.support.design.widget.TabItem
      android:id="@+id/ti_profile"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:icon="@drawable/ic_question"
      android:layout="@layout/custom_tab_item"
      android:text="@string/Profile"/>

</android.support.design.widget.TabLayout>

    Hoffe, dass dies helfen.

    InformationsquelleAutor der Antwort nlt

  4. 1

    Wenn Sie Vektor-drawables als Symbole möchten Sie vielleicht, um die Wiederverwendung einer einzelnen drawables für verschiedene Staaten, indem Sie einfach die Tönung ist es anders. Auf diese Weise können Sie reduzieren apk Größe und die Verteilung der Ressourcen. Definieren Sie zunächst eine benutzerdefinierte FragmentPagerAdapter (ich bin mit kotlin anstelle von java hier)

    class TabPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    override fun getCount(): Int = 2

    override fun getItem(position: Int): Fragment = when (position) {
        0 -> FirstFragment.newInstance()
        else -> SecondFragment.newInstance()
    }

    fun getPageIcon(context: Context, position: Int): Drawable = when (position) {
        0 -> ContextCompat.getDrawable(context, R.drawable.ic_whatshot)
        else -> ContextCompat.getDrawable(context, R.drawable.ic_face)
    }
}

    Statt der Implementierung getPageTitle wir erstellen ein getPageIcon Methode, die zurückgibt, die ein drawable für eine bestimmte Registerkarte. Als Nächstes erstellen wir eine benutzerdefinierte TabLayout:

    class IconTabLayout : TabLayout {

    private var viewPager: ViewPager? = null

    constructor(context: Context) : super(context)
    constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet)
    constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(context, attributeSet, defStyleAttr)

    override fun onAttachedToWindow() {
        if (viewPager == null) {
            if (parent is ViewPager) viewPager = parent as ViewPager
        }
        super.onAttachedToWindow()
    }

    override fun setupWithViewPager(viewPager: ViewPager?, autoRefresh: Boolean) {
        this.viewPager = viewPager
        super.setupWithViewPager(viewPager, autoRefresh)
    }

    override fun addTab(@NonNull tab: Tab, position: Int, setSelected: Boolean) {
        if (viewPager != null && viewPager!!.adapter is TabPagerAdapter) {
            val icon: Drawable = DrawableCompat.wrap((viewPager!!.adapter as TabPagerAdapter).getPageIcon(context, position))
            DrawableCompat.setTintList(icon.mutate(), ContextCompat.getColorStateList(context, R.color.tab_color))
            tab.icon = icon
        }
        super.addTab(tab, position, setSelected)
    }
}

    Also die Magie passiert in der addTab Methode, wo das Symbol und die Farbe der Status-Liste gesetzt. Die Farbe Status-Liste hat folgende Struktur:

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:color="@color/tab_not_active" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
    <item android:color="@color/tab_active" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />

    <!-- Focused states -->
    <item android:color="@color/tab_not_active" android:state_focused="true" android:state_pressed="false" android:state_selected="false" />
    <item android:color="@color/tab_active" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />

    <!-- Pressed -->
    <item android:color="@color/tab_not_active" android:state_pressed="true" />
</selector>

    InformationsquelleAutor der Antwort Lost in OWL

Schreibe einen Kommentar