[App Inventor] 앱인벤터 다이어리/메모장 만들기 #7

---

"앱인벤터 다이어리"의 Screen4(To Do List)의

화면디자인 및 블록코딩은 이전 포스팅을 참고해주세요!

 

[프로젝트/App Inventor] - [App Inventor] 앱인벤터 다이어리/메모장 만들기 #6

[App Inventor] 앱인벤터 다이어리/메모장 만들기 #6

---

목차

1. Screen6 비밀번호 입력화면
2. Screen6 Design
3. Screen6 Block

---

Screen6은 BeeEye Dum님의 시리즈에서 참고하여 제작하였습니다.

 

Screen6은 초기 실행 시 비밀번호를 설정할 수 있고, 이후 접근 시 비밀번호를 입력하여야 비밀일기장(Screen6_Secret)으로 넘어갈 수 있습니다. 

---

1. Screen6 비밀번호 입력화면

Screen6(비밀번호 입력화면) 구성

---

2. Screen6 Design

하단 알림1은 User Interface-Notifier(사용자 인터페이스-알림), 타이니DB1은 Storage-TinyDB(저장소-타이니DB)를 드래그앤드롭하면 됩니다.

컴포넌트

이름

속성

속성상세

	Screen6	AboutScreen	비밀번호
		AlignHorizontal	Left:1
		AlignVertical	Top:1
		TitleVisible	false

VerticalArrangement (수직배치)	수직배치1	AlignHorizontal	Center:3
		AlignVertical	Top:1
		BackgroundColor	#ef819bff
		Height	Fill parent (부모요소에 맞추기)
		Width	Fill parent (부모요소에 맞추기)

Label	top_title	FontBold	true
		FontSize	30
		Height	Automatic(자동)
		Width	Fill parent (부모요소에 맞추기)
		Text	Secret Record
		TextAlignment	center:1

Label	br0	Height	5 percent
		Width	Fill parent (부모요소에 맞추기)

Label	문구	FontBold	true
		FontSize	18
		Height	Automatic(자동)
		Width	Fill parent (부모요소에 맞추기)
		Text	4자리 비밀번호를 눌러주세요.
		TextAlignment	center:1

TextBox	비밀번호입력박스	BackgroundColor	#efcfd2ff
		Height	Automatic(자동)
		Width	50 percent
		Hint	비밀번호
		TextAlignment	center:1

VerticalArrangement (수직배치)	비밀번호_배치	AlignHorizontal	Left:1
		AlignVertical	Top:1
		Height	Automatic(자동)
		Width	80 percent

아래 표와 같이 동일한 수평배치를 수평배치1, 수평배치2, 수평배치3, 수평배치4로 4개 만들어줍니다. 수평배치안에 버튼3개씩 넣어줍니다. 버튼은 총 12개입니다. 아래 Button 표에서 Text값만 1,2,3...x,0,<로 설정해줍니다.

[버튼 구성]

1 2 3

4 5 6

7 8 9

x 0 <

HorizontalArrangement (수평배치)	수평배치1	AlignHorizontal	Center:3
		AlignVertical	Center:2
		Height	13 percent
		Width	Fill parent (부모요소에 맞추기)

Button	버튼1	BackgroundColor	#ef819bff
		FontSize	30
		Height	12 percent
		Width	12 percent
		Text	1
		TextAlignment	center:1

---

3. Screen6 Block

초기설정

Screen6을 초기 실행할 때, TinyDB password가 비어 있다면 설정된 비밀번호가 없다는 뜻이므로 문구(레이블)에 "첫번째 사용입니다. 4자리 비밀번호를 두 번 눌러주세요."라는 텍스트를 출력합니다. 

숫자버튼코드

숫자버튼을 클릭하면 btnNum 함수를 호출합니다.

btnNum 함수

사용자가 입력한 비밀번호가 4글자라면 "비밀번호를 한 번 더 눌러주세요"라는 알림창이 출력됩니다. 두 번째 누르는 비밀번호가 처음 입력한 비밀번호와 입력한다면 비밀번호가 저장됩니다. 비밀번호가 일치하지 않는다면 "비밀번호가 틀렸습니다. 다시눌러주세요"라는 알림창이 뜹니다. 

이후 접속부터 비밀번호를 입력 후 비밀번호가 일치한다면 비밀일기장(Screen6_secret)으로 접근할 수 있습니다.

알림창에서 OK버튼을 클릭하면 입력박스에 숫자들이 지워지며넛 비밀번호를 처음부터 다시 입력할 수 있습니다.

숫자 외 버튼

X버튼을 클릭하면 입력하고 있던  비밀번호가 지워지고 다시 입력할 수 있도록 TextBox가 지워집니다. <버튼을 클릭하면 1글자가 지워집니다.

뒤로가기 버튼

Screen6에서 스마트폰 하단 뒤로가기 버튼을 클릭하면 Screen2 메뉴화면으로 이동합니다.