2015년 12월 6일 일요일

[안드로이드 스튜디오] 4.뷰 - 위젯과 레이아웃

목차

0.서론

오늘은 뷰(View)에 대해서 설명할 것입니다.


1.뷰와 뷰그룹

1)뷰와 뷰그룹

뷰(View)는 UI구성 요소로, 눈에 보이는 화면의 객체들이 뷰가 됩니다.
뷰그룹(ViewGroup)은 여러 뷰를 포함하고있는 것으로 뷰의 위치를 지정할 수 있습니다.
뷰와 뷰그룹의 특징은 뷰그룹이 뷰를 상속한다는 것입니다.

2)상속

상속이란 자식 클래스가 부모 클래스의 멤버를 사용하는 것인데,
간단히 설명하면 속성을 나타내는 요소를 물려받는 것입니다.

그러므로 뷰그룹 또한 뷰와 나타내는 방식이 같다고 생각하면 되겠습니다.
즉, 뷰그룹이 뷰들을 포함하는것처럼 뷰와 같은 뷰그룹도 포함할수 있다는 뜻이죠
(뷰그룹이 뷰그룹을 포함할 수 있습니다.)

상속의 다른 예로, TextView와 Button을 볼 수 있습니다.
저번에 했던대로 TextView를 Button으로 바꾸기만 해도 버튼으로 변경되는 이유는
Button이 구성되는 방식이 TextView와 같기 때문입니다.

View는 Object에서 상속되고, TextView나 ViewGroup은 View를 상속,
Button은 다시 TextView를 상속하게 됩니다.

3)위젯과 레이아웃

뷰 중에서 일반적인 컨트롤의 역할을 하는 것을 위젯(Widget)이라고 부르고,
뷰그룹중에서 뷰들을 포함하며 배치하는 역할을 하는것을 레이아웃(Layout)이라고 합니다.
마찬가지로 레이아웃 중 하나인 LinearLayout은 ViewGroup을 상속합니다.

2.뷰의 속성 살펴보기

대표적인 View의 속성으로는 
이름을 지정하는 id,
크기를 나타내는 layout_width, layout_height,
배경색을 지정하는 background등이 있습니다.

대표적인 View인 Button을 이용하여 속성을 살펴보겠습니다.

일단 xml파일로 가서 버튼을 생성합니다.

새 버튼을 생성하고 Text탭으로 넘어가 소스코드를 확인하면,
Button 내에 여러가지 속성이 있는것을 알 수 있습니다.

1)layout_width, height

속성 layout_width를 조절하기 위해
android:layout_width="wrap_content" 의 따옴표 안의 부분을 수정합니다.
android:layout_width="match_parent" 로 수정한 후 왼쪽화면을 보면.



가로가 가득 차게 버튼이 늘어나 있는것을 알 수 있습니다.wrap_content는 내부에 있는 콘텐츠에 딱 맞게 버튼크기를 만들고,match_parent는 부모 뷰의 크기에 딱 맞게 버튼 크기를 만듭니다.
height를 변경하면 마찬가지로 세로가 변경됩니다.


뷰의 크기를 정수값으로 지정할 수도 있는데, 그럴때는 단위를 함꼐 사용하여야 합니다.
px, dp(dip), sp(sip), in, mm등을 지원하며,
흔히 해상도에 따라 비율로 픽셀값이 계산되는 dp(dip)를 사용합니다.

높이를 100dp로 설정한 사진입니다. 오른쪽을 보면 크기가 변경된 것을 알 수 있습니다.

layout_width와 height 아래에는 차례로 text, id, layout_align...이 보입니다.

2)text

text는 말그대로 버튼에 내부에 들어가는 글자입니다.
따옴표 안의 내용을 바꾸면 그대로 적용이 됩니다.

3)id

