忍者ブログ

≪ 前の記事

次の記事 ≫

  • [PR]

    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    comments

  • JavaFXにおけるレイアウトペイン

    JavaFXにおけるレイアウトペインについて、Paneという名の付くクラスを一通り試してみました。

    ・Pane 		:ただのペイン
    ・AnchorPane	:上下左右の4つに分かれて配置する
    ・BorderPane	:上下左右+中央の5つに分かれて配置する
    ・DialogPane	:ダイアログ用
    ・GridPane		:格子状に間隔を指定して配置する
    ・FlowPane	:上から下に配置する
    ・ScrollPane	:スクロールバーを使用できる
    ・SplitPane	:画面分割
    ・StackPane	:下から上に配置する
    ・TabPane		:タブ表示
    ・TilePane		:タイル状に等間隔で並べる
    

    一応ソースコードも付けておりますが、初めて使ったクラスもあるので参考程度にしてください。
    どんなレイアウトなのか確認できる一覧が欲しかったので、とりあえず下記にまとめておこうと思います。


    拍手[2回]



    Pane
     まっさらのキャンバス
     左揃え・中央揃えといった配置ができず、X,Y座標でのみ配置できる。
     単品では使いにくく、使用する機会は少ない。主に継承用?
    Pane画像
    <!--====Paneクラスの見本====-->
    <Pane prefWidth="400" prefHeight="200">
    	<children>
    		<Label text="Pane" style="-fx-font:18 Meiryo"/>
    	</children>
    </Pane>
    





    AnchorPane
     上・下・左・右の4つに分けて配置する
     ヘッダーとかフッターなんかを入れたい時に使える
    AnchorPane画像

    メソッド説明
    setTopAnchor(Node , double) 上端からの距離を指定してコンテンツを配置する
    setBottomAnchor(Node , double) 下端からの距離を指定してコンテンツを配置する
    setLeftAnchor(Node , double) 左端からの距離を指定してコンテンツを配置する
    setRightAnchor(Node , double) 右端からの距離を指定してコンテンツを配置する

    <!--====AnchorPaneクラスの見本====-->
    <AnchorPane prefWidth="400" prefHeight="200">
    	<children>
    		<Label AnchorPane.topAnchor="0" text="TopAnchorPane" style="-fx-font:18 Meiryo"/>
    		<Label AnchorPane.leftAnchor="0" text="LeftAnchorPane" style="-fx-font:18 Meiryo"/>
    		<Label AnchorPane.rightAnchor="0" text="RightAnchorPane" style="-fx-font:18 Meiryo"/>
    		<Label AnchorPane.bottomAnchor="0" text="BottomAnchorPane" style="-fx-font:18 Meiryo"/>
    	</children>
    </AnchorPane>
    





    BorderPane
     AnchorPaneに似ているが、中央にも配置できるようになったPane。
     AnchorPaneと違い、配置するオブジェクトの大きさに合わせて
     自動でレイアウト幅が変わる。
    BorderPane画像

    メソッド説明
    setTop(Node) 上部にコンテンツを配置する
    setBottom(Node) 下部にコンテンツを配置する
    setLeft(Node) 左部にコンテンツを配置する
    setRight(Node) 右部にコンテンツを配置する
    setCenter(Node) 中央にコンテンツを配置する

    <!--====BorderPaneクラスの見本====-->
    <BorderPane prefWidth="400" prefHeight="200">
    	<top>
    		<Label text="TopBorderPane" style="-fx-font:14 Meiryo"/>
    	</top>
    	<bottom>
    		<Label text="BottomBorderPane" style="-fx-font:14 Meiryo"/>
    	</bottom>
    	<left>
    		<Label text="LeftBorderPane" style="-fx-font:14 Meiryo"/>
    	</left>
    	<right>
    		<Label text="RightBorderPane" style="-fx-font:14 Meiryo"/>
    	</right>
    	<center>
    		<Label text="CenterBorderPane" style="-fx-font:14 Meiryo"/>
    	</center>
    </BorderPane>
    





    DialogPane
     ダイアログ用。
     ヘッダー+コンテンツ+画像 程度の必要最小限の機能のみ実装できる。
    DialogPane画像
    ContentとexpandableContentの左にインデントが入ってしまう。
    詳細を表示の部分にカーソルを合わせると表示がブレる。
    原因はよくわからない。
    <!--====DialogPaneクラスの見本====-->
    <DialogPane prefWidth="400" prefHeight="200">
    	<header>
    		<Label text="HeaderDialogPane" style="-fx-font:16 Meiryo"/>
    	</header>
    	<content>
    		<Label text="ContentDialogPane" style="-fx-font:16 Meiryo"/>
    	</content>
    	<expandableContent>
    		<Label text="expandableContentDialogPane" style="-fx-font:16 Meiryo"/>
    	</expandableContent>
    </DialogPane>
    





    GridPane
     格子状にコンテンツを配置するレイアウト。
     表計算ソフトのセル幅を自由に変えていくようなイメージ。
     手間はかかるが、細かく設定できる。
    GridPane画像
    メソッド説明
    setHgap(double) コンテンツごとの列間隔(横)を設定する
    setVgap(double) コンテンツごとの行間隔(縦)を設定する
    setColumnIndex(Node , Integer) コンテンツを配置する列番号を指定(0から始まる)
    setRowIndex(Node , Integer) コンテンツを配置する行番号を指定(0から始まる)

    <!--====GridPaneクラスの見本====-->
    <GridPane prefWidth="400" prefHeight="200" hgap="40" vgap="40" gridLinesVisible="true">
    	<children>
    		<Label text="GridPane0" style="-fx-font:18 Meiryo" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
    		<Label text="GridPane1" style="-fx-font:18 Meiryo" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
    		<Label text="GridPane2" style="-fx-font:18 Meiryo" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    		<Label text="GridPane3" style="-fx-font:18 Meiryo" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    	</children>
    </GridPane>
    





    FlowPane
     左上から右下に向かってコンテンツを配置する。
     ウィンドウのサイズが小さくなるとはみ出たコンテンツが自動的に折り返され、
     大きくなるとはみ出ていたコンテンツが元に戻る。
    FlowPane画像
    <!--====FlowPaneクラスの見本====-->
    <FlowPane prefWidth="400" prefHeight="200">
    	<children>
    		<Label text="FlowPane0" style="-fx-font:18 Meiryo"/>
    		<Label text="FlowPane1" style="-fx-font:18 Meiryo"/>
    		<Label text="FlowPane2" style="-fx-font:18 Meiryo"/>
    		<Label text="FlowPane3" style="-fx-font:18 Meiryo"/>
    		<Label text="FlowPane4" style="-fx-font:18 Meiryo"/>
    	</children>
    </FlowPane>
    





    ScrollPane
     スクロールバーの付いたウィンドウが作れる。
     コンテンツが大きいが、縮小はしたくない場合や、
     複数のコンテンツを一列に並べたい場合などに有効。
    ScrollPane画像
    <!--====ScrollPaneクラスの見本====-->
    <ScrollPane prefWidth="400" prefHeight="200">
    	<content>
    		<FlowPane>
    			<Label text="ScrollPane0" style="-fx-font:18 Meiryo"/>
    			<Label text="ScrollPane1" style="-fx-font:18 Meiryo"/>
    										.
    										.
    										.
    			<Label text="ScrollPane23" style="-fx-font:18 Meiryo"/>
    			<Label text="ScrollPane24" style="-fx-font:18 Meiryo"/>
    		</FlowPane>
    	</content>
    </ScrollPane>
    





    SplitPane
     画面を分割して、子画面それぞれに操作することができる。
     擬似マルチディスプレイ的な感じ。
     左側に独立したメニューを配置して、右側にコンテンツを置く時などに使える。
    SplitPane画像
    <!--====SplitPaneクラスの見本====-->
    <SplitPane prefWidth="400" prefHeight="200" dividerPositions="0.33f,0.66f">
    	<items>
    		<Pane>
    			<children>
    				<Label text="SplitPane0" style="-fx-font:18 Meiryo"/>
    			</children>
    		</Pane>
    		<Pane>
    			<children>
    				<Label text="SplitPane1" style="-fx-font:18 Meiryo"/>
    			</children>
    		</Pane>
    		<Pane>
    			<children>
    				<Label text="SplitPane2" style="-fx-font:18 Meiryo"/>
    			</children>
    		</Pane>
    	</items>
    </SplitPane>
    





    StackPane
     下から上にコンテンツを配置していく。
     この文言だと勘違いしやすいが、FlowPaneとは根本的に違うもので、
     FlowPaneはコンテンツ同士が重ならないように配置していくのに対し、
     StackPaneは重ねて奥から手前に配置していく。
    StackPane画像
    <!--====StackPaneクラスの見本====-->
    <StackPane prefWidth="400" prefHeight="200">
    	<children>
    		<Label text="StackPane0" style="-fx-font:18 Meiryo"/>
    		<Label text="StackPane1" style="-fx-font:18 Meiryo; -fx-text-fill:red;"/>
    	</children>
    </StackPane>
    





    TabPane
     複数の画面をタブ形式で表示する、仮想デスクトップのようなもの。
     ウェブブラウザやウェブサイト等、目にする機会は多い。
    TabPane画像
    <!--====TabPaneクラスの見本====-->
    <TabPane prefWidth="400" prefHeight="200">
    	<tabs>
    		<Tab text="Tab0">
    			<content>
    				<Label text="TabPane0" style="-fx-font:18 Meiryo"/>
    			</content>
    		</Tab>
    		<Tab text="Tab1">
    			<content>
    				<Label text="TabPane1" style="-fx-font:18 Meiryo"/>
    			</content>
    		</Tab>
    	</tabs>
    </TabPane>
    





    TilePane
     タイル状(等間隔)にコンテンツを配置できる。
     マインスイーパとかリバーシなんかはこれ使うと便利そう。
    TilePane画像
    <!--====TilePaneクラスの見本====-->
    <TilePane prefWidth="400" prefHeight="200">
    	<children>
    		<Label text="TilePane0" style="-fx-font:18 Meiryo"/>
    		<Label text="TilePane1" style="-fx-font:18 Meiryo"/>
    								.
    								.
    								.
    		<Label text="TilePane10" style="-fx-font:18 Meiryo"/>
    		<Label text="TilePane11" style="-fx-font:18 Meiryo"/>
    	</children>
    </TilePane>
    

    0 comments

Comment