SegmentのviewTypeプロパティを使用して、様々なセグメントビューを作成してみた

#目次
1. はじめに
2. 実装
    3. Segment
    4. Button
    5. コーディング
    6. Actionの紐づけ
3. まとめ
4. 参考

#はじめに
Segmentはデータのリストやページを表示するために使われるWidgetです。
ユーザーがSegmentの任意の行をクリックすると、その行のデータに関する詳細ページに遷移したり、
アニメーションを実行させることができます。

**Segmentには、標準で一覧表示のタイプが8種類も用意されている**ので、
今回はSegmentのviewTypeプロパティを使って、様々な表示タイプをご紹介したいと思います！

Segmentの機能詳細については[こちらの記事](https://qiita.com/Kony_Team/items/edd2f5daf74c88aa0634#segment)を参考にしてください。

完成イメージ
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/G1SXnsJCPX">pic.twitter.com/G1SXnsJCPX</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1342068003714658304?ref_src=twsrc%5Etfw">December 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#実装
######1. Segment
様々なセグメントの表示方法を実行するため、セグメントを用意します。
今回は、segStyleと作成しました。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9bd721cd-3f20-f913-5143-ef6d444dfa9d.png)
PropertiesのSegmentタブにある、RowTemplateのプルダウンを選択し、
Create Newを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9ebfdd50-0621-beb9-9efd-70b666c86e89.png" width=45%>
segStyleRowという名前でテンプレートを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8f80cc00-c141-caa6-5990-1084c2bbef9c.png" width=55%>
Form1に戻りPropertiesの`Master Data`からマスターデータを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5ea6ddfa-3379-9cb5-42a4-a9d837bc401b.png" width=300dp>
1~10の数字を入力します。
![スクリーンショット 2020-12-24 19.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/feb56e5d-fa0e-9dbd-38db-d510f2f33671.png)

######2. Button
次にSegmentの表示タイプを切り替えるボタンを8つ用意します。
ボタンの名前はセグメントの表示タイプ名と同じにしています。
![スクリーンショット 2020-12-24 19.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fc820c23-4ac7-3bbe-951e-51773194a9b9.png)

この時FlexScrollContainerのLayout Typeは`Flow Horizontal`に、Child Widget Alignは`Left to Right`に設定することで、ボタンが横並びになり、左から右へスクロールできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/86183fbc-caa0-3314-9458-4eaee6a74da9.png" width=60%>

次にタップしたボタンごとにSegmentの表示タイプを切り替える処理を書きます。

######3. コーディング

