学习的步伐（三）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<Fragment>(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<Fragment>(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<Fragment> {        val mList = ArrayList<Fragment>()        val tab1:Tab1Fragment=Tab1Fragment()        val tab2:Tab2Fragment=Tab2Fragment()        val tab3:Tab3Fragment=Tab3Fragment()        val tab4:Tab4Fragment=Tab4Fragment()        var lsit =listOf<Fragment>(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<String>("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源码

---

欢迎吐槽！