[Android] 안드로이드 정리 (1) - 레이아웃

 

 

출처 : Do it! 안드로이드 앱 프로그래밍 / 정재곤

 

 

gravity와 layout_gravity

layout_gravity는 뷰를 정렬해주는 속성이고, gravity는 내용물을 정렬해주는 속성이다.

layout_gravity 적용

 

gravity 적용

한 가지 주의할 점은 버튼이나 텍스트뷰의 크기를 wrap_content로 지정하면 버튼 안에 들어 있는 글자의 여유 공간이 없기 때문에 gravity 속성을 지정해도 아무런 변화가 없다.

gravity 속성으로 지정할 수 있는 값은 위와 같이 대표적으로 left, right, center가 있고, 그 외에도 top, bottom, fill 등이 있다.

 

 

baselineAligned 속성

텍스트뷰로 화면을 구성하다 보면 텍스트가 옆의 텍스트뷰나 버튼에 들어 있는 텍스트와 높이가 맞지 않는 경우를 종종 볼 수 있다.

이럴 때는 baselineAligned 속성을 사용하여 맞춰주면 된다.

baselineAligned 속성  true

baselineAligned 속성 false

 

 

뷰의 마진과 패딩 설정하기

부모 컨테이너의 공간 중에서 남아 있는 공간에 새로운 뷰를 추가하면 그 뷰의 크기를 늘려 나머지 공간을 모두 채우거나 정렬 속성으로 위치를 지정할 수 있다.

패딩은 내용물의 간격을 조정하는 padding과 뷰 사이의 간격을 조정하는 layout_margin이 있다.

paddingLeft 설정

 

layout_marginLeft 설정

 

아래의 사진처럼 padding이나 layout_margin을 많이 줘서 남아 있는 공간이 충분하지 않으면 뷰의 모양이 이상해질 수 있으니 조심해야 한다.

 

 

여유 공간을 분할하는 layout_weight

부모 컨테이너에 추가한 뷰들의 공간을 제외한 여유 공간은 layout_weight 속성으로 분할할 수 있다.

예를 들어, layout_weight 속성에 각각 1의 값을 지정하면 두 개의 뷰는 1:1의 비율이 적용되어 반씩 여유 공간을 나눠 갖게 된다.

같은 방법으로 두 개의 뷰에 각각 1과 2의 값을 지정하면, 각각 1/3과 2/3만큼 여유 공간을 분할한 후 나눠 갖게 된다.

1:1과 2:1로 분할하여 뷰를 배치

 

 

상대 레이아웃 (RelativeLayout)

상대 레이아웃으로 만들 수 있는 화면은 대부분 제약 레이아웃으로 만들 수 있다.

RelativeLayout 속성으로는 layout_align~~ 식의 속성이 있다.

예를 들어 layout_alignParentRight의 경우는 부모 레이아웃 오른쪽에 위치한다는 뜻이다.

layout_above=ID는 기준이 되는 뷰의 위에 위치한다는 뜻이다.

 

 

테이블 레이아웃 (TableLayout)

테이블 레이아웃은 표나 엑셀 시트와 같은 형태로 화면을 구성하는 레이아웃이다.

TableLayout에는 기본적으로 TableRow가 들어 있으며, TableRow에 뷰를 추가하여 채워나가는 방식이다.

두번째 컬럼의 버튼의 크기를 조정했더니 같은 컬럼의 버튼들의 사이즈도 변경된다.

 

만약 세 개의 버튼을 추가한 후에 오른쪽에 남는 공간이 없도록 만들고 싶다면 <TableLayout> 태그에 stretchColumns 속성을 추가하면 된다. 

stretchColumns 속성 안에는 테이블의 index가 들어간다.

예를 들어 속성 안에 0,1이라고 지정해주면 0번째 컬럼과 1번째 컬럼의 사이즈만 늘린다는 뜻이다.

아래의 사진은 2로 지정해줘서 2번째 컬럼의 사이즈가 늘어난 것을 확인할 수 있다.

 

 

프레임 레이아웃(FrameLayout)과 뷰의 전환

프레임 레이아웃에 뷰를 넣으면 그 중에서 하나의 뷰만 화면에 표시해준다. 프레임 레이아웃은 중첩(Overlay) 기능을 가지고 있다.

Overlay는 뷰를 하나 이상 추가할 경우 추가된 순서로 차곡 차곡 쌓인다.

가장 먼저 추가한 뷰가 가장 아래쪽에 쌓이고 그 다음에 추가한 뷰는 그 위에 쌓여서 가장 나중에 쌓인 뷰만 보이게 된다.

이때 가장 위에 있는 뷰를 보이지 않게 하면 그 다음 뷰가 보인다.

이러한 속성이 가시성(Visibility) 속성이다. 이런 특성은 여러 개의 뷰를 서로 전환할 때 사용할 수 있다.

아래의 예제는 프레임 레이아웃에 2개의 ImageView를 넣어서 버튼을 누르면 이미지가 변경되는 예제다.