```Form1Controller.js
define({ 

  changeStyle: function(eventobject){
    var style = eventobject.id;

    switch(style) {
      case "btnTABLEVIEW":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_TABLEVIEW;
        break;
      case "btnPAGEVIEW":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_PAGEVIEW;
        break;
      case "btnCOVERFLOW":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_COVERFLOW;
        break;
      case "btnCYLINDER":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_CYLINDER;
        break;
      case "btnINVERTEDCYLINDER":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_INVERTED_CYLINDER;
        break;
      case "btnINVERTEDROTARY":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_INVERTED_ROTARY;
        break;
      case "btnLINEAR":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_LINEAR;
        break;
      case "btnSTACK":
        this.view.segStyles.viewType = constants.SEGUI_VIEW_TYPE_STACK;
        break;
    } 
  }
});
```
クリックしたボタンごとにSegmentの表示タイプを切り替える処理を書きます。
changeStyleのパラメーター`eventobject`はクリックしたButtonの情報を渡し、`eventobject.id`でクリックしたボタンのid名がわかります。
eventobjectをどうやって取得するかについては後ほど[Actionの紐づけ](https://qiita.com/Kony_Team/private/991bf2a8b2bb12a93733#4-action%E3%81%AE%E7%B4%90%E3%81%A5%E3%81%91)で説明します。

ではSegmentの各表示タイプについて説明したいと思います。

| タイプ名 | 説明 | 画像 | 
| :--- | :---- | :---: |
| SEGUI_VIEW_TYPE_TABLEVIEW | Widgetがリストとして一覧に表示されます<br>※全てのプラットフォームに対応 | ![スクリーンショット 2020-12-24 19.48.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/de426211-de68-8a34-f0cc-2dab707c218e.png) |
| SEGUI_VIEW_TYPE_PAGEVIEW | Widgetがページ状に表示されます<br>次のページを見るにはスクロールする必要があります<br>※全てのプラットフォームに対応* | ![スクリーンショット 2020-12-24 19.49.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f848e56e-ef62-2af4-4bde-65ea85734db1.png) |
| SEGUI_VIEW_TYPE_COVERFLOW | 配置されたWidgetをめくりながら次のWidgetを表示します<br>※iPhone、iPad、Android / Androidタブレットに対応 | ![スクリーンショット 2020-12-24 19.50.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3e6bdf70-5044-15c7-0489-912f52baddd1.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e2447350-d687-fdc5-1ed2-91469c03f08c.png) |
| SEGUI_VIEW_TYPE_CYLINDER | 円柱状に配置されていてユーザーは外側から見ているように表示されます<br>※iPhoneとiPadにのみ対応 | ![スクリーンショット 2020-12-24 19.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7dc3540d-b10e-fe72-c62e-da25da94997c.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4681d852-de42-ad66-8713-8e1be3545509.png) |
| SEGUI_VIEW_TYPE_INVERTED_CYLINDER | 円柱状に配置されていてユーザーは内側から見ているように表示されます<br>※iPhoneとiPadにのみ対応 | ![スクリーンショット 2020-12-24 19.50.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/17fec0bf-7fc0-96c0-8d5c-4725c3093e56.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/02e774da-cc66-f1ee-f07e-fd35c3a5843f.png) |
| SEGUI_VIEW_TYPE_INVERTED_ROTARY | Widgetが前後に配置されていてユーザーが見ているWidgetが前面に押し出されるように表示されます<br>※iPhoneとiPadにのみ対応 | ![スクリーンショット 2020-12-24 19.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b4b34145-3cba-c3b9-5266-e57ddbaa3641.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/73d7302a-3efe-c17c-7058-7ce0643140cd.png) |
| SEGUI_VIEW_TYPE_LINEAR | 線状に配置されていてFlow Horizonに設定されたFlexScrollContainerの表示とよく似ています<br>※iPhoneとiPadにのみ対応 | ![スクリーンショット 2020-12-24 19.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d9922271-d544-3c21-f69f-baf9cfb50bfc.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfb1f5da-b98c-2409-bb82-33e30f551562.png) |
| SEGUI_VIEW_TYPE_STACK | Widgetが一列に並んで配置されて表示されます <br>※iPhoneとiPadにのみ対応| ![スクリーンショット 2020-12-24 19.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5bed6032-2a89-b30c-57d5-29da5a2e28ca.png)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2d7e4ec0-e066-79ec-d6bf-191cf6873e6e.png) |

*Windows Phoneではページビューを動的に設定することはサポートされていません。


######4. Actionの紐づけ
8つのボタンに関数changeStyleを紐づけていきます。
対象のボタンを選択し、onClickのEditをクリックします。
Invoke Fonctionをクリックして、changeStyleを選択し、パラメーターを設定してください。
8つ全てのボタンにchangeStyleを紐づけてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f8d7680f-2059-0e38-dcf0-cd936000031c.png" width=45%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b795e145-d1aa-c407-3aee-72c117f9a2d4.png" width=55%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/45b6c149-184f-1009-e6bb-810cd23bcde4.png" width=40%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/925b9c9b-8aaa-d3d8-b5c8-bd0ffbdf3121.png" width=60%>
パラメーターはValueのEditをクリックすると設定できます。
![スクリーンショット 2020-12-24 19.58.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/478baff2-2925-1df7-63cd-dcf77c96845f.png)


ではどのようにSegmentが表示されているのか実際に見てみましょう。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/G1SXnsJCPX">pic.twitter.com/G1SXnsJCPX</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1342068003714658304?ref_src=twsrc%5Etfw">December 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#まとめ
今回はSegmentの表示タイプについて紹介しました。

Konyではさまざまな表示タイプを標準で搭載していますので、
おしゃれな写真管理アプリなどが簡単に作れます！ぜひ試してみてください:relaxed:

#参考
Segmentについて：
https://qiita.com/Kony_Team/items/edd2f5daf74c88aa0634#segment
SegmentのViewTypeについて：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Segment_Basic_Properties.htm#viewType