1.1 创建一个Button,点击显示Kxmenu弹框。
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
target:self
action:@selector(showAdd_Menu)];
1.2 在Button响应函数里创建Kxmenu。
/**
第一步 创建KxMenuItem数组 KxMenuItem本质是Button
menuItem:title标题名
image:会在title左边创建一个固定大小的image
action:点击响应函数
**/
NSArray *menuItems =
@[
[KxMenuItem menuItem:@"专 业"
image:nil
target:self
action:@selector(Type:)],
[KxMenuItem menuItem:@"年 级"
image:nil
target:self
action:@selector(Type:)],
];
/**
第二步 添加KxMenu
showMenuInView:添加的父视图
fromRect:KxMenu的frame,x与y决定KxMenu的箭头的位置,width和height决定箭头同x与y之间的距离。
箭头会根据与父视图的位置关系调整在位置(弹框的左边右边上边下边,一般会在弹框的右上角)。
menuItems:第一步创建的数组
**/
[KxMenu showMenuInView:self.view
fromRect:CGRectMake(82,40,50, 25)
menuItems:menuItems];
Kxmenu的默认样式是黑青色的,通常与我们的项目不相符所以我们需要自定义样式。
2.1 弹框的背景颜色
contentView 就是弹框,找到contentView后更改其属性就能达到效果。
例如:
//整体背景
UIView *contentView = [[UIView alloc] initWithFrame:CGRectZero];
contentView.autoresizingMask = UIViewAutoresizingNone;
contentView.backgroundColor = [UIColor clearColor];
contentView.opaque = NO;
//以下是添加的
contentView.backgroundColor = [UIColor whiteColor];
contentView.layer.cornerRadius = 8.0f;
//字体属性
UILabel *titleLabel = [[UILabel alloc] initWithFrame:titleFrame];
titleLabel.text = menuItem.title;
titleLabel.font = [UIFont systemFontOfSize: 15];
titleLabel.textAlignment = menuItem.alignment;
titleLabel.textColor = menuItem.foreColor ? menuItem.foreColor : [UIColor blackColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.autoresizingMask = UIViewAutoresizingNone;
//以下为修改字体颜色
titleLabel.textColor = [UIColor colorWithRed:35/255.0 green:135/255.0 blue:235/255.0 alpha:1];
[itemView addSubview:titleLabel];
但是经过上面两个修改,发现在弹框出现时先是黑青色再变为白色,我们同样希望修改这个颜色的渐变。我们可以在下面代码中修改, 只截取了修改的部分。
//背景颜色
- (void)drawBackground:(CGRect)frame
inContext:(CGContextRef) context{
//R0 == R1 G0==G1 B0==B1背景为纯色 否则 渐变
CGFloat R0 = 255.0/255.f, G0 = 255.0/255.f , B0 = 255.0/255.f;//背景色
//CGFloat R1 = 35.0/255.f, G1 = 135.0/255.f , B1 = 235.0/255.f;//背景色
CGFloat R1 = 255.0/255.f, G1 = 255.0/255.f, B1 = 255.0/255.f;
}
//点击按钮时的颜色
+ (UIImage *) selectedImage: (CGSize) size
{
const CGFloat locations[] = {0,1};
const CGFloat components[] = {
// 0.216, 0.471, 0.871, 1,
// 0.059, 0.353, 0.839, 1,
245/255.f,245/255.f,245/255.f,1,
245/255.f,245/255.f,245/255.f,1,
};
return [self gradientImageWithSize:size locations:locations components:components count:2];
}
//分割线的颜色
+ (UIImage *) gradientLine: (CGSize) size
{
const CGFloat locations[5] = {0,0.2,0.5,0.8,1};
//const CGFloat R = 0.44f, G = 0.44f, B = 0.44f;
const CGFloat R = 255/255.f, G = 255/255.f , B = 255/255.f;
const CGFloat components[20] = {
R,G,B,0.1,
R,G,B,0.4,
R,G,B,0.7,
R,G,B,0.4,
R,G,B,0.1
};
return [self gradientImageWithSize:size locations:locations components:components count:5];
}
以上五种修改后基本能得到我们想要的样式了。