Realize an air conditioner with compose to bring you cool in summer

heat

Summer is coming , Experience is like the word in the subtitle , So , Just want to draw an air conditioner , It will be cooler if you look at it ...

Let's take a look at the finished product style first .

Ha ha ha , It looks cool .

Air conditioning

Let's review the functions that need to be implemented ：

1、 First there must be a switch , It is used to control the switch state of the air conditioner ;

2、 Then you can set the cold air and warm air , It can be used in winter and summer ;

3、 Finally, increase and decrease the temperature ;

OK, Demand is almost like this , Then it's time to code .

Write the title

Let's write down the title of the air conditioner first ：

Column(
    modifier = Modifier
        .fillMaxSize()
        .statusBarsPadding()
        .navigationBarsPadding(),
    verticalArrangement = Arrangement.Top,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Spacer(modifier = Modifier.height(50.dp))
​
    Text(text = " Portable small air conditioner ", fontSize = 25.sp)
    Text(
        text = "Tip:  Bring coolness to your summer ！",
        fontSize = 15.sp,
        modifier = Modifier.padding(bottom = 20.dp)
    )
}

The code above is nothing , Just a linear layout with two Text, There's nothing to say .

Draw air conditioning style

Let's draw the style of the air conditioner ：

@Composable
private fun Conditioner() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .padding(horizontal = 20.dp),
        shape = RoundedCornerShape(
            topStart = 18f,
            topEnd = 18f,
            bottomStart = 36f,
            bottomEnd = 36f
        )
    ) {
        Column {
            Divider(
                modifier = Modifier.padding(top = 6.dp),
                thickness = 0.4.dp,
            )
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.White)
                    .padding(6.dp)
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.logo),
                    contentDescription = "",
                )
                Column(
                    modifier = Modifier
                        .fillMaxSize(),
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.End,
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.ic_snow),
                        contentDescription = "",
                        modifier = Modifier.size(25.dp)
                    )
​
                    Spacer(modifier = Modifier.height(5.dp))
​
                    Text(
                        text = "23°C",
                        fontSize = 20.sp,
                        fontFamily = FontFamily(Font(R.font.lcd, FontWeight.SemiBold))
                    )
                }
​
            }
        }
    }
}

Let's put it simply , The style of the air conditioner will have rounded corners , Use here Card To achieve , Then there is a picture of energy efficiency , On the right is the sign and temperature of cold air or warm air .

Control the air conditioning

The air conditioning style has been painted , The only thing left is to control the air conditioner ：

//  Air conditioning switch 
val airSwitch = rememberSaveable { mutableStateOf(false) }
//  temperature 
val temperature = rememberSaveable { mutableStateOf(23) }
//  type , Cooling or heating 
val airType = rememberSaveable { mutableStateOf(true) }
    
Row(modifier = Modifier.padding(10.dp)) {
    Button(onClick = { airType.value = true }, shape = RoundedCornerShape(15.dp)) {
        Text(text = " cold wind ")
    }
​
    Switch(checked = airSwitch.value, onCheckedChange = {
        airSwitch.value = !airSwitch.value
    })
​
    Button(onClick = { airType.value = false }, shape = RoundedCornerShape(15.dp)) {
        Text(text = " Hot air ")
    }
​
}
​
Button(onClick = {
    if (temperature.value >= 31) {
        showToast(context, " The temperature can't be any higher ！！！")
        Log.e(TAG, "AirConditioner:  It's too hot ")
        [email protected]
    }
    temperature.value = temperature.value + 1
}, shape = RoundedCornerShape(15.dp)) {
    Text(text = "+")
}
​
Button(onClick = {
    if (temperature.value <= 16) {
        showToast(context, " The temperature can't be any lower ！！！")
        Log.e(TAG, "AirConditioner:  It's too cold ")
        [email protected]
    }
    temperature.value = temperature.value - 1
}, shape = RoundedCornerShape(15.dp)) {
    Text(text = "-")
}

To control the air conditioner, you need State To control , The code is also simple , Only the status value is modified .

Blow the air conditioner

The whole application code is very simple , Plus all kinds of blank lines and imports Less than twohundred lines . You can write a small air conditioner in less than 200 lines , Although there is no actual temperature experience .... however , Peace of mind is naturally cool

You can copy the code , And then blow it on your mobile phone to try the effect , Ha ha ha

Give me this Demo Upload to Github 了 , You can get your own code and pictures ：https://github.com/zhujiang521/AirConditioner

Postscript

The code is very simple , But I hope everyone can keep a calm heart in the hot summer , The future can also calmly face all kinds of things in life , Strive , Mutual encouragement .