본문 바로가기

모바일 개발/안드로이드

로그인, 회원가입 만들기(1) - 디자인

안녕하세요 이번에 먼저 로그인 기능을 만들어 보겠습니다. 그리고 로그인이 있으면 당연히 회원가입이 있어야만 되겠죠?

https://www.youtube.com/watch?v=ktjJ8xtt2Hg 

참고는 여기서 했습니다.

 

 

일단 DB부터 세팅을 합니다. 저는 칼리 리눅스에 DB을 설치했습니다. 그리고 기본적인 APM 설치까지 했습니다.

 

아무래도 안드로이드가 서버와 연동을 하려면 http 요청으로 데이터을 보내야만 하거든요.

그래서 우선 DB와 서버 설치 했습니다.

 

https://mynameisarke.tistory.com/2

 

[노말틱 모의 해킹 취업반 1주차 개발과제 (1)] APM 세팅

APM세팅하기 우선적으로 APM이 무엇인지 알아봅시다. APM이란 Apache, Php, MySql의 맨 앞 알파벳을 따와서 만든 것입니다. . . . . 끝내기엔 쪼금 성의 없으니 더 설명하겠습니다. -Apache 란?- 풀 네임은 Apa

mynameisarke.tistory.com

만약 설치하는 방법 알고 싶으시다면 여기 보시면 돼요.

 

 

그리고 안드로이드 스튜디오를 킵니다.

 

참고로 저는 안드로이드 스튜디오 관련 책을 산 뒤에 최소한 문법은 본 상태입니다!

 

New Project

 

 

Empty

 

 

그리고 이름 정하시고 저장 위치도 맘에 드시는 곳에 두시고 실행!

 

 

만약 처음이시면 세팅을 하는데 오래 걸리실 거예요. 기다려줍니다.

 

 

welcome to the hell..

 

우선 한 줄 먼저 추가하겠습니다.

 

왼쪽에 Gradle Scripts 폴더 안에 build.gradle (Module:app)에 들어갑니다.

 

 

지옥의 첫 걸음

 

그다음에 depentencies에 한 줄 추가하겠습니다.

 

implementation 'com.android.volley:volly:1.1.1'

 

통신을 쉽게 해주는 모듈이에요

다음에 맨 위에 Sync Now을 클릭합니다.

 

새로고침하고 다시 시작하는 겁니다.

 

이 volley 모듈은 서버와 다운 업로드 데이터 보내는데 쓰이는 라이브러리입니다.

 

다음에 위에 activity_main.xml 들어갑니다.

 

 

그리고

 

 

왼쪽 위에 ab TextView 보이시죠?

그걸 드래그해서 아래 Component Tree로 옮겨서 생성하겠습니다. 5개 만들게요!

 

그다음에..

 

오른쪽에 핸드폰 화면이 보이실 거예요. 거기에 TextView 들을 제가 원하는 위치로 옮길게요

잡고 드래그하면 됩니다. 참 디자인 쉽네요

 

 

1자 나열 했어요

 

그런 다음에 Hello World! 클릭하시면 스프링이 보이실 거예요. 상하좌우로요.

 

그중 아래 스프링을 지우겠습니다. 오른쪽에 Layout 란에 아래 원표시 마우스 올리시면 x 나오는데 누르면 됩니다.

 

여기서

 

 

그럼 위로 쭉 올라가질 겁니다. 그리고 남은 TextView 클릭해 윗부분 드래그 해서 스프링을 아래로 연결하겠습니다.

 

이렇게요

 

남은 3개도 다 잇겠습니다.

 

좋아요

 

그리고 난 뒤에 margin 값을 줘서 사이사이 공간을 띄우겠습니다.

 

간단해요.

맨 아래에 TextView 먼저 클릭을 하시고 오른쪽에 좌우 + 누르시고 위 좌 우 8씩 margin 값을 주겠습니다.

 

이렇게요

 

나머지 TextView 똑같이 해주겠습니다.

 

HelloWorld는 윗부분 100으로 줬습니다.

 

 

HelloWorld

 

깔끔하니 좋네요

 

그리고 HelloWorld textsize 25 키웠고요

 

HelloWorld

 

2번째 TextView는 아이디로 바꾸고 크기 20 정도 주겠습니다.

 

좋아요

 

그리고 3번째 TextView에는 아이디 입력 란이 될 테니 오른쪽 위에 id을 user_id로 적겠습니다.

 

그러면

 

Refactor

 

 

그리고 다음 크기도 좀 크게 24sp 하겠습니다.

 

좋아요

 

