오늘의 명언앱 실습!!
파이어베이스 remote config를 이용해서 앱 업데이트 없이 명언을 추가하거나 바꿔서 보여주는 어플을 개발!
- 코드 수정없이 명언 추가
- 코드 수정없이 이름 숨기기 가능
- 무한 스와이프 가능
기본 UI 구성
ViewPager2
실무에서는 1을 아직 많이쓰고있다.
2에서는 세로로 swipe하는 것도 지원한다.
right to left도 지원!
gradle에 android.material 에 포함이 되어있다.
간단한 UI가 들어갈때는 Constraintlayout보다 FrameLayout으로 사용하자!
viewPager을 랜더링하는 item_quote.xml을 만든다.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/txt_quote"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end|center_vertical"
app:layout_constraintBottom_toTopOf="@+id/txt_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:text="나는 생각한다 고로고로" />
<TextView
android:id="@+id/txt_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end|center_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@id/txt_quote"
app:layout_constraintStart_toStartOf="@id/txt_quote"
app:layout_constraintTop_toBottomOf="@id/txt_quote"
tools:text="어쩌고저쩌고" />
</androidx.constraintlayout.widget.ConstraintLayout>명언에는 명언자체와 말한 사람의 이름이 있기 때문에 2가지를 하나의 모델로 사용하기 위해서 모델을 만들어 준다.
data class Quote.kt 생성
data class Quote(
val quote: String,
val name: String
)QuotesPageAdapter.kt 생성
implement members를 이용해서 구현해야되는 function들을 채워준다.
아니 adapter만드는법 강의에서 알려준적이있나..?
class QuotesPageAdapter(private val quotes: List<Quote>) :
RecyclerView.Adapter<QuotesPageAdapter.QuoteViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
QuoteViewHolder(
LayoutInflater.from(parent.context).inflate(R.layout.item_quote, parent, false)
)
override fun onBindViewHolder(holder: QuoteViewHolder, position: Int) {
holder.bind(quotes[position])
}
override fun getItemCount()=quotes.size
class QuoteViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
private val quoteTextView: TextView = itemView.findViewById(R.id.txt_quote)
private val nameTextView: TextView = itemView.findViewById(R.id.txt_name)
fun bind(quote: Quote) {
quoteTextView.text = quote.quote
nameTextView.text = quote.name
}
}
}MainActivity
class MainActivity : AppCompatActivity() {
private val viewPager: ViewPager2 by lazy {
findViewById(R.id.viewPager)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews()
}
private fun initViews() {
viewPager.adapter = QuotesPageAdapter(
listOf(Quote("나는 생각한다,고로 나는 존재한다", "데카르트"))
)
}
}pageView는 리사이클러뷰를 기반으로 만들어진다. 위와같이 Quote 리스트에 값을 하나 넣어놓으면 밑에처럼 생성된다. 지금은 하나만 넣어놔서 좌우로 넘어가지 않는 모습!
RecyclerView , Adapter
recylerView를 사용하여 대량의 데이터 세트를 효율적으로 표시할 수 있다고 한다.
recyclerView는 개별요소를 재활용 항목이 스크롤되어 화면에서 벗어나도 뷰를 제거하지 않는다!
성능이 개선된다!
주요 클래스
RecylerView : 데이터에 해당하는 view가 포함된 ViewGroup. View자체이기 때문에 layout에 추가하면된다.
ViewHolder : 목록의 각 개별 요소는 뷰 홀더 객체로 정의
뷰 홀더가 생성된 후 RecyclerView가 뷰 홀더를 뷰의 데이터에 binding한다. RecyclerView.ViewHolder를 확장하여 뷰 홀더 정의 가능
Adapter : 뷰를 요청한 다음, Adapter에서 메서드를 호출하여 뷰를 뷰의 데이터에 binding 한다. RecylerView.Adapter를 화갖ㅇ하여 어댑터를 정의
Adapter 및 ViewHolder 구현
두 클래스함께 작동하여 데이터 표시 방식을 정의한다.
ViewHolder는 목록에 있는 개별 항목의 레이아웃을 포함하는 View의 래퍼이다.
Adapter는 필요에 따라 ViewHolder 객체를 만들고 이러반 뷰에 데이터를 설정한다.
뷰를 데이터에 연결하는 프로세스를 BINDING 이라고 한다.
Adapter를 정의 할때 3가지 key method를 재정의 !!!
onCreateViewHolder()
recylerView는 Viewholder를 새로 만들어야 할 때마다 이 method를 호출
ViewHolder와 그에 연결된 View를 생성하고 초기화
onBindViewHolder()
RecyclerView는 ViewHolder를 데이터와 연결할때 이 method를 호출
적절한 data를 가져와서 그 data를 사용하여 뷰 홀더의 레이아웃을 채운다.
getItemCount()
데이터 세트 크기를 가져올때 이 method를 호출
RecyclerView는 이 메서드를 사용해서 항목을 추가로 표시할 수 없는 상황을 확인
RecylcerView 계속 반복해서 공부하자!!!
