Jetpack Compose初体验

1-1、简单体验示例

package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Column {
            Text(text = "作者 $name!")
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            Text(text = "标题 $name!")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Greeting("my Android")
    }
}

1-2、列表

⚠️要实现功能: 最多显示一行, 点击展开全文

/// 在SampleData.kt文件中: (消息对象的集合)
// object 跟一个类名说明它是单例的
object SampleData{
  val conversationSample = listOf(
    Message(
        author: "小红",
      body:"Test...Test...Test..."
    ),
    ...
  )
}

/// 在页面文件中:
package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import android.os.Message
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Conversation(
                        listOf>(
                            mapOf("author" to "小红", "body" to "test...test...test"),
                            mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                            mapOf("author" to "小蓝", "body" to "test...test...test"),
                            mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
                        )
                    )
                }
            }
        }
    }
}

@Composable
fun MessageCard(msg: Map) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Spacer(modifier = Modifier.width(8.dp)) //设置左右控件间距

        // 声明变量,记录状态
        //mutableStateOf 记录状态
        var isExpanded by remember { mutableStateOf(false) }

        Column(
            modifier = Modifier.clickable { isExpanded = !isExpanded }
        ) {
            msg["author"]?.let {
                Text(
                    text = it,
                    color = MaterialTheme.colors.secondaryVariant
                )
            }
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            msg["body"]?.let {
                Text(
                    text = it,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.body2,
//                    maxLines = 1 //最多显示1行
                    maxLines = if(isExpanded) Int.MAX_VALUE else 1
                )
            }
        }
    }
}

@Composable
fun Conversation(messages: List>){
    LazyColumn(content = {
        items(messages){ message ->
            MessageCard(message)
        }
    })
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Conversation(
            listOf>(
                mapOf("author" to "小红", "body" to "test...test...test"),
                mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                mapOf("author" to "小蓝", "body" to "test...test...test"),
                mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
            )
        )
    }
}

1-3、列表添加点击动画

package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import android.os.Message
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Conversation(
                        listOf>(
                            mapOf("author" to "小红", "body" to "test...test...test"),
                            mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                            mapOf("author" to "小蓝", "body" to "test...test...test"),
                            mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
                        )
                    )
                }
            }
        }
    }
}

@Composable
fun MessageCard(msg: Map) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Spacer(modifier = Modifier.width(8.dp)) //设置左右控件间距

        // 声明变量,记录状态
        //mutableStateOf 记录状态
        var isExpanded by remember { mutableStateOf(false) }
        val surfaceColor: Color by animateColorAsState(//sp1.颜色切换渐变动画
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface
        )

        Column(
            modifier = Modifier.clickable { isExpanded = !isExpanded }
        ) {
            msg["author"]?.let {
                Text(
                    text = it,
                    color = MaterialTheme.colors.secondaryVariant
                )
            }
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            Surface(//sp2.使用这个动画颜色
                shape = MaterialTheme.shapes.medium,//圆角的形状
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize() //动画的形式, 慢慢变大,慢慢变小
                    .padding(1.dp)
            ) {
                msg["body"]?.let {
                    Text(
                        text = it,
                        modifier = Modifier.padding(all = 4.dp),
                        style = MaterialTheme.typography.body2,
//                    maxLines = 1 //最多显示1行
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1
                    )
                }
            }
        }
    }
}

@Composable
fun Conversation(messages: List>){
    LazyColumn(content = {
        items(messages){ message ->
            MessageCard(message)
        }
    })
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Conversation(
            listOf>(
                mapOf("author" to "小红", "body" to "test...test...test"),
                mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                mapOf("author" to "小蓝", "body" to "test...test...test"),
                mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
            )
        )
    }
}

1-4、Compose所解决的问题

在编写可维护的软件时, 我们的目标是最大程度的减少耦合并增加内聚

尽可能的将相关的代码组织在一起, 以便我们可以轻松的维护它们, 并方便我们随着应用规模的增长而扩展我们的代码, 这个称之为关注点分离.

/*在示例中, 函数从APPData类接收数据作为参数. 我们便可以使用任何Kotlin代码来获取这一数据, 并利用它来描述的我们的层级结构, 例如Header()与Body()调用*/
@Composable
fun App(appData: AppData){
  val derivedData = compute(appData)
  Header()
  if(appData,isOwner){
    EditButton()
  }
  Body{
    for(item in derivedData.items){
      Item(item)
    }
  }
}

二、布局

1 标准布局组件

使用Column可将多个项垂直地放置在屏幕上

使用Row可将多个项水平的放置在屏幕上

使用Box可将一个元素放在另一个元素上

2 修饰符

修饰符的作用类似于基于视图的布局中的布局参数, 借助修饰符, 可以修饰或扩充可组合项. 我们可以使用修饰符来执行以下操作:

更改可组合项的大小、布局、行为和外观
添加信息, 如无障碍标签
处理用户输入
添加高级互动, 如使元素可点击、可滚动、可推动或可缩放

@Composable
fun PhotographerCard(modifier: Modifier = Modifier){
    Row(
        modifier = modifier
            .clip(RoundedCornerShape(4.dp))
            .background(color = MaterialTheme.colors.surface)
//            .clickable(onClick = {}) .padding(16.dp)//自带点击水波纹效果
            .padding(16.dp).clickable(onClick = {}) //效果范围与上面不一样
    ) {
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape, //圆形
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = null
            )
        }
        Column {
            Text(text = "Alfred Sisley", fontWeight = FontWeight.Bold)
            //给Text设置中等透明度
//            LocalContentAlpha.provides(ContentAlpha.medium) 中等透明度
            CompositionLocalProvider(LocalContentAlpha provides  ContentAlpha.medium) {
                Text(text = "3 minutes ago", style = MaterialTheme.typography.body2)
            }
        }
    }
}

⚠️记录AS快捷键:

提取方法: option + command + M

提取局部变量：option + command + V

提取全局变量：option + command + F

Jetpack Compose初体验

1-1、简单体验示例

1-2、列表

1-3、列表添加点击动画

1-4、Compose所解决的问题

二、布局

1 标准布局组件

2 修饰符

你可能感兴趣的:(Jetpack Compose初体验)