読者です 読者をやめる 読者になる 読者になる

asaのブログ

プログラミングの勉強まとめ

JavaFX-スライダー、リスト・ビューの作成とCanvasの中央揃え

 今回はUIにブラシを調整するためのスライダーと、ブラシを選択するためのリスト・ビューを作成しました。あと、キャンバスが左上に表示されるのを、中央に表示されるようにしました。

 

 インターフェースの左はレイヤー管理と、微調整用のメンテナンスをTiledPaneでおいています。ただ実装は今のところ見当がついていないのでUIの大枠はこれで終了です。

 

 とりあえずバージョンCirce0.0.3くらいの位置づけです。0.1.0で最低限動作するというのを目標にしているので、これからMVCでいうとMとC辺りに入っていきます。

 

 スライダー

 JavaFXのUIコンポーネントの1つで、Sliderクラスのインスタンスを作ることで使えます。setMinでスライダーの最小値、setMaxでスライダーの最大値、setValueでデフォルトの位置を指定できます。

 

 メモリや値の表示を出したいときはsetShowTickMarks、setShowTickLabelsをtrueにすることで表示させることができます。

 

 リスト・ビュー

 項目をリスト表示するときに使うUIコンポーネントです。今回はブラシを選択するためのブラシ・チューザーとして使いました。リスト・ビューは一旦ObservableListにデータを入れてから、それをリストビューに渡して作成します。

 作ってみると見た目がかなりきれい。

 

 Canvasの中央表示

 CanvasのラッパーにしていたペインをGridPainに変えて、setAlignmentメソッドを使って中央に持っていった。

 

 Circe(0.03) View

 なんかそれっぽいねみたいな感じにはなりました(笑)。ただもっときれいにしたいのでこれはこれとして攻めていきたいです。

f:id:asa_r:20170518103649p:plain

 

 コード

 コードが徐々に見ずらくなってきてます(汗)。後々のことも考えて、共通するところをInterfaceにまtめて、UIのまとまり毎にクラスに切り分けてimplementsしたほうがいいですかね…?

 デザインパターン読み直そうと思います。

gistf156b2ca03cadc43318646e0c32baa6c