美文网首页Kotlinkotlin我和简书那些事儿
使用Kotlin仿的简书个人主页,只需一个控件

使用Kotlin仿的简书个人主页,只需一个控件

作者: 八怪不姓丑 | 来源:发表于2017-07-04 13:38 被阅读555次

    界面做的比较丑,但是基本上实现了功能。
    为了学习最近比较火的kotlin语言,就试着写了个demo。

    参考上篇文章仿掌上英雄联盟的效果。

    效果图
    一、开始前的准备
    • 导入kotlin开发环境:
      在androidStudio3.0版本默认已经集成好了。直接在创建项目的时候勾选include Kotlin support,会自动帮我们创建好kotlin语言的项目。不勾选就是java。

      image.png
    • 如果是手动集成kotlin:
      需要两个地方进行配置
      1、根目录下的 project - build.gradle

    buildscript {
        ext.kotlin_version = '1.1.2-4'
    ....//省略部分代码
       }
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:2.3.0'
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        }
    

    2、model - build.gradle

    apply plugin: 'kotlin-android'
    apply plugin: 'kotlin-android-extensions'
    
    dependencies {
        compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
     .....//省略部分代码
    }
    

    需要注意的是如果是自动集成的默认没有apply plugin: 'kotlin-android-extensions'
    该方法需要手动添加,关于用处后面再说。

    二、加入控件,创建布局

    前面说的一个控件就是指scrollablelayout,在GitHub已经开源很久了。
    已经提供好了折叠所需要的布局。

     compile 'com.github.cpoopc:scrollablelayoutlib:1.0.1'
    

    Scrollable需要三个子view,来分别展示:折叠的部分、标题部分、滚动的部分。

    仿简书个人中心

    所以布局中大体就是一个标题栏+一个ScrollacleLayout

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.wapchief.kotlin.MainActivity">
        <!--标题栏-->
        <include layout="@layout/action_bar"/>
        <!--包裹三个View-->
        <com.cpoopc.scrollablelayoutlib.ScrollableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:orientation="vertical">
            <!--header-->
            <include layout="@layout/main_header" />
            <!--tab-->
            <include layout="@layout/main_tablayout" />
            <!--footer-->
            <android.support.v4.view.ViewPager
                android:id="@+id/vp"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </com.cpoopc.scrollablelayoutlib.ScrollableLayout>
    
    </LinearLayout>
    
    

    这里的布局跟java的一样,按正常的方式写就好。主要是在activity中的变化。

    三、在activity中实例化
    • 实例化控件:
      和java不同的是kotlin不需要通过findviewby来获取控件。java中如果存在多个视图文件布局就要创建多个view,比如这里我用的都是lnclude,如果是java中就要创建四个view对象。再分别实例化。
      在kotlin中提供了更加简洁的方法 : 直接通过导入包的形式来拿到控件,
    import kotlinx.android.synthetic.main.activity_main.*
    import kotlinx.android.synthetic.main.action_bar.*
    import kotlinx.android.synthetic.main.main_tablayout.*
    import kotlinx.android.synthetic.main.main_header.*
    

    这样就直接拿到了所有用到的view中的所有控件,.*就是实例化View中所有的id,
    如果想实例化单个id,就是import kotlinx.android.synthetic.main.main_header.id

    • 在通过kotlinx实例化的时候,刚开始遇到一个问题就是找不到该方法,后来查到是因为androidStudio自动创建的kotiln没有apply plugin: 'kotlin-android-extensions'这一行代码。
      所以在创建项目的时候要检查是否存在。

    • 初始化fragment:
      由于在viewpager切换用到了fragment,所以要创建一个存放fragment的集合

    var fragments: MutableList<Fragment> = ArrayList<Fragment>()
            fragments.add(Fragment1())
            fragments.add(Fragment1());
            fragments.add(Fragment1());
    

    和java不同的是,kotlin使用的是MutableList,并且变量名是在前的,
    并且添加Fragment的时候也不需要new Fragment对象,是不是简洁了很多。

    • 关联viewpager:
      在kotlin中已经帮我们简化了很多get、set方法,比如setAdapter直接调用adapter 就可以使用,如果要设置控件的显示或隐藏就是header_1.visibility=View.GONE
    vp.adapter=viewPagerAdapter(supportFragmentManager,fragments)
    

    viewpager需要一个适配器,使用内部类创建一个viewPagerAdapter,
    fmlist分别为参数,FragmentManagerList<Fragment>为类型,
    FragmentPagerAdapter相当于extend FragmentPagerAdapter继承了该类。

     //继承 FragmentPagerAdapter 创建适配器
        class viewPagerAdapter(fm: FragmentManager?, var list: List<Fragment>) : FragmentPagerAdapter(fm) {
            override fun getItem(position: Int): Fragment {
                return list.get(position)
            }
    
            override fun getCount(): Int {
                return list.size
            }
        }
    
    • 监听view pager事件:
      这里要监听viewpager,实现切换Framgment切换的效果
      重写onPagerSelected方法。
      when就是循环相当于switch case语句
      如果只执行一个方法就不需要加{}
    override fun onPageSelected(position: Int) {
                    //判断滑动后选择的页面设置相应的标签被选中
                    when (position) {
                        0 -> {
                            initTabLayout(tab1_tv, tab1_v)
                            clearTabLayout(tab2_tv, tab2_v)
                            clearTabLayout(tab3_tv, tab3_v)
                        }
                   
                        1 -> {
                            initTabLayout(tab2_tv, tab2_v)
                            clearTabLayout(tab1_tv, tab1_v)
                            clearTabLayout(tab3_tv, tab3_v)
                        }
                        2 -> {
                            initTabLayout(tab3_tv, tab3_v)
                            clearTabLayout(tab2_tv, tab2_v)
                            clearTabLayout(tab1_tv, tab1_v)
                        }
    }
    

    控件不需要实例化,在方法中定义好控件的类型,需要调用的时候直接传递控件id,在引用资源id,同样的例子:resources替代了java中的getResources

     /*初始化tab标签*/
        private fun initTabLayout(tv: TextView,tv2: TextView) {
            tv.setTextColor(resources.getColor(R.color.tab_select))
            tv2.setBackgroundColor(resources.getColor(R.color.tab_select))
        }
        /*重置tab标签颜色*/
        private fun clearTabLayout(tv: TextView,tv2: TextView){
            tv.setTextColor(resources.getColor(R.color.tab_clear))
            tv2.setBackgroundColor(Color.WHITE)
        }
    
    • 最后用到的就是监听:
      也是最常用的方法之一,kotlin中实现监听不需要实例化监听事件,直接使用一行代码调用就实现了监听操作
    tab1.setOnClickListener {
                vp.setCurrentItem(0)
                initTabLayout(tab1_tv, tab1_v)
                clearTabLayout(tab2_tv, tab2_v)
                clearTabLayout(tab3_tv, tab3_v)
            }
    
    四、Fragment设置假数据

    在写demo用的大多都是假数据,方便查看效果,都是通过for循环实现数据的递增添加

        private fun getData(): List<String> {
    
            val data = ArrayList<String>()
            for (i in 0..30) {
                data.add(i,"测试数据:"+i)
            }
            return data
        }
    

    END

    试着用Kotlin写了一个小demo,对比java感觉精简是kotlin的一大特点,能让开发者节省更多的时间,并且语法也非常好理解。有点与php类似。对于android开发者来说上手很容易。

    相关资源:

    相关文章

      网友评论

        本文标题:使用Kotlin仿的简书个人主页,只需一个控件

        本文链接:https://www.haomeiwen.com/subject/ueaacxtx.html