델파이가 지원하는 기본 버튼 혹은 기본 컴포넌트는 아이폰의 인터페이스와 다른 모양을

가지고 있어서 아이폰의 인터페이스와 비슷한 모양으로 바꾸고 싶을때 유용하게 사용할 수 있는

방법입니다.


기본적으로 스타일을 변경해서 이용하는 방법입니다.



링크 주소

http://jed-software.com/blog/?p=609




In this post we’ll discover and solve a couple of glitches in the default styles supplied in FireMonkey for iOS.

  • Create a new FireMonkey iOS HD application.
  • Drop a button on the form and assign an OnClick handler.
  • In the OnClick handler, add code to display a simple message.
    • i.e. ShowMessage(‘You tapped me!’);
  • Run the application (you can do this on windows without going to XCode for this post)
  • Tap/Click on the button

Problem 1 – The default TButton style doesn’t look different when it has been pressed.

To fix this issue stopped the application and perform the following steps.

Right click on the TButton component and select the Edit Default Style… command at the bottom of the context menu.

The Style Designer will load and since we are updating the Default Style, will have the default style name for TButton, which is Buttonstyle.

The style consists of a TLayout, three TRectangle and a TText control.

To rectify the pressed state, grab a TInnerGlowEffect component from the Tool Palette.

Drag the TInnerGlowEffect component from the Tool Palette and drop it on the background TRectangle control.

With the TInnerGlowEffect component selected, you can see the available properties for the control.

Change the GlowColor property to better suit this situation, I chose Black.
Set the Enabled property to False. This is because we only want this effect enabled when the button is being pressed.
In the Trigger property, enter the following “IsPressed=true“. This means then whenever the IsPressed property is true, this effect will become enabled.

After your changes, you object inspector should look like the capture below.

Run the application now and hopefully you will see the effect display when the button is pressed.

Drop a couple of TCornerButton controls on the same application. Set the XRadius and YRadius values to 10 for one of the corner buttons. The sample application should now look something like the capture below.

Problem 2 – Under side of corner button looks strange when XRadius and YRadius values are not 3.

Below is a close up to better display the issue, it is really noticeable if your background is lighter.

To discover what is occuring with this style issue, we need to inspect the source code. Most importantly where the style information is loaded by the corner button control. In FireMonkey style properties should be modified in the ApplyStyle or ApplyStyleLookup methods. The ApplyStyle method for the TCustomCornerButton control is below, seems like everything should work.

Lets take a look at the default style for a TCornerButton.

Hmm, the source code referenced a StyleName called ‘secondbackground‘ button second background has been been set. The TRectangle without a name next to it should be called ‘secondbackground‘.

Use the object inspector to set the StyleName of the un-style-named TRectangle to ‘secondbackground‘.

Successful renaming is identified by your style, looking like the style in the capture below. Don’t set the name property by accident. You can’t set the name property to anything for a style (and have it persist).

Now when you view the form the corner button style won’t looked odd.

Problem 3 – The cornerbutton doesn’t show any effect when it is pressed.

Note how there is no TInnerGlowEffect define for the style. Follow the same steps above for the TButton and add the same effect (with the same property values) to the corner button style. Parent the TInnerGlowEffect to the background TRectangle control.

Problem 4 – The corner button has a TGlowEffect.

Kind of useless in a mobile application which doesn’t have a tab key to navigate between controls! Delete the TGlowEffect component from the style by clicking on the X.

Now you can rebuild and deploy to XCode and run on iOS to make sure these changes work well. Here is a capture from a real iPad (really it is!).

Default Styles

When in the Style Designer you can use the Load Default button to load all of the style details for the applications default style. This allows you to inspect other styles to learn from them. After making changes, I recommend you save the modified style to disk for safe keeping.

I would attach the modified style file to this post for download, but I’m not sure if I’m allowed to.

 

I’ve been doing a quite a bit of work with FireMonkey styles lately trying to make a nice TListBoxItem style. You may hear more about this in the future…


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14389
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13023
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15532
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21064
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22297
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 17933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38228
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173741
623 [추가된 문법 정리] - 클래스 메소드(Class Method):델파이 2007 추가 관리자 2016.06.03 1268
622 [추가된 문법 정리] - 클래스 필드(Class Field):델파이 2007 추가 관리자 2016.06.03 824
621 [발표자료] 20160602 Upgrade VCL! 오래된 프로그램, 최신식으로 탈바꿈하기 관리자 2016.06.02 785
620 [베를린] GetIt 속성값을 별도의 옵션창에서 관리할 수 있습니다. 관리자 2016.05.30 334
619 [베를린] Eddystone 비콘을 사용할 수 있습니다. 관리자 2016.05.30 331
618 [베를린] 윈도우10에서 블루투스LE와 비콘을 활용할 수 있습니다. 관리자 2016.05.30 976
617 이 달의 기술자료 - 2016년 06월 file 험프리 2016.05.27 629
616 [업데이트][핫픽스][10.1 베를린] 갤럭시 S7 Edge(안드로이드 6.0.1) 디버깅이 되지않는 이슈 패치 험프리 2016.05.27 672
615 10.1 베를린 부터는 리본 컨트롤을 겟잇 패키지 매니저에서 설치할 수 있습니다. 험프리 2016.05.27 510
614 코드사이트(CodeSite)로 로그를 기록하며 프로그램의 문제를 파악할 수 있습니다. file 험프리 2016.05.26 2658
613 브레이크 포인트를 설정해도 디버깅이 안되는 경우 살펴볼 항목 file 험프리 2016.05.13 2789
612 [발표자료] 20160504 새로 강화된 기능들: RAD Studio, Delphi, C++Builder 관리자 2016.05.09 483
611 [베를린] TBufferedFileStream을 이용해 TFileStream 보다 더 빠르게 파일을 읽고, 쓸수 있습니다. file 험프리 2016.05.09 3059
610 [필독] Berlin Dialog 사용법 상당부분 변경 및 기능추가 (소스링크추가) [1] c2design 2016.05.04 852
609 [업데이트][핫픽스][10.1 베를린] 데이터스냅(DataSnap) ApplyUpdates 핫픽스 험프리 2016.04.28 866
608 이 달의 기술자료 - 2016년 05월 file 험프리 2016.04.26 655
607 [베를린] 스타일 디자이너에 미리보기, 클립보드 기능등이 강화되어 더욱 사용하기 편리해 졌습니다. file 험프리 2016.04.26 851
606 [베를린] 연락처 컴포넌트(TAddressBook)로 연락처 정보를 읽고 쓸수 있습니다. file 험프리 2016.04.25 618
605 [베를린] ListView 레이아웃을 입맛에 맞게 변경할 수 있습니다. file 험프리 2016.04.22 2119
604 [베를린] FireUI 앱 미리보기 - 개발중인 앱의 디자인을 장치에서 실시간으로 확인하며 개발할 수 있습니다. file 험프리 2016.04.22 1115