[Do it 개정6판_안드로이드 스튜디오]둘째마당_02 레이아웃 익히기

02-1 안드로이드에 포함된 대표적인 레이아웃 살려보기

ConstraintLayot

LinearLayout

RelativeLayout

FrameLayout

TableLayout

 

- 뷰에 색 넣기

#ff0000 //빨간색

#00ff00 //녹색

#0000ff // 파랑

투명도를 넣고 싶다면 맨앞에 00 추가

 

- 배경으로 이미지를 지정할 수 있음

/app/src/main/res/drawable 이 폴더에 이미지 파일 넣기

 

 

 

02-2 리니어 레이아웃 사용하기

■ 리니어 레이아웃의 방향 설정하기

방향 설정할 때는 orientation 속성을 사용하여 가로 방향은 horizontal, 세로 방향은 vertical이라는 값으로 설정

 

■ 자바 코드에서 화면 구성하기

- xml 파일은 화면을 위해 만든 자바 소스 파일과 연결

- 화면 레이아웃을 미리 만들 수 없는 경우 또는 필요할 때마다 바로바로 레이아웃을 만들어야 하는 경우 자바 소스 코드에서 화면 레이아웃을 구성해야 할 수도 있다. 

- 예를 들어, 사용자가 입력한 데이터나 파일에서 읽어 들인 데이터 또는 네트워킹을 통해 서버에서 받아온 데이터의 유형에 따라 화면의 구성을 바꾸고 싶다면 XML로 정의하는 것보다 자바 코드에서 화면을 구성하는 것이 훨씬 더 효율적

 

- MainActivitiy.java 파일을 복사할 때는 프로젝트 안에 있는 src 폴더를 열고 org.techtown.samplelinearlayout 패키지 안에 들어 있는 MainActivity 라는 java라는 파일을 복사한다. 

■ 화면 생성 과정 분석하기

- setContentView() 메서드를 호출하는 부분이 들어있다. 그런데 이 부분을 레이아웃으로 정의된 리소스를 가리키도록 설정하지 않고, 자바 코드에서 만든 레이아웃 객체를 가리키도록 수정했다. 이렇게 레이아웃으로 만든 객체를 setContentView() 메서드의 파라미터로 전달하면 그 레이아웃이 화면에 표시

 

- 안드로이드의 모든 UI 객체들은 Content 객체를 전달받오록 되어 있다. 

 

- 자바 소스 코드에서 뷰를 만들어 뷰그룹에 추가할 때는 뷰 배치를 위한 속성을 설정할 수 있는 LayoutParmas 객체를 사용한다. 이 객체는 레이아웃에 추가되는 뷰의 속성 중에서 레이아웃과 관련된 속성을 담고 있다. 

- LayoutParams 객체를 새로 만들 경우에는 반드시 뷰의 가로와 세로 속성을 지정해야 한다. 

 

■ 뷰 정렬하기

- 안드로이드에서는 gravity라는 속성 이름을 사용, 이 속성은 어느 쪽에 무게 중심을 놓을 것인가의 의미로 이해할 수 있다. 

 

■ 뷰 정렬 속성 layout_gravity 자세히 알아보기 

 

 

■ 내용물 정렬 속성 gravity 살펴보기

 

- baselineAligned 속성으로 정렬을 맞춘 경우 텍스트의 정렬이 우선이기 때문에 뷰의 배치가 이상하게 될 수도 있다. 

 

■ 뷰 마진과 패딩 설정하기

- 한글과 같은 문서 편집기의 경우에도 여백이나 줄 간격이라는 것이 있어 글자가 너무 붗지 않도록 조절할 수 있다. 

- 뷰의 영역도 마찬가지

 

 

 

■ 여유 공간을 분할하는 layout_weight 속성

 

- 레이아웃 안에 레이아웃을 넣을 수 있기 때문에 모양을 쉽게 이해할 수 있다는 장점이 있다. 

02-3 상대 레이아웃 사용하기

- 상대 레이아웃으로 만들 수 있는 화면 레이아웃은 대부분 제약 레이아웃으로 만들 수 있다. 권장하지 않지만 예전에 만든 레이아웃이 상대 레이아웃을 사용한 경우가 많기 때문에 이해하는 것은 필요하다. 

 

02-4 테이블 레이아웃 

- 표나 엑셀 시트와 같은 형태로 화면을 구성하는 형태

- TableLayout 위에 TableRow를 추가하면 layout_width와 layout_height 값이 모두 match_parent로 설정되어 있지만 TableRow의 높이 값은 내부적으로 항상 wrap_content로 설정되어 있어 화면을 꽉 채울 수 없다. 

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

