앱 개발 프로젝트에서 배운 점(1) : 레이아웃, 프래그먼트, 뷰

레이아웃

LinearLayout과 FrameLayout의 차이점

• LinearLayout
  • android:orientation 속성을 통해 자식 뷰들을 수직 or 수평 방향으로 순차적으로 배치한다.
  • android:weight 속성을 통해 상대적인 가중치로 공간을 동적으로 할당가능
  • 주로 여러 개의 자식 뷰나 뷰 그룹을 나열할 때 사용됨
  • 이번 프로젝트에서는 LinearLayout으로, 가이드라인에 의해 80%만큼 하나를 만들고, weightSum = 10으로 주어 0.5만큼 텍스트뷰를, 7만큼 프래그먼트를, 2.5만큼 또 다른 프래그먼트를 띄우게 했다.
• FrameLayout
  • 자식 뷰들을 상위 좌표에 겹치기 배치한다. 즉, 여러 자식 뷰가 추가되면 그 뷰들은 이전 뷰의 위에 배치된다.
  • 단일 뷰나 뷰 그룹을 전체 공간에 표시하거나, 여러 뷰를 겹치게 표시할 때 사용됨 ex) 배경 이미지와 그 위의 텍스트 뷰를 겹치게 표시하고 싶을 때
  • 여러 뷰를 만들 때, 복잡한 레이아웃 계층을 제어하기 어려움
• GuideLine
  • ConstrainLayout에 사용되는 도구로, 기준선의 역할을 한다.
  • 뷰가 아니며 UI에 표시도 되지 않고, 디자인 및 배치 도움을 위한 것.
  • 복잡한 레이아웃에서 Guideline 사용 시 다른 뷰에 제약 조건을 쉽게 지정할 수 있기에 레이아웃 계층 구조를 단순화할 수 있다.
  • android:orientation=”horizontal” 등 여러 가지가 있음. %도 조절가능

메인 액티비티와 프래그먼트 연동

액티비티와 프래그먼트의 상호작용이 필요하기에 각각의 생명주기에 대해 깊게 알아볼 필요가 있었다.

• MainActivity 코틀린 파일

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

    fun fragment_open() {
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer1, Fragment_1_1())
        transaction.replace(R.id.fragmentContainer2, Fragment_2_1())
        transaction.commit()
    }

메인 액티비티가 onCreate 될 때, supportFragmentManager를 통해 프래그먼트를 불러왔다.

• MainActivity XML 파일

<LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:weightSum="10"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:fontFamily="sans-serif-black"
            android:gravity="center"
            android:text="숨자바"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <FrameLayout
            android:id="@+id/fragmentContainer1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7" />

        <FrameLayout
            android:id="@+id/fragmentContainer2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.5" />

LinearLayout을 80%로 지정하고, weight를 10으로 두어 각각에 분배해준 모습.

그러나 프래그먼트가 들어가야 할 자리에 Fragment를 적지 않고, FrameLayout을 적어 그 위치에 프래그먼트의 코틀린 파일을 넣어준다.

<fragment> 태그를 이용해서 name으로 프래그먼트 코틀린 파일경로를 불러오는 것도 가능

View 뷰

이런 게 있을까? 싶은 건 이미 다 있다. 그러니 코드로 살펴보자

• Design에 있는 버튼을 사용하여 이미지를 입히기 보다는, 그냥 이미지를 삽입하고 setOnClick 리스너 활용이 더 편하다.
• 이미지 뷰에서 90도 회전 : android:rotation = “90”
• 텍스트 뷰에서 가운데 정렬 : gravity = “center”
• 온 오프 버튼 : ToggleButton (디폴트가 False임. ischecked = true로 디폴트 true로 가능)
• 옵션 버튼 : Spinner
• 사용자로부터 글자 받기 : EditText
  • 숫자만 입력 : inputType = “number”
  • 글자 수 조절 : maxLength = “1” // 1글자만 가능