안드로이드 스튜디오 기초(2) — 로그인 화면 만들기

참고 : 유투브 — 센치한 개발자

[목표 : 위의 로그인 화면을 디자인 해보자.]

[1. 레이아웃을 그릴 xml 파일 생성]

• 왼쪽의 res 폴더 안의 layout 폴더에 ‘activity-login.xml’ 파일을 만든다.

• ‘MainActivity.java’ 파일과 위에서 새로 만든 ‘activity_login.xml’ 파일 매칭을 위해 line 12 를 위와 같이 수정해준다.

[2. TextView로 LOGIN 글자 삽입]

[3. ImageView로 이미지 삽입]

• 프로젝트를 만들면 들어있는 기본 앱 아이콘 이미지를 쓴다.
• background로 넣거나 src로 넣는 방법이 있다.
• background로 넣으면 이미지가 깨지므로 src를 이용한다.

• 이미지가 삽입된 것을 확인할 수 있다.
• width 는 “match_parent”로 height는 “wrap_content”로 설정한다.
• 그런데 여기서 이미지가 가로 사이즈에 맞춰서 늘어나지 않은 것을 확인할 수 있는데, 이는 src 방법으로 이미지를 삽입했기 때문이다.

• background를 이용하여 이미지를 삽입하면 위와 같이 이미지가 깨져서 삽입된다.
• background는 이미지를 너비와 높이에 무조건 꽉 채운다. 그러나 width 설정을 “wrap_content” 로 한 후 중앙으로 보내는 설정을 해 주면 된다. (복잡하니 그냥 src를 이용하여 이미지를 삽입하도록 한다.)

[4. EditText로 이메일과 패스워드 입력 창 생성]

[5. Button 생성]

[6. 가로로 TextView 두 개 삽입]

• weightSum을 이용하여 절반씩 text를 배치한다.

[7. Text Color , Size 바꾸기]

• line 13, 84 : 글씨 색을 바꾼다.
• line 14,73,84 : 글씨 크기를 바꾼다.

[8. Button Color를 바꾸기 위해 색깔 따오기]

nanyoungkim.tistory.com/13

Pixlr Editor로 색상코드(HEX) 알아내기

위의 링크에서 먼저 버튼 색의 HEX 값을 알아오자.

 

 

 

 

 

• 안드로이드에서 제공하는 머터리얼 디자인을 사용하기 위해 ‘Gradle Scripts — build.gradle’ 에 line 30을 추가한다. 그 후 오른쪽 상단의 Sync Now 를 클릭하여 관련 소스들을 다운로드한다.
• 주의 : 버전이 바뀌면서 에러가 발생한다. 해결을 위해 유투브 강의 댓글을 서치한 결과 문제를 해결할 수 있었다.

 

• line 30과 같이 implementation ‘com.google.android.material:material:1.0.0-rc01’ 라고 타이핑한다.
• 그 후 Sync Now 를 클릭하면 싱크가 잘 맞는것을 확인할 수 있다.

 

 

 

[9. 상업용 이미지 파일 다운]

• https://www.iconfinder.com 에 접속한다.

• present 를 검색한 후, PRICE는 ‘Free’로, LICENSE TYPE은 ‘For commercial use’로 선택한다.

• 원하는 사진을 다운로드 한다.
• Size는 128px, 64px, 48px 세 종류를 다운한다.
• 참고 : 더 심플한 이미지를 원하면 https://material.io/resources/icons/?style=baseline 에서 다운로드가 가능하다. (google에 ‘material icon’ 검색)

 

[10. 다운로드 한 이미지 파일 프로젝트에 넣기]

• 왼쪽 상단의 Android를 Project로 바꾼다.

• app — src — main — res — drawable 폴더안에 다운로드 한 이미지 파일을 ctrl +v 하여 복사한다.
• 이때, 이미지 파일은 소문자와 언더바를 이용하여 간단하게 작성하도록 한다.