그 다음은 android:id="@+id/button" 입니다.
id는 xml레이아웃 파일에서 정의한 뷰를 자바 파일에서 쓸 수 있게 해 줍니다.
xml레이아웃에서 뷰를 정의할때도 메모리에 객체화되는 인플레이션 과정을 거치게 되는데,
자바 코드에서 이 객체의 위치를 찾기 위해서 id를 R.id.[ID]와 같은 방식으로 참조하게 됩니다.
id를 등록하기 위해서는 위와 같이 '@+id/[ID]'를 사용합니다.

자바 파일에서 id를 생성해 봅시다.





Button button2 = (Button) findViewById(R.id.button);
button2.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "Hello 버튼이 눌렸습니다.", Toast.LENGTH_SHORT).show();
     }
});
를 onCreate내에 추가하면 button이라는 아이디를 이용하여 OnClickListener를 생성한 것입니다.
실행해보면 Toast가 생성되는것을 확인 할 수 있습니다.





4)layout_align...

layout_align은 뷰의 위치를 결정하는 속성인데
나중에 설명할 relative layout에서 사용되는 속성입니다.
다른 뷰들과의 상대적인 위치로 지정하는 것으로, 자세한것을 레이아웃을 다룰때 하겠습니다.

5)background

현재 속성에는 사용되지 않고 있는 background라는 속성또한 많이 사용됩니다.
말 그대로 내용 뒤의 뒷배경을 나타내는 것입니다.
컴퓨터에서 일반적으로 사용하는 형식인 #RGB, #ARGB,#RRGGBB,#AARRGGBB형식으로 나타냅니다.
ex) #ffff0000 = 불투명한 빨간색 #90ff0000 투명도가 50%정도 되는 빨간색

실제 프로그램에서 사용해보면



design 탭에서 버튼의 background속성에  #ff00ff를 하고
text탭을 열면 새로 background 속성이 추가된 것을 알 수 있습니다.

실행한 화면도 마찬가지로 마젠타색으로 뜨게 됩니다.

3.마무리


이로서 뷰들의 기본적인 속성에 대해 알아 보았습니다.
다음번에는 뷰 그룹의 일종에 해당하는 레이아웃에 대해 알아 보겠습니다.





2015년 11월 23일 월요일

[안드로이드 스튜디오] 3.이것저것 바꿔보기

목차

0.서론


이번에는 새 프로젝트를 생성하여, 이것저것 바꿔보며 각 항목들의 역할을 조금이나마 알아볼 것입니다.


1.프로젝트 생성하기



기본설정으로 놓고 설정을 하지만, 프로젝트 종류를 Empty Activity로 합니다.

//사진0
프로젝트가 생성되면 이런 형태일 것입니다,.

이 중 좌측 화면( 없다면 좌측의 Project를 누르거나 Alt + 1로 Project 화면을 엽니다.)을 볼 것입니다.


트리 형식으로 구성되어 있으며, 우리가 이용할 부분은 Java 내부의 MainActivity.java와 res안쪽의 layout또는 values정도가 될 것입니다.
minimap에는 안드로이드 사진이 들어 있습니다. 앱 아이콘 모양이 됩니다.

2.버튼 만들기


몇가지를 변경하기 위해서는 일단 레이아웃을 변경해야 하므로 layout내부의 activity_main.xml파일을 보겠습니다.
(혹시 글로 보인다면 아래쪽의 Text와 Design탭 중 Design을 눌러 변경하세요.)
안드로이드 스튜디오에서는 xml파일을 이용하여 레이아웃을 나타냅니다.


화면의 우측 하단에 보면 Properties 즉 속성 화면이 있습니다.
화면의 Hello World라는 글을 클릭한 후 Properties에서 스크롤하여 
text라는 속성을 보면, Hello World또는 @string/hello_world라고 되어 있을 것입니다.
@string/hello_world는 string파일에 있는 hello_world라는 변수의 값을 사용하는 것이고, 바로 글자가 있다면 그냥 그 글을 바로 사용하는 것입니다.
이 값을 수정하면 화면의 글이 변경됩니다.




이번엔 text로 되어있는 화면을 살펴보겠습니다.
xml 화면중의 TextView부분이 아까의 글상자부분을 나타냅니다.


