레이아웃 익히기

이 글은 [Do it! 안드로이드 앱 프로그래밍](저자 정재곤, 출판사 이지스퍼블리싱) 교재를 보고 공부하며 정리한 글임.

---

대표적인 레이아웃으로 5가지가 있다

​

- ConstraintLayout

-LinearLayout

-RelativeLayout

-FrameLayout

-TableLayout(계산기 프로그램 만들때 나는 이걸 사용했다!)

​

제약 레이아웃은 저번장에서 공부했고.. 스터디 수업에서는 거의 LinearLayout 만 이용한다.

LinearLayout은 박스 모델을 사용하는 레이아웃이다.

Horizontal 가로, Vertical 세로 방향으로 지정한다. 아주 쉬운 레이아웃이라고 한다.

​

---

뷰의 영역 알아보기

​

우리가 보이는 뷰의 테두리 공간 안쪽을 Padding 이라고 한다.

그리고 테두리선으로 부터 바깥쪽으로는 margin 이라고 생각하면 된다.

예를 들어서 버튼에 글자를 넣으면 테두리 선과 글자 사이에는 padding이 있겠지?

이 글자를 content 라고 한다. 둘의 사이에는 공간이 있는거다.

​

layout_marginTop

layout_marginBottom

layout_marginLeft

layout_marginRight

layout_margin

​

padding

paddingTop

paddingBottom

paddingLeft

paddingRight

​

이 속성들을 이용해 조절할 수 있다.

​

---

자바코드에서 화면 구상하기

​

LayoutCodeActivity.java 를 새로 만들어줬다.

이걸 메인 액티비티로 만들고싶으면 ...

AndroidMainfest.xml에 들어가서 name 속성을 저걸로 바꾸어 주면 된다.

---

<화면 생성 과정 분석하기>

원래는 setContentView 안에 R.layout.activity_main 같이 레이아우승로 정의된 리소스를 가리키도록 했었는데

저 코드에서는 자바 코드에서 만든 레이아웃을 가리키도록 수정한거다.

어쨌든 저 메서드 안에 파라미터로 전달하는 레이아웃이 화면에 표시된다는걸 알 수 있다.

​

아 뭔가 책에 설명이 많다. 자바코드로 레이아웃을 짜는(저 위에 사진처럼) 방법인데

대부분은 xml 을 사용하니까..그래도 넘어가기 찝찝해서 정리하자면

​

자바 소스코드에서 뷰를 만들어 뷰그룹에 추가할때에는 뷰 배치를 위한 속성을 설정할 수 있는 LayoutParams 객체를 사용한다. 반드시 가로 세로 속성을 지정해야하고 LayoutParams.MATCH_PARENT 와 LayoutParams.WRAP_PARENT 중 하나 사용 가능

레이아웃에 뷰를 추가하려면 addView() 메서드를 사용

addView 로 버튼을 추가했다.

---

<뷰 정렬하기>

​

리니어 레이아웃 안에 들어 있는 뷰는 방향을 지정해서 정렬할 수 있다.

이게 gravity 다.

​

layout_gravity : 부모 컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유 공간이 생겼을 때

여유공간안에서 뷰를 정렬함 -> width 나 height 를 wrap_content로 만들어줘야 사용가능

gravity : 뷰 안에 표시하는 내용물을 정렬함(글자나 이미지)

​

연습한것!

​

주의할 점: 버튼이나 텍스트뷰의 크기를 wrap_content 로 지정하면 gravity 해도 변화가 없을거다.

이미 뷰의 크기가 안에 내용물의 크기에 맞게 고정되어 버렸기 때문에.

---

<baseline 에 대해서>

폰트크기가 달라서 나란히 정렬이 안되는 경우가 있을 것이다. 이럴때 baseline을 사용

​

false 값으로 해주면 저렇게 되고

true 면 저렇게 된다.

아무것도 안적었을 때에는 true 와 같다.

---

margin 과 padding 쓰기

텍스트뷰 3개 가지고 margin 과 padding을 써보았다.

layout_margin 은 위아래 오른쪽왼쪽 다 한꺼번에 조절 가능하다

​

---

layout_weight 속성

내가 추가한 뷰들을 제외한 나머지 여유 공간은 이 layout_weight 속성으로 분할 할 수가 있다.

하나를 1을 주고 하나를 2를 주면

첫번째꺼는 3분의 1을 차지하게 되고

두번째 꺼는 3분의 2를 차지하게 되는... 그런 개념이다.

---

상대 레이아웃은 별로 권장하지 않는다고 해서 패스

​

테이블 레이아웃은 표나 엑셀 시트 같은 것들을 만들때 유용하긴하다.

굉장히 간단해서.

그냥 TableRow 라는 태그를 이용하면된다.

이 태그는 한 행을 의미한다. 만약에 쓰고 싶으면 그때 검색해서 써도 무방할 것 같다. 이미한번 해봤으니까?

​

앗 근데 프레임 레이아웃은 처음본다

---

<프레임 레이아웃과 뷰의 전환>

​

프레임 레이아웃은 가장 기본적이고 단순한 레이아웃이다.

프레임 레이아웃에 뷰를 넣으면 그중에 하나만 화면에 표시된다. 의외로 자주 사용된다고 한다.

이건 중첩의 기능을 가지고 있다. 가장 위에 있는 뷰를 보이지않게 하면 다음 뷰가 보이고...

보이거나 보이지 않게 하는 속성이 visibility 이다

여러개의 뷰를 전환할 때 사용한다

​

속성의 이름은 visibility 이고 값은 visible, invisible, gone 중 하나로 설정가능하다고 한다.

자바 코드에서 설정하고 싶으면 setVisiblity 메서드 사용.

​

일단 이런식으로 짜주었다.

button 밑에 FrameLayout 이 꽉 채우고 있고 여기에는 ImageView 가 두 개 들어있다.

그럼 이제 java 소스 파일에서 버튼 누를 때마다 이미지 뷰가 가지는 visibility 속성이 바뀌도록 할 것이다

​

package org.techtown.practice;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    
    ImageView imageView;
    ImageView imageView2;
    
    int imageIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v){
        changeImage();
    }
    
    private void changeImage()
    {
        if(imageIndex==0){
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.INVISIBLE);
            
            imageIndex=1;
        } 
        else if(imageIndex==1){
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            
            imageIndex = 0;
        }
    }
}

xml 레이아웃 파일에서 id 를 지정할 때에는 @+id/아이디

이런 형식이고

자바 소스코드에서 참조할 때에는 R.id.아이디

이런 형식이다.

​

그리고 setContentView(R.layout.activity_main) 이 메서드로 xml 파일을 파라미터로 넘겨줘서

xml 파일과 소스 파일이 연결된다고 볼 수 있겠다.

이렇게 파일끼리 연결시키면 xml 파일에 있는 뷰를 찾아서 사용할 수 있을 것이다

findViewById 를 통해서 하는 것이다.

---

<스크롤뷰 사용하기>

단순히 스크롤뷰를 추가하고 그 안에 뷰를 넣으면 스크롤이 생긴다.

​

ScrollView 는 기본적으로 수직방향으로 스크롤을 지원

수평방향으로 스크롤하려면 HorizontalScrollView 사용

​