[Android] - Layout이란

🔎학습목표

• layout의 종류와 쓰임 알기
• LinerLayout
• RelativeLayout
• FrameLayout
• GridLayout
• ConstraintLayout

✔목차

💡LinearLayout
💡RelativeLayout
💡FrameLayout
💡GridLayout
💡ConstraintLayout

📗안드로이드 네임 스페이스

💡네임 스페이스

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"

 

• -xmlns: prefix = "URI"
  • 요소의 시작 태그에서 xmlns 속성으로 정의
  • xml 문서에서 이름 충돌을 피하기 위해 작성
  • Android 관련 태그를 xml 문서에서 인식하기 위함
• xmlns : android 
  • 안드로이드 SDK에 있는 기본 속성 사용
• xmlns  : app
  • 외부 라이브러리에 포함된 속성 사용
• xmlns : tools 
  • 안드로이드 스튜디오의 디자이너 도구 등에서 화면 표시에 사용

 

 

 

📗선형 배치 : LinearLayout

💡LinerLayout 배치 규칙

• View를 가로나 세로 방향으로 나열하는 레이아웃
• android : orientation 속성에 horizontal이나 vertical 값으로 방향 지정

 

위 코드는 LinearLayout에 오리엔테이션을 "horizantal"로 줘서 버튼을 가로로 나열했습니다.

여기서 세로로 나열하고 싶다면 오리엔테이션을 "vertical"로 바꿔주시면 됩니다.

💡LinearLayout 중첩

• 레이아웃 클래스도 View이므로 다른 레이아웃 클래스에 포함할 수 있음.

💡여백을 채우는 layout_weight 속성

• View 1개로 전체 여백 채우기
  • 여백을 View로 채우려면 layout_weight 속성(가중치)을 사용
  • android : layout_weight=  "숫자"

 

💡layout_weight를 통해서 원하는 비율로 화면을 조정할 수 있습니다.

• 만약 버튼1과 버튼 2의 크기를 1대 3으로 조정하고 싶다면
• 버튼 1의 layout_weight를 "1"로 주고, 버튼 2의 layout_weight를 "3"으로 주시면 됩니다.
• 이렇게 된다면 가로여백 or 세로 여백을 각각 1/4, 3/4만큼 나누어 차지하게 됩니다.
• 만약 layout_weight를 동일하게 줄 경우 동일한 크기로 화면을 차지하게 됩니다.

 

💡뷰 정렬 : gravity, layout_gravity 속성

• gravity 
  • 자신의 view에 포함된 위젯이나 데이터(텍스트)를 정렬
• layout_gravity : 뷰 자체를 정렬
  • 자신을 포함하고 있는 부모 위젯 레이아웃에서 정렬

 

texView 안에 선언된 android:gravity는 textView에 포함된 위젯이나 데이터 텍스트의 속성을 의미하고,
android:layout_gravity는 TextView를 포함하고 있는 부모 레이아웃에서의 자신의 속성을 의미한다.
즉 Textview에서 선언된 android:layout_gravity랑 LinerLayout에서 선언된 android:gravity는 똑같다.

 

 

 

 

📗상대 위치로 배치 : RelativeLayout

 

💡RelativeLayout 배치 규칙 

• 상대 view의 위치를 기준으로 정렬하는 레이아웃
• 상대 view를 알기 위해서는 그 view의 id를 알아야 함. 
  • android:layout_above : 기준 뷰의 위쪽에 배치
  • android:layout_below : 기준 뷰의 아래쪽에 배치
  • android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치
  • android:layout_toRightOf: 기준 뷰의 오른쪽에 배치

💡맞춤 정렬 : align 속성

• 상대 view의 어느 쪽에 맞춰서 정렬할 것인지 정하는 속성
  • android:layout_aligntop : 기준 뷰와 위쪽을 맞춤.
  • android:layout_alignBottom: 기준 뷰와 아래쪽을 맞춤.
  • android:layout_alignLeft : 기준 뷰와 왼쪽을 맞춤.
  • android:layout_alignRight : 기준 뷰와 오른쪽을 맞춤. 
  • android:layout_alignBaseLine :  기준 뷰와 텍스트 기준선을 맞춤.

위치와 정렬을 헷갈리지 말자!

 

💡상대 레이아웃을 기준으로 맞춤 정렬하는 속성

• android:layout_alignParentTop
• android:layout_alignParentBottom
• android:layout_alignParentLeft
• android:layout_alignParentRight
• android:layout_centerHorizontal : 부모의 가로 방향 중앙에 맞춤.
• android:layout_centervertical : 부모의 세로 방향 중앙에 맞춤.
• android:layout_centerInParent : 부모의 가로 세로 중앙에 맞춤.

각 속성은 이름 그대로 직관적이기에 설명을 생략할 예정이다

 

 

 

📗겹쳐서 배치 : FrameLayout

💡FrameLayout

• 카드를 쌓듯이 view를 추가한 순서대로 겹쳐서 출력하는 레이아웃
• View의 표시 여부를 설정하는 visibility 속성을 함께 사용

