使用NGUI制作关联下拉菜单(查询全国天气)

关联菜单,在我们浏览网页时经常见到,它极大的方便了我们的操作,在游戏中,偶尔也会用到关联下拉菜单。下面,我们使用关联下拉菜单来查询下全国的天气。

首先,老规矩我们搭建基本的UI界面。我们就不自己去制作UI组件了,直接使用NGUI封装好的UI组件。

  1. 我们先创建于一个Sprite,重命名为BgSprite,为其选择图集和精灵。
  2. 在菜单中选择NGUI,选择Open,打开Prefab Toolbar,拖一个PopupList,重命名为ProvincePopupList。这里,我们要注意, 我们导入支持中文的字体,不然我们输入中文,在下拉菜单中无法显示。
  3. 导入动态字体,Window用户可以在控制面板\外观和个性化\字体中选择一个中文字体,然后将其拖放到桌面,回到Unity中,创建一个文件夹,命名为Fonts,将刚才的字体导入。Mac用户,请自行百度。当然你还可以从其他资源中导入你喜欢的字体。
  4. 导入完字体后,我们选中ProvincePopupList在UI PopupList组件中修改字体,为你刚才导入的字体。我这里是这样的,,删除Options中的内容,然后展开ProvincePopupList,修改其子物体Label的字体,也为我们刚才的字体,然后再Text属性栏中,输入”省份“。然后,选中ProvincePopupList,Ctrl+D复制两个。调整三者的位置。然后分别命名为 “City Popup List”和“DistrictPopup List”,然后 分别修改Label为“城市”,“区县”。
  5. 最后,我们创建一个Label,用来显示我们查询到的信息。我这边比较简单的显示下结果,当然,你还可以花点心思设计下展示天气页面,我这边就不设计了,直接创建一个Label来显示。创建一个Label,重命名为Show Label,为其选择我们刚导入的字体。

好了,基本的UI界面搭建完成了,下面我们来编写脚本。在写脚本之前,我们需要去聚合数据,注册一个账号,我们将从这里请求数据。网址是,https://www.juhe.cn/

登陆后,我们在首页找到全国天气预报,点击进入,会提示我们申请数据,我们点击申请数据,进入后,我们按照提示,如果是第一次注册,需要先实名认证,等待审核通过后,我们就可以申请数据了。提醒,天气预报的免费次数只有500次,省着点用啊。申请成功后,我们看看需要注意看下这个数据支持的格式,目前支持的是Json和Xml,它下面还有示例,我们可以看看。由于,我们需要请求的数据是Json格式的,所以,我们导入Unity支持的Json动态链接库文件(dll扩展名),LitJson.dll ,没有的童鞋,我会在文末给出网盘链接,当然你也可以找度娘。

我们回到Unity中,创建一个文件夹,Plugins,它是Unity默认的文件,用来存放我们的 插件等文件。我们找到我们的LitJson.dll文件,将其导入到Plugings文件下。

好了,我们来开始编写脚本,我们创建一个C#脚本,命名为Global,它将作为我们的静态或者常量的工具类,打开脚本,首先,它不需要继承MonoBehaviour,我们创建两个公共静态字符串变量,用来存放我们的网址。脚本如下:

using UnityEngine;
using System.Collections;

public class Global  {
    public static string areaUrl = "http://v.juhe.cn/weather/citys";     //支持的城市 ,在聚合数据/天气预报的第6条
    public static string weatherUrl = "http://v.juhe.cn/weather/index";  //更加城市名或id查询天气 ,在聚合数据/天气预报的第1条
    public static string appKey = "您申请的AppKey";   //申请是appkey
}

Global

保存,回到Unity中,我们在创建一个脚本。命名为Weather。这个脚本中,我们将开启两个协程,一个用来请求区域信息,一个用来请求天气信息。代码如下:

using UnityEngine;
using System.Collections;
using LitJson;      //引入 LitJson

public class Weather : MonoBehaviour {
    public UIPopupList provincePopupList;  //省份
    public UILabel provinceLable;        //显示省份的label
    public UIPopupList cityPopupList;   //城市
    public UILabel cityLable;          //显示城市的label
    public UIPopupList districtPopupList;  //区/县
    public UILabel districtLable;     //显示区/县的label
    public UILabel lable;    //显示结果的label

    private JsonData resultData;   //请求到的城市数据

