美文网首页Kotlin开发知识Kotlin编程半栈工程师
Kotlin语言实现FlexboxLayout选中之——单选/多

Kotlin语言实现FlexboxLayout选中之——单选/多

作者: 筱宓dawnLing | 来源:发表于2017-12-12 09:35 被阅读109次

    关于FlexboxLayout控件的使用以及排布方式浏览器一搜一大把文章,但是搜索结果很少看到关于选中事件(单选/多选)的描述。
    按照以往惯例先把效果图贴一下,具体详细介绍可以看我的另一篇文章:http://www.jianshu.com/p/7b9ca1ec59ed,此处只贴关于kotlin实现的部分代码。

    image.png
    单选or多选.gif
    上干货

    首先引用一下kotlin,不清楚kotlin引用的小伙伴们可以看下我这篇文章http://www.jianshu.com/p/6867a77291a9
    工程中的build.gradle

    buildscript {
        ext.kotlin_version = '1.1.4'
    
        repositories {
            jcenter()
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:2.3.3'
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
    }
    
    allprojects {
        repositories {
            jcenter()
            mavenCentral()
            maven { url 'https://jitpack.io' }
        }
    }
    
    task clean(type: Delete) {
        delete rootProject.buildDir
    }
    

    app中的build.gradle

    apply plugin: 'com.android.application'
    apply plugin: 'kotlin-android'
    apply plugin: 'kotlin-android-extensions'
    
    android {
        compileSdkVersion 26
        buildToolsVersion "26.0.2"
        defaultConfig {
            applicationId "com.lxlProject.www"
            minSdkVersion 19
            targetSdkVersion 26
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(include: ['*.jar'], dir: 'libs')
        androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
            exclude group: 'com.android.support', module: 'support-annotations'
        })
        compile 'com.android.support:appcompat-v7:26.+'
        compile 'com.android.support.constraint:constraint-layout:1.0.2'
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
        compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
        compile 'com.android.support:support-v4:26.0.0-alpha1'
        compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.25'
        compile 'com.google.android:flexbox:0.2.6'
        compile 'com.blankj:utilcode:1.9.1'
        compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    }
    

    MainActivity.java

    /**
     * 首页
     * Created by LXL on 2017/12/08.
     * http://my.csdn.net/?ref=toolbar
     * http://www.jianshu.com/u/8fd63a0d4c4c
     */
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
        }
    
        /**
         * Recycleview实现
         * @param v
         */
        fun btnRecycleview(v: View) {
            startActivity(Intent(this, BtnRecycleviewActivity::class.java))
        }
    
        /**
         * 跳转Java语言界面
         * @param v
         */
        fun btnJava(v: View) {
            startActivity(Intent(this, BtnJavaActivity::class.java))
        }
    
        /**
         * 跳转Kotlin语言界面
         * @param v
         */
        fun btnKotlin(v: View) {
            BtnKotlinActivity.launch(this)
        }
    }
    

    BtnKotlinActivity.java

    class BtnKotlinActivity : AppCompatActivity() {
    
        companion object {
            fun launch(context: Context) {
                val intent = Intent(context, BtnKotlinActivity::class.java)//跳转 启动页面
                context.startActivity(intent)
            }
        }
    
        private var flexboxLayout: FlexboxLayout? = null//单选列表
        private val mList = ArrayList<EvaluateBean>()//单选数据
        private val mListMore = ArrayList<EvaluateBean>()//多选数据
        private var flexboxLayout1: FlexboxLayout? = null//多选列表
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_btn_java)
    
            //默认设置静态数据
            for (i in 0..9) {
                mList.add(EvaluateBean("标签选择测试字数和适应度" + i))
                mListMore.add(EvaluateBean("标签选择测试字数和适应度" + i))
            }
    
            flexboxLayout = findViewById(R.id.flexboxLayout) as FlexboxLayout
            flexboxLayout1 = findViewById(R.id.flexboxLayout1) as FlexboxLayout
            //动态创建单选列表
            for (labelBean in mList!!) {
                addChildToFlexboxLayout(labelBean)
            }
            //动态创建多选列表
            for (labelBean in mListMore!!) {
                addChildToFlexboxLayout1(labelBean)
            }
        }
    
        /**
         * 添加孩子到布局中 单选
         */
        private fun addChildToFlexboxLayout(bean: EvaluateBean) {
            val view = LayoutInflater.from(this).inflate(R.layout.item_evaluate, null)
            val tv = view.findViewById<TextView>(R.id.tv)
            tv.text = bean.name
            view.tag = bean
            if (bean.checked) {
                tv.setBackgroundResource(R.drawable.shape_evaluate_lable)
                tv.setTextColor(VersionUtils.getColor(R.color.colorOrange))
            } else {
                tv.setBackgroundResource(R.drawable.shape_evaluate_item)
                tv.setTextColor(VersionUtils.getColor(R.color.colorTextPrimaryMoreLight))
            }
            //点击监听
            view.setOnClickListener {
                bean.checked = true
                for (labelBean in mList) {
                    if (labelBean != bean) {
                        labelBean.checked = false
                    }
                }
                checkLabeel()
            }
            //添加布局
            flexboxLayout!!.addView(view)
        }
    
        private fun checkLabeel() {
            flexboxLayout!!.removeAllViews()
            for (labelBean in mList) {
                addChildToFlexboxLayout(labelBean)
            }
        }
    
        /**
         * 添加孩子到布局中 多选
         */
        private fun addChildToFlexboxLayout1(bean: EvaluateBean) {
            val view = LayoutInflater.from(this).inflate(R.layout.item_evaluate, null)
            val tv = view.findViewById<TextView>(R.id.tv)
            tv.text = bean.name
            view.tag = bean
            if (bean.checked) {
                tv.setBackgroundResource(R.drawable.shape_evaluate_lable)
                tv.setTextColor(VersionUtils.getColor(R.color.colorOrange))
            } else {
                tv.setBackgroundResource(R.drawable.shape_evaluate_item)
                tv.setTextColor(VersionUtils.getColor(R.color.colorTextPrimaryMoreLight))
            }
            //点击监听
            view.setOnClickListener {
                bean.checked = !bean.checked
                checkLabeel1()
            }
            //添加布局
            flexboxLayout1!!.addView(view)
        }
    
        private fun checkLabeel1() {
            flexboxLayout1!!.removeAllViews()
            for (labelBean in mListMore) {
                addChildToFlexboxLayout1(labelBean)
            }
        }
    }
    

    源码地址:http://download.csdn.net/download/lxlyhm/10153471(纯java代码)

    如果在用kotlin开发的小伙伴们可以看这

    源码地址:http://download.csdn.net/download/lxlyhm/10151358(主要类都由kotlin实现)
    http://download.csdn.net/download/lxlyhm/10151351(java和kotlin混编)

    相关文章

      网友评论

      • wuhtt:刚开始开源flexbox 的时候觉得好牛逼,那些概念好抽象,后来才发现其实就是 css3 里的 flex 布局在 Android 里实现了,推荐去看 阮一峰 的flex教程,回头再看,简单不少
        筱宓dawnLing:很有价值的的评论,谢谢

      本文标题:Kotlin语言实现FlexboxLayout选中之——单选/多

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