elevne's Study Note

Android 시작 (3: Layout) 본문

Frontend/Android

Android 시작 (3: Layout)

elevne 2022. 12. 1. 22:42

Android에서 사용할 수 있는 layout 들에 대해 알아보았다. 대표적인 layout들은 다음과 같다.

 

 

 

Layout Description
Constraint Layout Anchor Point를 Constraint로 하여 화면을 구성한다. (Default Layout)
Linear Layout Box Model / 한 쪽 방향으로 차례대로 View를 추가하며 화면 구성
/ View가 차지할 수 있는 사각형 영역을 할당
Relative Layout Rule 기반 Model / Parent Container 혹은 다른 View와의 상대적 위치로 화면 구성
/ Constraint Layout을 사용하게 되면서 Relative Layout은 권장하지 않는다고 함
Frame Layout Single Model / 가장 상위에 있는 하나의 View or ViewGroup만 보여주는 방법
/ 여러 개의 View가 들어가면 중첩돼서 쌓이게 됨 => 여러 개의 View를 중첩한 후 각 View를 전환하여 보여주는 방식으로 자주 사용
Table Layout Grid Model / HTML에서 사용하는 정렬 방식과 유사

 

 

 

Linear LayoutBox Model이라고 적혀있는데, 이는 창고 안에 박스를 쌓는 것처럼 한 쪽 방향으로 View들이 쌓이기 때문이다. 가로 방향은 Horizontal, 세로는 Vertical로 지정하는데, Linear Layout안에 또 Linear Layout을 넣음으로써 복잡한 화면을 구성할 수도 있다.

 

 

 

Relative Layout은 부모 Container과의 상대적 위치 또는 같은 Layout 안에 들어 있는 다른 View와의 상대적 위치를 기준으로 화면을 배치하는 layout이다.

 

 

 

Frame Layout은 가장 위에 있는 하나의 View만 보여준다. 만약 그 안에 여러 개의 View나 ViewGroup이 있다면 나머지는 그 아래에 중첩되어 쌓인다. 이 Layout은 손쉽게 View를 바꿔 사용자에게 보여줄 수 있어서 상당히 많이 사용된다고 한다. 

 

 

 

Table Layout은 그 안에 들어가는 View들을 Grid 형태로 배치한다. 

 

 

 

참고) Scroll View는 하나의 View나 ViewGroup을 넣을 수 있는데 이는 어떤 View의 내용물이 넘치게 되면 Scroll을 만들 수 있도록 도와준다. 

 

 

 

위 모든 Layout에는 이전 글에 작성한 것처럼 layout_width, layout_height를 넣어주어야 하고, Linear Layout의 경우에는 orientation (Horizontal || Vertical) 값을 넣어주어야 한다. 

 

 

 

Java 파일에서 직접 View 부분을 조작하는 방법에 대해서 알아보았다. 예시로 아래와 같은 코드를 작성해줄 수 있다.

 

 

 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        LinearLayout mainLayout = new LinearLayout(this);
        mainLayout.setOrientation(LinearLayout.VERTICAL);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );

        Button button1 = new Button(this);
        button1.setText("BUTTON 1");
        button1.setLayoutParams(params);
        mainLayout.addView(button1);

        setContentView(mainLayout);
    }

 

 

 

코드를 보면 각 코드가 의미하는 바를 직관적으로 이해할 수 있다. 

 

 

 

Frame Layout을 사용한다면 아래와 같이 코드를 작성해볼 수 있다.

 

 

 

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    ImageView imageView2;

    int imageIndex = 0;

    @SuppressLint("MissingInflatedId")
    @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;
        }
    }
}

 

 

 

위 코드 또한 어렵지 않게, 직관적인 이해가 가능하다. 다음 시간에는 스크롤뷰에 대해 좀 더 알아보고 다른 문제들을 java 파일의 코드를 활용하여 해결해보도록 하겠다!

'Frontend > Android' 카테고리의 다른 글

Android 시작 (4: Layout, View 활용 예제)  (0) 2022.12.02
Android 시작 (2: View)  (0) 2022.11.30
Android 시작 (1)  (0) 2022.11.28