blocks|key|4497024|text|正如documentation所说，您可以使用TabItem通过xml向TabLayout添加条目。示例用法如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4497025|+<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>|code-block|syntax|javascript|4497026|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.android.com/reference/android/support/design/widget/TabLayout.html^0|N|7|10|9|2|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

As <a href="https://developer.android.com/reference/android/support/design/widget/TabLayout.html" rel="nofollow">documentation</a> said You can add items to <code>TabLayout</code> through the xml by use of <code>TabItem</code>. An example usage is like:

<pre><code> &lt;android.support.design.widget.TabLayout
 android:layout_height="wrap_content"
 android:layout_width="match_parent"&gt;

 &lt;android.support.design.widget.TabItem
 android:text="@string/tab_text"/&gt;

 &lt;android.support.design.widget.TabItem
 android:icon="@drawable/ic_android"/&gt;

 &lt;/android.support.design.widget.TabLayout&gt;
</code></pre>

blocks|key|4497070|text|您可以使用TabItem的属性android:layout来设置自定义视图。在自定义视图xml文件中，记得将图标和文本视图的id设置为@android:id/icon和android:id="@android:id/text1"，然后库将处理剩下的事情。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4497071|下面是一个例子：|4497072|。custom_tab_item.xml|4497073|<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>|code-block|syntax|javascript|4497074|。main.xml|4497075|<android.support.design.widget.TabLayout
++++android:layout_width="match_parent"
++++android:layout_height="wrap_content">

++<android.support.design.widget.TabItem
++++++android:id="@%2Bid/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="@%2Bid/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>|4497076|希望这能有所帮助。|4497077|entityMap^0|5|7|F|E|1Q|2|1V|G|2C|U|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1C|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|V|$]]

You can use the attribute <code>android:layout</code> of <code>TabItem</code> to set custom view.
In custom view xml file, remember to set <code>id</code> of icon and text view to <code>@android:id/icon</code> and <code>android:id="@android:id/text1"</code>, then the library will take care the rest.

Here's an example:
. custom_tab_item.xml

<pre><code>&lt;LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="horizontal"&gt;

 &lt;ImageView
 android:id="@android:id/icon"
 android:layout_width="16dp"
 android:layout_height="16dp"
 android:layout_marginTop="4dp"
 android:scaleType="centerInside"/&gt;

 &lt;TextView
 android:id="@android:id/text1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:textSize="16dp"/&gt;

&lt;/LinearLayout&gt;
</code></pre>

. main.xml

<pre><code>&lt;android.support.design.widget.TabLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"&gt;

 &lt;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"/&gt;

 &lt;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"/&gt;

&lt;/android.support.design.widget.TabLayout&gt;
</code></pre>

Hope this help.

blocks|key|4497136|text|使用vector+drawables+as+icons时，您可能希望对不同的状态重用单个可绘制内容，只需对其进行不同的着色即可。This+way+you+can+reduce+the+apk+size+and+the+allocation+of+resources.首先定义一个自定义的FragmentPagerAdapter+(这里我使用的是kotlin而不是java+)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4497137|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)
++++}
}|code-block|syntax|javascript|4497138|我们不实现getPageTitle，而是创建一个getPageIcon方法，该方法返回特定选项卡的可绘制内容。接下来，我们创建一个自定义的TabLayout：|style|CODE|4497139|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)
++++}
}|4497140|因此，魔术发生在addTab方法中，其中设置了图标和颜色状态列表。颜色状态列表的结构如下：|4497141|<?xml+version="1.0"+encoding="utf-8"?>
<selector+xmlns:android="http://schemas.android.com/apk/res/android">
++++
++++<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"+/>

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

++++
++++<item+android:color="@color/tab_not_active"+android:state_pressed="true"+/>
</selector>|4497142|entityMap|0|LINK|mutability|MUTABLE|url|https://material.io/icons/|1|https://www.youtube.com/watch?v=u5xP4tFQlkA&index=4&list=PLWz5rJ2EKKc-9gqRx5anfX0Ozp-qEI2CF^0|2|P|0|1S|1X|1|0|0|5|C|O|B|0|0|8|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1A|8|@$A|1B|B|1C|K|L]|$A|1D|B|1E|K|L]]|9|@]|C|$]]|$1|M|3|N|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|1G|8|@$A|1H|B|1I|K|L]]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1J|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

When you use <a href="https://material.io/icons/" rel="nofollow noreferrer">vector drawables as icons</a> you might want to reuse a single drawables for different states, by simply tinting it differently. <a href="https://www.youtube.com/watch?v=u5xP4tFQlkA&amp;index=4&amp;list=PLWz5rJ2EKKc-9gqRx5anfX0Ozp-qEI2CF" rel="nofollow noreferrer">This way you can reduce the apk size and the allocation of resources.</a> First define a custom FragmentPagerAdapter (I am using kotlin instead of java here)

<pre><code>class TabPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

 override fun getCount(): Int = 2

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

 fun getPageIcon(context: Context, position: Int): Drawable = when (position) {
 0 -&gt; ContextCompat.getDrawable(context, R.drawable.ic_whatshot)
 else -&gt; ContextCompat.getDrawable(context, R.drawable.ic_face)
 }
}
</code></pre>

Instead of implementing <code>getPageTitle</code> we create a <code>getPageIcon</code> method, that returns a drawable for a specific tab. Next we create a custom TabLayout:

<pre><code>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 &amp;&amp; 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)
 }
}
</code></pre>

So the magic happens in the <code>addTab</code> method, where the icon and the color state list are set. The color state list has following structure:

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

 &lt;!-- Focused states --&gt;
 &lt;item android:color="@color/tab_not_active" android:state_focused="true" android:state_pressed="false" android:state_selected="false" /&gt;
 &lt;item android:color="@color/tab_active" android:state_focused="true" android:state_pressed="false" android:state_selected="true" /&gt;

 &lt;!-- Pressed --&gt;
 &lt;item android:color="@color/tab_not_active" android:state_pressed="true" /&gt;
&lt;/selector&gt;
</code></pre>

I'm trying to use the new TabLayout in the android design library to create app bar with icons. 

<pre><code>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);
}
</code></pre>

Result:

<img src="https://i.imgur.com/QJbvBvU.png" alt="app bar with icons">

Please help me to create app bar similar:

<img src="https://i.imgur.com/1fgC3yv.png" alt="app bar with icons">

Sorry my english is not good.Thanks is advance !

How to create app bar with icons using TabLayout Android Design?

我正在尝试使用android设计库中的新TabLayout来创建带有图标的应用程序栏。public void setupTabLayout(TabLayout tabLayout) {    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);    tabLayout.se...

问如何使用TabLayout Android Design创建带有图标的应用程序栏？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用TabLayout Android Design创建带有图标的应用程序栏？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用TabLayout Android Design创建带有图标的应用程序栏？
EN