1. 로또 시뮬레이터 앱 최종 화면 구성
이제 부터 본격적인 앱 만들기 돌입이다.
이번에 만들 로또 시뮬레이터의 최종 화면은 아래와같이 구성했다.
100% 아래와 같이 나오진 않겠지만, 일단 어떤 화면을 만드는지는
머리속에 생각하며 작업을 해야 해서 최종 화면을 우선적으로 그려보고 앱을 만드는 편이다.
그리고 개인적으로 이런 단순한 원페이지 하이브리드 형식의 앱을 만들 때 스크롤이 생기는걸 좋아하지 않아
최대한 한 화면에 간단하게 필요 한 것만 들어갈 수 있게 나름대로 고민하여 아래와 같이 구성 되었다.
ps.현재 PC가 맥북이라 윈도우 PC와 화면이 다른 부분이 존재 할 수 있고
이것 저것 막히는 부분이 생길수 있으니 진행중 안되는 부분을 댓글로 문의 주시면
답변 달아 드리겠습니다.
그럼 이제 진짜로 시작해 보자
2. 프로젝트 만들기
- 안드로이드 스튜디로 실행 후 New Project를 선택
- Empty Activity를 선택 후 Next
- Name입력 (T Lotto Simulator)
- Package name 수정 (com.niee.lottosimulator) Package name은 구글에 앱이 등록 될 때 다른 앱과 중복되지 않아야 하기 때문에 자신만의 고유한 이름으로 지정해야 하며 최소 3뎁스까지 입력 되어야 한다. (1뎁스.2뎁스.3뎁스)
- Finish
- Gradle 설정
- 프로젝트가 생성된 후 Gradles Scripts에 있는 build.gradle (Module: 프로젝트 Name) 파일을 더블 클릭한 후, compileSdk를 34로 수정한다. 그러면 위에 Sync라는 부분이 나오는데 Sync를 클릭한 후 에러 메세지가 안나오는지 확인.
3. 기본 파일 수정 및 웹뷰 만들기
- 생성된 좌측 프로젝트 최상단 app을 우클릭 하여 New -> directory를 선택 후 assets를 입력 하면 아래 선택하는 부분이 나오는데 src/main/assets를 선택한 후 엔터
- 폴더가 정상적 으로 생성 되면 아래와 같이 리스트에 나오게 된다.
- 폴더가 생성 되면 우 클릭하여 New -> File을 선택 파일명은 index.html로 입력 후 엔터키를 눌러 준다.
- 완성된 index.html에 아래 html내용을 붙어 넣자
<!DOCType html>
<html>
<head>
</head>
<body>
로또 시뮬레이터 만들기 !!
</body>
</html>
- 다음은 res -> layout 폴더에 있는 activity_main.xml을 열어보자
- 해당 파일을 열어보면 화면이 어떻게 나오는지 볼수 있다.
- 화면탭의 우측 상단을 보면 아래와같이 Code/Split/Design 버튼이 있는데 Code나 Split을 눌러 직접 입력 할 수 있게 레이아웃을 바꿔준다.
- TextView로 되어있는 부분을 아래 코드로 변경 해주자. 그럼 화면 미리보기에 아래 화면 처럼 wevView라는 영역이 꽉차게 변경 된 다.
<WebView
android:id="@+id/lotto_web_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
- java -> 패키지명 -> MainActivity를 열어 WebView를 띄어주는 코드를 추가해보자.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private WebView lottoWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lottoWebView = findViewById(R.id.lotto_web_view);
lottoWebView.loadUrl("file:///android_asset/index.html");
}
}
4. 에뮬레이터 만들어 화면 띄우기
- 이제 기본틀이 완성 되었으니 에뮬레이터를 만들어 화면을 띄어보자.
- 에뮬레이터는 우측 상단의 Divice Manager를 클릭한 후
- Create device를 눌러준다.
- Phone에서 Play Store에 아이콘이 보이는것들중 하나를 선택한다.
- System Image는 target에 Google Play가 적힌것중 자기 cpu에 맞는걸 찾아 선택해준다.
- m1: arm64-v8a
- intel: X86_64
- 에뮬레이터 이름을 지정해 준다.
- 정상적으로 만들어지면 아래와 같이 지정한 이름으로 리스트에 추가된다.
- Actions에 플레이 버튼을 누르면 아래처럼 안드로이드 에뮬레이터가 실행 된다.
- 에뮬이 정상적으로 실행 되면 우측 상단에 실행버튼을 누르면 에뮬레이터에 방금 만든 화면이 나오게 된다.
이렇게 기본적인 셋팅이 끝났다.
아마 기본 지식이 없는 분들은 여기서도 몇시간씩 허비하게 될 텐데
안되는 부분은 구글 검색등을 통해 찾아서 해결 하는 것 도 추후 발생할 문제 해결에 큰 도움이 될것이다.
본 포스트 내용을 동영상으로 따라하고 싶으신 분들은 아래 포스팅을 참조
https://appmoney.tistory.com/8
06. 동영상으로 따라하기.
지난 포스팅으로 작성했던 프로젝트 생성부터 기본화면 띄우기의 동영상 버전 https://appmoney.tistory.com/6 04. 프로젝트 만들기 + 기본 화면 띄어보기 1. 로또 시뮬레이터 앱 최종 화면 구성 이제 부터
appmoney.tistory.com
'취미 앱 개발 > 닥치고 앱 개발' 카테고리의 다른 글
| 06. 동영상으로 따라하기. (0) | 2023.11.27 |
|---|---|
| 05. 애드몹 연동하기 (0) | 2023.11.26 |
| 03. 주제 + 기능 정하기 (0) | 2023.11.24 |
| 02. 닥치고 앱 개발(준비하기) (0) | 2019.12.30 |
| 01. 닥치고 앱 개발(시작하기 앞서) (0) | 2019.12.19 |