2023.02.09 - 안드로이드 앱개발자 과정

CHA·2023년 2월 14일
국비안드로이드앱
0

안드로이드 국비과정

목록 보기
27/53

Android

안드로이드의 경우 xml 과 java 를 이용하여 앱을 만들 수 있습니다. 기존에 살펴봤듯, 스윙을 이용한 자바의 코드는 화면의 구성 코드와 기능 구현의 코드가 합쳐져 있어 매우 복잡하며 화면이 어떻게 구성되는지 알기 쉽지 않습니다. 그래서 안드로이드에서는 xml 을 활용하여 화면 구성은 xml 로, 기능의 구현은 java 를 활용하는 방식을 채택했습니다. 다만, 안드로이드에서 역시 자바만으로 화면을 구성하는것도 가능합니다. 이번에는 자바를 이용한 화면 구성을 한번 살펴봅시다.

Java 를 이용한 화면 구성

TextView 로 문구 띄우기

프로젝트를 실행하면 MainActivity.java 에는 다음 코드 setContentView(R.layout.activity_main); 가 미리 작성되어 있습니다. R.layout.activity_main 은 res 폴더에 있는 layout 폴더의 activity_main.xml 파일을 의미합니다. 즉, xml 로 작성된 화면구성을 보여주라는 의미의 코드 입니다. 우리는 Java 를 이용한 화면구성을 해볼 참이니 이 코드는 주석처리 해줍시다. 그리고 가볍게 텍스트 뷰 하나를 활용하여 화면에 글씨를 보여주는 뷰를 하나 만들어 화면에 띄워봅시다. 

public class MainActivity extends AppCompatActivity {
    TextView tv;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        tv = new TextView(this);
        
        tv.setText("Hello World");
        setContentView(tv);
    }

TextView tv; 로 TextView 의 참조변수 하나를 만들었습니다. 참조변수를 만들때 주의할 점은 클래스의 멤버변수로 선언해주는게 좋다는 점입니다. 안드로이드 앱의 실행순서를 생각해봅시다. 먼저, manifest 파일이 실행되고, intent-filter 가 있는 자바 파일을 실행합니다. 그 안에 있는 클래스를 메모리에 올리고 콜백 메서드인 onCreate() 를 실행합니다. 만일, TextView 의 참조변수를 onCreate() 메서드에서 실행한다면, 그 메소드가 끝날 때 이 참조변수는 더 이상 사용할 수 없게 됩니다. 그렇기 때문에 뷰의 참조변수는 클래스의 멤버변수로 선언한다는 점을 꼭 기억합시다.

그리고 나서 참조변수에 뷰 객체를 생성하여 객체의 주솟값을 담았습니다. 모든 뷰의 객체를 생성할 때는 객체의 생성자의 파라미터로 this 를 전달해주어야 합니다. 그 이유는 추후에 다시 알아보도록 하겠습니다.

객체를 생성했으니, 그 객체의 기능을 사용할 수 있게되었습니다. 이번에는 글씨를 만들어 화면에 띄워야 하므로, setText() 메서드를 사용하여 파라미터로 Hello World 를 넘겨주었습니다.

마지막으로 만들어진 텍스트뷰 객체를 화면에 표시해주는 setContentView(tv) 메서드를 실행합니다. 그러면 화면에 Hello World 가 표시된걸 볼 수 있습니다.

Button 띄워보기

이번에는 Button 객체를 이용하여 화면에 버튼하나를 만들어 봅시다. 

public class MainActivity extends AppCompatActivity {
    TextView tv;
    Button btn;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        tv = new TextView(this);
        tv.setText("Hello World");
        
        setContentView(tv);
        
        btn = new Button(this);
        btn.setText("버튼");
        
        setContentView(btn);
    }

이렇게 해놓고 실행을 해보면 오류가 납니다. setContentView() 가 두번 사용되었기 때문입니다. 즉, setContentView() 는 하나의 액티비티에 1개의 뷰만이 놓여질 수 있음을 의미 합니다. 그렇다면 1개의 액티비티에 여러개의 뷰를 놓을 수는 없을까요? 아니겠죠. 하나의 큰 뷰를 설정하고, 그 뷰안에 여러개의 뷰를 넣는 작업을 해주면 가능합니다. 이 큰 뷰를 ViewGroup 이라 하며, 대표적인 뷰그룹으로 레이아웃이 있습니다. 레이아웃은 차차 알아가보도록 하고, 이번에는 가장 간단한 LinearLayout 을 이용해 봅시다.

