IOS自制类似于下拉框的控件

最近做的有关物流的APP中,货物数量的单位需要在给定的范围选取(比如:吨、方、件),但ios没有类似Android中的下拉框,我就自己想了办法自制了一个,效果还算满意;以后项目组的本科小师妹会帮我一起做ios端的开发,在此表示感谢!!!

第一步:新建工程XiaLaKuang(名字比较俗,新建方法不再比比。。。)

第二步:操作main.storyboard

——》拖拽一个UIButton(命名Title为“吨”,background为“light gray”,Alignment中的Horizonal选择靠左),再拖拽一个UIImage的图像为三角箭头的图片,使按钮看起来想一个下拉框;

注:将来点击这个按钮会弹出选择器,选择内容后,会将按钮的Title更改为我们选择的内容;

——》再拖拽一个Toolbar、PickerView控件到按钮的下方(稍微小一点,毕竟我们选择的东西就很少),再往Toolbar上拖拽一个Item控件更名为“完成”,也可以再往Item的左侧拖拽一个Flexible space使“完成”按钮在右侧;再将Toolbar和PickerView的Hidden勾选;

完成后的效果图如下:

第三步:连线(控件与ViewController.m之间)

——》UIButton连接两根线,一根Outlet“Button”,一根Action“BtnAction”;

——》Toolbar一根Outlet“Toolbar”;

——》UIPickerView一根Outlet“Picker”;

——》Toolbar上的“完成”按钮连一根Action“selectedAction”;

——》给PickerView连接dataSource和delegate;(方法和UITableview显示列表数据时的连线方法一样,看我的上上篇博客)

第四步:编码

#import "ViewController.h"

@interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource>
@property (weak, nonatomic) IBOutlet UIButton *danweiBtn;
- (IBAction)BtnAction:(id)sender;

@property (weak, nonatomic) IBOutlet UIToolbar *Toolbar;
@property (weak, nonatomic) IBOutlet UIPickerView *Picker;
- (IBAction)selectedAction:(id)sender;

@property (nonatomic, strong) NSArray *danwei;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _danwei = [NSArray arrayWithObjects:@"吨",@"方",@"件", nil];
}

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return _danwei.count;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [_danwei objectAtIndex:row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    [self.danweiBtn setTitle:[_danwei objectAtIndex:row] forState:UIControlStateNormal];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)BtnAction:(id)sender {
    self.Picker.hidden = NO;
    self.Toolbar.hidden = NO;
}
- (IBAction)selectedAction:(id)sender {

    self.Picker.hidden = YES;
    self.Toolbar.hidden = YES;
}
@end

最终效果图:

没做那个黑色三角图案旋转,通常如果点击下拉框后那个三角形是会旋转的;感兴趣的朋友可以尝试一下

    三角图片.transform = CGAffineTransformMakeRotation(M_PI);
时间: 2024-11-03 09:53:43

IOS自制类似于下拉框的控件的相关文章

多选下拉框用户控件

多个控件组合为用户控件,实现多选 1.CSS文件 .MultDropList {display:inline-block;} .labelArea {vertical-align:super} .DropList {display:inline-block; height:20px;margin-top:5px;margin-left:2px;border:1px solid #ccc;  cursor:pointer; background:url(/UserControl/MultDropD

如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)

相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能: MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的. 下面就是MJRefresh开源框架中中主要的一些类文件 MJRefresh主要的类文件 MJRefresh 的使用相信都难不倒大家 今天我主要想和大家分享一下MJRefresh的想法,因为我觉得这才是最重要的,献丑了,有理解的不对和不深入的地方,请大家多多点评哈! 试想,如果没有MJRefresh开

Atitit.ui控件---下拉菜单选择控件的实现select html

Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& model的实现 Proj.vod2 <% List li=new ArrayList(); Map m=new HashMap (); m.put("lab","爱情"); m.put("v","1"); li.add(m)

cocos2d-html5 简易 下拉表单 控件

刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常easy  别吐槽啊,以后有空我会完好一下的,假设有朋友自愿帮忙完好一下就更好了. 有不论什么问题请加DZ老师的QQ 460418221 引擎版本号 : 2.2.2 原理:有空再写吧 源代码: /** * Created with JetBrains WebStorm. * User: Dz_Yang *

通用版的上拉刷新下拉加载控件

通用版的上拉刷新下拉加载控件 适用于各种控件实现上拉刷新,下拉加载的功能. 下载地址:http://www.devstore.cn/code/info/964.html 运行截图:    

自制Jquery下拉框插件

(function ($) { $.fn.select3 = function (option) { var _this = $(this); var isInit = _this.prev('div').hasClass('select3-parent'); if(isInit) return false; var _default = { className: 'select3-parent', //下拉框样式可自定义 width: '300px' }; //默认会根据元素设置的宽度给设置宽

下拉选择列表控件

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows.Forms;using System.Data;using System.ComponentModel;using DevComponents.DotNetBar; namespace EfwControls.CustomControl{ public partial class GridBo

上拉刷新下拉加载控件-PullToRefresh

在很多软件中,我们会用到上拉刷新,同时大多也会有下拉加载的功能,PullToRefresh这个控件就可以帮我们实现这个效果. 要使用这个空间首先我们要导包 布局文件 布局文件中就是添加了一个最简单的PullToRefreshListView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/r

[原创]自己动手实现React-Native下拉框控件

因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star ??):https://github.com/sohobloo/react-native-modal-dropdown Github上全英文的readme方便国际友人,这里就写个中文的吧. react-native-modal-dropdown 一个react-native的下拉框组件,支持安卓和iOS. 特点 纯JS组件. 一份代码兼容iOS