(22.11.26)Android 프로그래밍: 레이아웃과 XML파일 없이 Java로만 레이아웃 만들기

●●레이아웃의 개념●●

 

 

버튼, 텍스트 뷰, 에디트텍스트 등 안드로이드에서 사용하는 위젯은 레이아웃이라는 틀 위에 존재해야 한다. 레이아웃은 위젯을 배치하여 안드로이드 화면을 목적에 맞게 배열할 수 있게 한다.

레이아웃은 ViewGroup 클래스로부터 상속받으며 내부에 무엇을 담는 용도로 쓰인다. 즉 레이아웃 안에 존재하는 위젯을 배치하게 해준다. 레이아웃 중에서 가장 많이 사용되는  것은 리니어 레이아웃이며, 선형 레이아웃이라 한다.

레이아웃에는 대표적인 속성이 있다. 레이아웃도 뷰 클래스의 하위 클래스이므로 뷰 클래스의 XML속성과 메소드를 모두 사용할 수 있다.

 

 

 

●●레이아웃의 속성●●

 

orientation: 레이아웃 안에 배치할 위젯의 수직 또는 수평 방향을 설정한다.

gravity : 레이아웃 안에 배치할 위젯의 정렬 방향을 좌측, 우측, 중앙등으로 설정한다.

padding : 레이아웃 안에 배치할 위젯의 여백을 설정한다.

layout_weight : 레이아웃이 전체 화면에서 차지하는 공간의 가중값을 설정하는데, 여러 개의 레이아웃이 중복될 때 사용한다.

baselineAligned : 레이아웃 안에 배치할 위젯을 보기 좋게 정렬한다.

 

 

 

 

●●레이아웃의 종류●●

 

1. 리니어 레이아웃(선형 레이아웃)

레이아웃의 왼쪽 위부터 아래쪽(오리엔테이션을 vertical) 또는 오른쪽으로(오리엔테이션을 horizontal) 차례대로 배치한다.

 

2. 렐러티브레이아웃(상대 레이아웃)

위젯 자신이 속한 레이아웃의 상하좌우 위치를 지정하여 배치하거나 다른 위젯으로부터 상대적인 위지를 지정한다.

 

 

3. 테이블 레이아웃

행과 열의 개수를 지정한 테이블 형태로 위젯을 배열한다.

 

 

4. 그리드레이아웃

테이블레이아웃과 비슷하지만 행 또는 열을 확정하여 다양하게 배치할 때 더 편리하다.

 

 

5. 프레임레이아웃

위젯을 왼쪽 위에 일률적으로 겹쳐서 배치하여 중복되어 보이는 효과를 낼 수 있다. 여러 개의 위젯을 배치한 후 상황에 따라서 필요한 위젯을 보이는 방식에 주로 활용된다.

---

●●Java 코드로 화면 만들기●●

 

지금까지 작성한 프로젝트는 기본적으로 activity_main.xml에서 화면을 구성한 후 Java 파일 (MainActivity.java)의 setContentView() 메소드로 화면을 출력했다. 메인 Java코드의 setContentView() 메소드는 xml파일을 화면에 출력하는 기능을 한다. 여기서 R.layout.activity_main은 바로 activity_main.xml 파일을 의미하므로, 코딩한 activity_main.xml 파일이 화면에 출력되는 것이다.

하지만 XML파일을 사용하지 않고 Java코드만으로 화면을 구성하는 방법 또한 있다. 자주쓰지 않고 복잡하지만 화면을 직접 구성해야할 때 적용할 수 있다.

 

 

버튼을 클릭하면 토스트메시지가 출력되는 화면을 Java로만 코딩하기

 

MainActivity.java에서 Java로만 코딩할 것이기에  activity_main.xml 파일을 Delete 해준다. activity_main.xml을 삭제했으므로  xml파일을 화면에 출력하는 기능을 하는 setContentView() 메소드에 에러가 발생한다.

 

이를 주석처리 한 뒤 코딩해준다.

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
 
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);
 
        LinearLayout baseLayout = new LinearLayout(this);
        baseLayout.setOrientation(LinearLayout.VERTICAL);
        baseLayout.setBackgroundColor(Color.rgb(0,255,0));
        setContentView(baseLayout, params);
    }
}

8 ~ 10행 : LinearLayoutParams 변수를 선언한다. 생성자에서 파라미터는 layout_width, layout_height 중 2개를 지정할 수 있다. 다음 XML코드와 동일하다.

android:layout_width = "match_parent"
android:layout_height = "match_parent"

 

9 행 : 리니어레이아웃 변수를 선언한다. 다음 XML코드와 동일하다.

<LinearLayout> </LinearLayout>

 

10 행 : 리니어레이아웃의 orientation 속성을 지정한다. 다음 XML코드와 동일하다.

android:orientation="vertical"

 

11 행 : 레이아웃의 색상을 지정한다. 색상을 지정하기 위해서 Color.rgb() 정적 메소드를 사용하였는데, 파라미터로 (red, green, blue)를 전달한다. 각 색상에서 16진수 0~FF를 사용할 수 있으므로 10진수 0~255를 사용하면 된다. 다음 XML코드와 동일하다.

android:background="#00FF00"

 

12 행 : 준비된 리니어 레이아웃 변수를 화면에 출력한다. 파라미터로 레이아웃 클래스와 레이아웃을 사용한다.  activity_main.xml 파일을 사용한 코드의 6행과 같은 역할을 한다. 

 

실행결과:

 

 

해당 리니어레이아웃에 버튼을 만들고, 버튼을 클릭했을 때의 토스트 메시지를 작성하기

 

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
 
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);
 
        LinearLayout baseLayout = new LinearLayout(this);
        baseLayout.setOrientation(LinearLayout.VERTICAL);
        baseLayout.setBackgroundColor(Color.rgb(0,255,0));
        setContentView(baseLayout, params);
 
        Button btn = new Button(this);
        btn.setText("버튼입니다.");
        btn.setBackgroundColor(Color.MAGENTA);
        baseLayout.addView(btn);
 
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),
                        "코드로 생성한 버튼입니다.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

17 행 : 버튼 변수를 생성하기

18 행 : 버튼에 글자를 설정하기

19 행 : 버튼의 색상을 지정하기. 색상을 지정하는 다른 방식으로 Color 클래스에 상수로 지정된 color를 사용하였다.(MAGENTA)

20 행 : 준비된 버튼을 레이아웃에 출력한다. baseLayout은 앞서 생성한 리니어 레이아웃이다. 필요하다면 addView() 메소드에 위젯 변수와 레이아웃 파라미터를 넘길 수도 있다. 지금은 위젯 변수만 넘기고 레이아웃을 생략했는데, 이럴 경우 디폴트로 layout_width는 match_parent가 되고 layout_height는 wrap_content가 된다.

 

1 ~ 4 행을 XML코드로 표현 하자면 다음과 같다.

<Button
	android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FF00FF"
    android:text="버튼입니다."/>

22 ~ 30 행 :  버튼을 클릭했을 때 리스너를 코딩하기

 

실행결과 :

리니어레이아웃 상단에 생긴 버튼

 

버튼을 눌렀을 시 나타나는 토스트 메시지