이 튜토리얼은 다음 언어로 작성된 네이티브 앱을 기반으로 작성되었습니다. Mendix 모델러 버전 9.24.0. 다른 버전에서는 다를 수 있습니다.

사전 조건

이 튜토리얼의 내용을 이해하려면 React Native에 대한 기본 지식과 네이티브 모바일 앱의 스타일을 구현하는 방법에 대한 지식이 필요합니다. Mendix Studio Pro. 네이티브 모바일 앱 스타일링을 처음 접하는 경우 관련 학습 자료를 살펴보세요. Mendix Academy 먼저.

이 게시물의 내용

이 게시물에서는 수정 방법을 살펴보겠습니다. Mendix 기본 위젯을 사용하여 네이티브 모바일 앱을 위한 직관적인 사용자 인터페이스를 만듭니다. 이는 Expert Services 팀에서 일하는 UX 컨설턴트로서 제가 일반적으로 받는 요청입니다.

이 게시물은 무엇입니까 않습니다. 개요

이 게시물은 사용자 지정 네이티브 모바일 앱 위젯을 만드는 방법에 대한 튜토리얼이 아니라는 점에 유의하세요. 위젯의 복잡성에 따라 상당히 더 긴 시간(및 더 큰 예산)이 소요될 수 있으며, 일부 고객에게는 옵션이 아닐 수 있습니다.

이 글의 목표는 React Native만으로도 꽤 괜찮은 결과를 얻을 수 있다는 것을 보여주는 것입니다.

이 블로그 게시물에 나오는 모든 사용자 인터페이스는 제가 직접 만든 것입니다.

수업

우리가 집중적으로 다룰 세 가지 스타일은 다음과 같습니다.

레슨 1: 상단 바 섹션 확장

레슨 2: 돋보기가 있는 검색 창

레슨 3: 오버레이 요소

레슨 1: 상단 바 섹션 확장

네이티브 프로젝트에 대해 제가 받는 일반적인 요청 중 하나는 상단 바 섹션을 확장해 달라는 것입니다. 이를 통해 사용자는 페이지 내용에 대한 지침을 포함할 수 있습니다. 아래는 결과의 예입니다.

1단계: 모델러에서 테마 구조 설정

테마 모듈: 앱의 스타일링 작업을 하기 전에 이 앱에 대한 테마 모듈을 생성했는지 확인하세요. 그 방법을 잘 모르겠다면 코스를 참조하세요. Mendix 아카데미.

새 페이지 만들기: 이 경우에는 "배경"으로 이름을 변경했습니다.

2단계: 요소에 클래스 추가

"배경" 페이지에서 페이지의 지침 주위에 컨테이너를 만들고 클래스를 지정합니다.

같은 페이지에 추가 요소가 있을 때 상단 표시줄이 어떻게 표시되는지 보여주는 콘텐츠를 추가했습니다.

테마 모듈에서 "native" 아래에 새 JS 파일을 만들고 그에 따라 이름을 바꿉니다(예: "extension.js"). 이는 폴더 구조를 정리하고 파일을 인식할 수 있도록 유지하는 모범 사례와 일치합니다.

3단계: 요소의 스타일 구현

상단 바 확장을 만드는 핵심은 간격 없이 상태 바에 연결하는 것입니다. "topBarExtension" 클래스에서 "marginTop"을 0으로 설정합니다.

// - top bar extension section background
export const topBarExtension = {
  container: {
    marginTop: 0,
    paddingTop: 12,
    paddingBottom: 25,
    width: "100%",
    backgroundColor: "#586F63"
  }
}

원하는 스타일로 다른 요소를 자유롭게 맞춤 설정하세요.

새 파일 "card.js"를 만듭니다. 이것은 각 후속 요소를 감싸는 카드에 스타일을 추가하는 데 사용됩니다.

“card.js” 파일에 “popCard” 클래스를 추가합니다.

// - the card that wraps around each subsequent element
export const popCard = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

새로 만든 파일을 "main.js" 파일로 가져와야 합니다.

최종 결과

보너스

또 다른 일반적인 스타일은 메인 콘텐츠가 상단 바 확장 부분과 부분적으로 겹치게 하는 것입니다. 최종 결과의 미리보기는 다음과 같습니다.

이를 달성하려면 상단 바 확장 기능의 패딩을 확장하여 후속 요소가 상단 바 섹션의 콘텐츠를 가리지 않도록 해야 합니다.

1단계: 모델러 업데이트

2단계: 코드 업데이트

아래는 상단 바 확장에 대한 업데이트된 코드입니다. 다른 클래스인 "topBarExtensionLong"을 부여하고 동일한 "extension.js" 파일에 추가했습니다.

// - top bar extension for the overlapping card style
export const topBarExtensionLong = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 65,
width: "100%",
backgroundColor: "#586F63"
}
}

겹치는 효과를 만들려면 상단 여백을 음수 단위로 변경하여 상단 여백을 넘어야 합니다. 아래는 이 스타일의 코드입니다. 이전 스타일과 차별화하기 위해 별도의 클래스 "cardOverlap"을 제공했습니다. 또한 동일한 "card.js" 파일에 추가했습니다.