MainActivity에 onButton1Clicked 함수를 작성해서 이미지가 변경될 수 있도록 작성한다.

package com.example.project00_java;

import androidx.appcompat.app.AppCompatActivity;

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

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_menu);

        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 {
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);

            imageIndex = 0;
        }
    }
}

프레임 레이아웃으로 뷰를 전환하는 방법은 그렇게 복잡하지 않지만 뷰페이저를 사용하면 더 단순하고 편하게 사용할 수 있다.

 

 

스크롤뷰

스크롤뷰는 추가된 뷰의 영역이 한눈에 다 보이지 않을 때 사용한다.

스크롤뷰는 수평 스크롤을 위한 HorizontalScrollView와 수직 스크롤을 위한 ScrollView로 나누어진다.

아래의 예제에서는 수평 수직 스크롤을 하기 위해 둘 다 사용했다. 위의 예제와 같은 예제지만, 이미지가 스크롤 되서 보이게 되는 방식이다.

스크롤뷰에 이미지뷰를 넣어서 버튼을 누르면 다른 이미지로 변경된다.

package com.example.project00_java;

import androidx.appcompat.app.AppCompatActivity;

import android.content.res.Resources;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    ScrollView scrollView;
    ImageView imageView;
    BitmapDrawable bitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);

        scrollView = findViewById(R.id.scrollView);
        imageView = findViewById(R.id.imageView3);
        scrollView.setHorizontalScrollBarEnabled(true);

        Resources res = getResources();
        bitmap = (BitmapDrawable) res.getDrawable(R.drawable.dream1);
        int bitmapWidth = bitmap.getIntrinsicWidth();
        int bitmapHeight = bitmap.getIntrinsicHeight();

        imageView.setImageDrawable(bitmap);
        imageView.getLayoutParams().width = bitmapWidth;
        imageView.getLayoutParams().height = bitmapHeight;
    }

    public void onButton1Clicked(View v) {
        changeImage();
    }

    private void changeImage() {
        Resources res = getResources();
        bitmap = (BitmapDrawable) res.getDrawable(R.drawable.dream2);
        int bitmapWidth = bitmap.getIntrinsicWidth();
        int bitmapHeight = bitmap.getIntrinsicHeight();

        imageView.setImageDrawable(bitmap);
        imageView.getLayoutParams().width = bitmapWidth;
        imageView.getLayoutParams().height = bitmapHeight;
    }
}

MainActivity의 코드는 리소스에서 바로 이미지를 가져와서 보여준 뒤,

버튼을 누르면 마찬가지로 리소스에서 다른 이미지를 가져와서 보여주게 된다.

 

 

 

두 개의 이미지뷰에 이미지 번갈아 보여주기

1. 화면을 위와 아래 두 영역으로 나누고 그 영역에 각각 이미지뷰를 배치한다.

2. 각각의 이미지뷰는 스크롤이 생길 수 있도록 한다.

3. 상단의 이미지뷰에 하나의 이미지를 보이도록 한다.

4. 두 개의 이미지뷰 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이도록 한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/dream1" />
    </ScrollView>

    <Button
        android:id="@+id/button51"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="onButton1Clicked"
        android:text="Button" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <ImageView
            android:id="@+id/imageView10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </ScrollView>

</LinearLayout>

package com.example.project00_java;

import androidx.appcompat.app.AppCompatActivity;

import android.content.res.Resources;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView01;
    ImageView imageView02;

    int imageIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);

        imageView01 = findViewById(R.id.imageView11);
        imageView02 = findViewById(R.id.imageView10);
    }

    public void onButton1Clicked(View v) {
        changeImage();
    }

    private void changeImage() {
        if (imageIndex == 0) {
            imageView01.setImageResource(0);
            imageView02.setImageResource(R.drawable.dream1);

            imageView01.invalidate();
            imageView02.invalidate();
            imageIndex = 1;
        }
        else{
            imageView02.setImageResource(0);
            imageView01.setImageResource(R.drawable.dream1);

            imageView01.invalidate();
            imageView02.invalidate();

            imageIndex = 0;
        }
    }
}

사용된 함수 정리 :

ImageView.setImageResource

-> 이미지 리소스 파일을 설정해준다. R.drawable.dream1이라는 것은 res/drawable/dream1 파일을 가져오는 것이다.

ImageView.invalidate

-> 화면을 갱신시켜준다.

 

 

 

SMS 입력 화면 만들고 글자의 수 표시하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:ems="10"
        android:gravity="top"
        android:inputType="textPersonName"
        android:text="gd"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_weight="1"
        android:gravity="center"
        android:text="0 / 80 바이트"
        android:textColor="#F40101"
        android:textSize="30sp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/send_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="20dp"
            android:text="전송" />

        <Button
            android:id="@+id/close_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="20dp"
            android:text="닫기" />
    </LinearLayout>

</LinearLayout>