Android Kotlin Jetpack Compose 使用

Posted 2021-12-22 安果移不动

效果如上。可以直接进行预览。

瞧瞧这类似Flutter的开发

package com.test.compose_demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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 androidx.compose.ui.unit.sp
import com.google.android.material.tabs.TabItem
import com.test.compose_demo.ui.theme.Compose_demoTheme
import com.test.compose_demo.ui.theme.black
import com.test.compose_demo.ui.theme.green3
import com.test.compose_demo.ui.theme.white1

class MainActivity : ComponentActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            Compose_demoTheme 
                WeBottomBar(1)
            
        
    





@Preview(showBackground = true)
@Composable
fun WeBottomBarPreview() 
    WeBottomBar(0)


@Preview
@Composable
fun TabItemPreView() 
    TabItem(
        iconId = R.mipmap.ic_launcher1,
        tint = MaterialTheme.colors.error,
        title = "聊天",
        modifier = Modifier
    )


@Composable
private fun WeBottomBar(selected: Int) 
    Row(Modifier.background(white1)) 
        TabItem(
            iconId = if (selected == 0) R.mipmap.ic_launcher1 else R.mipmap.ic_launcher1,
            tint = if (selected == 0) green3 else black,
            title = "聊天", modifier = Modifier.weight(1f)
        )
        TabItem(
            iconId = if (selected == 1) R.mipmap.ic_launcher else R.mipmap.ic_launcher,
            tint = if (selected == 1) green3 else black,
            title = "通讯录", modifier = Modifier.weight(1f)
        )
        TabItem(
            iconId = if (selected == 2) R.mipmap.ic_launcher else R.mipmap.ic_launcher,
            tint = if (selected == 2) green3 else black,
            title = "发现", modifier = Modifier.weight(1f)
        )
        TabItem(
            iconId = if (selected == 3) R.mipmap.ic_launcher else R.mipmap.ic_launcher,
            tint = if (selected == 3) green3 else black,
            title = "我", modifier = Modifier.weight(1f)
        )
    



@Composable
private fun TabItem(
    @DrawableRes iconId: Int,
    title: String,
    tint: Color,
    modifier: Modifier = Modifier
) 
    Column(
        modifier = modifier.padding(vertical = 8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) 
        Icon(painterResource(id = iconId), title, Modifier.size(24.dp), tint = tint)
        Text(title, fontSize = 11.sp, color = tint)
    

@Preview(showBackground = true)

标签可以生成预览

注解了两个方法

就预览了两个方法