본문 바로가기

2학년 2학기/모바일 소프트웨어 - 안드로이드 스튜디오10

ColorPickerApp - state hoisting으로 3개의 slider의 값을 하나의 색으로 조합하기 따라서 코드를 설명하자면, 1. state 선언: 데이터 변화에 따라 UI를 변경하기 위해서 사용 2. 상위 Component에서 하위 Component에 state 전달 3.  하위 Component인 ColorPicker에서 slider를 통해서 값을 변경 4. 값이 변경되면 상위 Component의 state 값도 변경 + 동시에, 모든 UI 다시 랜더링 5. 모든 UI가 다시 랜더링 되면서, ColorInfoIntoText의 값도 함께 변경된다.   이런식으로 state가 변경되면 다시 랜더링되면서 모든 ui도 함게 변한다. 2024. 11. 13.
이미지 올리기 app - res - drawble에 복사 붙여넣기 후 팝업창 ok 2024. 11. 6.
dp와 sp의 차이 Jetpack Compose에서 dp와 sp는 화면 요소의 크기를 정의할 때 사용하는 단위이지만, 각기 다른 목적을 가지고 있음.  dp (Density-independent Pixels)dp는 "밀도 독립적 픽셀"을 의미함. 기기의 화면 밀도에 따라 크기가 조정되어 다양한 화면 크기와 해상도에서 일관된 크기를 유지하도록 돕는 단위임. 일반적으로 버튼, 여백, 높이, 너비 등 레이아웃의 크기를 지정할 때 사용됨. sp (Scale-independent Pixels)sp는 "스케일 독립적 픽셀"을 의미하며, 주로 텍스트 크기를 정의할 때 사용됨. sp는 dp와 유사하게 밀도에 따라 조정되지만, 사용자가 설정한 글꼴 크기에 따라 추가 조정이 됨. 따라서 접근성 측면에서 글꼴 크기를 키우거나 줄이는 설정을 지.. 2024. 11. 6.
Modifier 1. Modifier: Compoent(예를 들면 Row, Column, Box, Text, Button, Image 등등)의 모양이나 동작을 설정한다. Modifier의 역할레이아웃 조정: Modifier는 Composable의 크기, 여백, 패딩을 설정할 수 있다.그래픽 효과: 배경색 설정, 그림자 추가 등 그래픽 효과를 추가할 수 있다.이벤트 처리: 클릭이나 드래그 등의 사용자 입력 이벤트를 처리할 수 있다.애니메이션 효과: 애니메이션 효과를 적용하거나 특정 동작에 애니메이션을 추가할 수 있다. 2. padding: padding의 속성에서는 start(왼), end(오), top(위), bottom(아래), horizontal(좌우), vertical(상하)이 있다.3. then(): 하나의 UI.. 2024. 11. 6.
값 전달과 상태 호이스팅의 차이 값 전달과 상태 호이스팅(State Hoisting)은 컴포넌트 간의 상태 관리를 다루는 두 가지 방식입니다. 두 개념은 비슷해 보일 수 있지만, 실제로는 상태 변경 권한을 누가 가지느냐에 큰 차이가 있습니다. 하나씩 설명하겠습니다.1. 값 전달 (Value Passing)값 전달은 단순히 상위 컴포넌트에서 값만 자식 컴포넌트로 전달하는 방식입니다.이 방식에서는 자식 컴포넌트가 전달받은 값을 변경할 권한이 없으며, 전달받은 값은 읽기 전용으로 사용됩니다.값 전달은 자식 컴포넌트가 상태를 변경할 필요가 없고, 상위 컴포넌트에서 일방적으로 값만 표시하고자 할 때 유용합니다.예시@Composablefun ParentComponent() { val message = "Hello, Compose!" C.. 2024. 11. 6.
Arrangement와 Alignment 1. Arrangement: Arrangment는 중심축을 의미한다. 즉, Row(Column)내부에 있는 Component를 중심축 기준으로 정렬한다.Row의 중심축은 가로축 이므로 horizontalArrangement Column의 중심축은 세로축 이므로 verticalArrangement  [Row에서의 Arragement. 즉, horizontalArrangement]    [Column에서의 Arragement. 즉, verticalArrangement]     2. Alignment: Alignment는 중심축의 반대축을 의미한다. 즉, Row(Column)내부에 있는 Component를 중심축의 반대축 기준으로 정렬한다.  기본적으로 verticalAlignment의 기본값은 위쪽 정렬이고.. 2024. 11. 6.
state hoisting - slider를 통한 폰트 조절 앱 만들기 state hoisting 이란?기본적으로 State는 개별 Component에서 유지된다. 그러나 다른 Componet(예를 들면 자식 Component)에서도 같은 State 값이 필요하다면, 해당 State를 상위(부모) Component에서 공유할 수 있고, 상태의 일관성을 유지할 수 있다. 쉽게 말해서, 상위 Component에서 하위 Component에게 값을 전달하고 하위 Component에서 값을 변경하면 상위 Component에서도 값 변경이 일어나고, 화면 렌더링도 일어난다. 따라서, 변경된 값이 자동으로 적용된다.  해결 방법 1: MutableState으로 상태를 전달: 상태 객체를 직접 전달해서, 자식 Componet가 부모 Componet의 state를 직접 접근하고 관리할 수 .. 2024. 11. 5.
state란? - counter button 만들기 1. state란?state는 UI요소의 현재 상태를 나타내는 데이터이다. 일반적으로 state는 UI요소의 일시적인 상태를 저장하는 데 사용되며, 상태가 변경되면 해당 상태에 의존하는 UI가 자동으로 재구성된다. state를 선언하는 방식에는 총 2가지 방식이 있다. 1. MutableState 변수 방식: MutableState는 값이 변경될 수 있는 상태를 나타내며, mutableStateOf를 사용하여 상태를 초기화할 수 있다. 이 방식은 MutableState 객체를 직접 참조하므로 .value 속성을 통해 값을 읽고 쓰게 된다.var count by remember { mutableStateOf(0) } 2. by위임 속성을 이용한 간단한 선언 방식by 위임 속성을 이용하면 .value를 사용.. 2024. 11. 5.
Scaffold vs Surface의 차이 우리가 이전에 MainActivity.kt에서 onCreate()메서드에 Scaffold를 봤을 것이다. 이 Scaffold외에 Surface도 있다.  Scaffold: 전체화면의 주요 UI 컴포넌트를 배치할 수 있는 프레임워크를 제공하여 앱의 구조를 쉽게 설정할 수 있다. 주로, 앱의 메인 레이아웃을 설정할 때 사용된다.  예를 들어 상단 bar, 하단 navigation bar, floating action button을 포함한 화면을 구성할 때 유용하다.   위의 형태로 topBar, bottomBar, flaotingActionButton, Content 등을 구성할 수 있다.   Surface: 개별 UI 컴포넌트의 스타일과 배경을 설정하는데 사용되는 기본 구성요소이다. 주로 카드, 버튼, 박.. 2024. 10. 30.
Compose 기초 기본적으로 프로젝트를 생성하고 MainActivity.kt를 열어보면 위와 같은 파일 형태가 나온다.  "onCreate() {}": 애뮬레이터의 화면 레이아웃을 담당한다. (여기서 아무리 코드를 바꿔도 Preview에서는 반영되지 않는다.)  "@Composablefunc Greeting(...) { }": View의 구성을 담당한다.  "@Preview(...)@Composablefunc GreetingPreview() {...}": Preview 화면의 레이아웃을 담당한다. (여기서 아무리 바꿔도 실제 애뮬레이터에서는 반영되지 않는다.)  "onCreate메소드" override fun onCreate(savedInstanceState: Bundle?) { //시뮬레이터 용 super.onCr.. 2024. 10. 30.

티스토리툴바