Jetpack Compose에 있는 것, 없는 것 드로이드나이츠 2021 행사에서 발표한 내용입니다. https://sites.google.com/view/dk21/
Sungyong AnJetpack Composeী ח Ѫ, হח Ѫ
View Slide
TimelineStable!I/O '19Early Preview'19 05.11 Weeksof AndroidAlpha'20 08. '21 05.I/O '21'19 10.ADS '19Beta
mordern UI toolkit٘ хࣗ ҙdeclarative UIъ۱ೠ ࢿמѐߊ ࣘب ೱ࢚Kotlin APIs
mordern UI toolkit٘ хࣗ ҙdeclarative UIъ۱ೠ ࢿמѐߊ ࣘب ೱ࢚Kotlin APIsҕध ѐߊ ޙࢲীࢲח ৈ۞ ٜ աৌغয ݅,ѐߊ݃ ܲ ࢤпਸ ೞҊ ਸ Ѫ э.
Әө ࢿ೧য়؍ XML ߑध UI ҳഅীࢲ Jetpack Compose۽ ߄۽ ജ೧ঠ ೞաਃ?🤔
M V P M V VM M V IM V Cӝઓ Jetpack ۄ࠳۞ܻ৬ ܰѱJetpack Composeח জ .
۽ં݃ ࢚ട ܰ. হ.👀
Compose ਊਸ Ѩష೧ࠅ ࣻ ѱ View ৬ ࠺Ү೧ࠁݾ
020103৵ Composeܳ ࢎਊ೧ঠ ೡөComposeী হח ѪCompose۽ ജਸ ળ࠺ೞӝݾର
୶ୌ ࢚ (ҕध)Understanding ComposeAndroidDevSummit '19I/O '19Declarative UI patterns Thinking in Compose11 Weeks of AndroidCompose ӝࠄ ѐ֛ী ೧ࢲח ܖ ঋणפ.ҙ۲೧ࢲח ҕध ࢚ दਸ ୶ୌפ.
୶ୌ ࢚ (ೠҴয)Jetpack Compose: I/O 2021 Ӓ റI/O Extended Korea Android 2021I/O Extended with doubleSCompose दೞӝৢ೧ ೠҴয ࣁ࣌ب ਵפ, ҙब ਵन ٜ࠙ द೧ࠁࣁਃ.
View Compose⚠ ৽ଃ View, য়ܲଃ Compose ղਊੑפ.
৵ Composeܳ ࢎਊ೧ঠ ೡө?01
✅ View ࠁ Compose о ա Ѫ?
✅ ۖಬ ઙࣘࢿ ୭ࣗചComposeח Jetpack ۄ࠳۞ܻ۽ ߓನغযۖಬী ؏ ઙࣘ.ۖಬ Viewীח APIܳ ࢎਊೡ ࣻ ח ୭ࣗ ߡ ઁড .ܳ ೧ࣗೞ۰Ҋ, Compat APIܳ ઁҕೞ݅ ೠ҅о .
✅ ࢚ࣘਵ۽ ੋೠ ޙઁ ೧ࣗpublic class TextView extends View {}public class Button extends TextView {}@Composablefun Button(onClick: () -> Unit, ...) { ... }@Composablefun Text(text: String, ...) { ... }@Composablefun Sample() {Button(onClick = { ... }) {Text(text = "BUTTON")}}Viewח ߈٘द ࢚ࣘ೧ঠ݅ ೞҊ,Ӓېࢲ ਗ ঋח ࠗݽ ӝמب ыѱ ػ.Composeח composable ೣٜࣻ۽ ҳࢿغয,ਃೠ ӝמ݅ ѱ ਬೡ ࣻ .
✅ ۨইਓ ࢿמ @Composablefun Sample() {Column {Image()Image()Column {Text()Column {Text()Box {TextField()}}Column {Text()Box {TextField()ViewGroupী ٮۄ measureܳ ৈ۞ߣ ࣻ೯ೡ ࣻ যࢲ୭ೠ ۨইਓ غ ঋب۾ न҃ॄঠ ೮.Composeח measureܳ ೠߣ݅ ࣻ೯ೞب۾ ъઁغয ۨইਓীࢲب ࢿמ ѱ ೞغ ঋח.
✅ UI ࢎਊࢿ
✅ ো ୡӝചandroid:id="@+id/failedStub"android:layout_width="match_parent"android:layout_height="match_parent"android:inflatedId="@+id/failed"android:layout="@layout/loading_failed"android:visibility="gone" />// show errorView failedStub = findViewById(R.id.failedStub);failedStub.setOnInflateListener(new ViewStub.OnInflateListener() {@Overridepublic void onInflate(ViewStub stub, final View inflated) { ... }});failedStub.inflate();@Composablefun Sample() {if (showError) {Column {Text()Button()}}}😱ViewStub ࢎਊೞӝীݒ ࠛಞೞ.Composeח ઑѤޙ ݅ਵ۽بрױ ҳഅೡ ࣻ .
✅ Single Source Of Truthpublic class TextView extends View {private @Nullable CharSequence mText;...}public class EditText extends TextView {}viewModel.name.observe(this) {editText.setText(it)}editText.doOnTextChanged { text, _, _, _ ->viewModel.onNameChanged(text))@Composablefun Sample() {val viewModel: SampleViewModel = viewModel()val name by viewModel.name.observeAsState()TextField(value = name,onValueChange = { viewModel.onNameChanged(it) })}Viewח ۪؊݂ ݾਵ۽ؘఠ৬ ߹ѐ ࢚కܳ ыҊ .Composeח ߹ѐ ࢚కܳ ы ঋח.class SampleViewModel : ViewModel() {val name: LiveData = ...fun onNameChanged(name: String) { ... }}
✅ ؘఠ ߄ੋ٬@BindingAdapter("onTextChanged")fun EditText.onTextChanged(listener: (String) -> Unit){doOnTextChanged { text, _, _, _ ->listener(text.toString())}}android:id="@+id/name_edit_text"android:text="@{viewmodel.name}"android:onTextChanged="@{viewmodel.onNameChanged}" />@Composablefun Sample() {val viewModel: SampleViewModel = viewModel()val name by viewModel.name.observeAsState()TextField(value = name,onValueChange = { viewModel.onNameChanged(it) })}Viewীࢲח ؘఠ ߄ੋ٬ ݾਵ۽XMLҗ BindingAdapterܳ ࢿ೧ঠ ೠ.Composeח ࢚క݅ ೞݶ زਵ۽ ߄ੋ٬ػ.߹ѐ composable ೣࣻ۽ ܻ࠙ೞݶ ػ.
✅ Custom View ҳഅpublic class AppCompatImageView extends ImageView {public AppCompatImageView(...) {final int id = a.getResourceId(R.styleable.AppCompatImageView_srcCompat, -1);...}}app:srcCompat="@drawable/image" />@Composablefun Image(painter: Painter,contentDescription: String?,modifier: Modifier = Modifier,...) { ... }@Composablefun Sample() {Image(painter = painterResource(R.drawable.image))}Viewীࢲ Custom Viewܳ ٜ݅ ٸبXML ٘ܳ ࢿ೧ঠ ೠ.Composeח Kotlin ٘݅ ࢿೞݶ ػ.
✅ ݾ۾ഋ UI ҳࢿrecyclerView.layoutManager = ...recyclerView.adapter = ...// RecyclerView.Adapter(...)// RecyclerView.ViewHolder(@layout/item)recyclerView.addItemDecoration(DividerItemDecoration(...))@Composablefun Sample(dataSet: Array) {LazyColumn {items(dataSet.size) { index ->Text(text = dataSet[index])Divider()}}}Viewীࢲח ݾ۾ഋ UIܳ ҳࢿೡ ٸցޖ ݆ ٘ܳ ࢿ೧ঠ ೠ.Composeח ܲ composable ೣࣻ৬زੌೠ ߑߨਵ۽ औѱ ҳࢿೡ ࣻ .
• Viewܳ ݽف ઁѢೞҊ Compose݅ ࢎਊೞݶ, APK ӝ৬ ࠽٘ दр хࣗೠ.• Compose৬ Viewܳ ೣԋ ॳݶ, APK ӝ৬ ࠽٘ दр ডр ૐоೠ.• Composeীࢲب Viewܳ ࢎਊೡ ࣻ . (AndroidView)• Java৬ XML۽ ࢿػ ۨইਓ ٘ܳ Kotlinਵ۽ ജೞח ࠺ਊ• View ਬࠁࣻ ࠺ਊ vs Compose ण ࠺ਊ• View৬ ࠺तೞѱ AOT ஹੌਸ ਗೠ. (ProfileInstaller)⚠ ࠺Үೞӝী ઑӘ গݒೠ ٜࠗ࠙
• min sdk ઁডࢎ೦ . (API 21+)• (Java/Kotlinҗ ׳ܻ) View৬ Composeח ࢲ۽ ߸ജغ ঋח.• Material Theme݅ ӝࠄਵ۽ ਗೠ.• ۨইਓ XML ࠺ Preview ࢿמ ڄযઉࢲ ࢤࢿ ڄয.• ۨইਓ XMLਸ ࢎਊೡ ٸࠁ ܻ࠭ೡ ٘о טযդ.• ਗೞח 3rd party ۄ࠳۞ܻо .❌ Viewࠁ Composeীࢲ ইए Ѫ?
Composeী হח Ѫ02(ҳ࠙: ✅ , ⚠ ੌࠗ হ, ❌ হ)
Link: https://jetpackcompose.app/What-is-the-equivalent-of-TextView-in-Jetpack-Compose
⚠ Themeandroid:theme="@style/Theme.Sample">parent="Theme.MaterialComponents">@color/redTheme.AppCompatandroid:Theme.DeviceDefaultSampleTheme { … }@Composablefun SampleTheme(content: @Composable() () -> Unit) {MaterialTheme(colors = lightColors(primary = Red, ...),typography = Typography,shapes = Shapes,content = content)}// X// XӒܻҊӝઓ ۽ંী Composeܳ ਊೞݶThemeо ف ߥ ػ. (XML, Kotlin)
✅ Theme: MDC-Android Compose Theme AdapterLink: https://github.com/material-components/material-components-android-compose-theme-adapter@Composablefun SampleTheme(content: @Composable() () -> Unit) {MdcTheme(content = content)}LocalContext.current themeܳ ӝ߈ਵ۽MaterialTheme composable ࣘࢿਸ ҳࢿ೧ળ.
Theme.AppCompatandroid:Theme.DeviceDefaultӘ MDC Themeܳ ࢎਊೞҊ ঋݶ? 🤔
⚠ Theme: AppCompat Compose Theme AdapterLink: https://github.com/google/accompanist/tree/main/appcompat-themeAppCompat Themeܳ ࢎਊೞҊ ਸ ٸ,ࢎਊೡ ࣻ ח ۄ࠳۞ܻ. (Accompanist)MaterialTheme composable ࣘࢿਸ ҳࢿ೧ળ.ೞ݅ MDC Themeо ؊ ݆ ࣘࢿ ыҊ .@Composablefun SampleTheme(content: @Composable() () -> Unit) {AppCompatTheme(content = content)}
Link: https://material.io/blog/migrate-android-material-componentsӘ ٣ੋ दझమMDC Theme۽ ҳഅ оמೞݶജਸ Ҋ۰೧ࠁח Ѫ જਸ ٠.
Custom ThemeLink: https://github.com/android/compose-samples/tree/main/Jetsnackӝࠄ Themeী ৈ۞о ࣘࢿਸ ୶оೞח ١߹ب ٣ੋ दझమਸ ҳ୷ೞҊ ݶ,Custom Themeܳ ҳഅೞח Ѫب Ҋ۰೧ࠅ ࣻ .݅ compose-materialী ח ݆ࣻ ஹನքٜਸӒ۽ ࢎਊೞӝ য۰ਕ ࣻ .पઁ ҳഅೞח ߑߨউ٘۽٘ ҕध ࢠ ۽ં Jetsnackਸ ଵҊ೧ࠁ.
⚠ Resourcescontext.getString(R.string.message)context.resources.getDimensionPixelSize(R.dimen.size)ContextCompat.getColor(context, R.color.red)ContextCompat.getColorStateList(context, R.color.red)ContextCompat.getDrawable(context, ...)R.drawable.bitmapR.drawable.vectorR.drawable.shape // R.drawable.selector // R.drawable.asld // R.drawable.nine_patch // 9-patchcontext.resources.getInteger(R.integer.value)context.resources.getBoolean(R.bool.value)stringResource(R.string.message)dimensionResource(R.dimen.size)colorResource(R.color.black)// XpainterResource(R.drawable.bitmap)painterResource(R.drawable.vector)// X// X// X, b/168848337// X, b/193907127integerResource(R.integer.value)booleanResource(R.bool.value)
ImageView TextViewButtonImageButtonRecyclerViewEditTextProgressBarSeekBarSpaceCheckBoxWebViewLinearLayoutFrameLayout RelativeLayoutCardViewConstraintLayoutScrollView ListViewGridViewTableLayoutView
ViewImageView TextViewButtonImageButtonRecyclerViewEditTextProgressBarSeekBarSpaceCheckBoxWebViewLinearLayoutFrameLayout RelativeLayoutCardViewConstraintLayoutScrollView ListViewGridViewTableLayoutWidget
View ComposeImageButton + TextButtonImageViewSliderCheckBoxCircularProgressIndicatorTextTextView❌ProgressBarSeekBarSpacerSpace❌TextureView❌SurfaceViewWebViewIconButton + ImageImageButtonEditText TextFieldView ComposeCheckedTextViewCheckbox + TextIconToggleButton-LinearProgressIndicator-❌Switch Switch + TextRadioButton RadioButton + Text❌ViewStub
⚠ Viewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="4dp"android:padding="8dp"android:background="@color/red"android:foreground="@color/blue"android:clipToOutline="true"android:elevation="4dp"android:contentDescription="view"android:visibility="invisible"/>Box(Modifier.fillMaxWidth().height(50.dp)// X, paddingਵ۽ .padding(8.dp).background(Color.Red)// X, Box۽ .clipToBounds().graphicsLayer(shadowElevation =with(LocalDensity.current) { 5.dp.toPx() }).semantics { contentDescription = "view" }// X, b/158837937)
✅ View: Listenerview.setOnClickListener { ... }view.setOnLongClickListener { ... }view.setOnDragListener { view, dragEvent ->...}view.setOnTouchListener { view, motionEvent ->...}view.setOnKeyListener { view, i, keyEvent ->...}Box(Modifier.clickable { ... })Box(Modifier.combinedClickable( // experimentalonClick = { ... },onLongClick = { ... }))Box(Modifier.pointerInput(key) {detectDragGestures { change, dragAmount -> ... }})Box(Modifier.pointerInteropFilter( // experimentalonTouchEvent = { motionEvent -> ... }))Box(Modifier.onKeyEvent(onKeyEvent = { keyEvent -> ... }))
⚠ TextViewandroid:text="text"android:textColor="@color/red"android:textSize="12sp"android:textStyle="bold"android:fontFamily="sans-serif"android:maxLines="1"android:ellipsize="end"android:autoSizeTextType="uniform"android:includeFontPadding="false"android:autofillHints="emailAddress"android:drawableStart="@drawable/icon"android:textIsSelectable="true" />Text(text = "text",color = Color.Red,fontSize = 12.sp,fontWeight = FontWeight.Bold,fontFamily = FontFamily.SansSerif,maxLines = 1,overflow = TextOverflow.Ellipsis,// X// X, b/171394808// X, b/176949051, Unofficial Blog ଵҊ)Row { Icon(painterResource(id = R.drawable.icon))Text("text") }SelectionContainer { Text("text") }// X, b/139326806
✅ EditTexteditText.doOnTextChanged {text, start, count, after -> …}android:hint="hint"android:inputType="number"android:imeOptions="actionDone" />editText.setOnEditorActionListener {textView, i, keyEvent -> …}TextField(value = text,onValueChange = { text -> ... },placeholder = { Text("hint") },keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number,imeAction = ImeAction.Done),keyboardActions = KeyboardActions(onDone = { ... }),)
✅ Buttonandroid:text="text" />@style/Widget.MaterialComponents.Button"@style/Widget.MaterialComponents.Button.UnelevatedButton"@style/Widget.MaterialComponents.Button.OutlinedButton"@style/Widget.MaterialComponents.Button.TextButton"Button(onClick = { ... }) {Text("text")}Button {}Button(elevation = null) {}OutlinedButton {}TextButton {}
⚠ ImageViewandroid:src="@drawable/icon"android:tint="@color/red"android:scaleType="centerInside"android:adjustViewBounds="true"/>Image(painter = painterResource(id = R.drawable.icon),colorFilter = ColorFilter.tint(Color.Red),contentScale = ContentScale.Inside,// X, b/196358649)
✅ ImageButtonandroid:drawable="@drawable/pressed" />android:src="@drawable/selector_icon" />val source = remember { MutableInteractionSource() }val pressed by source.collectIsPressedAsState()val iconResId = if (pressed) {R.drawable.pressed} else {R.drawable.normal}IconButton(onClick = { ... },interactionSource = source) {Icon(painterResource(id = iconResId))}
✅ CheckBoxandroid:checked="true"android:buttonTint="@color/red" />checkBox.setOnCheckedChangeListener {compoundButton, checked -> ...}Checkbox(checked = true,colors = CheckboxDefaults.colors(checkedColor = Color.Red),onCheckedChange = { checked -> ... },)
⚠ ProgressBarstyle="@style/Widget.AppCompat.ProgressBar"android:indeterminate="true" />style="@style/Widget.AppCompat.ProgressBar.Horizontal"android:indeterminate="true" />style="@style/Widget.AppCompat.ProgressBar.Horizontal" />android:min="0"android:max="100"android:progress="1"android:secondaryProgress="10" />CircularProgressIndicator()LinearProgressIndicator()LinearProgressIndicator(// min: 0f// max: 1fprogress = 0.01f,// X)
⚠ SeekBarandroid:min="0"android:max="100"android:progress="1"android:secondaryProgress="10"android:thumb="@drawable/thumb" />seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {override fun onProgressChanged(seekBar: SeekBar,progress: Int, fromUser: Boolean) {...}})Slider(valueRange = 0f..100f,steps = 1,value = 1f,// X// X, b/195042785onValueChange = { offset -> ... },)
⚠ Custom View: Canvasclass CanvasView(...) : View(...) {override fun draw(canvas: Canvas) {super.draw(canvas)canvas.withTranslation(x = width / 5f) {withRotation(degrees = 45F) {drawRect(...)}}drawable.draw(canvas)}}Canvas(modifier = Modifier.fillMaxSize()) {val canvasSize = sizeval canvasWidth = size.widthval canvasHeight = size.heightwithTransform({translate(left = canvasWidth / 5F)rotate(degrees = 45F)}) {drawRect(...)}drawIntoCanvas { it ->drawable.draw(it.nativeCanvas)}}
ViewImageView TextViewButtonImageButtonRecyclerViewEditTextProgressBarSeekBarSpaceCheckBoxWebViewLinearLayoutFrameLayout RelativeLayoutCardViewConstraintLayoutScrollView ListViewGridViewTableLayoutViewGroup
ColumnLazyColumnRecyclerViewLinearLayoutModalDrawerViewPagerModifier.scrollable()ScrollViewConstraintLayoutBottomNavigationView❌RelativeLayoutLazyRowToolbarBoxFrameLayoutDrawerLayout❌AppBar TopAppBarRowConstraintLayoutView Compose View Compose❌--BottomNavigation(BottomSheet)ScaffoldCoordinatorLayout SwipeRefreshLayout ❌b/194911951❌
✅ FrameLayoutandroid:layout_gravity="center" />Box {Image()Text(text = "text",modifier = Modifier.align(Alignment.Center))}Box(contentAlignment = Alignment.Center) { ... }
✅ LinearLayoutandroid:orientation="vertical"android:gravity="center">android:orientation="horizontal"android:gravity="center">Column(horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center) {Image(modifier = Modifier.weight(1f))Text()}Row(verticalAlignment = Alignment.CenterVertically,horizontalArrangement = Arrangement.Center) {Image()Text()}
✅ ScrollViewColumn(Modifier.verticalScroll(rememberScrollState())) { ... }Row(Modifier.horizontalScroll(rememberScrollState())) { ... }
⚠ RecyclerViewval adapter = CustomAdapter(...)recyclerView.adapter = adapteradapter.submitList(dataSet)recyclerView.addItemDecoration(DividerItemDecoration(...))recyclerView.itemAnimator = ...app:fastScrollEnabled="true"@Composablefun Sample(dataSet: Array) {LazyColumn {items(dataSet.size) { index ->Text(text = dataSet[index])Divider()}}}// X, b/188855907, Divider۽ оמ// X, b/150812265// X, b/182393097
⚠ RecyclerView: LayoutManagerandroid:orientation="vertical"app:layoutManager="...LinearLayoutManager"app:reverseLayout="false" />android:orientation="horizontal"app:layoutManager="...LinearLayoutManager" />android:orientation="vertical"app:layoutManager="...GridLayoutManager"app:spanCount="3" />android:orientation="horizontal"app:layoutManager="...GridLayoutManager" />android:orientation="vertical"app:layoutManager="...StaggeredGridLayoutManager" />LazyColumn(reverseLayout = false) { ... }LazyRow { ... }LazyVerticalGrid( // experimentalcells = GridCells.Fixed(3)) { ... }// X, b/191238807// X, b/190787900
✅ Cardapp:cardCornerRadius="4dp"app:cardBackgroundColor="@color/white"app:cardElevation="8dp">...Card(shape = RoundedCornerShape(4.dp),backgroundColor = Color.White,elevation = 8.dp) {...}
✅ CoordinatorLayout"@string/appbar_scrolling_view_behavior"/>Scaffold(topBar = { TopAppBar { ... } },content = {},bottomBar = { BottomNavigation(...) },floatingActionButton = { FloatingActionButton { ... } })// X, b/194911953Tooltip
⚠ Toast, Snackbar, Dialog, Fragment
❌ ToastToast.makeText(context, "message", Toast.LENGTH_SHORT).show()// X, ইېۢ ࢎਊ оמToast.makeText(LocalContext.current, "message", Toast.LENGTH_SHORT).show()
✅ SnackbarSnackbar.make(view, "Snackbar Message", Snackbar.LENGTH_SHORT).setAction("Action") { /* onActionPerformed */ }.addCallback(object : Snackbar.Callback() {override fun onDismissed(transientBottomBar: Snackbar, event: Int) { ... }}).show()val scaffoldState = rememberScaffoldState()val scope = rememberCoroutineScope()Scaffold(scaffoldState = scaffoldState) {Button(onClick = {scope.launch {val result = scaffoldState.snackbarHostState.showSnackbar(message = "Snackbar Message",actionLabel = "Action")when (result) {SnackbarResult.ActionPerformed -> { ... }SnackbarResult.Dismissed -> { ... }}}}) { ... }}
⚠ DialogAlertDialog.Builder(context).setTitle("title").setMessage("message").setPositiveButton("") { ... }.setNegativeButton("") { ... }.show()// Additional Functionsvar isDialogShown by remember { mutableStateOf(true) }if (isDialogShown) {AlertDialog(title = { Text("title") },text = { Text("message") },confirmButton = { TextButton(onClick = {}) { ... }},dismissButton = { TextButton(onClick = {}) { ... }},onDismissRequest = { isDialogShown = false },)}// X, b/194911954
❌ Fragmentoverride fun onSaveInstanceState(outState: Bundle) {super.onSaveInstanceState(outState)outState.putString(KEY, value)}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)value = savedInstanceState?.getString(KEY)?: viewModel.generateValue()}// Multiple back stacksfragmentManager.saveBackStack("notifications")fragmentManager.restoreBackStack("profile")val value = rememberSaveable { // Null X, b/196995035mutableStateOf(viewModel.generateValue())}val current = ... // "notifications" -> "profile"val saveableStateHolder = rememberSaveableStateHolder()saveableStateHolder.SaveableStateProvider(current.route) {when (current) {Profile -> Profile()Notifications -> Notifications()}}
⚠ Interpolator, Animation, Transition
⚠ Interpolatorinterface TimeInterpolatorFastOutSlowInInterpolator()FastOutLinearInInterpolator()LinearOutSlowInInterpolator()LinearInterpolator()PathInterpolator(0.33f, 0f) // QuadPathInterpolator(0.33f, 0f, 1f, 1f) // CubicPathInterpolator((Path().apply {...}) // PathAccelerateInterpolator()OvershootInterpolator()...interface EasingFastOutSlowInEasingFastOutLinearInEasingLinearOutSlowInEasingLinearEasing// X, b/168854254CubicBezierEasing(0.33f, 0f, 1f, 1f)// X, b/168854254// X// X// ...
✅ ViewPropertyAnimatorval fraction: Float = if (enabled) 1f else 0fview.animate().cancel()view.animate().setStartDelay(300L) // ms.setDuration(1000L) // ms.setInterpolator(FastOutSlowInInterpolator()).translationX(lerp(0f, 100f, fraction)).translationY(lerp(0f, 50f, fraction)).rotationX(lerp(0f, 90f, fraction)).rotationY(lerp(0f, 90f, fraction)).scaleX(lerp(1f, 1.5f, fraction)).scaleY(lerp(1f, 0.5f, fraction)).alpha(lerp(1f, 0f, fraction)).withLayer()val fraction: Float by animateFloatAsState(targetValue = if (enabled) 1f else 0f,animationSpec = tween(delayMillis = 300,durationMillis = 1000,easing = FastOutSlowInEasing))Box(modifier = Modifier.graphicsLayer {translationX = lerp(0f, 100f, fraction)translationY = lerp(0f, 50f, fraction)rotationX = lerp(0f, 90f, fraction)rotationY = lerp(0f, 90f, fraction)scaleX = lerp(1f, 1.5f, fraction)scaleY = lerp(1f, 0.5f, fraction)alpha = lerp(1f, 0f, fraction)// ೞ٘ਝয оࣘ ӝࠄ, b/193123882})
✅ DynamicAnimationval spring = SpringAnimation(view,DynamicAnimation.TRANSLATION_X).withSpringForceProperties {dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCYstiffness = SpringForce.STIFFNESS_LOW}val targetValue = if (enabled) 100f else 0fspring.animateToFinalPosition(targetValue)val fraction: Float by animateFloatAsState(targetValue = if (enabled) 1f else 0f,animationSpec = spring(dampingRatio = Spring.DampingRatioLowBouncy,stiffness = Spring.StiffnessLow))Box(modifier = Modifier.graphicsLayer {translationX = lerp(0f, 100f, fraction)})
✅ ValueAnimator: Infinite AnimationValueAnimator.ofArgb(Color.RED,Color.GREEN).apply {repeatCount = ValueAnimator.INFINITErepeatMode = ValueAnimator.REVERSEduration = 1_000Linterpolator = LinearInterpolator()addUpdateListener {val color = it.animatedValue as Intview.setBackgroundColor(color)}}.start()val infiniteTransition = rememberInfiniteTransition()val color by infiniteTransition.animateColor(initialValue = Color.Red,targetValue = Color.Green,animationSpec = infiniteRepeatable(repeatMode = RepeatMode.Reverseanimation = tween(durationMillis = 1000,easing = LinearEasing),))Box(Modifier.background(color))
⚠ Transition// FragmentA.ktoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)exitTransition = MaterialFadeThrough()}// FragmentB.ktoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enterTransition = MaterialFadeThrough()}supportFragmentManager.beginTransaction().replace(R.id.fragment_container, FragmentB()).commit()val screen = mutableStateOf("A")AnimatedContent(targetState = screen,transitionSpec = {fadeIn() + scaleIn() with // 1.1ࠗఠ, b/191325593fadeOut()}) { currentScreen ->when (currentScreen) {"A" -> ScreenA()"B" -> ScreenB()}}screen.value = "B"
⚠ Transition// ViewGroup Child View ݽفী ਊػTransitionManager.beginDelayedTransition(viewGroup, AutoTransition())child.isVisible = showAutoTransition=android:transitionOrdering="sequential">Box {// пп ѐ߹ਵ۽ ਊ೧ঠ ೠAnimatedVisibility(visible = show,enter = fadeIn() + expandIn(), // EnterTransitionexit = shrinkOut() + fadeOut() // ExitTransition) { Text(text = "child") }}// X, b/142451118
❌ View AnimationfragmentManager.beginTransaction().setCustomAnimations(R.anim.slide_in_right, // enterAnimR.anim.slide_out_left, // exitAnim).replace(...).commit()// X// X// X// X// X
❌ Shared ElementsfragmentManager.beginTransaction().addSharedElement(view, "transitionName").replace(...).setReorderingAllowed(true).commit()view.transitionName = "transition_name"class FragmentB : Fragment() {override fun onCreate(...) {super.onCreate(savedInstanceState)sharedElementEnterTransition = ...sharedElementReturnTransition = ...}}// X
Compose۽ ജਸ ળ࠺ೞӝ03
Jetpack ۄ࠳۞ܻ✅ ❌Activity ViewPagerViewPager2PreferenceNavigationHilt ViewModelPaging EmojiConstraintLayoutWearLink: https://developer.android.com/jetpack/compose/libraries
Jetpack ۄ࠳۞ܻ: ConstraintLayoutConstraintLayout {val (button, text) = createRefs()Button(onClick = {},modifier = Modifier.constrainAs(button) {top.linkTo(parent.top, margin = 16.dp)}) { Text("Button") }Text("Text", Modifier.constrainAs(text) {top.linkTo(button.bottom, margin = 16.dp)})}Link: https://developer.android.com/jetpack/compose/layouts/constraintlayoutConstraintLayout ۨইਓ ਵ۽ ੋೠ ࢿמ ೞܳ ѐࢶೞ۰חݾਵ۽ ୶оغয, ۨইਓਸ ҳࢿೡ ٸ ࢎਊਸ ӂೞҊ .Jetpack Composeীࢲחۨইਓ غ؊ۄب ࢿמী ѱ ೱਸ ঋਵ۽,ConstraintLayout न ػ ۨইਓਵ۽ ҳࢿೞח Ѫѐߊ ࢤࢿҗ ࢿמ ݶীࢲ ؊ աਸ ࣻب .MotionLayout ই ਗೞ ঋח.
৻ࠗ ۄ࠳۞ܻ✅ ❌PhotoViewCoilGlideLottiePicasso ExoPlayerAccompanistFlexboxLayout
Coilval painter = rememberImagePainter(data = "https://www.example.com/image.jpg",builder = { crossfade(true) })Image(painter = painter,contentDescription = null,modifier = Modifier.size(128.dp))when (painter.state) {is ImagePainter.State.Loading -> { ... }is ImagePainter.State.Success -> { ... }is ImagePainter.State.Error -> { ... }}Link: https://coil-kt.github.io/coil/compose/Kotlin Coroutines ӝ߈ Android ۽٬ ۄ࠳۞ܻ.ܲ ۽٬ ۄ࠳۞ܻח Jetpack Compose ਗ ҅ദ হ.ౠ Picasso(#2203)ח ؊࢚ ӝמਸ ୶оೞ ঋਸ Ѫਵ۽ ࠁੋ.Glide(#4459), Fresco ۄ࠳۞ܻܳ ࢎਊೞח ۽ંীࢲחCoil۽ migrationೞѢա (Migration о٘ ޙࢲ)Landscapist ۄ࠳۞ܻܳ উਵ۽ Ѩష೧ࠅ ࣻب ਸ Ѫ э.
Accompanistѐߊೡ ٸ ੌ߈ਵ۽ ਃೞ݅Jetpack Composeীࢲח ই ࢎਊೡ ࣻ হח ӝמٜਸ ઁҕೞח ۄ࠳۞ܻ.୶റ Composeীࢲ ӝמਸ ҕधਵ۽ ਗೞѢա,৻ࠗ ۄ࠳۞ܻীࢲ ೞח ҃ীח ۄ࠳۞ܻо ઁѢؼ ࣻ .(ex. ୭Ӕ ۽٬ ۄ࠳۞ܻо ઁѢغ.)Link: https://github.com/google/accompanist• Coil• Glide• Insets• Permissions• Navigation Animation• Navigation Material• AppCompat Theme• Drawable Painter• System UI Controller• Swipe Refresh• Pager layouts• Flow layouts• Placeholder
@Composablefun DrawDrawable() {val context = LocalContext.currentval drawable = ContextCompat.getDrawable(LocalContext.current,R.drawable.shape // )Image(painter = rememberDrawablePainter(drawable),contentDescription = null)}Accompanist: Drawable PainterpainterResource() חBitmapDrawable ژח VectorDrawable݅ ਗೠ.ӝઓী ࢎਊೞ؍ ৬ э Drawableਸࢎਊೡ ࣻ ѱ ೧ח ۄ࠳۞ܻ.݅ , ࢚ۢకী ٮۄ о ׳ۄח Drawable ਗغ ঋח.
Accompanist: Swipe Refreshval viewModel: MyViewModel = viewModel()val isRefreshing by viewModel.isRefreshing.collectAsState()SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing),onRefresh = { viewModel.refresh() },) {// list}SwipeRefreshLayoutਸ ೞח ۄ࠳۞ܻ.
Accompanist: Pager layouts// Display 10 itemsval pagerState = rememberPagerState(pageCount = 10)HorizontalPager(state = pagerState) { page ->Text(text = "Page: $page")}VerticalPager(state = pagerState) { page ->Text(text = "Page: $page")}ViewPagerܳ ೞח ۄ࠳۞ܻ.
Accompanist: PlaceholderText(text = "Content to display after content has loaded",modifier = Modifier.placeholder(visible = true,highlight = PlaceholderHighlight.fade(),))Placeholder ӝמਸ ઁҕೞח ۄ࠳۞ܻ.
ਵ۽ ਊೞӝ• ӝઓ জী ਵ۽ Compose ਊೞӝ https://developer.android.com/jetpack/compose/interop • Architecture https://developer.android.com/jetpack/compose/architecture • Accessibility https://developer.android.com/jetpack/compose/accessibility • Testing https://developer.android.com/jetpack/compose/testing • List of modifiers https://developer.android.com/jetpack/compose/modifiers-list
Issue Tracker: ग ١۾ೞӝ / Star ־ܰӝLink: https://issuetracker.google.com/issues?q=componentid:610764componentid:856989 → foundation742043 → material610764 → compiler / runtime610478 → ui / animation
Issue Tracker: ग ١۾ೞӝ / Star ־ܰӝ👆
Summary• ✅ ؊ Ҋ ҙੋ ٘۽ UIܳ ѐߊೡ ࣻ . • 📚 নೠ ҕध ޙࢲ৬ ٘ەਸ ా೧ ઑӘঀ ण೧ࠁ. • ⚠ ࢎਊೞҊ ח View API৬ زੌೠ APIо ઁҕغח ԙ ഛੋ೧ࠁ. • 🚀 APIо হਵݶ Jetpack Compose Roadmapী ӝੑغয ח ଵҊ೧ࠁ. • 👾 ӝמ/ࢸ҅ য়ܨܳ ߊѼೞݶ, IssueTrackerী गܳ թѹࠁ. (زੌೠ गо ਵݶ ⭐ ܳ ־ܰ.) • 💬 п Compose ਊೞӝ ೠ दਸ Ҋ೧ࠁ.
Sungyong AnAndroid Developer@fornewidThank you!Slide: https://speakerdeck.com/fornewid/jetpack-compose-having-and-not
fornewid
kinocoboy2
antyadev
okuzawats
sanfrecce_osaka
mazrean
pylapp
kasacchiful
akkyie
niftycorp
okuramasafumi
texmeijin
masatoshiitoh
speakerdeck
hursman
akmur
frogandcode
mojombo
morganepeng
davidbonilla
searls
hannesfritz
jonyablonski
malarkey
chrislema