• line 21을 수정했더니 안드로이드 기본 아이콘에서 icon_present.png 파일로 바뀐 것을 확인할 수 있다.
• line 19를 수정하여 아이콘 크기를 조금 줄여보았다.
• 참고 : 원래는 원하는 화면 사이즈에 맞는 폴더 명을 지정한 후 이미지를 적절하게 넣어주어야 한다.

• 사이즈를 보는 방법: Pixel(Device for Preview) 클릭 — Add Device Definition 클릭 — 오른쪽 연필 모양의 Edit this AVD 클릭 — ‘5.96 1440x2560 560dpi’ 확인 가능.

그러나 여기 기초 강의에서는 그냥 drawable 폴더에 이미지를 넣는다.

[11. Hint 이용하여 텍스트 넣기]

• line 29, 35를 추가한다.

[11. 버튼 라운딩 처리 하기]

• 우리가 원하는 버튼 디자인은 타원형이나, 기존의 Button 은 네 모서리를 둥글게 하는 기능이 없다. 이를 해결해보자.

• drawable폴더에 xml 파일을 한개 더 생성한다.

• selector 라는 디자인 요소를 정의한다.
• item : 정상 상태일 때를 정의한다.
• shape : 정상 상때일 때의 모양을 정의한다.
• solid : 색을 정의한다.
• corners : 모서리를 둥글게 한다.

• line 44,61 : 모서리를 둥글게 처리하였다.
• line 45,62 : 텍스트 컬러를 변경하였다.

[12. 버튼 컬러 변경하기]

• bin_blue.xml 파일에 8번에서 딴 색깔 여섯자리를 line 6에 적용한다.bin_darkblue.xml 파일도 하나 생성하여 위와 같은 방법으로 색깔 6자리를 타이핑한다.

• activity_login.xml 파일의 line 44, 61 : 버튼 컬러가 바뀜을 확인할 수 있다.

[13. 중간 점검]

• 빌드를 하고 Email 칸에 타이핑을 하였으나 ‘Email’이라는 글자가 사라지는 것을 확인하였다. 이를 해결해보자.

[14. TextInputLayout & TextInputEditText 사용하기]

• 위와 같이 타이핑하고 빌드해보자.

• 타이핑을 하면 Email 이라는 글자가 사라지는 것 대신 위로 올라감을 확인할 수 있다.

[15. 여백 주기]

• line 14, 24,32,46,64,73 과 같이 layout_marginBottom 을 16dp로 지정해준다.

결과

• line 6, 7 : 양 옆에 padding 을 준다.
• line 8 : 위에 padding 을 준다.

[16. 버튼에 이미지 넣기]

• 버튼에 아이콘을 추가하기 위해 line 68을 추가했더니 오른쪽과 같은 결과가 나왔다. 크기 문제를 해결해보자. (해결책 — RelativeLayout 사용)

[17. 버튼이 눌렸을 때 효과 주기]

• 좌측 프로젝트에서 app-src-main-res-values-colors.xml 파일에 색을 정의한다.

• bin_blue.xml 파일을 위와 같이 수정한다.
• 3개의 아이템 엘리멘트 : 각각 버튼이 눌린 상태(Yellow), 평소 상태(Blue), 누를 수 없는 상태(Gray)를 위한다.
• colors.xml 파일에 색을 정의했으므로 “@color/colorYellow” 와 같이 쓸 수 있는 것이다.

• bin_darkblue.xml 파일도 위와 같은 방식으로 수정해준다.

[17. 정렬 다듬기]

• Log in 버튼과 Log in with Facebook 버튼을 만들기 위해 LinearLayout 안에 ImageView와 TextView를 사용한다.
• 전체적인 틀은 LinearLayout 을 이용하고 weightSum 으로 그림과 텍스트 간의 비율을 맞춰준다.
• 그러나 실행화면을 보면 ‘Log in’ 글자와 ‘Log in with Facebook’ 글자가 살짝 오른쪽으로 치우친 것을 확인할 수 있다. 이를 해결해보자.

