iOS:如何在 UITabBarItem 中添加下划线
Posted
技术标签:
【中文标题】iOS:如何在 UITabBarItem 中添加下划线【英文标题】:iOS : How to add Underline in UITabBarItem 【发布时间】:2015-09-19 13:30:53 【问题描述】:我正在使用需要在UITabbarItem
中添加下划线的应用程序。
所以我想在 ios 的默认 UITabbarcontroller
中选择的 UITabbarItem
下添加下划线。
我已经创建了UITabbarcontroller
的子类,但没有找到任何添加行的方法。
我想做类似下图的事情。
如果有人对此有任何想法,请在此处分享。
【问题讨论】:
【参考方案1】:Swift 3 代码
在 didFininshLaunch 调用方法中:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool
// Override point for customization after application launch.
UITabBar.appearance().selectionIndicatorImage = getImageWithColorPosition(color: UIColor.blue, size: CGSize(width:(self.window?.frame.size.width)!/4,height: 49), lineSize: CGSize(width:(self.window?.frame.size.width)!/4, height:2))
return true
方法:
func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage
let rect = CGRect(x:0, y: 0, width: size.width, height: size.height)
let rectLine = CGRect(x:0, y:size.height-lineSize.height,width: lineSize.width,height: lineSize.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
UIColor.clear.setFill()
UIRectFill(rect)
color.setFill()
UIRectFill(rectLine)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
【讨论】:
你的代码帮了我很多..我需要更多的自定义,需要有一个左上角和右上角。我该怎么做 top 怎么办?我需要在所选 tabItem 的顶部显示该行。【参考方案2】:请试试这个。 我已经在我的应用程序中使用过一次,希望对您也有帮助。
这就是我以编程方式创建标签栏的方式:
UITabBarController *tab = [[UITabBarController alloc]init];
ViewController1 *v1 = [[ViewController1 alloc]init];
ViewController1 *v2 = [[ViewController1 alloc]init];
ViewController1 *v3 = [[ViewController1 alloc]init];
ViewController1 *v4 = [[ViewController1 alloc]init];
tab.viewControllers = [NSArray
arrayWithObjects:v1,v2,v3,v4,nil];
[[tab.tabBar.items objectAtIndex:0]setImage:[UIImage imageNamed:@""]];
[[tab.tabBar.items objectAtIndex:1]setImage:[UIImage imageNamed:@""]];
[[tab.tabBar.items objectAtIndex:2]setImage:[UIImage imageNamed:@""]];
[[tab.tabBar.items objectAtIndex:3]setImage:[UIImage imageNamed:@""]];
int divide = 4;
if([UIDevice currentDevice].userInterfaceIdiom ==UIUserInterfaceIdiomPad)
divide =6;
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(tab.tabBar.frame.origin.x,tab.tabBar.frame.origin.y, self.view.frame.size.width/divide, 56)];
UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view.frame.origin.x,view.frame.size.height-6, self.view.frame.size.width/divide, 6)];
border.backgroundColor = “your color”;
[view addSubview:border];
[tab.tabBar setSelectionIndicatorImage:[self changeViewToImage:view]];
//This is the method that will draw the underline
-(UIImage ) changeViewToImage : (UIView ) viewForImage
UIGraphicsBeginImageContext(viewForImage.bounds.size);
[viewForImage.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
【讨论】:
【参考方案3】:只需将此代码放入 Appdelegate。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
// Override point for customization after application launch.
UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake([UITabBar appearance].frame.origin.x,[UITabBar appearance].frame.origin.y, [[UIScreen mainScreen] bounds].size.width/3, 56)];
UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view1.frame.origin.x,view1.frame.size.height-6, [[UIScreen mainScreen] bounds].size.width/3, 6)];
border.backgroundColor = [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f];
[view1 addSubview:border];
UIImage *img=[self ChangeViewToImage:view1];
[[UITabBar appearance] setSelectionIndicatorImage:img];
[[UITabBar appearance] setTintColor: [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f]];
return YES;
-(UIImage * ) ChangeViewToImage : (UIView *) viewForImage
UIGraphicsBeginImageContext(viewForImage.bounds.size);
[viewForImage.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
【讨论】:
【参考方案4】:在 AppDelegate 的 didFininshLaunch 方法中为 UITabbar 添加全局样式
UITabBar.appearance().selectionIndicatorImage = UIImage.getImageWithColorPosition(UIColor.whiteColor(), size: CGSizeMake(kScreenWidth/4, 49), lineSize: CGSizeMake(kScreenWidth/4, 2))
class func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage
let rect = CGRectMake(0, 0, size.width, size.height)
let rectLine = CGRectMake(0, size.height-lineSize.height, lineSize.width, lineSize.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
UIColor.clearColor().setFill()
UIRectFill(rect)
color.setFill()
UIRectFill(rectLine)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
编辑 Swift 3
func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
let rectLine = CGRect(x: 0, y: size.height-lineSize.height, width: lineSize.width, height: lineSize.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
UIColor.clear.setFill()
UIRectFill(rect)
color.setFill()
UIRectFill(rectLine)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
【讨论】:
【参考方案5】:使用此代码为任何UIView
对象添加底部边框,只需将view
替换为您的UITabbarItem
对象即可:
CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0, view.frame.size.height - 1, view.frame.size.width - 1, 1);
bottomBorder.backgroundColor = [UIColor lightGrayColor].CGColor;
[view.layer addSublayer:bottomBorder];
【讨论】:
您自己检查过这个解决方案吗?UITabBarItem
不继承自 UIView
并且没有 layer
属性。以上是关于iOS:如何在 UITabBarItem 中添加下划线的主要内容,如果未能解决你的问题,请参考以下文章