<TextView android:text="Hello World!" android:layout_width="wrap_content"    android:layout_height="wrap_content" />

속성이 나타나 있는데, text 는 아까 봤던대로 Hello World가 쓰여 있고(변경했다면 변경한대로),
width와 height는 wrap_content로 안에 있는 글의 양에 따라 크기가 딱 맞게 조절됩니다.


글상자를 버튼으로 바꾸어 보겠습니다.
위의 사진과 같이 TextView를 Button으로 변경시킨 후 오른쪽 Preview를 보면
글상자가 버튼으로 변경됩니다. (Preview가 없다면 오른쪽 탭을 눌러보세요)
그럼 다시 Design탭으로 돌아갑니다.


조금 간단한, 안드로이드 스튜디오에서 제공하는 방법으로 버튼을 생성해 보겠습니다.
좌측 Palette의 Widgets 항목 아래에 있는 Button을 끌어다가 화면에 놓습니다.

P.S. 화면에 나타나는 초록색 화살표는 현재 레이아웃 방식인 Relative Layout에서의 배치 방식으로, 다른 항목과의 상대적인 위치로 항목의 위치를 나타내는 것입니다. 나중에 Layout을 하면서 다시 다루겠습니다.


다시 오른쪽 Properties를 보고, text에서 New Button을 "확인"으로 변경해봅시다.
화면에 확인으로 바뀐 것을 보고 다음 단계로 넘어갑니다.

3.onButtonClick 함수 생성

버튼이라면, 버튼의 역할을 수행하여야겠죠
버튼을 눌렀을때 효과가 나타나도록 해 봅시다.



확인이 적힌 버튼을 누르고, Properties에서 onClick을 찾아서 onButtonClicked라는 값을 넣습니다.



자바 코드에 가서 onButtonClicked라는 함수를 추가합니다.

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


아래에

public void onButtonClicked(View v) 를 추가합니다


onButtonClicked함수를 추가하면 View위에 alt+enter를 누르라는 알림이 뜰것입니다.
여기서 alt + enter 를 누르면 위의 import에 자동으로 View가 추가되게 됩니다.



그림에서 상단에 import android.view.View;  추가되어있는 것을 볼 수 있습니다.


버튼을 눌렸을때의 효과를 주기 위해 Toast메시지를 이용할 것입니다.
Toast메시지는 화면 하단에 생성되어 잠깐 있다가 사라지는 메시지입니다.

중괄호를 이용하여 아래와 같이 입력합니다.
public void onButtonClicked(View v){
    Toast.makeText(getApplicationContext(),"button is clicked", Toast.LENGTH_LONG).show();
}


어떻게 되는지 알기 위해서 에뮬레이터를 이용해서 확인 해 보겠습니다.
그림의 빨간색으로 표시해 놓은 run 또는 shift + F10을 이용하여 실행합니다.

실행하기 전 저번에 만든 에뮬레이터가 실행되고 있거나 휴대폰이 usb디버깅을 이용한 연결이 되어있어야 합니다.


잠시 기다리면 이런 화면이 뜹니다.
사용할 기기를 선택하고 OK버튼을 누릅니다.


화면이 전환되면서 이런 화면이 뜨게 됩니다.
"확인" 버튼을 누르면


아까 프로그래밍 했던 대로 하단에 Toast가 뜨게 됩니다.

버튼을 생성하고, Toast메시지를 띄웠습니다.
다음 내용은 다음 게시글에서 다루겠습니다. 감사합니다.

Next : [안드로이드 스튜디오] 4.뷰 - 위젯과 레이아웃

2015년 11월 3일 화요일

[안드로이드 스튜디오] 2.첫 프로젝트 생성 및 실행

목차

0.서론

이번에는 시험삼아 첫 프로젝트를 생성하고, 에뮬레이터로 실행해 보는 과정을 할 것입니다.

1.새 프로젝트를 생성합니다.



