tablayout和viewpager联动,coordinatorlayout的使用

一、需求
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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值