一、需求
1.tablayout和ViewPager使用
2.使用CoordinatorLayout实现折叠悬浮效果
二、实现步骤
1.首先,布局中使用tablayout和Viewpager
···
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorGravity="stretch"
app:tabIndicator="@drawable/rectangle_circle_skin"
app:tabIndicatorColor="@color/white"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/colorLightPink"
android:background="@color/colorLightPink"
/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/constellation_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
···
2.在相应的活动中设置viewpager联动
private fun initViewPager() {
mViewPagerAdapter = ConsViewPagerAdapter(
supportFragmentManager, mutableListOf<Int>(0,1,2)
)
//tab中的文字
var mTabTextList = arrayOf<String>("今日","明日","本周","本月")
constellation_viewpager.adapter = mViewPagerAdapter
tab_layout.setupWithViewPager(constellation_viewpager)
//放文字进入Tab
for(i in mTabTextList.indices){
val s = mTabTextList[i]
tab_layout.getTabAt(i)?.text = s
}
}
ViewPagerAdapter
class ConsViewPagerAdapter(fm:FragmentManager,private val fragments:List<Int>) :
FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT){
override fun getItem(position: Int): Fragment {
return when(fragments[position]){
0 -> TodayFragment()
1 -> TomorrowFragment()
2 -> WeekFragment()
else -> TomorrowFragment()
}
}
override fun getCount(): Int {
return fragments.size
}
}
3.接着开始使用协调者布局CoordinatorLayout,这个布局下的child都要带Behavior,因为带了才能被协调,这个布局有一个主要搭配者AppBarLayout,用到这个主要是为了实现ActionBar的折叠效果
然后,在AppBarLayout中放入一个子view -------CollapsingToolbarLayout,这是一个实现折叠布局的控件。具体布局如下:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.ConstellationActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:id="@+id/ll_pick_constellation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorSkin"
android:orientation="vertical"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:layout_width="match_parent"
android:paddingTop="100dp"
android:layout_height="wrap_content"
android:src="@drawable/ic_constellation"/>
<TextView
android:id="@+id/tv_constellation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="@drawable/ic_arrow_down_black"
android:paddingLeft="30dp"
android:paddingBottom="5dp"
android:text="@string/constellation"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="center"
android:gravity="right" />
<TextView
android:id="@+id/tv_gregorian_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/constellation"
android:textSize="15sp"
android:gravity="center"
android:paddingBottom="5dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="@+id/constellation_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@color/colorSkin"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<TextView
android:id="@+id/tv_constellation_introduce"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="星座的具体介绍"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorGravity="stretch"
app:tabIndicator="@drawable/rectangle_circle_skin"
app:tabIndicatorColor="@color/white"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/colorLightPink"
android:background="@color/colorLightPink"
/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/constellation_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>