아까의 첫 화면에서,
왼쪽에는 최근 프로젝트를 바로 열 수 있는 화면을 제공하며,
오른쪽에 새로 만드는것, 여는것 등의 항목이 있습니다.

Start a new Android Studio Project를 눌러 새 프로젝트를 생성합니다.

프로젝트의 제목을 설정하는 부분입니다.

그대로 또는 프로젝트 이름만 변경한 채로 Next를 누르면 됩니다.

Company Domain은 말그대로 회사의 주소이며, 회사가 없다면 그대로 두어도 됩니다.
Package name 또한 그대로 두면 되고,
아래의 Location은 자동으로 설정되게 되는데, 제 경우는 앞에 2개의 프로젝트가 이미 있어 3이 붙게 되었습니다.


이 화면은 간단히 앱을 실행할 수 있는 버전을 설정하는 화면입니다.
화면에서 보면 Wear, TV, Auto등도 지원하는 것을 알 수 있지만,
기본적으로 Phone과 Tablet을 기준으로, 최소의 SDK를 지정합니다.

최신 버전을 사용할수록 많은 기능을 사용할 수 있지만, 사용 가능한 User의 수가 적어지므로, 개발할 앱에 맞는 버전을 선택합니다.
밑의 설명을 보면 선택한 버전이 유저의 몇%를 커버할 수 있는지가 나옵니다.

또한, Next를 클릭합니다.


전체적인 테마를 선택할 수 있는 화면입니다.
일단 기본으로 설정되어있는 Blank Activity로 하고 Next를 누릅니다.


Activity의 이름등을 정하는 화면인데, 역시 기본값으로 두는 것이 편합니다.
이제, Finish를 누르면 기본 어플리케이션이 만들어지게 됩니다.


기본 창은 이런 형태로 나타게 됩니다.
xml화면의 왼쪽 하단에서 Text대신 Design을 누르면 화면과 같이 나옵니다.
컴퓨터의 성능에 따라 여기까지 오는데 오래 걸릴 수 있습니다.
xml파일과 java파일 두개로 이루어지는데,
xml파일은 화면을 나타내고 java파일은 그 화면 각각에서의 시스템을 나타냅니다.

안드로이드 스튜디오가 업데이트 되면서, 기본 레이아웃이
content_main.xml, activity_main.xml
두가지 파일로 나뉘게 되었습니다. (왼쪽 트리의 RES의 Layout을 보면 있습니다.)
현재는 실행만 해 볼 것이기 때문에 상관 없으니, 다음번에 다른 것으로 만들겠습니다.
위에서 Blank Activity 대신 Empty Activity로 생성하게 되면
activity_main.xml파일 하나만 있게 됩니다
즉, activity_main이라는 Activity 하나로 구성하게 되죠

버전이 업그레이드 되면서 두가지로 나뉘게 된 이유는
잘 변경하지 않는 테두리 부분과 많은 변경이 이루어지는 내용 부분을 분리하기 위해
만들어진걸로 보입니다.
그 방식은, main activity에 content가 include 되어있는 방식으로 구현됩니다.
아마 이 방식을 새로 권장하기 위해 한 것으로 보이지만,
개발을 시작할때는 쉽게 하기 위해서 Empty Activity를 사용할 것입니다.

새 프로젝트를 생성하는 과정에서 여러가지 에러가 발생할 수 있습니다.
일부는 진행되는 과정에서 생기므로 잠시 기다리면 해결되지만,
자바의 상태 등 여러가지 오류가 발생할 수 있는데 각 상황별로 다르므로 여기서 해결하기보다는 구글링을 통해 살펴보시기 바랍니다.

에러메시지 + "해결법" 등을 사용하시면 쉽게 찾으실 수 있습니다.

2.에뮬레이터를 생성하고, 프로젝트를 실행합니다.


1)에뮬레이터 생성