    void Start()
    {
        provincePopupList.Clear();     //清空省份list
        StartCoroutine(RequestData());  //开启协程开请求区域数据
    }

    //选择城市,当我们的省份的provincePopupList的值发生变化时,我们调用这个方法,来更新城市
    public void SelectCity()
    {
        cityPopupList.Clear();    //情况城市List
        for (int i = 0; i < resultData.Count; i++)
        {
            //遍历区域数据,找到省份List上的省份
            if (resultData[i]["province"].ToString().Equals(provinceLable.text))
            {
                //不存在这个城市,加到城市List上
                if (!cityPopupList.items.Contains(resultData[i]["city"].ToString()))
                    cityPopupList.AddItem(resultData[i]["city"].ToString());
            }
        }
    }
    //选择曲线,当我们的省份的cityPopupList的值发生变化时,我们调用这个方法,来更新区县
    public void SelectDistrict()
    {
        districtPopupList.Clear();  //清空曲线List
        for (int i = 0; i < resultData.Count; i++)
        {
            //遍历区域数据,找到城市List上的城市
            if (resultData[i]["city"].ToString().Equals(cityLable.text))
            {
                //不存在这个区县,加到区县List上
                if (!districtPopupList.items.Contains(resultData[i]["district"].ToString()))
                    districtPopupList.AddItem(resultData[i]["district"].ToString());
            }
        }
    }

    //展示天气
    public void ShowWeather()
    {
        //拼接请求城市的Url
        Global.weatherUrl = Global.weatherUrl + "?format=2&cityname=" + GetUTF8(districtLable.text) + "&key=" + Global.appKey;
        StartCoroutine(RequestWeatherData(Global.weatherUrl));   //开启协程来查询天气数据
    }
    //将字符串转换成UTF8编码,因为根据城市名称来请求数据是,需要传入的城市名为UTF8编码格式的
    private string GetUTF8(string str)
    {
        byte[] buffer = System.Text.Encoding.UTF8.GetBytes(str);
        return System.Text.Encoding.UTF8.GetString(buffer);
    }
    //协程,用来请求区域数据
    IEnumerator RequestData()
    {
        WWW www = new WWW(Global.areaUrl + "?key="+ Global.appKey);      //拼接请求区域URL
        while (!www.isDone)
        {
            //没有完成
            yield return null;
        }
        if (www.error == null)     //没有错误
        {
            JsonData data = JsonMapper.ToObject(www.text);   //将请求到的Json 数据转换成 JsonData对象
            resultData = data["result"];  //将结果,赋值给我们的resultData ,因为后面还要用到这个数据来刷新城市和区县
            for (int i = 0; i < resultData.Count; i++)
            {
                //遍历区域数据,如果没有这个省份,则加上
                if (!provincePopupList.items.Contains(resultData[i]["province"].ToString()))
                    provincePopupList.AddItem(resultData[i]["province"].ToString());
            }
        }
        else  //请求出错
            print(www.error);
    }
    //请求天气情况的协程
    IEnumerator RequestWeatherData(string url)
    {
        lable.text = "";    //情况显示
        WWW wwwWeather = new WWW(url);
        while (!wwwWeather.isDone)
        {
            yield return null;
        }
        if (wwwWeather.error == null)
        {
            #region 解析Json字符串,并显示,
            JsonData weatherData = JsonMapper.ToObject(wwwWeather.text);
            lable.text += "查询结果:\t" + weatherData["reason"].ToString() + "\n\n";
            JsonData skData = weatherData["result"]["sk"];
            lable.text += "当前实况天气:" + "\n";
            lable.text += "当前温度:\t" + skData["temp"].ToString() + "\n";
            lable.text += "当前风向:\t" + skData["wind_direction"].ToString() + "\n\n";
            lable.text += "当前风力:\t" + skData["wind_strength"].ToString() + "\n\n";
            lable.text += "当前湿度:\t" + skData["humidity"].ToString() + "\n\n";
            lable.text += "当前时间:\t" + skData["time"].ToString() + "\n\n";

            lable.text += "未来几天天气:" + "\n";
            JsonData futureData = weatherData["result"]["future"];

            for (int i = 0; i < futureData.Count; i++)
            {
                lable.text += "Week:" + "\t" + futureData[i]["week"].ToString() + "\n\n";
                lable.text += "Date:" + "\t" + futureData[i]["date"].ToString() + "\n";
                lable.text += "Temperature:" + futureData[i]["temperature"].ToString() + "\n\n";
                lable.text += "Weather:" + futureData[i]["weather"].ToString() + "\n\n";
                lable.text += "Wind:" + "\t" + futureData[i]["wind"].ToString() + "\n\n";
            }
            #endregion
        }
    }
}

