Kotlin实战笔记——TabLayout&ViewPager

TabLayout&ViewPager

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

首先引入TabLayout远程依赖

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

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

引入的自定义标题栏

创建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
    }

}

• 订阅

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
    }

}

• 收藏

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
    }
}

创建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, 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(tab1, tab2, tab3)

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

    }

    //设置条目
    fun setItem() {
        //
        val list = listOf("推荐", "订阅", "收藏")
        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