이번시간엔 안드로이드 회원가입, 로그인 프로그램에 대해 포스팅 해보려고 한다. 보통 우리가 어떤 사이트에서 무언가의 대한 정보를 보기 위해 회원가입을 많이 한다. 근데 이게 어떤 원리인지 참 궁금한 점이 많았다. 그래서 안드로이드로 한번 구현해보았다.
1. activity_main.xml 디자인 구현
좀 작아서 안보이긴 하겠지만 text필드의 E-mail, password필드를 이용해서 구성하고 Button 2개, Large text 2개를 구성해서 저런 화면으로 배치해보았다. 솔직히 모양은 그렇게 크게 맘에 들진 않지만 나중에 뒤에 배경도 같이 한번 넣어볼 계획이다.
2. activity_main.xml text구현
이젠 텍스트 어떤식으로 배치할 것이며 간격은 얼마나 할건지에 대한 코딩이다. 나는 다음과 같이 코딩했다.
?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.gunjoolee.myapple.MainActivity"
android:gravity="right">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="@+id/etEmail"
android:hint="Email"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Password"
android:ems="10"
android:id="@+id/etPassword"
android:layout_below="@+id/etEmail"
android:layout_alignParentRight="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="회원가입"
android:id="@+id/btnRegist"
android:layout_below="@+id/etPassword"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="로그인"
android:id="@+id/btnLogin"
android:onClick="onButtonClicked"
android:nestedScrollingEnabled="false"
android:layout_alignTop="@+id/btnRegist"
android:layout_alignEnd="@+id/etPassword" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="이메일: "
android:id="@+id/textView"
android:layout_centerVertical="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="비밀번호: "
android:id="@+id/textView2"
android:layout_above="@+id/btnRegist"
android:layout_alignParentStart="true" />
</RelativeLayout>
Linear Layout으로 하려다 그냥 Relative Layout로 했다. 별 내용은 없고 어떤식으로 배치할 것인지에 대해 짠 코드다.
3. Main_activity.java 파일에 대한 구현
방금 만든 화면에 대한 코딩이다. 어떤식으로 동작하게 할지에대한 코딩이다.
package com.example.gunjoolee.myapple;
;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private EditText etEmail;
private Button btnRegist;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etEmail = (EditText) findViewById(R.id.etEmail);
btnRegist = (Button) findViewById(R.id.btnRegist);
btnRegist.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getApplicationContext(), RegistActivity.class);
// SINGLE_TOP : 이미 만들어진게 있으면 그걸 쓰고, 없으면 만들어서 써라
intent.setFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
// 동시에 사용 가능
// intent.setFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP | Intent.FLAG_ACTIVITY_CLEAR_TOP);
// intent를 보내면서 다음 액티비티로부터 데이터를 받기 위해 식별번호(1000)을 준다.
startActivityForResult(intent, 1000);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
// setResult를 통해 받아온 요청번호, 상태, 데이터
Log.d("RESULT", requestCode + "");
Log.d("RESULT", resultCode + "");
Log.d("RESULT", data + "");
if(requestCode == 1000 && resultCode == RESULT_OK) {
Toast.makeText(MainActivity.this, "회원가입을 완료했습니다!!", Toast.LENGTH_SHORT).show();
etEmail.setText(data.getStringExtra("email"));
}
}
public void onButtonClicked(View v) {
Intent intent = new Intent(getApplicationContext(), finalActivity.class);
startActivity(intent);
finish();
}
}
아 옆에 세어나간게 있는데 양해부탁-_-;; 대강 이런식으로 한번 만들어봤다. onClick를 통해 intent 액티비티가 가능하게 하고 회원가입이 되면 회원가입이 되었다는 문구를 넣음으로써 한번 만들어봤다. 마지막 라인에 있는 코드는 로그인 되었을시 화면전환에 대한 코드를 작성했다. finalActivity라는 파일을 상속시켜서 만들어봤다.
4. Activity_regist.xml 화면 디자인 구성
대강 이런식으로 구성해보았다. 사용했었던 text는 아까하고 똑같은걸 사용했다. 단지 배치만 좀 달라졌을뿐이다. 아무튼 화면은 저렇게 구성을 했고 text에 대한 코드는 다음과 같다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.gunjoolee.myapple.RegistActivity">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:hint="Email"
android:id="@+id/etEmail" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:hint="Password"
android:id="@+id/etPassword" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:hint="Password"
android:id="@+id/etPasswordConfirm" />
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btnDone"
android:text="가입"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnCancel"
android:text="취소"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
이런식으로 텍스트 배치를 해보았다. 저 배치가 딱 정석인거같다. 여러모로 테스트해보고 배치 해본 결과이다.
5. Regist.Activity.java 코드
이제 이 화면이 어떻게 동작할지에 대해 코드를 짜보았다. 코드는 다음과 같다.
package com.example.gunjoolee.myapple;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class RegistActivity extends AppCompatActivity {
private EditText etEmail;
private EditText etPassword;
private EditText etPasswordConfirm;
private Button btnDone;
private Button btnCancel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_regist);
etEmail = (EditText) findViewById(R.id.etEmail);
etPassword = (EditText) findViewById(R.id.etPassword);
etPasswordConfirm = (EditText) findViewById(R.id.etPasswordConfirm);
btnDone = (Button) findViewById(R.id.btnDone);
btnCancel = (Button) findViewById(R.id.btnCancel);
// 비밀번호 일치 검사
etPasswordConfirm.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
String password = etPassword.getText().toString();
String confirm = etPasswordConfirm.getText().toString();
if( password.equals(confirm) ) {
etPassword.setBackgroundColor(Color.GREEN);
etPasswordConfirm.setBackgroundColor(Color.GREEN);
} else {
etPassword.setBackgroundColor(Color.RED);
etPasswordConfirm.setBackgroundColor(Color.RED);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
btnDone.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 이메일 입력 확인
if( etEmail.getText().toString().length() == 0 ) {
Toast.makeText(RegistActivity.this, "Email을 입력하세요!", Toast.LENGTH_SHORT).show();
etEmail.requestFocus();
return;
}
// 비밀번호 입력 확인
if( etPassword.getText().toString().length() == 0 ) {
Toast.makeText(RegistActivity.this, "비밀번호를 입력하세요!", Toast.LENGTH_SHORT).show();
etPassword.requestFocus();
return;
}
// 비밀번호 확인 입력 확인
if( etPasswordConfirm.getText().toString().length() == 0 ) {
Toast.makeText(RegistActivity.this, "비밀번호 확인을 입력하세요!", Toast.LENGTH_SHORT).show();
etPasswordConfirm.requestFocus();
return;
}
// 비밀번호 일치 확인
if( !etPassword.getText().toString().equals(etPasswordConfirm.getText().toString()) ) {
Toast.makeText(RegistActivity.this, "비밀번호가 일치하지 않습니다!", Toast.LENGTH_SHORT).show();
etPassword.setText("");
etPasswordConfirm.setText("");
etPassword.requestFocus();
return;
}
Intent result = new Intent();
result.putExtra("email", etEmail.getText().toString());
// 자신을 호출한 Activity로 데이터를 보낸다.
setResult(RESULT_OK, result);
finish();
}
});
btnCancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}
대략 이런식으로 구성해보았다. 비밀번호를 입력하게 되면 서로 일치하지않으면 빨간색, 일치하게 되면 가입이 되게 만들었는데 이건 구글링 해봐서 찾았다. 사실 여기서 내가 짠건 거의 없다...ㅠㅠ 하지만 코드를 보면 뭔지는 이해가 간다. 아무튼 이런식으로 화면구성 프로그램을 짜봤다.
6. Activity_final.xml 구성
이제 로그인 시키면 뭐가 나오는지에 대한 화면 구성이다. 대략적으로 나는 이렇게 만들었다.
매출관리,고객관리,상품관리 이렇게 3개를 만들었다. 그리고 text라인에 가선 이렇게 짜봤다.
?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
tools:context="com.example.gunjoolee.myapple.finalActivity">
<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="고객 관리"
android:id="@+id/button2"
android:layout_gravity="center"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="63dp" />
<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="매출 관리"
android:id="@+id/button3"
android:layout_gravity="center"
android:layout_alignParentTop="true"
android:layout_alignStart="@+id/button2" />
<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="상품 관리"
android:id="@+id/button4"
android:layout_gravity="center"
android:layout_below="@+id/button3"
android:layout_alignStart="@+id/button3"
android:layout_marginTop="94dp" />
</RelativeLayout>
이렇게 만들어주면 저 위화면하고 똑같이 나온다. 아까 처음에만든 main에서 이미 이 액티피티에 대한걸 클래스로 상속시켜줬기때문에 생략하겠다.
7. Activity_final.java의 대한 코드 구성
여기선 별거 없다. 다음과 같이 짜여졌다.
package com.example.gunjoolee.myapple;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class finalActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_final);
}
}
자, 이렇게 모두 구성이 완료되었다. 실행시켜보면 다음과 같아진다.
8. 실행화면