LinearLayout 을 이용한 화면 구성

레이아웃을 사용하는 방식은 자바의 스윙가 비스무리 합니다. 일단 코드 먼저 봅시다.

public class MainActivity extends AppCompatActivity {
    TextView tv;
    Button btn;
    LinearLayout layout;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        tv = new TextView(this);
        tv.setText("Hello World");
        
        btn = new Button(this);
        btn.setText("버튼");
        
        layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        
        layout.addView(tv);
        layout.addView(btn);
    }

리니어 레이아웃의 참조변수 하나를 만들고, 객체를 생성하여 주솟값을 담아주었습니다. setOrientation() 메서드를 통해 레이아웃 안쪽의 다른 뷰들이 어느쪽 방향으로 추가될것인지를 설정합니다. 여기에서는 수직방향으로 추가되게끔 설정했습니다.

그리고 addView() 를 통하여 레이아웃 안쪽에 뷰들을 추가해주었습니다. 파라미터로는 각 뷰 객체를 전달합니다. 이렇게 해서 레이아웃을 가지고 화면을 구성해보았습니다.

그런데 이렇게 자바만으로 화면을 구성하다보니, 레이아웃이 몇개인지, 버튼은 몇개인지 한눈에 잘 들어오지 않습니다. 자바로 화면을 구성하는것은 충분히 가능한 일이나, 복잡한 앱일수록 더욱 복잡해 집니다. 그러니 이번에는 xml 을 통한 화면구성을 한번 경험해봅시다.

xml 을 이용한 화면구성

앱의 화면을 구성한다는것은 겉보기에는 엄청 복잡해 보일지 모르지만, 그 구조는 생각보다 간단합니다. 어떠한 화면이든 간에 그 안에는 뷰들이 배치되어 있습니다.

뷰가 어떤 다른 뷰에 속하거나, 아니면 어떤 뷰 밑에 다른 뷰가 배치되거나 하는 등의 뷰들간의 관계가 있을겁니다. 그리고 각각의 뷰가 가지고 있는 사이즈, 텍스트, Id 값 등의 속성값을 가지고 있겠죠. 관계와 속성, 이 두가지면 화면을 만들 수 있습니다.

TextView

TextView 를 예시로 뷰의 속성을 알아봅시다.

  • layout_width , layout_height
    최상위 View 가 가지고 있는 속성 중에 layout_width 와 layout_height 이 있습니다. 이 두가지의 속성은 뷰라면 필수적으로 가져야 하는 속성입니다. 그래서 뷰를 생성하고자 할 때 필수로 값을 설정해주어야 합니다. 각각 뷰의 가로 길이와 세로 길이의 속성을 의미합니다.

    뷰의 크기값을 설정하는 방법 3가지

    1. match parent : 부모 레이아웃에 꽉 채워서 설정
    2. wrap content : 뷰에 들어있는 내용물을 감싸게 설정
    3. 단위 dp(density independent pixel) : 해상도에 따라 다르게 표현되는 단위. 예를 들어 어떤 핸드폰에서의 1px 은 다른 핸드폰에서 2px 로 표현될 수 있습니다. 여기서 단위를 dp 로 사용하면 완전하게는 아니지만, 비슷하게 유지가 가능합니다.

text / textSize

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:layout_marginTop="16dp"/>

text 속성을 이용하여 글자 내용을 작성할 수 있으며, textSize 를 통해 글자의 크기를 지정할 수 있습니다. 단, 글자의 크기를 지정할 때 단위는 sp 로 작성하길 권장합니다.

textColor

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:textColor="#D64545"
    android:layout_marginTop="16dp"/>

textColor 로는 글자의 색깔을 지정할 수 있습니다. 기본적으로 안드로이드 에서는 RGB 의 값으로 색을 지정할 수 있으며, "#FF0000" 와 같이 속성값을 지정할 수 있습니다. 16진수 6자리로 구성되며 앞의 두자리는 Red, 중간 두자리는 Green, 마지막 두자리는 Blue 입니다. 또한 미리 지정된 색도 사용할 수 있습니다. values 폴더 안에 colors.xml 에 지정되어 있는 색을 이용하여도 색 지정이 가능합니다. 속성값은 "@color/색 이름" 와 같이 사용합니다.

textStyle

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:textColor="#D64545"
    android:textStyle="bold|italic"
    android:layout_marginTop="16dp"/>


