나만 보는 일기장

디스코드에는 GIF(움짤)을 골라 보낼 수 있는 화면이 있습니다. 저는 위와 같은 화면을 만들어보기 위해 레이아웃은 RecyclerView에 StaggeredGridLayoutManager를 달아 구현하고, Giphy Api에서 움짤을 받아와, Glide로 로딩하여 보여주는 방식으로 만들었습니다. item_trending_gif.xml RecyclerView에 들어갈, 움짤을 띄울 아이템의 레이아웃을 만들어 주었습니다. CardView 안에 ImageView 하나밖에 없는 단순한 레이아웃입니다. ConstraintLayout과 MaterialCardView, ImageView 모두 높이를 wrap_content로 설정하여 움짤을 받아오면 넓이는 부모 뷰 만큼 늘이고, 높이는 움짤의 비율에 맞춰 알아서 설..

여러분은 드래그&드롭을 통해 아이템 간 위치를 바꾸거나 아이템을 스와이프 해 삭제하는 등의 액션을 구현하는 것을 보신 적이 있을 것입니다. 이러한 액션들을 구현하기 위해서는 ItemTouchHelper의 콜백 클래스를 구현하면 됩니다. Callback 클래스와 SimpleCallback 클래스는 드래그나 스와이프를 인식할 방향을 어디서 설정하느냐의 차이입니다. class SwipeHelperCallback(private val mAdapter: MyAdapter): ItemTouchHelper.Callback() { // 입력을 감지할 방향 설정, 설정하지 않으려면 0 override fun getMovementFlags( recyclerView: RecyclerView, viewHolder: Recyc..

Xml 기반 레이아웃 작업에서의 ListView와 RecyclerView처럼 Compose에서는 for문을 통한 수동적인 리스트와 LazyComlumn(이나 LazyRow)를 이용한 리스트가 있습니다. 둘의 차이점 또한 똑같습니다. ListView와 수동 리스트가 리스트의 아이템 전체를 로드해 화면에 보이지 않는 부분은 자원이 낭비되고, RecyclerView와 LazyColumn은 화면 밖을 벗어난 아이템을 재활용해 효율적이라는 점입니다. @Composable fun MainScreen(userProfiles: List) { Scaffold(topBar = { AppBar() }) { Surface( modifier = Modifier.fillMaxSize() ) { Column { for(userPr..

// Shimmer implementation 'com.facebook.shimmer:shimmer:0.5.0' // Shimmer RecyclerView implementation 'com.todkars:shimmer-recyclerview:0.4.1' Shimmer는 콘텐츠를 불러오는 동안 placeholder로 표시하여 로딩 중임을 알 수 있게 하고, 콘텐츠의 구조를 대강 알려줄 수 있게 하는 라이브러리입니다. 사용법 1. Shimmer RecyclerView에 들어갈 아이템의 레이아웃을 만들어줍니다. ▽ 레이아웃 코드 더보기 2. 레이아웃에 Shimmer RecyclerView 추가 레이아웃의 적절한 위치에 ShimmerRecyclerView를 추가해주고, app:shimmer_recycler_l..

RecyclerView는 기존의 리스트 뷰와 그리드 뷰 등을 대체하는 새 라이브러리라고 할 수 있는데, 기존의 리스트뷰가 리스트에 들어가 있는 아이템을 모두 만들어 화면에 보이지 않는 부분에도 자원이 낭비되는데 비해, RecyclerView는 화면에 보이지 않는 부분의 아이템을 이름처럼 재활용해 사용함으로써 자원을 훨씬 효율적으로 사용하게 됩니다. RecyclerView 구현 방법 레이아웃에 RecyclerView 추가 RecyclerView 아이템 디자인 RecyclerView Adapter 구현 DiffUtil 구현 RecyclerView에 Layout Manager, Adapter 설정 1. RecyclerView 추가 따로 종속성을 추가해줄 필요는 없습니다. 2. RecyclerView 아이템 디..