[Jetpack Compose] 2. Layouts, theming, and animation(1) #Lazy layouts

[Jetpack Compose] 2. Layouts, theming, and animation(1) #Lazy layouts

📌참고자료

• Layouts, theming, and animation | Android Developers

Fundamentals of Compose Layouts and Modifiers

• Arrangement: how the layout's children are laid out on the main axis
• Alignment: 〃 on the cross axis

Lazy layouts in Compose

📌참고자료

• LazyListState | Android Developers
• LazyGridState | Android Developers

• LazyListState/LazyGridState
  • a state object that can be hoisted to control and observe scrolling
  • usually created via rememberLazyListState/rememberLazyGridState

• GridCells
  • defines the number of columns of the GridView
  • GridCells.Adaptive: as many columns as possible on the condition that every cell has at least minSize space and all extra space distributed evenly.
  • GridCells.Fixed: Defines a fixed number of columns, limited to 1~5

• can implement GridCells to fully custom cell sizes

LazyVerticalGrid(
	columns = object: GridCells{
    	override fun Density.calculateCrossAxisCellSizes(
        	availableSize: Int,
            spacing: Int
        ): List<Int>{ 
        	// return value: list containing the calculated column widths
            // number of columns = length of the returned list
        	...
        }
    }
)

Useful Tips

• Don't use 0-pixel sized items
  -> set default sizing to items
  (item size should ideally be the same before & after loading the content)

• Avoid nesting scrollable children without a predefined size inside another same-direction scrollable parent
  -> wrap all the composables inside one parent lazy column

lazyColumn{
	item{
    	Header()
    }
    items(data){item ->
    	Item(item)
    }
    item{
    	Footer()
    }
}

• Beware of putting multiple elements in one item
  • mutiple elements emmited as a part of an item -> handled as one entity
    -> cannot be composed individually
    -> interfere with scrollToItem, animateScrollToItem
    (index parameters = number of items, not number of elements)
  • valid use cases: dividers
    -> can be part of the previous item
• Consider using custom arrangements
  • 예. 화면 최상단부터 아이템 배치 & 아이템 목록 길이가 화면 길이보다 짧다면, 마지막 아이템은 화면 최하단에 배치
    

object TopWithFooter: Arrangement.Vertical{
	override fun Density.arrange(
    	totalSize:Int, //size of viewport
        sizes: IntArray, //sizes of items
        outPositions: IntArray //positions of items
    ){	
    	//화면 최상단부터 아이템 배치
    	var y = 0
        sizes.forEachIndexed{index, size ->
        	outPositions[index] = y
            y += size
        }
        //아이템 목록 길이가 화면 길이보다 짧다면
        //마지막 아이템은 화면 최하단에 배치
        if(y < totalSize){
        	val lastIndex = outPositions.lastIndex
            outPositions[lastIndex] = totalSize - sizes.last()
        }
    }
}