// - card for the overlap style
export const cardOverlap = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: -35,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

최종 결과

레슨 2: 돋보기가 있는 검색 창

클라이언트의 또 다른 일반적인 요청은 검색창에 돋보기 아이콘을 추가하는 것입니다. 이는 사용자가 검색창을 즉시 식별하는 데 도움이 될 수 있습니다.

1단계: 데이터 설정 및 나노플로우 생성

요소의 스타일을 구현하기 전에 도메인 모델러에 엔터티를 다음과 같이 설정해야 합니다.

In Mendix, 검색 바는 기본적으로 검색 기능이 있는 텍스트 상자입니다. 기본적으로 텍스트 상자에 아이콘을 추가할 수 없습니다. 결과적으로 레이아웃 그리드를 만들고 아이콘을 한 열에 배치하고 텍스트 상자를 다른 열에 배치해야 합니다.

모델러에서 드래그하여 데이터 보기 그리고 nanoflow를 호출하여 데이터 소스를 검색합니다. 새로운 nanoflow "DS_SearchHelper"를 만듭니다.

데이터 뷰 내부에서 컨테이너를 만들고 "searchBar" 클래스를 지정합니다. 이렇게 하면 검색 바의 테두리가 시뮬레이션됩니다.

컨테이너 내부에서 2열 레이아웃 그리드(10:XNUMX 비율)를 만듭니다. 왼쪽에 돋보기 이미지를 추가합니다. (먼저 이미지 컬렉션에 업로드해야 합니다).

오른쪽에 "SearchText" 속성과 "SearchInput" 클래스가 있는 텍스트 상자를 추가합니다. 이것이 실제 텍스트 상자입니다. 이 검색 창에 섞이도록 스타일을 지정합니다.

검색 상자에 선택적으로 자리 표시 텍스트를 추가할 수도 있습니다.

2단계: 스타일 구현

“search.js” 파일을 만듭니다. “main.js” 파일에 가져와야 합니다. 그 안에 “searchBar” 클래스와 “searchInput” 클래스의 코드를 추가합니다.

//the container that acts as a search bar (with the icon)
export const searchBar = {
container: {
borderRadius: 8,
backgroundColor: "#ffffff",
borderWidth: 2,
borderColor: "#555555",
height: 50,
paddingLeft: 10,
paddingRight: 10
}
}

//the actual search input field
export const searchInput = {
input: {
backgroundColor: 'transparent',
borderColor: 'transparent',
//placeholder text color
placeholderTextColor: "#A4A4A6",
fontSize: 16,
borderRadius: 50
}
}

최종 결과 :

레슨 3: 오버레이 요소

마지막으로, 한 요소가 다른 요소와 부분적으로 겹치는 오버레이 효과를 만드는 방법을 살펴보겠습니다. 이 예에서는 이미지와 부분적으로 겹치는 버튼을 만듭니다.

1단계: 레이아웃 설정

도구 상자에서 이미지와 버튼을 페이지로 드래그합니다. 버튼의 아이콘을 그에 맞게 변경합니다.

이미지에 "proPic" 클래스를 지정하고 버튼에 "overlapBtn"을 지정합니다. 나중에 스타일을 지정합니다.

이미지와 버튼 아래에 텍스트 요소가 있는 레이아웃을 만들었습니다. 그러나 이것은 선택 사항입니다. 동일한 작업을 수행하려면 다음 지침을 따르세요.

1. 이미지와 버튼을 감싸는 컨테이너를 만듭니다. 컨테이너에 "외부 매체" 간격을 추가합니다. 컨테이너 중앙을 정렬합니다.

2. 컨테이너 아래에 레이아웃 그리드를 만들고 그 안에 텍스트 요소를 추가합니다. 모든 것을 컨테이너로 감싸고 클래스 "popCard"(레슨 1에서 사용)를 지정합니다.

2단계: 스타일 구현

새 파일 "overlay.js"를 만듭니다. "main.js"에 가져와야 합니다. 겹치는 요소를 만드는 요령은 요소의 왼쪽 및/또는 오른쪽 여백을 조작하여 화면의 다른 요소에 의도적으로 배치하는 것입니다.

이를 달성하기 위해, 우리는 연관된 마진에 음수 단위를 추가해야 합니다. 그 이유는 요소가 상단 막대로 흘러들어가는 효과를 만드는 것과 비슷합니다(레슨 1의 보너스 섹션).

//profile pic
export const proPic = {
image: {
borderRadius: 100,
width: 150,
height: 150,
},
container: {
borderWidth: 2,
borderColor: "#777777",
borderRadius: 100,
width: 150,
height: 150,
marginTop: 25
}
}

//button to edit the profile pic
export const overlapBtn = {
container: {
borderWidth: 2,
borderRadius: 50,
width: 32,
height: 32,
backgroundColor: "#E7E7E7",
marginRight: -75,
marginTop: -32,
borderRadius: 50,
borderColor: "#777777"
},
icon: {
color: "#000000",
size: 18
}
}

최종 결과 :

오늘은 여기까지입니다! 튜토리얼을 읽어주셔서 감사합니다. 궁금한 점이 있으면 언제든지 알려주세요([이메일 보호]).