学习的步伐（三）Kotlin TabLayout+Viewpager+Fragment实现基础框架

看过一本书，名字是《你只是看起来很努力》。个人感觉很不错！

每天学一点，时间久了总会进步的！

---

Kotlin系列

• 学习的步伐（六） Kotlin 学习总结：类的特性

• 学习的步伐（五） Kotlin 基础语法学习总结：语法

• 学习的步伐（四） Kotlin 基础语法学习总结：操作符

• 学习的步伐（二）Kotlin 实现Recyclerview列表

---

效果图

---

本文功能介绍

TabLayout+Viewpager+Fragment，屏蔽了viewpager的滑动效果。

• 自定义viewpager

/**
 * Created by Administrator on 2017/6/25.
 * 在布局中直接引用即可
 */
class KotlinNoScrollViewPager : ViewPager {

    /**
     * 控制viewpager 是否可以滑动
     * */
    private var noScroll = true

    constructor(mCtx : Context ) : super(mCtx) {

    }

    constructor(mCtx : Context,att : AttributeSet ) : super(mCtx,att) {
    }

    fun setScroll(noScroll : Boolean){
        this.noScroll=noScroll
    }

    override fun scrollTo(x: Int, y: Int) {
        super.scrollTo(x, y)
    }

    override fun onTouchEvent(ev: MotionEvent?): Boolean {
        if (noScroll)
            return false
        else
            return super.onTouchEvent(ev)
    }

    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        if (noScroll)
            return false
        else
            return super.onInterceptTouchEvent(ev)
    }

    override fun setCurrentItem(item: Int) {
        super.setCurrentItem(item,false)//false 标识切花换的时候不需要时间
    }
}

---

本文Kotlin基础介绍

Kotlin的配置什么的都不在说了，上面文章已说过！

本文用到的基础并不多，主要要逐步适应kotlin的编码方式。
现在感觉越来越爱Kotlin了，编写起来真的很爽。

• 数组arrayOf()

/**
*我们可以给库函数 arrayOf() 传递每一项的值来创建Array，arrayOf(1, 2, 3) 创建了一个[1, 2, 3] 这样的数组
*/
  val image = arrayOf(R.mipmap.zhuye,R.mipmap.shangdian,R.mipmap.msg,R.mipmap.sd_ka)

• listOf()
  listOf()是使用ArrayList实现的，返回的list是只读的，其内存效率更高。在开发过程中，可以尽可能的多用只读List,可以在一定程度上提高内存效率。

       val tab1:Tab1Fragment=Tab1Fragment()
        val tab2:Tab2Fragment=Tab2Fragment()
        val tab3:Tab3Fragment=Tab3Fragment()
        val tab4:Tab4Fragment=Tab4Fragment()
        var lsit =listOf(tab1,tab2,tab3,tab4)

---

实现流程

里面注释写的很详细了，就逐步分开介绍了

• MainActivity

class MainActivity : AppCompatActivity(),TabLayout.OnTabSelectedListener {

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
        viewpager.currentItem=tab!!.position
    }


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setTab()
        setItem()
        tab.addOnTabSelectedListener(this)
    }


    fun setTab(){
        /**设置tab的模式*/
        tab.tabMode=TabLayout.MODE_FIXED
        /**
         * 第一种：initdata()!!
         * 第二种使用listof
         */
        val tab1:Tab1Fragment=Tab1Fragment()
        val tab2:Tab2Fragment=Tab2Fragment()
        val tab3:Tab3Fragment=Tab3Fragment()
        val tab4:Tab4Fragment=Tab4Fragment()
        var lsit =listOf(tab1,tab2,tab3,tab4)
        viewpager.adapter=KotlinPagerAdapter(lsit,supportFragmentManager)
        //让tab和viewpager关联起来
        tab.setupWithViewPager(viewpager)
    }

    /**
     * 设置tabitem
     * */
    fun setItem() {
        tab.getTabAt(0)?.customView=getTabView(0)
        tab.getTabAt(1)?.customView=getTabView(1)
        tab.getTabAt(2)?.customView=getTabView(2)
        tab.getTabAt(3)?.customView=getTabView(3)
    }

    /**
     * fragment 添加到集合中
     *  使用listof 代替
     * */
    fun initdata() : ArrayList {
        val mList = ArrayList()
        val tab1:Tab1Fragment=Tab1Fragment()
        val tab2:Tab2Fragment=Tab2Fragment()
        val tab3:Tab3Fragment=Tab3Fragment()
        val tab4:Tab4Fragment=Tab4Fragment()
        var lsit =listOf(tab1,tab2,tab3,tab4)
        mList.add(tab1)
        mList.add(tab2)
        mList.add(tab3)
        mList.add(tab4)
        return mList
    }

    fun getTabView(position: Int): View {
        val view = LayoutInflater.from(this).inflate(R.layout.tab_item, null)
        val iv_head = view.findViewById(R.id.tab_item_text) as TextView
        val im = view.findViewById(R.id.image) as ImageView
        /*
        *我们可以给库函数 arrayOf() 传递每一项的值来创建Array，arrayOf(1, 2, 3) 创建了一个[1, 2, 3] 这样的数组
        */
        val image = arrayOf(R.mipmap.zhuye,R.mipmap.shangdian,R.mipmap.msg,R.mipmap.sd_ka)
        val list=listOf("tab1","tab2","tab3","tab4")
        iv_head.text=list[position]
        im.imageResource=image[position]
        /**
         * 不建议使用这种方式 我刚开始用的是这种  用这种它显示的都是第四个字符串tab4
         * */
//        val asc = Array(4,{"tab1";"tab2";"tab3";"tab4"})
//        iv_head.text=asc[position]
        return view
    }

}

• KotlinPagerAdapter

class KotlinPagerAdapter(var mList : List<Fragment>, fm: FragmentManager?) : FragmentStatePagerAdapter(fm) {
    override fun getItem(position: Int): android.support.v4.app.Fragment {
        return mList[position]
    }

    override fun getCount(): Int {
        return mList.size
    }

}

• fragment （这个就不贴了 自己创建几个就行了）

---

动态创建布局

kotlin的动态创建布局顺便提一下，我demo中fragment有简单的用到。本人还在学习中，哪位客观有动态创建布局的学习经验，或者博客地址，欢迎留言告知！再次感谢

/**
 * Created by Administrator on 2017/6/25.
 */
class Tab1Fragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View {
        return xml()
    }

    /**
     * 动态创建布局
     * */
    fun xml(): View {
        var view = with(context) {
            verticalLayout {
                gravity = Gravity.CENTER_VERTICAL
                button("Kotlin动态创建布局Tab1Fragment") {
                    //这是btn的名字
                    onClick { toast("哈哈 动态创建布局") }
                }
            }
        }
        return view
    }
}

---

demo源码

---

欢迎吐槽！