Kotlin实战笔记——TabLayout&ViewPager

TabLayout&ViewPager

在我们开发的过程中，在某个页面中TabLayout&ViewPager这种布局也是很常见，并且ConstraintLayout是个很强大的布局，比RelativeLayout更加强大现在默认布局都是ConstraintLayout，而且用ConstraintLayout去实现布局层数会比LinearLayout少很多，用Kotlin实现一下。

首先引入TabLayout远程依赖

implementation "com.android.support:design:28.0.0"

在MainActivity布局文件中，添加我们需要用到的的控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <include layout="@layout/include_title_bar"
             android:id="@+id/i_bar"/>
    
    <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:background="#ffcdcd"
            android:id="@+id/tl_table"
            app:layout_constraintTop_toBottomOf="@id/i_bar"
            app:tabTextColor="#FFFFFF"
            app:tabSelectedTextColor="#ff0000"
            app:tabIndicatorColor="#ff0040"
            app:tabRippleColor="#ffb1b1"
            android:layout_height="35dp"
            app:tabMode="scrollable">

    </android.support.design.widget.TabLayout>
    
    <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            app:layout_constraintTop_toBottomOf="@id/tl_table"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
    />

</android.support.constraint.ConstraintLayout>

引入的自定义标题栏

<?xml version="1.0" encoding="utf-8"?>
<TextView
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
        android:text="小粉书"
        android:textColor="#FFFFFF"
        android:gravity="center"
        android:background="#F67"
        android:layout_width="match_parent"
        android:layout_height="30dp"/>

创建Fragment，并且直接通过提示把布局创建出来

  • 推荐
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R

class RecommendFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val fmview : View = inflater.inflate(R.layout.fragment_recommend,container,false)
        return fmview
    }

}

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView android:layout_width="0dp"
              android:layout_height="0dp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"
              android:text="推荐界面"
              android:gravity="center"
              android:textSize="30sp"/>

</android.support.constraint.ConstraintLayout>
  • 订阅
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R

class SubscriptionFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val fmview: View = inflater.inflate(R.layout.fragment_subscription, container, false)
        return fmview
    }

}

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent" android:layout_height="match_parent">


    <TextView android:layout_width="0dp"
              android:layout_height="0dp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"
              android:text="订阅界面"
              android:gravity="center"
              android:textSize="30sp"/>

</android.support.constraint.ConstraintLayout>
  • 收藏
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R

/**
 * Created by Sin on 2019/1/10
 */
class CollectionFragment:Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val fmview : View = inflater.inflate(R.layout.fragment_collection,container,false)
        return fmview
    }
}

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView android:layout_width="0dp"
              android:layout_height="0dp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"
              android:text="收藏界面"
              android:gravity="center"
              android:textSize="30sp"/>

</android.support.constraint.ConstraintLayout>

创建Adapter

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter

/**
 * Created by Sin on 2019/1/10
 */
class TitleFragmentPagesAdapter(var fmList: List<Fragment>, fm: FragmentManager?) : FragmentStatePagerAdapter(fm) {
    
    override fun getItem(p0: Int) = fmList[p0]

    override fun getCount() = fmList.size

}

准备工作做好之后，我们就可以使用了

import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import com.example.allen.constraintLayouttest02.adapter.TitleFragmentPagesAdapter
import com.example.allen.constraintLayouttest02.fragment.CollectionFragment
import com.example.allen.constraintLayouttest02.fragment.RecommendFragment
import com.example.allen.constraintLayouttest02.fragment.SubscriptionFragment
import kotlinx.android.synthetic.main.activity_main.*

/**
 * Created by Sin on 2019/1/10
 */
class MainActivity : AppCompatActivity(), TabLayout.OnTabSelectedListener {
    override fun onTabReselected(p0: TabLayout.Tab?) {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        //Tab重新选择时候回调
    }

    override fun onTabUnselected(p0: TabLayout.Tab?) {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        //Tab未被选择时候回调
    }

    override fun onTabSelected(p0: TabLayout.Tab?) {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        //Tab被选的时候回调
        vp_content.currentItem = p0!!.position

    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        initView()
        setTab()
        setItem()

        vp_content.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tl_table))

    }

    //初始化界面
    private fun initView() {
        setContentView(R.layout.activity_main)

    }

    //设置Tab
    private fun setTab() {
        val tab1: RecommendFragment =
            RecommendFragment()
        val tab2: SubscriptionFragment =
            SubscriptionFragment()
        val tab3: CollectionFragment =
            CollectionFragment()
        var list = listOf<Fragment>(tab1, tab2, tab3)

        vp_content.adapter = TitleFragmentPagesAdapter(list, supportFragmentManager)
        tl_table.setupWithViewPager(vp_content)

    }

    //设置条目
    fun setItem() {
        //
        val list = listOf<String>("推荐", "订阅", "收藏")
        tl_table.getTabAt(0)?.text = list[0]
        tl_table.getTabAt(1)?.text = list[1]
        tl_table.getTabAt(2)?.text = list[2]

    }

}

效果图

com.example.allen.constraintLayouttest02.gif
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容