如何使用TabLayout Android Design创建带有图标的应用程序栏？
如何使用TabLayout Android Design创建带有图标的应用程序栏？
提问于 2015-06-03 16:06:07
我正在尝试使用android设计库中的新TabLayout来创建带有图标的应用程序栏。
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);
}结果：
请帮我创建类似的应用栏：
对不起，我的英语不是good.Thanks is advance！
回答 3
Stack Overflow用户
发布于 2016-12-05 20:51:32
您可以使用TabItem的属性android:layout来设置自定义视图。在自定义视图xml文件中，记得将图标和文本视图的id设置为@android:id/icon和android:id="@android:id/text1"，然后库将处理剩下的事情。
下面是一个例子：
。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>希望这能有所帮助。
Stack Overflow用户
发布于 2016-06-01 13:43:31
正如documentation所说，您可以使用TabItem通过xml向TabLayout添加条目。示例用法如下：
<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>Stack Overflow用户
发布于 2017-03-15 01:53:38
使用vector drawables as icons时，您可能希望对不同的状态重用单个可绘制内容，只需对其进行不同的着色即可。This way you can reduce the apk size and the allocation of resources.首先定义一个自定义的FragmentPagerAdapter (这里我使用的是kotlin而不是java )
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)
}
}我们不实现getPageTitle，而是创建一个getPageIcon方法，该方法返回特定选项卡的可绘制内容。接下来，我们创建一个自定义的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)
}
}因此，魔术发生在addTab方法中，其中设置了图标和颜色状态列表。颜色状态列表的结构如下：
<?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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30614272
复制相关文章
相似问题