iPad金融应用界面设计

我会带着你远行 2022-08-21 09:51 215阅读 0赞

8月31日

因为不是科班出身，而且是第一次自己给自己搞UI，新鲜之余也觉得公司确实是非常扯淡的说

先占个位置，等周末搜集一下资料，周一开始设计UI ![iPad金融应用界面设计 - 柠檬加冰 - 柠檬加冰的博客][iPad_ - _ -]

一个人琢磨的button点击效果

normal：

![iPad金融应用界面设计 - 柠檬加冰 - 柠檬加冰的博客][iPad_ - _ - 1]

highlight：

![iPad金融应用界面设计 - 柠檬加冰 - 柠檬加冰的博客][iPad_ - _ - 2]

自己做的起始日期和截止日期的选择框：

![iPad金融应用界面设计 - 柠檬加冰 - 柠檬加冰的博客][iPad_ - _ - 3]

自我感觉做的确实很差，不过第一次总是会痛的，习惯就好了。。

下面附上日期选择框的代码，算是补偿晃瞎了各位的宝石眼！

/3 日期区间选择

/\*

实现思路将两个下拉菜单合并到一起，调用日期选择器

\*/

\- (void)setTimeZone:(CGRect)rect

CGRect textRect = rect;

textRect.size.width \-=36;

//    初始化第一个日期选择框

\_mFirstDate = \[\[UITextFieldalloc\] initWithFrame:textRect\];

\[\_mFirstDatesetDelegate:self\];

\[\_mFirstDatesetTag:202\];

\[\_mFirstDatesetTextAlignment:UITextAlignmentCenter\];

\[\_mFirstDatesetBorderStyle:UITextBorderStyleRoundedRect\];

\[\_mFirstDatesetPlaceholder:@"---起始日期\---"\];

\[selfaddSubview:\_mFirstDate\];

//    第一个选择框下拉按钮

//    设置下拉按钮

isFirstDateExtend = NO;

CGRect buttonRect = textRect;

buttonRect.origin.x = textRect.origin.x \+ 144;

buttonRect.size.width = 36;

buttonRect.size.height = 36;

UIButton \*mFirstDropButton = \[UIButtonbuttonWithType:UIButtonTypeCustom\];

\[mFirstDropButton setTag:102\];

\[mFirstDropButton setFrame:buttonRect\];