에뮬레이터 생성은 굳이 안하셔도 됩니다.
만약 안드로이드 휴대폰이 있으시다면, 드라이버를 설치하여 컴퓨터와 연결시킨 후에 디버깅 모드로 들어가시면 에뮬레이터 없이도 구현한 앱을 실행해 볼 수 있기 때문이죠
에뮬레이터의 이점은 값이 안든다는 것이고, 휴대폰의 이점은 컴퓨터 화면을 가리지 않으며, 컴퓨터의 자원을 소모하지 않고 좀 더 빠른 시스템을 가졌으며, 휴대폰 충전이 된다는 것이죠.




아까의 프로젝트 화면에서,
위쪽의 빨간색으로 표시한 AVD Manager을 클릭합니다.


저는 미리 사용하고 있던게 하나 있지만, 없다면 빈 화면이 있을 것입니다.
왼쪽 하단의 Create...를 클릭합니다.


하드웨어의 종류를 선택하는 화면입니다.
화면 크기와 디자인 정도의 차이가 있으니, 입맛에 맞게 선택합니다.
저는 Nexus5를 선택하였습니다.


소프트웨어 즉 이미지파일을 선택하는 화면입니다.
자기가 설치한 sdk파일이 나타나게 되며, 저는 제가 사용하는 JellyBean의 x86이미지를 사용하였습니다.
구글 플레이 서비스를 사용하기 위해서 뭘 설치하라고 하네요 쓸일이 없으니 그냥 무시했습니다.

세부설정 화면입니다. RAM과 키보드 설정을 위해 왼쪽 아래의 고급 설정에 들어갑니다.



기본으로 설정되는 RAM이 큽니다. 뭐 컴퓨터가 좋다면 상관없지만
아래의 그림과 같이 RAM을 적당히 조절하고, 맨 아래쪽의 Enable keyboard input설정을 해제합니다.
어디서 듣기로 저걸 해제해야 실제 휴대폰처럼 아래에 키보드 화면이 나온다고 하더군요

Finish를 눌러 에뮬레이터 생성을 완료합니다.


아까 봤던 화면에 새로운 것이 추가된 것을 알 수 있습니다.
우측의 초록색 삼각형을 눌러 실행합니다.


이것또한 꽤 오랜 시간이 걸리는 작업입니다.
에뮬레이터는 한번 켜놓으면 끌때까지 작업을 할 수 있기에
다음에 작업을 시작할때 에뮬레이터를 미리 켜놓고 작업을 하는것을 추천합니다.


안드로이드 로고가 몇번 깜빡인 후에 화면이 나타나게 됩니다.
여러 가이드를 대충 넘기면 홈 화면이 나옵니다.

2)프로젝트 실행




그림의 빨간색으로 표시한 초록색 삼각형 버튼 혹은 Shift + F10을 이용하여 프로젝트를 실행합니다.
<수정중>


조금 기다리면 실행할 기기를 선택하는 화면이 나타납니다.
자기가 켜놓은 에뮬레이터 혹은 연결해놓은 휴대폰을 선택합니다.


에뮬레이터를 확인해보면 실행된 것을 확인할 수 있습니다.

첫 프로젝트를 실행하였습니다. 축하합니다!
다음 내용은 다음 강의에서 다루겠습니다.
감사합니다.

다음 글 : [안드로이드 스튜디오] 3.이것저것 바꿔보기

2015년 10월 19일 월요일

[안드로이드 스튜디오] 1.개발 환경 구축

목차

0.서론

저는 강의를 할 입장이 안됩니다.
시작한지 일주일에서 한달(글쓰는 시간 기준으로), 그정도 밖에 지나지 않은 학생인지라..
하지만 직접 해보면서 생초보 입장에서 글을 써놓으면 나중에 도움이 될 것 같다는 생각이 들어,
여러가지 시행착오들과 결과, 나름대로의 해석 뭐 그런 내용들이 담길 예정입니다.
자체적인 공부는 책이나 인터넷등을 긁어서 공부했고요,
딱히 전문적인 내용이 없을 수 있으니 주의 바랍니다. ㅋㅋㅋ

주의사항!

