C++ BOOT CAMP / ビジュアル開発環境でC++言語を学ぼう ◆ DAY2: C++BuilderでUI設計のポイントを学ぼう [JAPAN]

◇◆◇◆ C++ Boot Camp / ビジュアル開発環境でC++言語を学ぼう ◇◆◇◆

DAY2: C++BuilderでUI設計のポイントを学ぼう

 

2016年8月30日(火) 、Webによるオンラインセミナー 「C++ Boot Camp / ビジュアル開発環境でC++言語を学ぼう」を実施しました。このBoot Campは延べ4日間にわたり実施されているWebセミナーにおける2日目のセミナーです。

詳しい説明はこちらのブログに記載があります。 申し込みのページはこちらにもあり、内容も記載されていますので、ご興味のある方は覗いてみてください。

Webセミナー「C++ Boot Camp」：http://forms.embarcadero.com/cpp-boot-camp-2016

このブログでは、Day2にてご紹介した内容のサマリーと、参考資料を掲載いたします。

Day2のセミナーの動画はこちらから：

---

 

以下、Webセミナー上でご紹介したリンク情報など記載いたします。

多くの資料はエンバカデロのドキュメントWikiから引用しています。

• エンバカデロのDockWikiはこちら: http://docwiki.embarcadero.com/
• Rad Studioの説明はこちら: RAD Studio Berlin ヘルプ
• 今回利用したFireMonkey フレームワークについて ：http://docwiki.embarcadero.com/RADStudio/Berlin/ja/FireMonkey 
  
  

■サンプルコードについて

動画内で説明のとおりでありますが、RAD Studio / C++Builderインストール時に「sample」を追加インストールしておくとHDD内にコピーされています。

しかし、バグ修正や改善がなされているサンプルコードがオンライン上にリポジトリとして保存してあります。

• RAD Studio 10.1 Berlin時のサンプルコード類のリポジトリはこちら: https://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/

こちらをダウンロードしてサンプルコードとしてお使いいただくことを推奨します。

 

■主要なコンポーネントを確認できるサンプルコード：

まずは主だったコンポーネント（パーツ）を覚えていただく方法として、パーツが盛りだくさんのサンプルコードを開いてみていただきました。

• サンプルコードフォルダ内 - CPPMulti-Device SamplesUser InterfaceControlsDesktop
• SubVersionリポジトリ: http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/CPP/Multi-Device Samples/User Interface/ControlsDesktop

 

■ユーザーインターフェースのレイアウトを構成する要素

• FireMonkey のレイアウト戦略： http://embt.co/firemonkey-layout

 

■パーツレイアウトの要素

コンポーネント・ユーザーインターフェースのパーツの配置するうえでの位置決めをする設定（要素）は下記となります。
これらをうまく組み合わせて配置することで縦横比の異なるデバイスや解像度の異なるディスプレイなどでも正しく表示されるUIを作り上げましょう。

• Anchors（アンカー）: http://embt.co/firemonkey-anchors
• Align（アラインメント）: http://embt.co/firemonkey-alignlayout
• Padding(パディング)：http://embt.co/foremonkey-padding
• Margins(マージン)：http://embt.co/firemonkey-margins
  
  マージンとパディングの関係

 

■レイアウトに便利なコンポーネント

レイアウトをする上で便利なコンポーネント類をご紹介しました。

• TTabControl (タブコントロール)： http://embt.co/tabctrl-tutorial
  
  
  

• TMultiView (マルチビュー) : http://embt.co/tmultiview-tutorial
  
  
  

• TListBox (リストボックス): リスト ボックス コンポーネントを使用してテーブル ビューを表示する
                        
  
  

• TListView (リストビュー): LiveBinding を使用してリスト ビューの内容を設定する

 

■レイアウト応用編  - レイアウトマネージャ -

• レイアウトマネージャ：http://embt.co/firemonkey-layoutmgr
  • TFlowLayout
    
    
    
  • TGridLayout
    
    
    
  • TGridPanelLayout
    
    
    
• スケールレイアウト：http://embt.co/scaledlayout
  • TScaledLayout
    
    
    
• スクロールボックス: http://embt.co/scrollbox
  • TScrollBox
    
    

 

■ユーザーインターフェイスをより見栄えよく 

アニメーションやエフェクトを使うことで、生き生きとした、インタラクティブな、ユーザーのアテンションをとれるUIとなります。下記の情報をもとにアイデアをひねり出して動きのあるUIを考えてみてください。

• アニメーション効果 : http://embt.co/firemonkey-animation
  
  
• 画像効果 : http://embt.co/firemonkey-effects
  
  
  
• スタイル: http://embt.co/firemonkey-style

ご参考：スタイルについては、こちらのブログで使用法をご紹介しています。

• 簡単にUIの印象を変える方法 - Styleの適用 - FireMonkey と VCL [Japan]

(2016/09/01追記) デモでご覧に入れましたサンプルはすべてUIで行われたオンラインセミナーにてJimが使っていたもの同じ物です。JimはこのサンプルをGithubで公開しておりますので、使ってみたい方は下記リンクから入手してください。

• The Animation, Transition & Effects samples (GitHub)

 

■使いやすいUIを作るコツ – 処理編 -

メインスレッド（メインのUIフォーム）上で時間のかかる処理を行うと、アプリがハングしているように見えます。TTaskなどを使用して処理を分けてあげましょう。

• 並列プログラミング: http://embt.co/ppl-overview
• デモで使用していたTTaskはこちら：並列プログラミング ライブラリの TTask の使用