Lesson 5: Layouts

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

Layouts in Android

Android devices

• Android 기기는 다양한 폼 팩터로 제공됩니다.
• 인치 당 점점 더 많은 픽셀이 device 화면에 채워지고 있습니다.
• 개발자는 device 간에 일관된 layout 치수를 지정할 수 있는 기능이 필요합니다.

Density-independent pixels (dp)

View의 너비, 높이와 같은 레이아웃의 크기를 지정할 때 dp를 사용합니다.

• Density-independent pixels(dp)는 화면 밀도를 고려합니다.
• Android view는 density-independent pixels로 측정됩니다.
• dp = (픽셀의 너비 * 160) / 화면 밀도

Screen-density buckets

Android View rendering cycle

Drawing region

View margins and padding

ConstraintLayout

Deeply nested layouts are costly

• 깊게 중첩된 ViewGroup에는 더 많은 계산이 필요합니다.
• 뷰는 여러번 측정될 수 있습니다.
• UI 속도 저하 및 응답성 부족을 발생시킬 수 있습니다.

이러한 문제점을 ConstraintLayout을 이용해 피할 수 있습니다.

What is ConstraintLayout?

• Android 권전 기본 레이아웃
• 너무 많이 중첩된 레이아웃의 문제를 해결하는 동시에 복잡한 행동 허용
• 일련의 제약 조건을 사용하여 뷰 내에서 위치 지정 및 크기 조정

What is a constraint?

레이아웃이 포함되어 있는 뷰의 속성에 대한 규제 또는 제한

Relative positioning constraints

상위 컨터이너를 기준으로 제약 조건을 설정할 수 있습니다.
layout_constraint<SourceConstraint>_to<TargetConstraint>Of

TextView 속성의 예시

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"

위치 기준을 나타냅니다.

Simple ConstraintLayout example

부모의 정중에 TextView를 배치하는 예제입니다.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Chains

• 서로를 기준으로 view를 배치할 수 있습니다.
• 가로 또는 세로로 연결할 수 있습니다,.
• 많은 LinearLayout기능을 제공합니다.

Chain styles

다양한 체인 스타일을 사용하여 view 사이의 공간을 조정합니다.

Additional topics for ConstraintLayout

Guidelines

• 하나의 가이드를 사용하여 여러 view를 배치할 수 있습니다.
• 수직과 수평일 수 있습니다.
• 디자인/UX 팀과의 협업 강화.
• 기기에 그려지지 않음

Guidelines in Android Studio

수직, 수평 가이드라인을 사용하여 view를 배치한 모습입니다.

Example Guideline

수직 가이드라인을 사용했으며 시작 위치에서 16dp 떨어져 있습니다.

<ConstraintLayout>
   <androidx.constraintlayout.widget.Guideline
       android:id="@+id/start_guideline"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       app:layout_constraintGuide_begin="16dp" />
   <TextView ...
       app:layout_constraintStart_toEndOf="@id/start_guideline" />
</ConstraintLayout>

Creating Guidelines

• layout_constraintGuide_begin : 시작 위치에 지정
• layout_constraintGuide_end : 끝 위치에 지정
• layout_constraintGuide_percent : 비율로 위치 지정

Groups

• widget 세트의 visibility를 제어할 수 있다
• Group visibility를 코드에서 toggle 할 수 있다.

Example group

constraint_referenced_ids를 사용해서 Group 대상을 설정합니다.

<androidx.constraintlayout.widget.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="locationLabel,locationDetails"/>

Groups app code

override fun onClick(v: View?) {
    if (group.visibility == View.GONE) {
        group.visibility = View.VISIBLE
        button.setText(R.string.hide_details)
    } else {
        group.visibility = View.GONE
        button.setText(R.string.show_details)
    }
}

Data binding

Current approach: findViewById()

매번 view 계층을 순회합니다.

Use data binding instead

레이아웃의 UI 구성 요소를 앱의 data source에 바인딩합니다.

Modify build.gradle file

앱 수준의 build.gradle 파일에 추가합니다.

android {
   ...
   buildFeatures {
       dataBinding true
   }
}

Add layout tag

적용할 XML을 layout tag로 감싸줍니다.

<layout>
    <androidx.constraintlayout.widget.ConstraintLayout>
        <TextView ... android:id="@+id/username" />
        <EditText ... android:id="@+id/password" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Layout inflation with data binding

// 제거
setContentView(R.layout.activity_main)

// 대체
val binding: ActivityMainBinding = DataBindingUtil.setContentView( this, R.layout.activity_main)

// XML view 접근 방식
binding.username = "Melissa

Data binding layout variables

<layout> 
   <data>
       <variable name="name" type="String"/>
   </data>
   <androidx.constraintlayout.widget.ConstraintLayout>
       <TextView
           android:id="@+id/textView"
           android:text="@{name}" />
   </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

MainActivity.kt 에서 binding.name = "John" 설정 가능합니다.

Data binding layout expressions

XML에서 다양한 포현식을 사용할 수 있습니다. 참고

<layout>
   <data>
       <variable name="name" type="String"/>
   </data>

   <androidx.constraintlayout.widget.ConstraintLayout>
       <TextView
           android:id="@+id/textView"
           android:text="@{name.toUpperCase()}" />
   </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Displaying lists with RecyclerView

RecyclerView

• 데이터 목록을 표시하기 위한 widget
• 스크롤 성능을 높이기 위해 item view를 재사용
• dataset의 각 item에 대한 list item layout을 지정할 수 있다.
• 애니메이션 및 전환 지원

RecyclerView.Adapter

• RecyclerView가 표시하는 data 와 layout을 제공합니다.
• custom Adpater는 RecyclerView.Adpater에서 확장되고 override됩니다.
  • override functions
    • getItenCount
    • onCreateViewHolder
    • onBindViewHolder

View recycling in RecyclerView

• item이 화면 밖으로 스크롤되면 파괴되지 않습니다. item은 재사용을 위해 pool에 넣습니다.
• onBindViewHolder는 view에 새로운 값으로 바인딩한 다음 view를 list에 다시 삽입합니다.
  

Add RecyclerView to your layout

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Create a list item layout

res/layout/item_view.xml

<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <TextView
       android:id="@+id/number"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</FrameLayout>

Create a list adapter

class MyAdapter(val data: List<Int>) : RecyclerView.Adapter<MyAdapter.MyViewHolder>() {

   class MyViewHolder(val row: View) : RecyclerView.ViewHolder(row) {
       val textView = row.findViewById<TextView>(R.id.number)
   }
   
   // item layout 설정 및 ViewHolder 생성
   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
       val layout = LayoutInflater.from(parent.context).inflate(R.layout.item_view,
                    parent, false)
       return MyViewHolder(layout)
   }
   
   // holder에 필요한 바인딩 작업 진행
   override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
       holder.textView.text = data.get(position).toString()
   }
   
   // list item count 설정
   override fun getItemCount(): Int = data.size

Set the adapter on the RecyclerView

MainActivity.kt :

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val rv: RecyclerView = findViewById(R.id.rv)
    
    // RecyclerView layoutManager 세팅
    rv.layoutManager = LinearLayoutManager(this)
    
    // RecyclerView.Adapter 세팅
    rv.adapter = MyAdapter(IntRange(0, 100).toList())
}