\[mFirstDropButton setImage:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

//    \[mFirstDropButton setTitle:@"展开" forState:UIControlStateNormal\];

\[mFirstDropButton addTarget:selfaction:@selector(dateDropButtonClick:) forControlEvents:UIControlEventTouchDown\];

\[self addSubview:mFirstDropButton\];

textRect.origin.x \+=180;

//    初始化第二个日期选择框

\_mSecondDate = \[\[UITextFieldalloc\] initWithFrame:textRect\];

\[\_mSecondDatesetDelegate:self\];

\[\_mSecondDatesetTag:203\];

\[\_mSecondDatesetTextAlignment:UITextAlignmentCenter\];

\[\_mSecondDatesetBorderStyle:UITextBorderStyleRoundedRect\];

\[\_mSecondDatesetPlaceholder:@"---截至日期\---"\];

\[selfaddSubview:\_mSecondDate\];

//    第二个选择框下拉按钮

//    设置下拉按钮

isSecondDateExtend = NO;

CGRect buttonRect1 = textRect;

buttonRect1.origin.x = textRect.origin.x \+ 144;

buttonRect1.size.width = 36;

buttonRect1.size.height = 36;

UIButton \*mSecondDropButton = \[UIButtonbuttonWithType:UIButtonTypeCustom\];

\[mSecondDropButton setTag:103\];

\[mSecondDropButton setFrame:buttonRect1\];

\[mSecondDropButton setImage:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

\[mSecondDropButton addTarget:selfaction:@selector(dateDropButtonClick:) forControlEvents:UIControlEventTouchDown\];

\[self addSubview:mSecondDropButton\];

//日期菜单按钮点击事件

\- (void)dateDropButtonClick:(id)sender

UIButton \*button = (UIButton \*)sender;

switch (button.tag) \{

case 102:\{

isFirstDateExtend = !isFirstDateExtend;

\[button setImage:isFirstDateExtend?\[UIImageimageNamed:@"popoverArrowUp@2x.png"\]:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

//            \[button setTitle:isFirstDateExtend?@"收回":@"展开" forState:UIControlStateNormal\];

break;

case 103:\{

isSecondDateExtend = !isSecondDateExtend;

\[button setImage:isSecondDateExtend?\[UIImageimageNamed:@"popoverArrowUp@2x.png"\]:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

break;

default:

break;

\[selfsetDatePicker:button.frame\];

//显示日期选择器

\- (void)setDatePicker:(CGRect)buttonRect

//    初始化选择器列表数据源

\[selfinitPickDataArray\];

//    根据下拉菜单的位置，设置选择器的相对位置

CGRect rect = buttonRect;

rect.origin.x = buttonRect.origin.x \- 224;

rect.origin.y = buttonRect.origin.y \+ 36;

rect.size.width = DROPPICKERWIDHT;

rect.size.height = DROPPICKERHEIGHT;

if (mDatePicker ==Nil) \{

mDatePicker = \[\[UIDatePickeralloc\] initWithFrame:rect\];

\[mDatePickeraddTarget:selfaction:@selector(selectDatePicker:) forControlEvents:UIControlEventValueChanged\];

\[mDatePickersetDatePickerMode:UIDatePickerModeDate\];

\[selfaddSubview:mDatePicker\];

\}else

\[mDatePickersetFrame:rect\];

if (isFirstDateExtend==YES)

mDatePicker.hidden = !isFirstDateExtend;

else

mDatePicker.hidden = !isSecondDateExtend;

//日期菜单按钮点击事件

\- (void)dateDropButtonClick:(id)sender

UIButton \*button = (UIButton \*)sender;

switch (button.tag) \{

case 102:\{

isFirstDateExtend = !isFirstDateExtend;

\[button setImage:isFirstDateExtend?\[UIImageimageNamed:@"popoverArrowUp@2x.png"\]:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

//            \[button setTitle:isFirstDateExtend?@"收回":@"展开" forState:UIControlStateNormal\];

break;

case 103:\{

isSecondDateExtend = !isSecondDateExtend;

\[button setImage:isSecondDateExtend?\[UIImageimageNamed:@"popoverArrowUp@2x.png"\]:\[UIImageimageNamed:@"popoverArrowDown@2x.png"\] forState:UIControlStateNormal\];

break;

default:

break;

\[selfsetDatePicker:button.frame\];

/\*为文本框添加点击事件，点击文本框也会触发下拉菜单弹出事件\*/

\- (BOOL)textFieldShouldBeginEditing:(UITextField \*)textField

// 此处编写弹出日期选择器的代码。

UITextField \*text = (UITextField \*)textField;

switch (text.tag) \{

//起始日期的选择按钮判断

case 202:

UIButton \*button = (UIButton \*)\[self viewWithTag:102\];

\[self dateDropButtonClick:button\];

break;

//截止日期的选择按钮判断

case 203:

UIButton \*button = (UIButton \*)\[self viewWithTag:103\];

\[self dateDropButtonClick:button\];

break;

default:

break;

returnNO;

[iPad_ - _ -]: /images/20220724/8a2c7233f96d4f59b6c10297507a547f.png
[iPad_ - _ - 1]: http://img1.ph.126.net/N5lNDvrchZZ10nWaFUaT0A==/6597721777051304821.jpg
[iPad_ - _ - 2]: http://img6.ph.126.net/dQd391qriZH9pTRTuqUcIA==/2481764869675701486.jpg
[iPad_ - _ - 3]: http://img7.ph.126.net/ct01H80f8YCvhFmUoAzXJA==/2481764869675701487.jpg