위 화면처럼 모든 속성들이 겹쳐서 출력되기 때문에 visibility 속성을 사용해서 무엇을 먼저 보여줄지 정해줘야 한다.

 

💡visibility 속성 사용

• view binding 설정 
• gradle파일(module)에서  android 본문 안에서 아래 문구를 추가해줘야 한다.

buildFeatures {
    viewBinding=true
}

각 버튼을 누르게 되면 -> 화면으로 넘어가게 되는데 이건은 view binding과 visibility를 사용해서 구현할 수 있다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
       // setContentView(R.layout.linearlayout_weight02)
        val binding = Framelayout01Binding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.imageView.visibility=View.INVISIBLE
        binding.button2.visibility=View.INVISIBLE
        binding.button.setOnClickListener {
            binding.button.visibility=View.INVISIBLE
            binding.imageView.visibility=View.VISIBLE
            binding.button2.visibility=View.INVISIBLE
        }
        binding.imageView.setOnClickListener {
            binding.button.visibility=View.INVISIBLE
            binding.imageView.visibility=View.INVISIBLE
            binding.button2.visibility=View.VISIBLE
        }
        binding.button2.setOnClickListener {
            binding.button.visibility=View.VISIBLE
            binding.imageView.visibility=View.INVISIBLE
            binding.button2.visibility=View.INVISIBLE
        }
    }
}

처음에 보여주고자 하는 구성요소 빼고 모두 invisible로 초기에 선언한 뒤

버튼을 누르면 동작하게 되는 함수인 setOnclickListener로 visible를 바꿔주었다.

 

 

 

📗표 형태로 배치 : GridLayout

💡GridLayout 배치 규칙

• 테이블 화면을 만드는 레이아웃
• orientation 속성으로 가로나 세로 방향으로 뷰를 나열 (LinearLayout과 동일)
• 줄 바꿈을 자동으로 해줌
  • orientation : 방향 설정
  • rowCount : 세로로 나열할 뷰 개수 -> orientation이 vertical인 경우
  • columCount : 가로로 나열할 뷰 개수 -> orientation이 horizontal인 경우 

🔎만약 아무 옵션도 주지 않을 경우 view는 기본 wrap_content로 지정됩니다.

columnCount가 3인경우 3개에서 줄바꿈

rowCount가 3인경우 3개에서 줄바꿈

💡특정 뷰의 크기 확장

• layout_gravity ="fill_@"로 이용해서 뷰의 크기를 확장한다.

 

💡열이나 행 병합하기

• layou5_columnSpa : 가로 열 병합
• layout_rowSpan : 세로 행 병합

 

 

 

📗ConstraintLayout

💡ConstraintLayout

• 안드로이드 플랫폼이 아닌, androidx에서 제공하는 라이브러리
• 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공
• 가장 최근에 생성된 레이아웃
• 제약조건을 정의하지 않으면 오류 발생.

 

💡제약 조건 또는 구속조건

• 위제읫 네 모서리에 제약 조건을 만들 수 있음.
  • 위젯의 왼쪽, 위쪽, 오른쪽, 아래쪽
  • Center 속성이 없음.

 

💡ConstraintLayout  : 기본 용어

🔎배치를 위한 기준값

 

Start/left , End/Right : 설정된 언어에 따라 다르다. [ 나라마다 기준이 다르기 때문]

 

🔎ConstLayout 속성

 

 

💡ConstraintLayout : bias 설정 (치우침)

• app: layout_constriantHorizontal_bias : 가로  [ 0.5를 기준으로 작으면 center 기준 왼쪽, 크면  오른쪽]
• app: layout_constriantvertical_bias : 세로 [0.5를 기준으로 크면 center 기준 아래쪽, 작으면 위쪽]

 

💡ConstraintLayout : Chain

• Chain 
  • 오른쪽 그림과 같이 서로 연결시킴
• Button1
  • app : layout_constraintRight_toLeftOf="@+id/button2"
    • 버튼 1의 오른쪽 제약 조건 : button2의 왼쪽
• Button2 
  • app :layout_constraintLeft_toRightOf = "@+id/button1"
    • 버튼 2의 왼쪽 제약조건 : button1의 오른쪽

💡ConstraintLayout : Chain의 종류

• Spread chain (디폴트 모드)
  • 각 뷰들이 동일한 간격을 가짐.
• Spread insdie chain
  • 뷰들의 바깥쪽 위치가 가장자리에 위치
  • 내부 공간에서는 동일한 간격을 가짐.
• Packed chain
  • 뷰들이 붙어있는 형태임.

 

💡ConstraintLayout : 원형 위치 지정

🔎원형 위치 지정(Circular Positioning)

• 360도 방향으로 상대 위치를 지정할 수 있음.
• 주어진 반지름만큼 떨어진 원둘레의 한 지점에 뷰를 배치
• 속성
  • layout_constraintCircle 
    • 대상 뷰 위젯 지정
  • layout_constraintCircleRadius 
    • 뷰 위젯과 대상 뷰 위젯 중심 사이의 거리
  • layout_constraintCircleAngle 
    • 원둘레에서 뷰 위젯이 배치될 각도 0~360 사이의 정수 값