Hal-hal kecil yang saya pelajari setiap hari terkait software engineering.
Button
Perbedaan outlined button dengan button dan text button Button dipakai untuk membuat button yang mewakili aksi utama yang memang wajib dilakukan oleh user, cirinya adalah dia warnanya penuh OutlinedButton dipakai untuk membuat button yang mewakili aksi pilihan artinya user tidak diwajibkan menekan tombol itu misal tombol delete, reset, cancel dsb, cirinya adalah dia warnanya hanya di bagian tepinya saja, warna utamanya transparan Text button itu seperti teks tapi dikasih aksi on click fungsinya lebih dibawah dari button dan outlined button dari segi penekanan ...
Slicing Basics
.dp itu artinya density independent pixel konsepnya adalah dia menghitung pixel di hape dengan rumus ixel = dp * (density / 160), jadi 200 dp di hape a dengan hape b pasti sama ukuran layarnya, tapi secara persentas bisa saja berbeda, di hape keci mungkin 200dp sudah memakan 80% lebar layar, di tablet mungkin baru sekitar 20% fill max size itu buat ambil seluruh layar yang tersedia, jika di satu elemen ada elemen lain yg di satu blok dengan maxsize, elemen tersebut akan terdorong keluar dan tidak tampil ...
Remember
Remember dipakai untuk memberitahu jetpack compose bahwa variabel itu harus diingat nilainya apabila terjadi recomposition (proses menggambar ulang ui karna perubahan nilai state) misal gini, jika kita buat variabel var counter = mutableStateOf(0) Button( onClick = { counter++ } ){ Tex("+") } yang terjadi dengan kode di atas adalah saat counter diklik memang dia akan bertambah nialninya jadi 1 tapi karna terjadi pemanggilan fungsi lagi dari atas maka variabel counter ini akan dibuat ulang lagi jadi 0 nah karna kembali ke 0 jadi tidak berubah deh di layar kalau mutableState itu sebuah helper function yang digunakan untuk memebri tahu composable bahwa variabel ini perlu diawasi alias variabel ini dia nilainya akan berubah dan harus memepngaruhi ui, jika tidak pakai ini maka perubahan akan diabaikan oleh ui dan tidak terjadi recomposition ...
Stateflow & linkedhashmap
Behaviour stateflow adalah dia tidak akan memancarkan pembaruan ke ui apabila isi data yang diupdate itu sama, karna stateflownya diisi dengan data class, dimana data class under the hoodnya dia membadingkan nilainya dengan values apabila sama tidak dianggap pembaruan linked hashmap itu sama seperti hashmap tapi dia menjaga urutan saat dibaca
Rssi
RSSI (Received Strength Signal Indicator), seperti namanya ini adalah sebuah indikator seberapa kuat sinyal yang dipancarkan oleh sebuah gelombang radio,konteksnya pekerjaan saya di rfid ini berkaitan dengan seberapa jauh (mudahnya gitu) si chip dengan reader rfid, padahal pada praktiknya nilai rssi ini fluktuatif dan cenderung tidak konsisten, memang secara simpelnya semakin dekat chip rfid dengan reader atau si pembaca nilai rssi akan semakin kuat (0dbm itu kuat), semakin minus banyak semakin lemah artinya. misal -40dbm itu lebih lemah dibandingkan dengan -10dbm, intinya semakin mendekati - semakin kuat. dbm stand for desibel miliwat. ...
Gradient
Gradient adalah sebuah kombinasi antara 2 warna atau lebih yang digabungkan ke dalam suatu elemen baik box card atau surface yg mana memiliki titik awal dan titik akhir serta bentuk penyatuan yang diinginkan seperti apa, contoh kdoe @Composable fun GradientBox(){ Box( modifier = Modifier.fillMaxSize() .background( brush = Brush.linearGradient( colors = listOf(Color.RED,Color.Blue) ) ) ){ } } jadi buat gradient itu pakai properti brush ...
Twosum
Soal: Diberikan array integer nums dan integer target, kembalikan indices dari dua angka yang jika dijumlahkan hasilnya sama dengan target. class Solution { fun twoSum(nums: IntArray, target: Int): IntArray { for(i in nums.indices){ for(j in i+1 until nums.size){ if(nums[i]+nums[j] == target){ return intArrayOf(i,j) } } } throw IllegalArgumentException("No solution found") } }
Cartcounter
@Composable fun AddPlusMinusButton() { val primaryOrange = Color(0xFFED954D) val lightPeach = Color(0xFFFAF0E7) val lightCream = Color(0xFFFFF6EE) val darkGray = Color(0xFF2C2C2C) val textGray = Color(0xFF8C8C8C) val dividerColor = Color(0xFFEFEFEF) Scaffold() { paddingValues -> Box( modifier = Modifier.fillMaxSize() ) { Row( modifier = Modifier .clip(RoundedCornerShape(8.dp)) .background(lightCream) .padding(horizontal = 4.dp, vertical = 2.dp) .align( Alignment.Center ), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center ) { // Minus Button Box( modifier = Modifier .size(28.dp) .clickable { }, contentAlignment = Alignment.Center ) { Text( text = "–", fontSize = 16.sp, fontWeight = FontWeight.Medium, color = darkGray ) } // Quantity Value Text( text = "$2", fontSize = 15.sp, fontWeight = FontWeight.Medium, color = darkGray, modifier = Modifier.padding(horizontal = 8.dp) ) // Plus Button Box( modifier = Modifier .size(28.dp) .clickable { }, contentAlignment = Alignment.Center ) { Text( text = "+", fontSize = 16.sp, fontWeight = FontWeight.Medium, color = darkGray ) } } } } }
Beda Curved Part 2
Untuk membuat garis lengkung di jepatck compose dengan cara melakukan clipping pada shape bisa menggunakan perintah quadraticTo(x1,y1,x2,y2) begini cara pakainya //di sini mau buat bentuk yang mirip huruf u class QuadraticPath:Shape{ size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { val path = Path().apply{ moveTo(0f,0f) //posisi awal pena pojok kiri atas lineTo(size.width,0f) // ditarik garis ke pojok kanan atas val ySide = size.height - 100 // kita mau tarik agar sebelum tepat jatuh setinggi ukuran dia sudah mulai melengkung lineTo(size.width,ySide) // tarik garis mendekati ukuran quadraticTo( x1 = sise.width/2f, // posisi magnet mau diletakkan di tengah layar y1 = size.height+50 // kalau isi plus berarti nanti akan ditarik ke bawah x2 = 0f // kita pengin titk horizontal terakhir itu ke aras pojok kiri bawah y2 = ySide // kita pengin titik vertikal terakhir itu ada di ySized jadi dia nanti setinggi lengkungan di sisi kanan seperti di lineTo(size.width,ySide) // tarik garis mendekati ukuran ) close() } return Outline.Generic(path) } } Contoh ...
Clip
Clip Shape manual di kotlin bayangkan sedang melukis di kanvas, 2d, koordinat x dan y, x garis horizontal, y vertikal x 0, dia akan di pojok kiri layar, y 0 maka dia akan di atas, kalau x0,y0 maka dia akan di pojok kiri atas, x = 100 (semakin besar semakin ke kanan, nilai max = x = size.width), maka dia akan ke kanan, kalau x = size.width dan y = 0 maka dia akan ada di pojok kanan atas ...