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

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

Kotlin语言实现FlexboxLayout选中之——单选/多选_第1张图片
image.png

Kotlin语言实现FlexboxLayout选中之——单选/多选_第2张图片
单选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()//单选数据
    private val mListMore = ArrayList()//多选数据
    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(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(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混编)

你可能感兴趣的:(Kotlin语言实现FlexboxLayout选中之——单选/多选)