[Android] 07. 뷰를 배치하는 레이아웃

 뷰를 배치하는 레이아웃

뷰를 배치하는 레이아웃

목차

  • 07-1 선형으로 배치 - LinearLayout
  • 07-2 상대 위치로 배치 - RelativeLayout
  • 07-3 겹쳐서 배치 - FrameLayout
  • 07-4 표 형태로 배치 - GridLayout
  • 07-5 계층 구조로 배치 - ConstraintLayout
  • 07-6 전화 앱의 키패드 화면 만들기


07-1 선형으로 배치 - LinearLayout

✅ LinearLayout 배치 규칙

LinearLayout

  • LinearLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃이다.
  • orientation 속성에 horizontal이나 vertical값으로 방향을 지정한다.


LinearLayout 예시
LinearLayout 예시

LinearLayout 예시
  • LinearLayout을 중첩할 수 있다.
  • 레이아웃 클래스도 뷰이므로 다른 레이아웃 클래스에 포함할 수 있다.


✅ 여백을 채우는 layout_weight 속성

  • 뷰 1개로 전체 여백 채우기
    • 여백을 뷰로 채우려면 layout_weight 속성을 사용한다.


  • 뷰 여러 개로 여백을 나누어 채우기
    • layout_weight 속성에 지정한 숫자는 가중치
    • layout_weight 값을 각각 1과 3으로 선언했다면 가로 여백을 각각 1/4만큼, 3/4만큼 나우어 차지



  • 중첩된 레이아웃에서 여백 채우기


  • 여백 채우기로 뷰의 크기 설정하기


✅ 뷰를 정렬하는 gravity, layout_gravity 속성

  • 뷰에 gravity와 layout_gravity 속성 적용하기
    • gravity속성의 정렬 대상은 콘텐츠
    • layout_gravity는 뷰 자체를 정렬하는 속성


  • 레이아웃 gravity 속성 적용하기



07-2 상대 위치로 배치 - RelativeLayout

✅ RelativeLayout 배치 규칙

  • 상대 뷰의 위치를 기준으로 정렬하는 레이아웃
    • android:layout_above: 기준 뷰의 위쪽에 배치
    • android:layout_below: 기준 뷴의 아래쪽에 배치
    • android:layout_toLeftOf: 기준 뷰의 왼쪽에 배치
    • android:layout_toRightOf: 기준 뷰의 오른쪽에 배치


✅ 맞춤 정렬하는 align 속성

  • 상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정하는 속성
    • android:layout_alignTop: 기준 뷰와 위쪽을 맞춤
    • android:layout_alginBottom: 기준 뷰와 아래쪽을 맞춤
    • android:layout_alignLeft: 기준 뷰와 왼쪽을 맞춤
    • android:layout_alignRight: 기준 뷰와 오른쪽을 맞춤
    • android:layout_alginBaseLine: 기준 뷰와 텍스트 기준선을 맞춤


  • 상위 레이아웃을 기준으로 맞춤 정렬하는 속성
    • android:layout_alignParentTop: 부모의 위쪽에 맞춤
    • android:layout_alignParentBottom: 부모의 아래쪽에 맞춤
    • android:layout_alignParentLeft: 부모의 왼쪽에 맞춤
    • android:layout_alignParentRight: 부모의 오른쪽에 맞춤
    • android:layout_centerHorizonotal: 부모의 가로 방향 중앙에 맞춤
    • android:layout_centerVertical: 부모의 세로 방향 중앙에 맞춤
    • android:layout_centerInParent: 부모의 가로/세로 중앙에 맞춤



07-3 겹쳐서 배치 - FrameLayout

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


  • visibility 속성값을 바꾸는 액티비티 코드의 예입니다.



07-4 표 형태로 배치 - GridLayout

✅ GridLayout 배치 규칙

  • 테이블 화면을 만드는 레이아웃이다.
  • orientation 속성으로 가로나 세로 방향으로 뷰를 나열한다.
  • 줄바꿈을 자동으로 해준다.
    • orientation: 방향 설정
    • rowCount: 세로로 나열할 뷰 개수
    • columnCount: 가로로 나열할 뷰 개수


  • 행 개수 지정하는 예이다.


