Swift UI - 1. basic guide

 SwiftUI - 1. basic guide


스위프트로 앱을 만들때는  view 들을 만들어서 그 아래에 속성들을 달고 view들을 배치해서 앱을 구성하게 된다. 

1) ContentView

앱의 기본이 되는 뷰다.  프로젝트를 새로 만들면 자동적으로 생성된다. 

SwiftUI를 임포트 하고 ContentView는 View를 상속받고 안에 body 가 있다.  그 아래에 여러 뷰들을 넣으면 화면에 배치가 된다.

import SwiftUI


struct ContentView: View {

    var body: some View {

        

        Text("hello")

            

    }

}


2) ContentView_Previews

코드의 미리보기를 보여준다. 안에 기본적으로 ContentView가 들어있으나 다른 View를 넣으면 해당 뷰의 미리보기를 보여준다.

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}



















3) Text()

화면에 텍스트를 표시한다 ()안의 내용을 표시한다. 

 Int형을 출력 하려면 () 안에 "\(Int)" 를 넣어줘야 한다.

<설정>

크기 - .font(.system(size: )

굵기 - .fontWeight() .heavy, .bold 등등

글자 색 -  foregroundColor(.color)

라운드 주기 - cornerRadius(반지름)

프래임 지정하기 - frame(minWidth : , maxWidth : ,minHeight : , maxHeight : ) -> 프래임 크기 설정(숫자 or .infinity)

등등

struct ContentView: View {

    var body: some View {

        

        Text("hello")

            .font(.system(size : 50))

            .fontWeight(.bold)

            

    }

}
















4) Hstack & Stack

{} 안의 뷰들을 가로 또는 세로로 배치해 준다. 

<속성>

padding() : 해당 뷰의 상하좌우에 공백을 준다. 화면 오른쪽에 뜨는 임펙트창에서 공백을 줄 위치와 양을 입력해주면 자동으로 코드를 완성해준다. 

background(Color.color) : 배경에 color에 들어가는 색을 넣어준다.

.edgesIgnoringSafeArea(.all) : 화면의 코너부분까지도 다 체운다. 


struct ContentView: View {

    var body: some View {

        

        HStack{

            Text("Hello")

                .font(.system(size: 50))

        

            Text("안녕")

                .font(.system(size: 50))

        

            VStack{

                Text("world")

                    .font(.system(size: 30))

                Text("월드")

                    .font(.system(size: 30))

            }

            .padding(.all, 20.0)

            .background(Color.green)

          

        }

        .padding(.all, 10.0)

        .background(Color.red)

    }

}

















* 뷰를 따로 빼서 새롭게 만들어 준다음에 넣어 줄 수도 있다. 

struct ContentView: View {

    var body: some View {

        

        HStack{

            Text("Hello")

                .font(.system(size: 50))

        

            Text("안녕")

                .font(.system(size: 50))

        

            VStack{

               MyView()

            }

            .padding(.all, 20.0)

            .background(Color.green)

          

        }

        .padding(.all, 10.0)

        .background(Color.red)

    }

}



struct MyView: View{

    var body: some View{

        Text("world")

            .font(.system(size: 30))

        Text("월드")

            .font(.system(size: 30))

    }

}

위와 같이 코드를 짜도 동일하게 작동한다. 

아예 Swift파일을 새롭게 만들어서 불러와도 가능하다











댓글

댓글 쓰기

이 블로그의 인기 게시물

Spring Boot 6. 계시판 프로젝트

이미지
 Spring Boot 6. 계시판 프로젝트 1. 프로젝트 구조 1:N 관계 하나의 유저는 여러개의 글을 작성할 수 있음 하나의 글에는 여러 댓글이 달릴 수 있음 3개의 테이블이 서로 참조함(user, board, reply) 2. 프로젝트 생성 - 추가 라이브러리 Spring Boot DevTools, Lombok, Spring Web, Thymeleaf, Spring Data JPA - DB 및 Thymeleaf 설정 build.gradle dependencies 안에 mariadb 드라이버 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' // 추가 implementation group : 'org.mariadb.jdbc' , name : 'mariadb-java-client' , ...
자세한 내용 보기

Spring Boot 2. Maria 데이터베이스 & Spring Data JPA

이미지
 Spring Boot 2. Maria 데이터베이스 & Spring Data JPA 1. Maria DB 설치와 데이터베이스 생성 1) Maria DB 설치 맥에서는 홈브류를 이용해서 설치 brew install mariadb 2) DB 생성 워크벤치를 이용해서 DB 생성 - 새로운 연결 생성 username : root pw : 1234 - DB 생성 Schemas ->우클릭 create schema.. -> 이름 :bootex, Character set : utf8 -> apply - 사용자 생성 Administration -> Users and Privileges -> Add Account  -> Login Name : bootuser, Limit to Hosts Matching : %(모든 곳에서 접근 가능), pw : bootuser -> Schema Privileges -> Add Entry -> Selected schema -> bootex 선택 -> Select All -> Apply   2. Spring Data JPA 를 이용하는 프로젝트 생성 1) 프로젝트 생성 기존 프로젝트 생성방식과 동일. 단 Dependencies를 선택하는 부분에서 기존에 선택한 라이브러리에서 추가로 SQL 탭의 Spring Data JPA 선택 2) DB를 위한 Spring Boot 설정 Spring Boot에서는 특정한 라이브러리가 있다면 관련된 설정들을 자동으로 추가해줌 그러나 지금 상태에서 실행을 하면 에러가 발생하는데 이는 Spring Data JPA 라이브러리가 추가되면서 자동으로 이에 관련된 설정도 추가되었지만 구체적인 값이 지정되지 않았기 때문 -> 두 가지 설정 필요 - Maria DB를 위한 JDBC 드라이버 https://mvnrepository.com/artifact/org.mariadb.jdbc  접속 -> 1. MariaDB J...
자세한 내용 보기

Django 10. DB 연동

이미지
 Django 10. DB 연동 1. 테이블 생성 settings.py 파일의 DATABASE 딕셔너리에 DB 관련 정보 작성 기본적으로 SQLite로 되어있고 다른 DB를 사용할 수도 있음 models.py 파일에 클래스를 이용해서 모델 생성 models.Model 을 상속받아서 작성 클래스 명은 테이블 명으로 작성 멤버 변수로 테이블의 컬럼 지정 models.[데이터 타입](옵션) * 데이터 타입  integer, char, boolean, date, decimal(float), text, file 등 * 옵션 null, blank, choice, default, primary_key, unique 등 PK 컬럼은 따로 지정하지 않으면 자동으로 생성됨 * 예시 class Question ( models . Model ): question_text = models.CharField( max_length = 200 ) pub_date = models.DateField( "date published" ) class Choice ( models . Model ): question = models.ForeignKey(Question, on_delete = models. CASCADE ) choice_text = models.CharField( max_length = 200 ) votes = models.IntegerField( default = 0 ) python3 manage.py makemigrations : magrations 폴더 안에 마이그래이션 파일(py) 생성 python3 manage.py migrate : 마이그래이션 파일을 DB에 적용해서 테이블 생성 * 데이터 표시 테이블의 해당 컬럼에 대한 정보를 지정하려면 모델 클래스에 __str__ 맴버함수를 정의해소 표시할 문자열을 반환 * 예시 class Question ( models . Model ): question_text...
자세한 내용 보기