[18. 입력한 값 가져오기]

• 참고 : RelativeLayout은 버튼이 아니므로 clickable = “true” 가 필요하다.

• line 40,55,63 : MainActivity.java 에게 xml 파일 안의 컴포넌트들의 존재를 알려주기 위해 id 를 지정한다.

• line 12,13 : 컴포넌트 종류를 앞에 써 주고 그 뒤에 변수명을 타이핑하여 변수를 선언한다. (에러가 뜨면 맥 기준에서 alt+Enter 를 통해 class 를 import 해준다. )
• line23,24,25 : 선언한 변수들에 실제 값들을 대입한다.

• setClickable — 클릭 가능 여부 설정 / setOnClickListener : 클릭 리스너 설정
• line 36 : 클릭이 가능하다는 것을 설정해준다.
• line 37 : 클릭 리스너를 설정한다.
• line 40,41 : 사용자가 이메일과 패스워드를 입력한 후 로그인을 클릭했을 때 값을 받아온다는 의미이다.

• Intent 방식 : 값을 주고 받는 하나의 규약.
• putExtra : key와 value 를 이용하여 값을 찾아온다. (key로 찾아서 value를 빼오는 것)
• line 48 : 넣은 값을 다음 액티비티로 던지기 시작하겠다는 의미이다.
• line 45 : 어디로 던질지 정해준다.

• 값을 잘 받아 왔는지 확인해보자.
• LoginResultActivity.java 에서 위와 같이 입력한다.
• line 30 : intent.getDataString() 으로 하지 않은 이유는 MainActivity.java 에서 값을 던질 때 putExtra()로 보냈기 때문이다.

• 빌드를 한 후, 이메일과 패스워드를 입력하고 로그인 버튼을 누르면 위와 같이 오류가 뜬다. 이를 해결해보자.

• app — src — res — AndroidManifest.xml에 Activity를 정의해줘야한다.
• line19–20 과 같이 정의해준다.

• 그럼 성공적으로 로그인 정보를 스크린에 띄울 수 있다.

[19. 입력한 값이 올바른지 체크하기]

• MainActivity.java 에 addTextChangedListener을 이용한 코드를 작성한다.
• 이메일은 123@gmail.com 이고 패스워드는 1234일 때만 로그인 버튼을 클릭할 수 있도록 하는 것이 목표이다.
• 어떤 값이 들어가는지 알기 위해 Log를 찍어보자.(Logcat 확인)
• line 48의 s 가 입력한 이메일 값이라는 것을 알 수 있었다.
• 전역변수의 데이터 타입을 CharSequence로 하던가, s를 String형으로 바꿔줘야 한다.

• 주의 : toString()을 보면 string 을 return 한다고 했는데 null 이면 에러가 발생할 수 있으니 null 값을 체크한 후 toString 을 해야한다.

• if 괄호 안의 식이 살짝 지저분하다.

• validation() 함수를 이용하여 간단하게 만들어 보았다.
• validation() 의 리턴 값에 따라 클릭이 가능하게 혹은 가능하지 않게 설정할 수 있다.
• 실행하면 오류가 발생한다.
• 첫번째 오류 : 아무것도 타이핑하지 않고 Log in 버튼을 눌러도 클릭이 된다. (해결 방법 => activity_login.xml파일에서 Log in 버튼이 있는 LinearLayout 의 clickable 을 설정한 코드를 지워준다.)
• 두번째 오류 : 올바르게 입력하고 Log in 버튼을 눌렀을 땐 클릭이 되지 않는다.

• validation() 함수를 위와 같이 수정해주면 된다. => 두번째 오류 해결
• 자바에서는 문자열 비교는 equals()로 해야하기 때문이다.