Unity3Dは - 私たちはタグコレクション入力ビューに働いているプラ​​グインや、誰を持っていますか、スクリーンショット

Question

を参照してください、私は次のような特徴（Android Chipsのような）とユニティプラグインを必要とする：

ユーザーはリストと、選択した項目からタグを検索しますリストからはタグとして表示されます。タグには十字のテキストが表示されます。モバイルデバイスの幅は最大水平スペースになり、フル、次のタグが次の行に入る場合。

Answer 1

注意！この回答にあまりにも多くの時間を費やす前に、このための既存の良いパッケージはありませんhttps://stackoverflow.com/a/38479097/294884

---

をチェックしてください。 Butitは、Unity UIを使用してこれを行うのはかなり簡単です。 Horizo​​ntalLayoutGroupなどに慣れておく必要があります。また、コードにUI項目を追加する方法もあります。 Unity tutorialから開始してください。楽しい！

---

私は先に進んで、それを行う方法を示すデモプロジェクトを作成しました。

チェーンは次のようである：それはあなたが慎重に連鎖に正確そのようにすべての項目を設定する必要が4

All Rows .. VerticalLayoutGroup, ContentSizeFitter 
(EXPAND MUST BE "OFF") 
(MUST BE HORIZONTAL >>UNCONSTRAINED<<, VERT PREFERRED) 
One Row ... HorizontalLayoutGroup, ContentSizeFitter ** CFO OFF! 
(EXPAND MUST BE "OFF") 
(MUST BE HORIZONTAL PREFERRED, VERT PREFERRED) 
    One Unit .... HorizontalLayoutGroup, ContentSizeFitter **CFO ON! 
    (EXPAND MUST BE "ON") 
    (MUST BE HORIZONTAL PREFERRED, VERT PREFERRED) 
    Text on the left (inherently sizes in Unity) 
    The UI.Button ..... LayoutElement: choose and set "Min" Width/Height 
     Text below button ...... nothing (probably won't need this) 
Another row... 
Another row... 

CFE means ChildForceExpand button, set correctly as shown! 
For all three ContentSizeFitters, select "Preferred" both ways 

の深さを有しています。これはUnityの自動レイアウトの芸術です！それを専門にするには少し時間がかかります。ダウンロードする

FULLデモプロジェクト.... STATIC例：あなたが始めるためにエディタに望むように

http://speedy.sh/xcPcc/Teste.zip

だけのアイテムまたは行を追加し、削除します。

---

次へ！コード内にアイテムを追加/削除するとき、レイアウトを自動的にリフローする方法はありますか？

以下は、これを行うフルスクリーンです。

完全なデモプロジェクト........

クリックしてダウンロードする：http://speedy.sh/5XtkX/Teste2.zip

起動プロジェクト。シーンに行って、実際にプレイを打つ。

今Play'ingは、文字通りのアイテムまたは全部の行のいずれかを複製したり削除しながら：

その後Flow()を実行するために、 "テスト" ボタンを打ちます...

それはレイアウトフラッシュ左を修正します...

はここでスクリプトです。絶対に簡単です。最高レベル（「すべての行」を保持するレベル）に接続するだけで、すべてが自動的に出力されます。

// FattieFlow - flush left fitting for Unity reactive 

// for simplicity, it does assume the only things under here 
// are the relevant rows and items, and, the model row. 

// NOTE ---- 
// this is deliberately programmed in the most illustrative manner. 

// To use - just call Flow() any time to completely correct the layout. 

// To put in a project: simply copy the "all rows" and the "model rows" 
// in to your own scene. That's it. 

// To make your layout in editor. Just enable the model so you can see it. 
// Just duplicate the model item/row a few times to see what you're doing. 
// Change the colors/sizes/spacings in any way you wish. Done. 
// Eliminate the non-model items you used to layout. Roll tide. 

// To test. Hit Play. Literally add or delete "items" or rows, 
// so that the flow is wrong. Run the "Flow()" function and it 
// will fix everything regardless. 

using UnityEngine; 
using UnityEngine.UI; 
using System.Collections; 

public class FattieFlow:MonoBehaviour 
    { 
    public GameObject modelRow; 
    public GameObject modelItem; 


    void Awake() 
     { 
     modelRow.SetActive(false); 
     modelItem.SetActive(false); 
     // (it's a little untidy having the model (which is inactive) 
     // sibling to the real rows, so just be careful with it...) 
     modelRow.transform.SetAsFirstSibling(); 

     // simple example of how you might add an item 
     Invoke("_teste", 2f); 
     } 

    void _teste() 
     { 
     ExampleAddItem("added this"); 
     Flow(); 
     } 
    public void ExampleAddItem(string label) 
     { 
     if (transform.childCount < 2) _addARow(); 
     GameObject nu = Instantiate(modelItem); 
     nu.name = "dynamically created item."; 
     nu.transform.SetParent(transform.GetChild(1),false); 
     nu.SetActive(true); 
     Canvas.ForceUpdateCanvases(); 
     } 

    float screen; 

    public void Flow() 
     { 
     screen = GetComponent<RectTransform>().rect.width; 

     // move downwards any which need to be moved downwards 
     int row = 0; 
     while (row < transform.childCount) // (dynamic) 
      { 
      if (transform.GetChild(row).gameObject.activeSelf) FlowRow(row); 
      ++row; 
      } 

     // move upwards any which can be moved upwards 
     row = 0; 
     while (row < transform.childCount) 
      { 
      if (transform.GetChild(row).gameObject.activeSelf) UnflowRow(row); 
      ++row; 
      } 

     // account perfectly for spacing, regardless of the user's layout 
     // (the most elegant algorithm is to simply ABA) 
     row = 0; 
     while (row < transform.childCount) // (dynamic) 
      { 
      if (transform.GetChild(row).gameObject.activeSelf) FlowRow(row); 
      ++row; 
      } 

     // remove any dud rows 
     } 

    private void UnflowRow(int r) 
     { 
     // so where possible move any from below us, into this row 

     if (r == transform.childCount-1) return; 
     Transform thisRow = transform.GetChild(r); 
     Transform nextRow = transform.GetChild(r+1); 

     while (_nominalWidthOfFirst(nextRow) < _availableSpaceOnRight(thisRow)) 
      { 
      Transform moveMeUp = nextRow.GetChild(0); 
      moveMeUp.SetParent(thisRow, false); 
      moveMeUp.SetAsLastSibling(); 
      Canvas.ForceUpdateCanvases(); 
      } 
     } 

    private float _availableSpaceOnRight(Transform someRow) 
     { 
     return screen - someRow.GetComponent<RectTransform>().rect.width; 
     } 

    private float _nominalWidthOfFirst(Transform someRow) 
     { 
     if (someRow.childCount == 0) return screen*2f; 
     return someRow.GetChild(0).GetComponent<RectTransform>().rect.width; 
     } 

    private void FlowRow(int r) 
     { 
     Transform row = transform.GetChild(r); 

     // it's worth noting this is an indeterminate algorithm. 
     // if you're not into compsci, don't worry about this. much. 

     while (row.GetComponent<RectTransform>().rect.width > screen) 
      { 
      int k = row.childCount; 

      if (k<1) return; // setup problem! 
      if (k==1) return; // one item is too wide for screen! 

      Transform lastOnThisRow = row.GetChild(k-1); 
      MoveToStartOf(lastOnThisRow, r+1); 
      } 
     } 

    private void MoveToStartOf(Transform item, int newRow) 
     { 
     while (newRow >= transform.childCount) // may have to add a row 
      _addARow(); 

     Transform moveToThisRow = transform.GetChild(newRow); 

     item.SetParent(moveToThisRow, false); 
     item.SetAsFirstSibling(); 
     Canvas.ForceUpdateCanvases(); 
     } 

    private void _addARow() 
     { 
     GameObject r = Instantiate(modelRow); 
     r.name = "dynamically created row."; 
     r.SetActive(true); 
     r.transform.SetParent(transform,false); 
     Canvas.ForceUpdateCanvases(); 
     // just remove the model unit 
     while(r.transform.childCount>0) 
      { 
      Debug.Log("Deleting model"); 
      DestroyImmediate(r.transform.GetChild(0).gameObject); 
      Canvas.ForceUpdateCanvases(); 
      } 
     } 
    } 

上記パッケージはUnity.UIの素晴らしいチュートリアルです。しかし、この素晴らしいQAをチェックアウトしてください：https://stackoverflow.com/a/38479097/294884