✅ GridLayout 속성

  • 특정 뷰의 위치 조정하기
    • layout_row: 뷰가 위치하는 세로 방향 인덱스
    • layout_column: 뷰가 위치하는 가로 방향 인덱스


  • 특정 뷰의 크기 확장하기
    • layout_gravity 속성을 이용한다.


  • 한 칸에 뷰를 여러개 표시


  • 열이나 행 병합하기
    • layout_columnSpan: 가로로 열 병합
    • layout_rowrSpan: 세로로 행 병합



07-5 계층 구조로 배치 - ConstraintLayout

  • androidx에서 제공하는 라이브러리


✅ 레이아웃 편집기에서 레이아웃 구성하기

  • 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공한다.
  • 레이아웃 편집기를 제공한다.

  1. 팔레트(Palette)
  2. 컴포넌트 트리(Component Tree)
  3. 툴바(Toolbar)
  4. 디자인 편집기(Design editor)
  5. 속성(Attributes)
  6. 보기 모드(View mode)
  7. 화면 조절(Zoom and pan control)





  • 이미지 추가 예시이다.






  • 제목 추가 예시이다.



  • 메시지 추가 예시이다.



07-6 전화 앱의 키패드 화면 만들기

✅ 1단계: 새로운 모듈 생성하기

  • Ch7_Layout이라는 이름으로 새로운 모듈을 만든다.


✅ 2단계: 실습 파일 복사하기

  • add.png, back.png, call.png, video.png 파일을 res/drawable 디렉터리에 복사한다.


✅ 3단계: 메인 액티비티 작성하기

  • activity_main.xml 파일 작성한다.


✅ 4단계: 앱 실행하기






댓글

댓글 쓰기

이 블로그의 인기 게시물

[컴퓨터] Office 무료 설치

이미지
  Office 무료 설치 목차 웹페이지 접속 및 다운로드 Office 설치 KMS Auto Net   (  www.heidoc.net/joomla/technology-science/microsoft/8-office-2016-direct-download-links  )  위 사이트 들어가서 "Ctrl+F" 검색에서 "korean" 검색한다.  Office 2016 Professional 또는 Office 2016 Professional Plus 를 선택한다. 개인적으로 Plus를 추천한다. (추천 이유는 이후에 설명하도록 하겠습니다.)  다운 받은 후 설치 방법은 ISO 파일을 "떠블 클릭"하면 가상드라이브가 만들어지고, 해당 폴더 안쪽에 보면 setup.exe 파일이 있다. 이를 클릭해서 설치를 진행한다.  설치 이후에 Word 2016을 실행하면, 사용기간은 한달이고, 인증하라고 메세지가 나온다.  첫번째, Key 확인해본다. Plus 키와 중복되어 있는 듯...  <아래 댓글 참고>  두번째, KMS Auto Net을 이용하는 방법 (댓글 다운로드), 이 방법의 경우 Plus를 경우가 정상적 으로 되는 것으로 확인되었다. (Office 2016 Professional은 사용자가 많아서 인지 실패...) |   KMS Auto Net  상단의 Activation은 Windows 10 & Office Activation에 관한 부분이다. 클릭을 하면 Windows 와 Office에 대한 메뉴가 나온다. Office를 클릭을 하고 진행하면 된다. Office 설치 후 로그인 KMS 실행 시, "... → VL" 팝업 나타남, [OK] "Create... "나오면, [OK] Word 2016 실행, 계정 들어가서 라이센스 인증 확인 업데이트 안함 설정함 감사합니다. (-_-)(_-_)(-_-)
Read more »

[컴퓨터] iptime 관리자계정 찾기 및 설정

