Android Kotlin -실습예제(2) - fragment.xml 디자인

 

1. fragment.question.xml 디자인

  - 실습예제(1)에서 main_img를 디자인 했듯 같은 방식으로 fragment.question.xml을 디자인 해준다

 

 

 

 

2. fragment_selection.xml 디자인

 (1) - 역시나 최상위 문단을 constraintlayout으로 하고 안쪽에 새로운 LinearLayout을 만들어 준다

   * tip) 디자인 화면에 우클릭을 하고 Helpers -> Add Horizontal Guidline을 크릭하면 디자인화면 상에 가이드 라인을 만들어 주어 %로 비율을 쉽게 가시적으로 볼 수 있다 , 디자인 화면 가이드 라인 왼쪽에 작은 원을 클릭하면 길이비율에서 % 비율로 바꾸어 볼 수 있다

     

 

 

 

 

 

(2) - 높이를 0dp로 해주어야 우리가 constraintLayout을 이용하여 가이드라인을 기준 삼아 수동으로 만든 높이를 사용하겠다는 뜻이 된다

    - 최 상단에 높이 0dp로 만들어진 LinearLayout의 중앙 원 부분을 드래그 하여 80%로 설정해 놓은 가이드라인 쪽을 향하여 드롭한다 

    -다시 가이드라인으로 떨어진 LinearLayout의 상단 원부분을 잡아 드래그하여 최상단에 드롭한다

   -  수동으로 지정한 범위만큼 비어있는 LinearLayout이 생겼다

 

   (3) -  비어있는 LinearLayout의 weightSum을 4로 주고 안에 TextView 4개를 만들어 각각 weight를 1씩 준다(4등분)

 

 

 (4) - marginTop 과 marginBottum으로 간격을 주고 각 텍스트뷰에 텍스트를 써넣음과 동시에 gravity를 center로 주어

       가운데 정렬까지 해준다

     - 추가로 각 텍스트뷰에 id값을 준다

 

 (5) - 뒤로가기버튼 ImageView를 만들고 constraintLayout을 코드를 이용하여 사용해보자

     -  뒤로가기 이미지 아이콘의 좌우위아래 4개의 중앙원 중에서 위쪽은 constraintStart 아래쪽은 constraintBottum,

        좌측은  constraintStart, 우측은 constraintEnd를 나타낸다

     - app:layout_constraintStart_toStartOf ="parent"는 이미지아이콘의 좌측원을 parent즉 전체 화면의 start(시작지점)         에 맞추라는 뜻이고

     -app:layout_constraintTop_toBottomOf = "@+id/guideline"은 이미지아이콘의 위쪽원을 가이드라인의 bottom

      (아래지점)에 맞추라는 뜻이다

      *constraintLayout 방식에서 위아래 원중 하나 , 좌우 원중 하나를 꼭 맞추어 주어야 오류가 나지 않는다

 

 

3.fragment_result.xml 디자인

   * textsize의 단위는 sp

   * 드래그로 수동조작한 constraintlayout에 height를 wrap_content로 주면 가운데 정렬이 되도록 만들 수 있음