Jiwift

[Android/Kotlin] ImageView 모서리 둥글게 만들기 이쁜 디자인을 위해서 ImageView를 둥글게 만들어 보겠습니다. 뭐든 방법은 다양하고 정답은 없습니다. 아이디가 각각 test01, test02, test03인 ImageView가 존재합니다. 프로젝트에서 drawable - new - Drawable Resource File 을 클릭합니다. imageraius라는 이름으로 shape를 생성합니다. (radius라고 쓰려다 오타남) 생성한 drawable에 다음과 같이 입력해줍니다. private val test001: ImageView by lazy { findViewById(R.id.test01) } private val test002: ImageView by lazy { fin..

[Android/Kotlin] View 모서리 둥글게 만들기 / round 처리 / 곡선 shape 어플리케이션을 만들다 보면 곡선이 필요한 경우가 생긴다. 처음에는 파워포인트와 같이 도형 기능 같은 것을 지원 할 줄 알았다. 하지만 그정도로 친절하지는 않아서 직접 만들어야 한다고 한다. 방법은 간단하다. 원하는 View를 만들고 그 배경을 둥근 그림을 넣어주면 끝이다. 처음에 검색으로 찾아 볼 때에는 View에 적용하려는 생각이었지만 Layout에도 적용이 가능하다. 네모난 ContraintLayout과 View를 둥근 모서리로 만들어 줄 것이다. 프로젝트에서 drawable - new - Drawable Resource File 클릭 shape를 하나 생성해준다. test라는 이름으로 생성했다. 생성..

[Android/Kotlin] Toast Message 출력하기 / 알림 메시지 안드로이드 어플을 사용하다 보면 첫 화면에서 뒤로 가기를 눌렀을 때, "뒤로 가기를 한 번 더 누르면 앱이 종료됩니다." 같은 짧은 메시지를 유저에게 노출시킨 후 일정 시간이 지나면 사라지는 팝업이다. 사용방법은 간단하다. val text = "Hello toast!" val duration = Toast.LENGTH_SHORT val toast = Toast.makeText(applicationContext, text, duration) toast.show() Toast 생성하고 원하는 순간에 show를 해주면 간단하게 메세지가 출력되는 것을 확인할 수 있다. 아래와 같이 한줄로 사용해도 된다. Toast.makeText(..

스킨다운로드 에뮬레이터를 사용할 때 해상도와 램 정도만 알아도 사용 가능하지만. 스킨을 적용시켜 좀 더 실제 기기같은 느낌을 주는 테스트를 진행하기 위해서 스킨을 다운로드한다. Using a Galaxy Emulator Skin | Samsung Developers 위의 사이트로 접속 후 원하는 기종을 선택 다운로드 받은 압축을 푼다. Window C:\Program Files\Android\Android Studio\plugins\android\resources\device-art-resources Mac /Users/이름/Library/Android/sdk/Skins 압축을 풀면 각 OS환경을 확인하고 폴더로 옮긴다. Mac은 라이브러리가 숨김 폴더로 기억한다. 그래서 cp 명령어를 사용하면 쉽게 옮..

오픈소스를 이용한 ImageSlider를 구현하기 안드로이드 스튜디오 Arctic Fox 버전을 기준으로 작성 버전 확인 [Android Studio - Help - About] 라이브러리 깃 허브 denzcoskun/ImageSlideshow: Android image slider. (github.com) GitHub - denzcoskun/ImageSlideshow: Android image slider. Android image slider. Contribute to denzcoskun/ImageSlideshow development by creating an account on GitHub. github.com 사용법 유튜브 Image Slider in Android Studio | Kotlin ..

QPushButton{ border-color: rgb(255, 200, 28); border-style : solid; border-width : 5px; border-radius : 30px; } QPushButton:hover{ background-color : rgb(200, 255, 30); border-color : rgb(255, 200, 28); border-style : solid; border-width : 5px; border-radius : 30px; } QPushButton:pressed { background-color : rgb(200, 100, 30); border-color : rgb(255, 200, 28); border-style : solid; border-width ..

QPushButton{ border-color: rgb(255, 200, 28); border-style : solid; border-width : 5px; border-radius : 30px; } QPushButton:hover{ background-color : rgb(200, 255, 30); border-color : rgb(255, 200, 28); border-style : solid; border-width : 5px; border-radius : 30px; } QPushButton:hover와 같이 뒤에 hover를 붙이면 상황에 따라서 다른 디자인을 적용할 수 있다. 마찬가지로 pressed를 추가하면 눌렀을 때 상황도 스타일이 변경된다. 그건 다음 글에서

QPushButton{ border-color: rgb(255, 200, 28); border-style : solid; border-width : 10px } 'border-style : 종류;' 테두리 스타일 설정

QPushButton{ border-color: rgb(255, 134, 28); border-style : solid; border-width : 1px } 'border-width : 1px' 테두리 두께를 설정 가능

QPushButton{ border-color: rgb(255, 200, 28); border-style : solid; border-width : 5px } border-color: rgb(255, 200, 28);, border-color: #FFFFFF; 두 방법으로 테두리 색 지정 가능

QPushButton { color: rgb(255, 211, 76); } 'color'를 사용하면 내용색을 변경할 수 있다.

QPushButton { background-color: #ffffff; } background-color를 사용하면 배경색을 변경할 수 있습니다. 사진은 버튼을 변경한 예시.

위젯 디자인을 적용할 때, 부모와 자식 위젯간의 연관성을 잘 생각해야합니다. 위 사진은 프레임(부모) 속에 버튼(자식)을 넣은 예시이다. 프레임(부모) 위젯에서 단순하게 'background-color: rgb(255, 156, 158);'를 입력하는 상황. 만약 부모 위젯이 가진 속성을 하위 위젯들도 가지고 있다면 부모와 같은 속성이 하위에게도 모두 적용. 위젯마다 스타일을 주면서 나아가면 괜찮지만 혼선이 생길 수 있으니 사전에 어느 위젯에 적용할지 정의하면서 입력하는 것이 좋다. QFrame { background-color: rgb(147, 120, 255); } QPushButton { background-color: rgb(164, 255, 79); } 이렇게 각각 정의를 해주면 중복 적용이 되..

[Python/PyQt] 스타일(Style) 적용 방법 단순하게 적용 방법만을 다룹니다. 방법은 크게 3가지로 나뉩니다. 방법 1 원하는 위젯에서 우클릭 후 'styleSheet 바꾸기' 선택 원하는 스타일 적용 방법 2 오른쪽 속성 창에서 바로 입력 방법 3 self.[위젯 이름].setStyleSheet( "[위젯 종류] {color: white; background-color: rgb(58, 58, 58);}" "[위젯 종류]:[위젯 상황] { background-color:rgb(10, 10, 10); }" ) 소스 코드로 바로 디자인 적용

위와 같이 Qt Designer에서 설정 가능하다. from PyQt5.QtWidgets import QToolTip from PyQt5.QtGui import QFont self.pushButton.setToolTip("버튼입니다. 버튼22 두꺼운 글씨") QToolTip.setFont(QFont('SansSerif', 30)) 코드도 툴 팁 설정이 가능하다.

# 비활성화 self.[위젯 이름].setDisabled(True) # 활성화 self.[위젯 이름].setEnabled(True)

[Python/PyQt] 프레임과 배경을 없애기 # 배경 없애기 self.setAttribute(Qt.WA_TranslucentBackground) # 이전 글에서 배운 프레임 없애기 self.setWindowFlag(Qt.FramelessWindowHint) show() 이전에 넣으면 없어진다.

[Python/PyQt] 프레임 타이틀 바(Title Bar) 없애기 self.setWindowFlag(Qt.FramelessWindowHint) 타이틀 바를 안 보이게 하는 메서드. 타이틀 바가 없어진다기보다는 프로그램의 프레임이 없어진다. 그래서 윈도우에서 제공하는 기본 기능들을 사용할 수 없다. 닫기, 최소화, 최대화, aero snap 등은 직접 구현해야 한다. 찾으면 구현 법은 나온다.

[Python/PyQt] 위젯(Widget)을 배치할 때 레이아웃을 꼭 적용해야 하는 이유 제목은 어떻게 보면 반은 맞고 반은 아닌 이야기이다. 위젯을 배치하고 레이아웃 설정을 해주면 창의 크기가 변경되어도 그 안에 위젯들은 유연하게 변화가 생긴다. 하지만 창의 크기를 조절할 수 없는 프로그램이라면 필수는 아닐 수 있다고 본다.

from PyQt5.QtWidgets import QMessageBox QMessageBox.information(self, "타이틀입니다.", "안녕하세요. information 메세지 입력입니다.") QMessageBox.about(self, "타이틀입니다.", "안녕하세요. about 메세지 입력입니다.") QMessageBox.warning(self, "타이틀입니다.", "안녕하세요. warning 메세지 입력입니다.") QMessageBox.critical(self, "타이틀입니다.", "안녕하세요. critical 메세지 입력입니다.") QMessageBox.question(self, "타이틀입니다.", "안녕하세요. question 메세지 입력입니다.") 메세지를 표현하는 가장 기본

self.[스택위젯 이름].setCurrentIndex(스택 페이지 번호) 스택 페이지를 입력해주면 간단하게 페이지를 이동할 수 있다.

# 위젯 현재 값 self.[슬라이더, 다이얼 위젯 이름].value() # 위젯이 가질 수 있는 가장 작은 값 self.[슬라이더, 다이얼 위젯 이름].minimum() # 위젯이 가질 수 있는 가장 큰 값 self.[슬라이더, 다이얼 위젯 이름].maximum() # 위젯이 한번 움직이거나 방향키를 눌러 이동할 수 있는 최소한의 값 self.[슬라이더, 다이얼 위젯 이름].singleStep() # 위젯이 빠르게, 크게 움직이다면 이동할 수 있는 값 self.[슬라이더, 다이얼 위젯 이름].pageStep() 슬라이더에 설정된 옵션 값들을 받아온다. 설정 값들은 Qt Designer에서도 설정 가능하다. # 위젯이 움직이면 기능 수행 self.[슬라이더, 다이얼 위젯 이름].sliderMoved.co..

리스트 위젯(Widget)과 뷰(View)가 있는데 위젯이 더 간편한 것 같다. 사용하는 방법은 같으나 편리함 정도 차이가 있다. # 한번 클릭 self.[리스트위젯 이름].itemClicked.connect([기능]) # 더블 클릭 self.[리스트위젯 이름].itemDoubleClicked.connect([기능]) # 항목 변경 self.[리스트위젯 이름].currentItemChanged.connect([기능]) 리스트 위젯 클릭 이벤트를 담당하는 메서드 # 선택된 리스트위젯 아이템 번호 self.[리스트위젯 이름].currentRow() # 선택된 리스트위젯 객체 반환 self.[리스트위젯 이름].currentItem() # row번째 리스트위젯 객체 반환 self.[리스트위젯 이름].item(r..

self.[라인에디트 이름].text() 라인 에디트 텍스트 받아오기 self.[라인에디트 이름].setText(넣을 내용 str만 가능) 라인 에디트 텍스트 변경하기 계산기 예시 # 버튼 클릭 메서드 정의 self.pushButton_2.clicked.connect(self.sum) self.pushButton_3.clicked.connect(self.reset) def sum(self): # 라인 에디트에서 수를 받아옴 a = self.lineEdit.text() b = self.lineEdit_2.text() # 더하기 진행 int 형식으로 변환 필요 sum_result = int(a) + int(b) # 레이블에 출력 self.label.setText(str(sum_result)) def rese..

self.[레이블위젯 이름].text() 텍스트 내용받아오기 str 형식으로 받아옴 self.[레이블위젯 이름].setText(넣을 내용 str만 가능) labe 텍스트 변경 사용 예시 # 버튼 클릭 self.pushButton.clicked.connect(self.one) self.pushButton_2.clicked.connect(self.two) # Label 내용들 변경 def one(self): self.content = self.label.text() def two(self): self.label_2.setText(self.content) one 함수에서 label 텍스트 내용을 가져오고 two 함수에서 label_2로 가저온 내용을 넣는다.

self.[체크박스 이름].stateChanged.connect(기능) 라디오 버튼과 같이 체크박스를 누르면 수행하는 기능을 추가하면 된다. self.[체크박스 이름].isChecked() isChecked()를 사용해서 상태 값을 받아올 수 있다. # 체크 풀기 self.[체크박스위젯 이름].setChecked(False) # 체크 하기 self.[체크박스위젯 이름].setChecked(True) 체크박스는 라디오 버튼과 다르게 다중 선택이 가능. 사용 예시 # 놀이를 고르는 체크 박스 두개 self.checkBox.stateChanged.connect(self.work) self.checkBox_2.stateChanged.connect(self.work) # 음식을 고르는 체크 박스 두개 self.c..

setText(), text()를 통해서 라디오 버튼 텍스트도 읽고 쓰기 가능 라디오버튼은 다중 선택이 불가능합니다. 라디오 버튼 토글 클릭 # 둘다 사용 가능 self.[라디오위젯 이름].toggled.connect(기능) self.[라디오위젯 이름].clicked.connect(기능) 라디오 버튼 자동으로 체크하기 self.[라디오위젯 이름].setChecked(True) 마우스가 아닌 다른 기능 수행중에 코드로 클릭되게 할 수 있음 체크 여부 확인 self.[라디오위젯 이름].isChecked() 체크 여부를 확인하여 if문등 사용 가능 True False로 알려줌

self.[버튼위젯 이름].clicked.connect(기능) 위 메서드를 통해서 버튼이 눌렸을 때 원하는 동작을 수행할 수 있다.

처음에 UI 레이아웃을 작업할 때는 QFrame을 사용하지 않고 진행했다. 하지만 UI가 복잡해지면서 구역별로 묶거나 반복되는 배치를 사용할 때 frame 단위로 관리하는 것이 더 편하다고 느껴지고부터는 계속 frame을 사용했다. html에서 div를 사용하는 것처럼 pyqt에서 frame으로 틀을 잡는 게 관리에서 편리하다. frame 추가 후 각각 레이아웃, 마진, 스페이스 등 구역을 나누어서 레이아웃을 적용하면 더 편리한 개발이 될 것이다. 디자인을 보고 나뉘는 구역 혹은 관리하기 쉬운 구역을 생각해서 frame을 만들어 안에 다른 위젯들을 배치하면 된다. 사용법은 따로 없고 어떻게 어디서 구역을 나누어주는지 익숙해지는 노력이 더 필요하다.

위가 원래 UIProgressView 아래가 라이브러리 적용 Smitters/GradientProgress: A gradient progress bar (UIProgressView). (github.com) GitHub - Smitters/GradientProgress: A gradient progress bar (UIProgressView). A gradient progress bar (UIProgressView). Contribute to Smitters/GradientProgress development by creating an account on GitHub. github.com 팟 설치 pod 'GradientProgress' 사용법 사용을 원하는 프로그래스바를 배치. 비교용으로 두 개를 설치..