02-5 프레임 레이아웃과 뷰의 전환

- 가장 기본적이고 단순한 레이아웃

- 프레임 레이아웃에 뷰를 넣으면 그중에서 하나의 뷰만 호면에 표시

- 중첩(Overlay) 기능 있음

- 보이거나 보이지 않게 하는 속성이 가시성(Visibility) 속성

 

- 프로젝트 폴더에 이미지 추가하기

/app/res/drawable 폴더에 복사해야 한다.

이미지의 이름에는 영문 소문자, 숫자 또는 기호만 들어가야 함

 

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@mipmap/ic_launcher" 
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@mipmap/ic_launcher" 
            android:visibility="visible"/>
    </FrameLayout>

이 자바 소스 코드에서 버튼을 누를 때마다 두 개의 이미지뷰가 가지는 visibility 속성을 바꿔주면 두 개의 이미지가 서로 전환되는 효과를 만들 수 있다 

 

 

02-6 스크롤뷰 사용하기

- 스크롤뷰를 추가하고 그 안에 뷰를 넣기

- 스크롤뷰는 기본적으로 수직 방향의 스크롤을 지원합니다. (수평 방향 할려면 HorizontalScrollView를 사용

- 이미지뷰도 자바 소스 코드에서 new ImageView(this)를 사용해 객체로 만들 수 있습니다. 

- 이미지뷰에 보이는 이미지가 화면 영역을 벗어날 경우에는 스크롤이 나타납니다.

- XML 레이아웃은 액티비티라는 화면을 위한 것이며, 이 액티비티라는 화면은 소스 코드가 있어야 동작합니다. 

- 따라서 소스 코드에서 어떤 XML 레이아웃을 화면에 보여줄 것인지를 setContentView() 메서드로 지정합니다. 

 

- id 값으로 객체를 찾아 사용할 수 있습니다 

 

---

도전 03 코드

package com.ogrg.domission;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

ImageView imageView, imageView2;

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

imageView = findViewById(R.id.imageView);
imageView2 = findViewById(R.id.imageView2);

Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
moveImageUp();
}
});

Button button2 = findViewById(R.id.button2);
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
moveImageDown();
}
});

moveImageUp();
}

public void moveImageUp(){
imageView.setImageResource(R.drawable.ic_launcher_background);
imageView2.setImageResource(0);

imageView.invalidate();
imageView2.invalidate();

}

public void moveImageDown(){
imageView.setImageResource(0);
imageView2.setImageResource(R.drawable.ic_launcher_background);

imageView.invalidate();
imageView2.invalidate();
}
}

도전 04 코드

activity_main.xml

<?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"
android:padding="30dp"
android:gravity="center_vertical"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">

<EditText
android:id="@+id/inputMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5"
android:cacheColorHint="#00000000"
android:gravity="top"
android:listSelector="#00000000"
android:maxLength="80"
android:textSize="36dp" />

<TextView
android:id="@+id/inputCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="0 / 80 바이트"
android:textSize="18dp" />

</LinearLayout>

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

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="전송"
android:textSize="20sp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:textSize="20sp"
android:text="닫기" />
</LinearLayout>

</LinearLayout>

MainActivity.java

package com.ogrg.domission04;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import java.io.UnsupportedEncodingException;

public class MainActivity extends AppCompatActivity {

EditText inputMessage;
TextView inputCount;

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

inputMessage = (EditText) findViewById(R.id.inputMessage);
;
inputCount = (TextView) findViewById(R.id.inputCount);

Button sendButton = (Button) findViewById(R.id.button);
sendButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String message = inputMessage.getText().toString();
Toast.makeText(getApplicationContext(), "전송할 메세지\n\n" + message, Toast.LENGTH_LONG).show();
}
});

Button closeButton = (Button) findViewById(R.id.button2);
closeButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
finish();
}
});

TextWatcher watcher = new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
byte[] bytes = null;
try {
bytes = s.toString().getBytes("KSC5601");
int strCount = bytes.length;
inputCount.setText(strCount + " /80바이트");
} catch (UnsupportedEncodingException ex) {
ex.printStackTrace();
}
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {

}

@Override
public void afterTextChanged(Editable s) {
String str = s.toString();
try {
byte[] strBytes = str.getBytes("KSC5601");
if (strBytes.length > 80) {
s.delete(s.length() - 2, s.length() - 1);
}
} catch (Exception ex) {
ex.printStackTrace();
}
}
};
}
}