Android TabLayout+SearchView 组成TitleBar
效果预览
布局如下
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="30dp"
android:background="@color/colorPrimary"
android:orientation="horizontal">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="@color/white"
app:tabIndicatorHeight="2dp"
app:tabIndicatorFullWidth="false"
app:tabPaddingStart="30dp"
app:tabPaddingEnd="30dp"
app:tabTextAppearance="@style/TabText"
app:tabTextColor="@color/white">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="未完成" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="已完成" />
</com.google.android.material.tabs.TabLayout>
<SearchView
android:id="@+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:searchIcon="@drawable/ic_menu_search"
android:closeIcon="@drawable/ic_close"
android:searchHintIcon="@drawable/ic_menu_search"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
初始化SearchView
- 自定义searchView输入框内文字颜色
- 动态设定searchView宽度,展开时撑满父容器
//1.获取searchView中输入文字的对象并设置其颜色
val id = binding.search.context.resources
.getIdentifier("android:id/search_src_text", null, null)
binding.search.findViewById<TextView>(id).setTextColor(Color.WHITE)
//2.1展开时撑满父容器并隐藏tabLayout
binding.search.setOnSearchClickListener {
it.layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT
binding.tabLayout.visibility = View.GONE
}
//2.2缩小时显示tabLayout
binding.search.setOnCloseListener {
binding.tabLayout.visibility = View.VISIBLE
binding.search.layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT
return@setOnCloseListener false
}
初始化TabLayout
-
定义style资源
<!--未选中时的tab字体样式--> <style name="TabText" parent="TextAppearance.Design.Tab"> <item name="android:textSize">16sp</item> <item name="android:textColor">@color/white</item> </style> <!--选中时的tab字体样式--> <style name="CheckedTabText" parent="TextAppearance.Design.Tab"> <item name="android:textSize">18sp</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@color/white</item> </style>
-
动态设置TabLayout选中tabItem的字体样式,加粗变大
val defaultTab = ((binding.tabLayout.getChildAt(0) as LinearLayout).getChildAt(0) as LinearLayout).getChildAt(1) as TextView defaultTab.setTextAppearance(R.style.CheckedTabText) binding.tabLayout.addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener{ override fun onTabReselected(tab: TabLayout.Tab?) {} override fun onTabUnselected(tab: TabLayout.Tab?) { val unselectedTab = ((binding.tabLayout.getChildAt(0) as LinearLayout).getChildAt(tab?.position!!) as LinearLayout).getChildAt(1) as TextView unselectedTab.setTextAppearance(R.style.TabText)} override fun onTabSelected(tab: TabLayout.Tab?) { val selectedTab = ((binding.tabLayout.getChildAt(0) as LinearLayout).getChildAt(tab?.position!!) as LinearLayout).getChildAt(1) as TextView selectedTab.setTextAppearance(R.style.CheckedTabText) } })