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