안드로이드 스튜디오 프로젝트 생성 과정에서 경로에 한글이 있다면 문제가 생기므로
혹시 계정 이름이 한글이라면 로컬 계정 등을 새로 만들어 영어 계정으로 들어가 다음 과정을 하기 바랍니다.

저의 경우처럼 아무생각없이 설치하다가는 처음부터 이 과정을 새로 해야 할 수 있습니다...

또한 안드로이드 스튜디오나 그 과정에서 생성되는 가상 장치는 컴퓨터의 자원을 상당히 소모하므로 컴퓨터가 좋지 않다면 사람의 인내심으로는 불가능한 과정을 거치실 수 있으니 주의하시기 바랍니다.


1.안드로이드 스튜디오 설치


http://developer.android.com/sdk/index.html
위 주소에서 안드로이드 스튜디오를 설치합니다.

초록색 버튼 클릭
동의 체크, 파란색 버튼 클릭
-> 다운로드 폴더에 생성된 설치 파일확인






2.설치하기 전에, 자바 JDK를 설치하고 환경변수를 등록해야 합니다


1)자바 JDK설치


http://www.oracle.com/technetwork/java/javase/downloads/index.html
에서 자바 JDK 설치


(*버전은 다를 수 있음)에서 JDK아래에 있는 파란색 다운로드 버튼 클릭

Accept License Agreement = 동의를 누른 후
이 중 자기 컴퓨터에 맞는 버전(32bit컴퓨터일 경우 x86,i586다운로드)의 jdk 다운,

실행 파일을 눌러 jdk를 설치한다
계속 next클릭, 기다림, next클릭
이 창에서 close를 눌러 설치 종료

2)환경변수 등록


이제 java를 바로 사용할 수 있게 하기 위해서 환경변수 설정이 필요합니다.

내pc혹은 내컴퓨터에서 오른쪽 클릭, 속성을 클릭합니다.

왼쪽 사이드바의 "고급 시스템 설정" 클릭

시스템 속성의 고급 탭에서 우측 하단에 있는 환경 변수 클릭

3.안드로이드 스튜디오를 설치하고, SDK를 설치합니다.


1) 안드로이드 스튜디오 설치


아까 다운로드 받은 안드로이드 스튜디오 설치파일을 실행하여 안드로이드 스튜디오를 설치합니다.

<그림 추가 예정>


2)  SDK설치


안드로이드 스튜디오 버전에 따라
UI(User Interface,사용자 환경)가 다를 수 있습니다.

SDK설치에는 상당한 시간이 소요되므로 시간이 많을 때 하시기 바랍니다.


안드로이드 스튜디오의 첫 화면에서,
Configure로 들어갑니다.


맨 위의 SDK Manager로 들어갑니다.



SDK Manager의 화면인데, 아래 화면은 오른쪽 아래의 Show Package Detail을 체크한 사진입니다.

이 중에서 입맛에 맞게 선택합니다.

System Image 파일은 나중에 가상 디바이스 생성에 이용되는데,
용량이 커서 설치하는데 오래 걸리므로 원하는 버전의 이미지파일만 받는 것을 추천하며,

나머지는 정확히 어떤 역할을 하는지 몰라 확언은 못하겠지만 저는 최신 세 버전의 플랫폼과 소스, 제 휴대폰과 맞는 버전의 가상 디바이스를 생성하기 위한 4.1.2버전의 모든 파일을 다운로드 하였습니다.

(*추신 : 높은 버전의 가상 디바이스는 상대적으로 많은 컴퓨터 자원을 소모하므로 개인의 컴퓨터에 맞춰 적당한 버전을 선택하시기 바랍니다.)


위쪽 부분의 항목중 tools부분인데 이 부분은 대부분 설치하는것을 추천합니다.
그러므로 대부분을 선택하고, 아래쪽의 파란색 OK버튼을 눌러 설치를 시작합니다.

그리고 기다립니다.....

이상으로 첫 글을 마칩니다.
새 프로젝트 생성은 다음 글에서 하겠습니다.

다음 글 : [안드로이드 스튜디오] 2.첫 프로젝트 생성 및 실행