이미지
iptime 관리자계정 요약 공유기 주소 확인 공유기 관리 도구 [고급 설정] - [시스템 관리] - [관리자 설정] 공유기 초기화 공유기 인증 방법  공유기는 인터넷과 직접 연결되어 있는 장비로 문제 발생이나 환경설정을 바꿀 때는 공유기 관리 도구를 접속해야 합니다.  ​그래서 공유기 접속할 땐 관리자 계정과 비번이 필요하죠​.  그런데 급할 땐 생각이 안 나는 걸까요? ​   공유기 설정을 변경하지 않았다면 기본설정 아이디와 비번은 admin / admin 입니다. ​​  혹시 iptime 관리자계정 접속 하는 공유기 주소는 알고 계시나요? ​  모르신다면 이것부터 확인하셔야 합니다.^^​  (그래야 계정 찾기가 가능합니다.​)   공유기 주소 확인 하는 건 별로 어렵지 않으시죠? ​ 간혹 192.168.0.1 로 접속이 안되는 경우가 있습니다.  이럴 땐 주저하지 마시고 덧글 남겨주세요.  확인해서 답변드리겠습니다.^^   공유기 관리 도구 에 접속하게 되면, 위 이미지와 같은 화면을 보실 수 있습니다.  (공유기 모델 및 회사에 따라 차이가 있음) 메뉴 탐색기에서 [고급 설정] - [ 시스템 관리] 를 선택해줍니다.   [시스템 관리] 를 클릭하게 되면 하위 메뉴가 열리고 [관리자 설정] 메뉴를 보실 수 있습니다.​ 아래 [관리자 설정] 메뉴를 클릭해주세요~  위 화면처럼 [관리자 설정] 을 클릭하게 되면, 오른쪽에 관리자 설정 상세 페이지 가 열립니다.​  위에 빨간 박스 안에는 현재 관리자 계정 및 암호 글씨가 보이시죠?  이곳에서 iptime 관리자계정을 확인할 수 있으며 비밀번호는 암호화되어있어 확인이나 찾기가 불가능합니다. (이곳까기 들어온 상태면 암호는 알고 계시죠?)  암호를 몰라 접속을 못했거나 우연히 접속했다면 당연히 공유기 초기화를 통해 접속해야 합니다. (공유기 뒷쪽 작...
Read more »

[컴퓨터] 윈도우11 디펜더 끄기

이미지
  윈도우11 디펜더 끄기 목차 Windows 설정에서 Microsoft Defender 끄기 (임시) 그룹 정책 편집기를 이용해 Microsoft Defender 끄기 (영구적) 레지스트리 편집기를 이용한 Microsoft Defender 끄기 (영구적) 추가 참고 사항  Windows 11에서 Microsoft Defender(구 Windows Defender)를 끄는 방법을 좀 더 상세히 설명하겠습니다. 두 가지 주요 방법이 있습니다: 설정에서 끄는 방법 과 그룹 정책 편집기를 사용하는 방법 입니다. 하지만 이 기능을 끄는 것은 컴퓨터를 악성코드나 바이러스로부터 보호할 수 없게 되므로, 매우 신중하게 해야 합니다. |   Windows 설정에서 Microsoft Defender 끄기 (임시) Windows 11에서는 Microsoft Defender의 실시간 보호 기능을 끌 수 있습니다. 이 방법은 임시로 끄는 방법이며, 나중에 자동으로 다시 켜질 수 있습니다. 단계: Windows 설정 열기 Windows + I 키를 눌러 Windows 설정을 엽니다. 개인정보 및 보안 선택 왼쪽 메뉴에서 개인정보 및 보안 을 선택한 후, 오른쪽에서 Windows 보안 을 클릭합니다. 바이러스 및 위협 방지 선택 "바이러스 및 위협 방지" 항목을 선택합니다. 설정 관리 선택 바이러스 및 위협 방지 화면에서 설정 관리 (또는 바이러스 및 위협 방지 설정 에서 설정 관리 )를 선택합니다. 실시간 보호 끄기 실시간 보호 를 끔 으로 변경합니다. 이 기능을 끄면 시스템이 바로 보호되지 않으며, 다시 켜기 전까지 바이러스나 악성코드의 위협에 노출됩니다. 주의: 이 설정은 일시적 입니다. Windows가 자동으로 다시 활성화할 수 있습니다. 이 방법은 시스템을 완전히 보호 해제하는 것이 아니며, 재부팅 후 자동으로 다시 켜질 수 있습니다. |   그룹 정책 편집기를 이용해 Microsoft Defender 끄기 (영구적) 이 방법은 Wi...
Read more »