Weather

编写完成脚本,保存,我们回到Unity中,将Weather脚本挂载到UIRoot上(随意),然后为其拖应用,然后,我们选择ProvincePopupList,在其UI PopupList组件上为其添加事件,将UI Root拖给Notify,选择方法SelectCity。类似,City Popup List添加事件SelectDistrict,DistrictPopup List添加事件 ShowWeather。好了,我们可以点击播放按钮,来测试下,如果没有意外的话,会出现如下界面:

Ok,至此,我们的一个简单的关联下拉菜单就完成了。

ListJson : http://pan.baidu.com/s/1sjkS6vz%20 密码:mojf

总结: 这个只是一个比较简单的实现关联下拉菜单的方法。也正是因为简单,它有许多问题,首先,我们不能使用UI上的值在代码中进行逻辑判断,其次,代码的耦合性较高,没有实现数据和显示的分离。后续,我会整理出一个比较完整的使用MVC模式的关联下拉菜单和查询天气的小Demo出来,期待吧,哈哈。

时间: 10-15

使用NGUI制作关联下拉菜单(查询全国天气)的相关文章

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

制作excel下拉菜单

1.选中excel中需要制作下拉菜单的单元格/列/行,点击‘数据’——'数据验证': 2.允许选择'序列',来源中手动输入需要的内容,以逗号(,)分割:  3.如下图,此列都具有下拉选择的功能: 原文地址:https://www.cnblogs.com/canglongdao/p/12080253.html

用bootstrap和css3制作按钮式下拉菜单

利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu span{ margin:5px; } .myBtnStyle .dropdown-menu { animation: 0.5s linear fadeIn; //css3新特性animation } @keyframes fadeIn { //通过keyframes规则创建动画特效,原理为将一套css样式逐渐转

css制作简单下拉菜单

要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul> <li><a href='#'>one</a></li> <li><a href='#'>two</a></li> <li><a href='#'>three</a>&l

制作下拉菜单(PopupList)

怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷. 下拉菜单本质上还是一个单选框,与Toggle的功能有一些类似,对于下拉菜单玩家必须选择一个选项(有一个默认的初始选项),在同一时间也只能选择一个选项(单选性质).在游戏开发过程中,如果碰到了以下特点的需求,就可以考虑用下拉菜单了. (1)有一系列选项需要玩家做出选择,这些选项是有限多的. (2)

11个优秀的HTML5 &amp; CSS3下拉菜单制作教程

下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉上充满吸引力的下拉菜单. 1.Stunning Menu in CSS3 效果很精美CSS3菜单,可以让给你的网站提升一个层次.制作教程非常详细. 在线演示 源码下载 2.Click action Multi-level CSS3 Dropdown Menu 这是一个点击弹出的下拉菜单,传统的下拉菜

EXCEL下拉菜单怎么弄

通过2级菜单,倒是可以比较深入熟悉 INDIRECT, INDEX, OFFSET, 这三个函数,是你要想学excel函数,估计你肯定过的关. 在论坛里看帖子,有一点比较累,很多都是直接用excel文件里做说明,你需要下载文件.我这里就全部用图来说明. 不过二级菜单的第一级的做法,都是相同的,大家可以参考上面的文章创建一个一级菜单. 第一种做法:使用函数INDIRECT 看看例子 很明显,我们希望在一级选择机房故障,那么2级就出现他下面的列表. 要实现这个目标并不复杂. 1:建立"名称 3个一级

9.2 制作下拉菜单(1)

一.菜单的HTML结构 下面就来定义菜单的HTML结梅.思路是把整个菜单分为4组,每一组在平常状态时,只显示一级菜单项,当鼠标指针经过时,显示相应的子菜单.首先用ul和li定义出外层结构,然后在每个li项目中,使用dI定义一个菜单项,一级菜单文字定义为dt.子菜单的文字定义为dd.代码如下. 折叠展开XML/HTML 代码复制内容到剪贴板 <body> <ul id="menu"> <li> <dl> <dt><a hr

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析.部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳: 一.行内元素与块级元素水平.垂直居中问题 (一)CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px}