Grid View 인스타 검색 탭에서 보면 contents들이 grid view를 이용하여 표시된다. 이를 표현하기 위해서 안드로이드에서 제공하는 grid view를 이용하여 contents를 띄워보자. fragment_grid를 위와 같이 변경하자. LinearLayout에 RecyclerView를 넣어 새로 등록되는 contents들도 띄울 수 있다. package com.example.firstapp.navigation import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.ImageView import andr..
유저 페이지 유저 페이지를 만들기 위해서는 현재 로그인된 계정의 유저페이지와 다른사람의 유저페이지를 고려하여 만들어야 한다. 자신의 페이지와 다른 사람의 페이지의 공통인 요소를 분석한 뒤 뷰를 짜 보자. 프로필 사진, 게시물, 팔로워, 팔로우, 게시물 이미지는 공통으로 갖는 요소이다. 이를 다루는 UserFragment를 작성해보자. package com.example.firstapp.navigation import android.content.Intent import android.graphics.PorterDuff import android.os.Bundle import android.util.Log import android.view.LayoutInflater import android.view.V..
RecyclerView 리사이클러뷰를 이용하여 피드를 띄워보자. home fragment를 다음과 같이 변경하자. 리사이클러뷰에 띄워질 아이템들을 만들자. 이와 같은 아이템들이 하나씩 띄워진다고 생각하면 된다. home fragment에서 리사이클러뷰에 어댑터와 매니저를 등록한다. 이때 어댑터를 custom 해서 등록하자. inner class DetailViewRecyclerViewAdapter: RecyclerView.Adapter(){ var contentDTOs: ArrayList = arrayListOf() var contentUidList: ArrayList = arrayListOf() init { firestore?.collection("images")?.orderBy("timestamp")..
콘텐츠 데이터 모델 데이터의 구조를 지키지 않고 마구잡이로 삽입한다면 나중에 관리하기 쉽지 않을 것이다. 그렇기 때문에 데이터에 대한 모델을 작성하여 데이터의 구조를 표준화해주는 작업이 필요하다. navigation 패키지 안에 'model'이라는 패키지를 만들자. 그 후 contentDTO라는 코틀린 파일을 작성하자. package com.example.firstapp.navigation.model import java.sql.Timestamp data class ContentDTO(var explain: String? = null, var imageUrl: String? = null, var uid: String? = null, var userId: String? = null, var timestam..
Bottom Navigation bottomNavigation을 추가하여보자. 여기에 menu를 적용하기 위해 menu res를 만들어야 한다. 간단하게 id와 icon정도만 정의해주면 된다. 이제 navigation에서 icon이 클릭되었을 때 처리 로직만 만들어주면 간단하게 처리할 수 있다. icon이 클릭되었을 때 main_content에 Fragment를 바꿔줄 것이다. 일단은 구분만 되도록 색상만 바꾼 간단한 Fragment를 구성해보자. package com.example.firstapp.navigation import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view...
Create Loading Screen 제일 기본인 로딩 스크린을 만들었다. 강의에서는 다른 배경화면과 글씨를 썼지만 내 취향에 맞게 바꿔 보았다. 내가 만든 로딩 화면이다. 밋밋한 배경이 싫어서 그러데이션을 넣어 보았다. 그라데이션을 사용하려면 모듈을 다운로드하여 적용하면 된다. 늘 그랬듯이 expo install로 간단하게 진행할 수 있다. 아래의 명령어를 터미널에 입력하면 된다. expo install expo-linear-gradient 모듈 설치를 완료한 뒤, 모듈을 import 하면 된다. 다음은 Loading Screen 코드이다. import { LinearGradient } from 'expo-linear-gradient'; import React from 'react'; import {..
React Native프로젝트를 생성하고 Terminal을 새로 만든다 (VScode를 사용하고 있다.) AVD를 실행시키고 Terminal에 react-native run-android를 입력하면, index.js를 최초로 접근하여 코드를 읽는다. import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 위에는 index.js이다. 같은 폴더에 있는 APP.js를 import 해서 APP이라 하고 AppRegistry.registerComponent(appName, () =..