textStyle 속성은 글자의 스타일을 지정할 수 있습니다. bold, italic, normal 이 속성값이며, 기본값은 normal 입니다. bold 는 글자를 두껍게, italic 은 글자를 기울여서 표현 해줍니다.

background

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:textColor="#D64545"
    android:textStyle="bold|italic"
    android:background="#D67658"
    android:layout_marginTop="16dp"/>

텍스트뷰의 배경을 지정합니다. 색으로도 지정이 가능하며, 이미지를 활용하여 배경을 채울 수도 있습니다. 다만, 이미지를 활용할때 텍스트뷰의 크기를 고정된 값으로 지정한다면 이미지가 찌그러지거나 확대되어 원하는 이미지가 나오지 않을 수 있습니다.

padding / layout_margin

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:textColor="#D64545"
    android:textStyle="bold|italic"
    android:background="#D67658"
    android:padding="16dp"
    android:layout_marginTop="16dp"/>

padding 과 layout_margin 은 간격을 지정할 때 사용합니다. padding 속성의 경우 뷰 안의 내용물과 뷰 사이의 간격을 설정할 때 사용하며, layout_margin 의 경우 뷰와 부모 레이아웃의 간격을 설정할 때 사용합니다.

visibility

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="HELLO WORLD"
    android:background="#973232"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:background="#D67658"
    android:padding="16dp"
    android:visibility="visible"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="HELLO WORLD"
    android:background="#973232"/>

visibility 속성은 뷰의 가시성을 지정하는 속성입니다. 속성값으로는 visible, invisible, gone 을 사용할 수 있으며 각각은 다음의 그림과 같습니다.

  • android:visibility="visible"
  • android:visibility="invisible"
  • android:visibility="gone"

invisible 과 gone 의 차이는 보이지 않는것과 없는것의 차이 입니다. invisible 의 경우 뷰의 공간은 그대로 남아있으나 뷰 자체가 보이지만 않게 설정하는 속성값이며, gone 의 경우 뷰의 공간 조차 보이지 않게 설정하는 속성값입니다.

gravity / layout_gravity

gravity , layout_gravity 속성의 경우 뷰의 내용물과 뷰 자체를 정렬하는 속성입니다. 두 속성 간의 차이를 잘 파악하기 위해 gravity 속성외에는 동일한 코드를 사용하였습니다.

  • gravity
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:background="@color/teal_700">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/brand_name"
        android:textSize="50sp"
        android:textStyle="normal"
        android:padding="16dp"
        android:gravity="center"
        android:background="#AF0000"
        android:visibility="visible"/>
</LinearLayout>

  • layout_gravity
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:background="@color/teal_700">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/brand_name"
        android:textSize="50sp"
        android:textStyle="normal"
        android:padding="16dp"
        android:layout_gravity="center"
        android:background="#AF0000"
        android:visibility="visible"/>
</LinearLayout>

위 그림에서 볼 수 있듯, gravity 속성은 속성이 설정된 뷰의 내부 콘텐츠들이 정렬됨을 알 수 있으며, layout_gravity 속성은 속성이 설정된 뷰의 부모 레이아웃을 기준으로 정렬이 됨을 알 수 있습니다. 차이를 헷갈리지 않고 잘 알아둡시다.

  • fontFamily
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/brand_name"
    android:textSize="50sp"
    android:textStyle="bold"
    android:background="#D67658"
    android:padding="16dp"
    android:layout_gravity="center"
    android:visibility="visible"
    android:fontFamily="@font/cookierunblack"/>

res 폴더안에 기본적으로 drawable, layout, mipmap, values, xml 로 리소스들이 분류되어 있습니다. 여기에 Android Resource Data 를 생성해주고, Resource type 으로 font 를 지정해준뒤 폴더를 생성해줍시다. 그 폴더 안에 .ttf 혹은 .otf 등의 글꼴파일들을 넣어주면 속성중에 fontFamily 속성을 사용하면 이제 글꼴을 사용할 수 있게됩니다.

  • autoLink
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="www.naver.com"
    android:autoLink="web"/>

안드로이드에서는 잘 사용하지 않는 속성이나 한번쯤 봐둘 필요는 있어 넣었습니다. 링크를 걸 수 있습니다.

profile
CHA
Developer
이전 포스트

2023.02.08 - 안드로이드 앱개발자 과정

다음 포스트

2023.02.10 - 안드로이드 앱개발자 과정

0개의 댓글