위치 및 크기
'@site/components/CodeHeader'에서 CodeHeader 가져오기, '@site/components/Figure'에서 Figure 가져오기, '@docusaurus/Link'에서 Link 가져오기
일반적인 TouchGFX 애플리케이션에서 UI 설정의 많은 부분을 TouchGFX Designer를 통해 생성할 수 있지만, 일반적으로 직접 작성해야 하는 부분도 약간 있습니다. 예를 들어 더 많은 애니메이션을 수행하거나, 사용자 이벤트 또는 구성 데이터에 따라 달라지는 동적인 위젯 설정을 생성해야 할 때가 그렇습니다.
해당 작업을 시작할 때 클래스에서 도움이 될만한 몇 가지 메서드를 알고 있으면 유리할 수 있습니다.
TouchGFX 프레임워크의 모든 위젯은 Drawable 클래스의 하위 클래스입니다. 이 클래스에는 크기와 위치를 제어하는 일반적인 메서드가 포함되어 있습니다.
Widget 객체의 많은 인스턴스에 대한 사용자 인터페이스를 구축합니다. 이들 객체는 View 하위 클래스에 멤버로 추가됩니다. View 클래스는 Screen 클래스의 하위 클래스입니다.
Screen 클래스에는 Container 멤버가 포함되어 있습니다. 이를 루트(root) 컨테이너라고 합니다. 루트 컨테이너는 (0,0)에서 시작해서 전체 디스플레이 영역을 채우도록 초기화됩니다(너비 = HAL::DISPLAY_WIDTH, 높이 = HAL::DISPLAY_HEIGHT).
위젯 추가
View 클래스에서 멤버를 생성하는 방법으로 위젯을 View에 추가할 수 있습니다. 여기에 myBox라는 상자를 추가합니다.
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <touchgfx/widgets/Box.hpp>
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
virtual ~Screen1View() {}
virtual void setupScreen();
virtual void tearDownScreen();
protected:
Box myBox;
};
기본 클래스 헤더 파일에 이미 포함이 되어 있지 않는 한, 코드에서 Box를 사용하려면 Box.hpp를 포함시켜야 합니다.
Box 위젯을 그리기 위해서 장면 그래프(화면의 위젯 트리)에 이를 추가해야 합니다.
add 함수를 통해 이것이 가능합니다. 일반적으로 setupScreen에서 추가 작업이 수행됩니다.
#include <gui/screen1_screen/Screen1View.hpp>
Screen1View::Screen1View()
{
}
void Screen1View::setupScreen()
{
Screen1ViewBase::setupScreen();
add(myBox);
}
화면의 add 메서드는 루트 컨테이너에서 add를 호출합니다.
void add(Drawable& d)
{
container.add(d);
}
화면에 또 다른 컨테이너가 있는 경우에는 해당 컨테이너에서 add 함수를 호출하여 위젯을 추가할 수 있습니다.
void Screen1View::setupScreen()
{
...
myContainer.add(myBox);
}
크기 및 위치 설정
대부분의 위젯은 기본 위치가 (0,0)이고 너비와 높이가 0입니다. 이는 위젯의 크기와 위치를 설정하는 작업이 거의 항상 필요하다는 것을 의미합니다.
위치를 설정하는 기본 메서드는 setXY 메서드입니다.
myBox.setXY(10, 10); // x=10, y=10에 myBox 배치
너비와 높이는 setWidthHeight 메서드로 설정할 수 있습니다. 또는 setWidth, setHeight 메서드로도 설정할 수 있습니다.
myBox.setWidthHeight(200, 100); // myBox에 너비 200, 높이 100을 지정
이 두 메서드는 setPosition 메서드와 결합이 가능합니다.
myBox.setPosition(10, 10, 200, 100); // x=10, y=10, 너비 200, 높이 100에 myBox 배치
Helper 메서드
Drawable 클래스에는 Drawable 설정에 도움이 되는 헬퍼 메서드가 있습니다.
확장
Drawable::expand() 메서드는 위젯(Drawable)을 상위 노드와 같은 크기로 만듭니다. 여백은 설정이 가능합니다. 위젯은 왼쪽 상단 모서리에 배치됩니다(여백 추가).
myBox.expand(10); // 10픽셀의 여백을 제외하고 상위 노드와 같은 크기로 x=10, y=10에 myBox 배치
가운데 정렬
Drawable::centerX()), Drawable::centerY()) 및 Drawable::center() 메서드는 상위 노드 내에서 위젯을 가운데 정렬(가로, 세로, 둘 다)합니다.
myBox.centerX(); // 상위 노드에서 myBox를 가로로 가운데 정렬
무효화
위젯의 크기를 변경할 때는 화면에서 다시 그리기를 해야 하는 부분을 무효화해야 합니다. 위젯을 더 크게 만드는 경우에는 새 크기만 무효화할 수 있습니다. 위젯을 더 작게 만드는 경우에는 크기를 변경하기 전에 위젯을 무효화해야 합니다.
// Box를 확장하고 이후에 무효화를 하면 새 크기로 다시 드로잉
myBox.expand(10);
myBox.invalidate();
...
// 먼저 무효화를 하고 Box의 크기를 줄이면 배경이 다시 드로잉
myBox.invalidate();
myBox.myBox.setPosition(10, 10, 200, 100);
위젯을 무효화하면 당시 위젯이 차지하고 있는 화면 영역이 다음 그리기 작업 단계에서 다시 그려야한다는 점으에 유의해야 합니다. 즉, 위젯을 무효화한 다음에 크기를 줄이면 무효화하려는 위젯뿐만 아니라 현재 눈에 보이는 다른 위젯의 부분들(뒤에 있는)도 다시 그려지게 됩니다.
이동
Drawable 클래스에는 화면의 위젯을 한 위치에서 다른 위치로 이동시킬 수 있는 Drawable::moveRelative(int16_t x, int16_t y)라는 메서드가 있습니다. 이러한 메서드를은 애니메이션의 일부로 사용하거나, 사용자 인터페이스의 일부를 재배열하는 데 사용할 수 있습니다.
Drawable::moveRelative(int16_t x, int16_t y)가 사용자를 대신하여 무효화를 호출합니다.
myBox.moveRelative(1, 0); // 오른쪽으로 1픽셀 이동
또 다른 메서드로 위젯을 지정된 위치로 이동시키는 Drawable::moveTo(int16_t x, int16_t y)가 있습니다.
myBox.moveTo(100, 100); // 현재 위치에서 100, 100으로 이동
이 메서드는 무효화도 호출합니다.