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

---

"앱인벤터 다이어리"의 Screen3(달력을 이용한 다이어리)의

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

 

[Screen3 블록코딩]

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

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

[Screen3 화면디자인]

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

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

---

목차

1.  Screen3_day 하루기록 상세화면
2.  Screen3_day Designer
3.  Screen3_day Block

---

Screen3_day 또한 Screen3에 이어 이지이지(EGEasy) 블로그를 참고하여 제작하였습니다.

 

Screen3_day는 하루기록 상세화면으로, Screen3 달력의 ♥가 있는 날짜를 클릭하면 출력되는 화면입니다. 상세화면의 ListView에서 기록을 볼 수 있고, 목록을 클릭하고 하단 삭제버튼을 클릭하면 해당항목이 삭제됩니다.

---

1. Screen3_day 하루기록 상세화면

ListView(목록뷰)를 사용하여 Screen3(달력을 이용한 다이어리)에서 작성한 title과 memo를 보여줍니다. yy.mm.dd record 부분에는 달력에서 선택한 날짜가 출력되는 곳입니다. Phone size에서 컴포넌트가 잘려서 Tablet size도 함께 첨부합니다.

01

Screen3_day(하루기록 상세화면) 구성

---

2. Screen3_day Designer

컴포넌트

이름

속성

속성상세

	Screen3_Day	AboutScreen	달력+상세화면
		AlignHorizontal	Left:1
		AlignVertical	Top:1
		Scrollable	false
		TitleVisible	false

VerticalArrangement (수직배치)	전체배치_가운데_정렬	AlignHorizontal	Center:3
		AlignVertical	Top:1
		Height	Fill parent (부모요소에 맞추기)
		Width	Fill parent (부모요소에 맞추기)

Image	Image1	Height	15 percent
		Width	20 percent
		Picture	diary.png

Label	line_top	BackgroundColor	#ffd687ff
		Height	2 pixels
		Width	40 percent

Label	날짜	FontBold	true
		FontSize	25
		Height	Automatic(자동)
		Width	Fill parent (부모요소에 맞추기)
		Text	yy.mm.dd record
		TextAlignment	center:1

Label	line_bottom	BackgroundColor	#ffd687ff
		Height	2 pixels
		Width	40 percent

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

ListView(목록뷰)	목록뷰1	BackgroundColor	#ffefcfff
		Height	50 percent
		Width	97 percent
		ListViewLayout	Main Text, DetailText(Vertical)
		Orientation	vertical
		SelectionColor	Default
		Textcolor	Blue
		TextColorDetail	Black
		TextSize	22

Label	br3	Height	10 pixels
		Width	Fill parent (부모요소에 맞추기)

Button	삭제	BackgroundColor	#66cfc7ff
		FontBold	true
		FontSize	15
		Height	Automatic(자동)
		Width	20 percent
		Shape	rounded
		TextAlignment	center:1

---

3. Screen3_day Block

초기 설정

list_db는 선택된 날짜의 기록(일기)을 저장해놓기 위한 변수입니다.

title은 기록제목, memo는 기록내용을 저장하는 변수입니다.

 

setListView 함수

list_intialize에 ListView에 나타날 항목을 넣어줍니다.

예를 들어, 2022년 07월 15일에 제목은 '오늘의 야식', 내용은 '오늘 저녁엔 야식을 먹었다. 치킨을 시켜먹었다. 언제먹어도 정말 맛있다.', 같은날 또 다른 기록으로 제목은 '점심시간', 내용은 '점심메뉴가 별로라 나가서 샌드위치를 사먹었다. 고기가 적어서 아쉬웠다.' 라는 기록이 있다면 list_db에는 [ [ ["title","오늘의 야식"],["memo", "오늘 저녁엔 야식을 먹었다. 치킨을 시켜먹었다. 언제먹어도 정말 맛있다."] ], [ ["title","점심시간"],["memo", "점심메뉴가 별로라 나가서 샌드위치를 사먹었다. 고기가 적어서 아쉬웠다."] ] ] 와 같이 저장되어 있습니다.

 

ListView 선택 및 삭제

delete_item_num에 ListView에서 선택된 항목의 인덱스를 저장합니다.

삭제 버튼을 클릭했을 때 선택된 항목이 없다면 알림을 띄웁니다.

항목을 선택 후 삭제 버튼을 클릭하면 해당항목이 삭제됩니다.

 

뒤로가기 버튼

스마트폰 하단 뒤로가기 버튼을 클릭하면 해당 화면이 닫히면서 이전화면인 Screen3으로 이동하게 됩니다.