그리고 다음 TextView는 비밀번호 적고 20 크기 줬습니다.

 

 

그리고 마지막 TextVIew는 비밀번호 입력 란이니 id에 user_pw라 적었고요.

 

그리고 글씨 크기를 24sp 줬습니다.

 

 

 

 

 

이제 얼추 디자인은 됐네요!

 

 

 

 

저희는 로그인하고 볼 메인 화면을 만든 겁니다.

 

이제 회원가입 창부터 디자인할게요.

왼쪽에 app > java > com.example.[저희 프로젝트 이름] 우클릭합니다.

 

그다음에 new > Activity > empty 눌러줍니다.

 

 

 

 

그런 다음 이름은 각자 자유입니다.

 

저는 이렇게 정했어요

 

그리고 만들기 이거는 이제 회원가입 용입니다.

 

먼저 디자인부터 하겠습니다.

위에 새로 생긴 activity_register.xml이 있으실 거예요.

 

그거 클릭하신 다음

 

text 란에 Plain Text이 있을 겁니다.

 

그걸 드래그해서 하얀 백지 위에 올릴게요

 

이렇게요

 

이번에도 마찬가지로 4개 놓을게요.

 

아이디 비밀번호 이메일 전화번호 작성 가능하게요!

 

그리고 마지막에 회원가입하기 버튼까지 추가하겠습니다.

Text란 바로 밑에 버튼 있어요 Button 드래그 놓기만 하면 됩니다.

 

 

디자인은 쉽네요 css 보단

 

 

 

마찬가지로 스프링으로 연결하겠습니다.

맨 위에 있는 Plain Text는 margin 위쪽을 200 주고 스프링을 위로 전부 연결하겠습니다.

 

 

그리고 각각 스프링으로 아래에서 위로 연결해주고 16씩 띄워 줬습니다.

 

이렇게요

 

 

또 방금 전처럼 좌우 + 누르셔서 추가하신 다음 margin 8로 줄게요.

 

아니면 양옆을 위로 연결 하셔도 돼요.

 

 

이렇게요

 

버튼은 크기가 안 맞으니 좌우 스프링을 줬습니다.

 

그리고 각각 Name 적혀 있는 것을 지우겠습니다.

그리고 Hint에다가 각각 어느 걸 적어야 되는지 적겠습니다.

 

 

text는 지우고 Hint에만 적으세요

 

각각 비밀번호, 이메일, 전화번호 적어주겠습니다.

 

그리고 id 값도 변경해줘야 합니다.

오른쪽 맨 위에 editTextText라 있으실 텐데 각각 et_id, et_pw, et_em, et_ph 주겠습니다.

 

버튼은 btn_register 하고 가입이라고 적어 두겠습니다.

 

 

예시입니다.

 

그리고 각각 크기를 20 정도 늘려줄게요

 

 

textsize을 20sp로 설정하시면 돼요

 

좋아요! 이제 회원가입 창도 만들어 줬습니다.

 

이제 로그인 화면입니다. 회원가입이랑 별반 다를 게 없어요.

그저 plain 2개 버튼 1개만 있으면 되죠.

 

또 com.example.[프로젝트 이름] 우클릭하시고 new > activity > empty 눌러줍니다.

 

 

저는 이렇게 했습니다.

 

그리고 또 새로 생긴 login.xml 들어가고 plain text 2개 (각각 아이디와 비밀번호)

버튼 2개 (로그인 회원가입 용) 만들어 줍니다.

 

참고로 plain text는 edit text라고 적을 수 있는 공간입니다.

 

 

그리고 각각 스프링을 잘 이어 주고 margin 값도 잘 줍니다.

 

전이랑 같아요

 

아래에서 위로 스프링 연결하고

맨 위의 plain_text는 양옆 스프링 해주고 버튼들도 양 옆 스프링 추가 해줬습니다.

 

각각 id 줘야죠

 

위에서부터 차례로 login_id, login_pw, btn_login, btn_for_reg 했습니다.

 

Text 지우고 힌트란에도 적어 주고 크기도 20sp 줬습니다.

 

 

만약 버튼 꾸며 주고 싶으시면 버튼 클릭 후 오른쪽에 Common Attributes에 style이 있을 거예요.

생상도 꾸밀 수 있고 여러 개 있습니다. 저는 이 세세한 것은 맨 마지막에 하겠습니다.

 

이렇게 쉽게 3 화면을 꾸몄습니다. 이제 간단한 volley 설정하고 서버 셋팅까지 해야됩니다.

지금 포스팅이 너무 길어서 끊고 다음 포스팅에 이어서 하겠습니다. 감사합니다.