Unity3D-我们是否有插件或任何人从事过标签收集输入视图，请参见屏幕截图 [英] Unity3D - Do we have a plugin or anyone have worked on Tag collection input view, see screenshot
问题描述
我需要一个具有以下功能的Unity插件(例如 Android Chips ):
I need a Unity plugin with following features (like Android Chips):
用户将从列表中搜索标签，并且从列表中选择的项目将显示为标签.标签将带有叉号的文本.移动设备的宽度将为最大水平空间，如果已满，则下一个标签将进入下一行.
User will search the tags from a list and selected item from list will be shown as a tag. Tag will have text with a cross. Mobile device width will be the maximum horizontal space and if its full, next tag will go in next line.
推荐答案
注意！在花太多时间解决这个问题之前，请务必先查看 https://stackoverflow.com/a/38479097/294884
Note! Before spending too much time on this answer, be sure to check out https://stackoverflow.com/a/38479097/294884
目前没有适合的软件包.但是使用Unity UI做到这一点相当容易.您必须熟悉HorizontalLayoutGroup等，以及如何在代码中添加UI项.从 Unity教程开始.享受吧！
There is no existing good package for this. Butit is fairly easy to do this using Unity UI. You must familiarize yourself with HorizontalLayoutGroup, etc, and how to add UI items in code. Start from Unity tutorial. Enjoy!
我继续进行了一个演示项目，演示了如何操作.
I went ahead and made a demo project showing just how to do it.
链条是这样的:它的深度为4
The chain is like this: it has a depth of four
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中自动布局的艺术！确实需要一些时间来获得专家的帮助.
You have to carefully set all the items in the chain exactly like that. This is the art of autolayout in Unity! It does take a little while to get expert with it.
http://speedy.sh/xcPcc/Teste.zip
您可以根据需要在编辑器中简单地添加和删除项目或行.
Simply add and delete items or rows as you wish in the Editor to get started.
下一个！当您在代码中添加/减去项目时，如何自动重排布局?
Next! What about reflowing the layout automatically, when you add/subtract items in code.
下面是完成此任务的完整片段.
Here below is a FULL SCIPT which does just that.
点击下载: http://speedy.sh/5XtkX/Teste2.zip
启动项目.进入现场，然后点击播放".
Launch the project. Go to the scene, actually hit Play.
现在在玩游戏时，从字面上复制或删除项目或整行:
Now while Play'ing, literally duplicate or delete either Items or whole Rows:
然后点击测试"按钮以运行Flow() ...
它将固定布局向左平移...
It will fix the layout flush left ...
这是脚本.这是绝对简单的-只需将其附加到最高级别(包含所有行"的级别)，它就会自动找出所有内容.
Here's the script. It is absolutely straightforward - just attach it to the highest level (the level that holds "all the rows") and it figures everything out automatically.
// 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的出色教程.但是请务必查看以下出色的质量检查: https://stackoverflow.com/a/38479097/294884
The above package is a great tutorial on Unity.UI. But be sure to check out this fantastic QA: https://stackoverflow.com/a/38479097/294884
这篇关于Unity3D-我们是否有插件或任何人从事过标签收集输入视图，请参见屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
