I'm developing an iOS application with latest SDK.
I have this custom UIView:
#define ANNOTATION_WIDTH 250
#define ANNOTATION_HEIGHT 200
#implementation CustomView
- (id)initwithTitle:(NSString* )title subTitle:(NSString* )subTitle
{
CGRect annotationFrame =
CGRectMake(10, 10, ANNOTATION_WIDTH, ANNOTATION_HEIGHT);
if ([self initWithFrame:annotationFrame])
{
self.backgroundColor = [UIColor redColor];
self.opaque = YES;
/*
UILabel* nameLabel =
[[UILabel alloc] initWithFrame:CGRectMake(0, 0, ANNOTATION_WIDTH, 20.0)];
nameLabel.backgroundColor = [UIColor whiteColor];
nameLabel.textAlignment = NSTextAlignmentCenter;
//nameLabel.text = coordinate.name;
nameLabel.text = title;
[nameLabel sizeToFit];
[nameLabel setFrame: CGRectMake(0,
0,
nameLabel.bounds.size.width + 8.0,
nameLabel.bounds.size.height + 8.0)];
[self addSubview:nameLabel];
UILabel* placeLabel =
[[UILabel alloc] initWithFrame:CGRectMake(25, 0, ANNOTATION_WIDTH, 20.0)];
placeLabel.backgroundColor = [UIColor whiteColor];
placeLabel.textAlignment = NSTextAlignmentCenter;
//placeLabel.text = coordinate.place;
placeLabel.text = subTitle;
[placeLabel sizeToFit];
[placeLabel setFrame:CGRectMake(25,
0,
placeLabel.bounds.size.width + 8.0,
placeLabel.bounds.size.height + 8.0)];
[self addSubview:placeLabel];
*/
}
return self;
}
I will show a title and a subTitle, but now that code is comment because I'm testing something.
To add this custom view to an UIViewController I do this:
#import "ViewController.h"
#import "CustomView.h"
#import <QuartzCore/QuartzCore.h>
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CustomView* cView = [[CustomView alloc] initwithTitle:#"Titulo" subTitle:#"Subtitulo"];
cView.layer.cornerRadius = 10;
cView.layer.masksToBounds = YES;
[self.view addSubview:cView];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
If I don't show title and subTitle and I don't see my customView, but I show title and subTitle I only see rounded upper left corner.
I have tried this also, and it doesn't work:
CustomView* cView = [[CustomView alloc] initwithTitle:#"Titulo" subTitle:#"Subtitulo"];
cView.layer.cornerRadius = 10;
cView.clipsToBounds = YES;
Is there any way to show a UIView with rounded corners without adding any subview?
I don't know what it is happening and Id on't know why I get rounded upper left corner only.
Try this:
cView.layer.cornerRadius = 10.0f;
cView.layer.masksToBounds = YES;
cView.layer.opaque = NO;
[self.view addSubview:cView];
are you tried this
[self.layer setCornerRadius:10];
[self.layer setMasksToBounds:YES];
Related
How to achieve the below design in iOS , is any controls available to achieve this. I am not that much experienced to achieve this design in native . Is it developed in native or kind of hybrid technology is used
Please find the below image for reference
I made a programmatic Example (Kind of "Hello World") for you
(it is programatic for a reason, that I believe it is easier to understand how things are working.
It is not perfect solution it can be done better, (performance wise) but I choose it as a simple example to get you started (Personally I would use CALayer for the backgrounds).
so here:
make a new class as follows:
MyView.h
#import <UIKit/UIKit.h>
#interface MyView : UIView
#end
MyView.m
#import "MyView.h"
#implementation MyView
- (instancetype)initWithFrame:(CGRect)frame
{
if(self = [super initWithFrame:frame])
{
self.backgroundColor = [UIColor grayColor];
//This rect is in self coordinate system
UIView * viewPurple = [[UIView alloc]initWithFrame:CGRectMake(0, 200, frame.size.width, 50)];
viewPurple.backgroundColor = [UIColor purpleColor];
[self addSubview:viewPurple];
//This rect is in viewPurple's coordinate system
UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width/2, 50)];
[label setText:#"Hello World!"];
[label setTextAlignment:(NSTextAlignmentCenter)];
[label setTextColor:[UIColor whiteColor]];
[viewPurple addSubview:label];
//All the frame's rects are in it's `superView`/ parent 's coordinate system.
UIView * viewGreen = [[UIView alloc]initWithFrame:CGRectMake(frame.size.width/2, 200, frame.size.width, 50)];
viewGreen.backgroundColor = [UIColor cyanColor];
[self addSubview:viewGreen];
UILabel * label2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width/2, 50)];
[label2 setText:#"World Hello!"];
[label2 setTextAlignment:(NSTextAlignmentCenter)];
[label2 setTextColor:[UIColor whiteColor]];
[viewGreen addSubview:label2];
}
else
{
//Can't allocate the UIView - quite a rare problem.
}
return self;
}
#end
#import "myView.h" in your view controller
and add this snippet to the - (void)viewDidLoad method.
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
MyView * view = [[MyView alloc]initWithFrame:self.view.frame];
[self.view addSubview:view];
}
the result will be as follow
I want to set the custom view's frame as my subview's frame, which is a UILabel. but
when I use self.frame the UILabel shows empty text. I need to hardcode the parameters in CGRectMake in order to see my UILabel. How do I set the UILabel's frame to be my custom view's frame?
- (id)initWithFrame:(CGRect)frame withText:(NSString *)text
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor grayColor];
self.layer.cornerRadius = 3;
self.layer.borderWidth = 1;
self.layer.borderColor = [UIColor blackColor].CGColor;
_text = text;
}
return self;
}
- (void)layoutSubviews
{
// This works
// UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 40)];
// This doesn't work
UILabel *label = [[UILabel alloc] initWithFrame:self.frame];
label.text = #"";
if (![self.text isEqualToString:#"?"]) {
label.text = self.text;
label.textAlignment = NSTextAlignmentCenter;
}
[self addSubview:label];
}
layoutSubviews will be invoked many times, so you should not addSubview like this. Better style is to set a property of UILabel, like your text property:
#property (nonatomic, strong) UILabel * label;
then change your layoutSubviews code:
- (void)layoutSubviews
{
if(!self.label){
self.label = [[UILabel alloc] initWithFrame:self.frame]; //Use ARC
self.label.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.label];
}
self.label.frame = self.bounds;
if (![self.text isEqualToString:#"?"]) {
self.label.text = self.text;
}
}
Try with following code.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 70, 40)]; // set frame as you want
label.backgroundColor = [UIColor yellowColor]; // set color as you want
label.text = #"Hellow";
[yourParentView addSubview:label];
use this code
- (id)initWithFrame:(CGRect)frame withText:(NSString *)text
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor grayColor];
self.layer.cornerRadius = 3;
self.layer.borderWidth = 1;
self.layer.borderColor = [UIColor blackColor].CGColor;
_text = text;
[self layoutSubviews:frame];
}
return self;
}
- (void)layoutSubviews:(CGRect)myFrame
{
// This works
// UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 40)];
// This doesn't work
UILabel *label = [[UILabel alloc] initWithFrame:myFrame];
label.text = #"";
if (![self.text isEqualToString:#"?"]) {
label.text = self.text;
label.textAlignment = NSTextAlignmentCenter;
}
[self addSubview:label];
}
You do not want to create views inside the layoutSubviews method. That method can be called multiple times and you'll create each view multiple times (having them overlap each other).
Instead create the views you need in the initWithFrame method.
For the answer to your actual question, you probably need to set the frame of the new label to the bounds of the custom view. The bounds will have an origin of 0,0 and so it will work no mater where the custom view is placed in it's superview. If you use the frame, the label will be offset by however much the custom view is offset.
You can probably completely remove your layoutSubviews method as that's not the place to set the label text either. Then add this:
- (instancetype)initWithFrame:(CGRect)frame withText:(NSString *)text
{
self = [super initWithFrame:frame];
if (!self) return nil;
self.backgroundColor = [UIColor grayColor];
self.layer.cornerRadius = 3;
self.layer.borderWidth = 1;
self.layer.borderColor = [UIColor blackColor].CGColor;
_text = text;
UILabel *label = [[UILabel alloc] initWithFrame:self.bounds];
label.text = #"";
if (![self.text isEqualToString:#"?"]) {
label.text = self.text;
label.textAlignment = NSTextAlignmentCenter;
}
[self addSubview:label];
return self;
}
If you want the label to resize when the custom view resizes, you could do that inside the layoutSubviews by setting the label.frame = self.bounds;, but you'd be better off using autoresizing masks or auto layout.
I use custom back btn in navigation controller:
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc]
initWithTitle:NSLocalizedString(#"Back", nil)
style:UIBarButtonItemStylePlain
target:nil
action:nil];
//and add custom label in this:
heightNav = self.navigationController.navigationBar.frame.size.height;
widthNav = self.navigationController.navigationBar.frame.size.width;
self.aCNavLabel = [[ACNavLabel alloc] initWithFrame:CGRectMake(0, 0, widthNav, heightNav)];
self.aCNavLabel.text = NSLocalizedString(#"Settings", nil);
//
UIView *titleNavView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, widthNav, heightNav)];
self.navigationItem.titleView = titleNavView;
[self.navigationItem.titleView addSubview:self.aCNavLabel];
but label is not centered.
Please tell me where I made a mistake?
and custom label aCNavLabel:
#implementation ACNavLabel
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.textColor = [UIColor blackColor];
self.font = FONT_OP_STD(22.0f);
// self.text = title;
self.textAlignment = NSTextAlignmentCenter;
}
return self;
}
I change some rules for this
self.navigationItem.titleView = self.aCNavLabel;
and and there was something incredible
this is first viewController and
and next what is this????
self.navigationController.navigationBar setTitleTextAttributes:(NSDictionary *)
This method will be Ok
you can customer the navigationBar title about the font,the color,the textAlign and other properties;
self.aCNavLabel = [[ACNavLabel alloc] initWithFrame:CGRectMake(0, 0, widthNav, heightNav)];
self.aCNavLabel.text = NSLocalizedString(#"Settings", nil);
self.aCNavLabel.textAlignment = NSTextAlignmentCenter; // SET THIS
You need to set the text alignment to center like:
aCNavLabel.textAlignment = NSTextAlignmentCenter;
Refer the UILabel textAlignment property for more options.
or as #NANNAV suggested use:
self.navigationItem.titleView = self.aCNavLabel;
aCNavLabel.textAlignment = NSTextAlignmentCenter;
try it.
Create category for UINavigationBar and programmatically adjust the position of your title label. set ACNavLabel view as titleview.
UINavigationBar+MyNavigationBar.h
#interface UINavigationBar (MyNavigationBar)
#end
UINavigationBar+MyNavigationBar.m
#implementation UINavigationBar (MYNavigationBar)
- (void)layoutSubviews {
for (UIView *view in self.subviews) {
if ([view isKindOfClass:[ACNavLabel class]]) {
view.center = CGPointMake(self.center.x, self.center.y);
}
}
}
#end
I have a custom cell that I am controlling the color of when it is selected, ie the example code below:
UIView *selectedBackground = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 600, 600)];
[selectedBackground setBackgroundColor:[UIColor selectedCellColor]];
self.selectedBackgroundView = selectedBackground;
This works, however I would only like to have part of the cell change colors when selected. My custom cell is broken down into many different subviews, and I have it sectioned out where I would be able to define the specific view that I would like to change colors for.
How can I control the selectedBackgroundView, or use a different method, to have the background color change encompass a single subview in my cell?
Ya you are in the rite way,by subclassing the UITableView cell
hear is the sample code that you may find the answer for your question :)
//in subclassed cell class
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code
self.frame = CGRectMake(0, 0, 334, 250);
UILabel *aLabel1= [[UILabel alloc]init];
UILabel *aLabel2 = [[UILabel alloc]init];
self.label1 = aLabel1;
self.label2 = aLabel2;
self.label1.text = #"Happy";
self.label2.text = #"coding";
UIImageView *bg1 = [[UIImageView alloc]init];
bg1.tag = 100;
UIImageView *bg2 = [[UIImageView alloc]init];
bg2.tag = 200;
[self addSubview:bg1]; // you must add your background views first
[self addSubview:bg2];
[self addSubview:label1];//then other views
[self addSubview:label2];
[aLabel1 release];
[aLabel2 release];
[bg1 release];
[bg2 release];
}
return self;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
// Configure the view for the selected state
// hear only you can manage your background views, simply i am adding 2 imageviews by setting different colors
[super setSelected:selected animated:animated];
self.backgroundColor = [UIColor greenColor];
if(selected)
{
self.label1.backgroundColor = [UIColor redColor];
self.label2.backgroundColor = [UIColor brownColor];
UIImageView *bg1 = (UIImageView *)[self viewWithTag:100];
bg1.frame = CGRectMake(0, 0,334/2, 250);
bg1.backgroundColor = [UIColor yellowColor];
}
else
{
self.label1.backgroundColor = [UIColor brownColor];
self.label2.backgroundColor = [UIColor redColor];
UIImageView *bg2 =(UIImageView *) [self viewWithTag:200];
bg2.frame = CGRectMake(35, 0, 334/2, 250);
bg2.backgroundColor = [UIColor lightGrayColor];
}
}
-(void)layoutSubviews
{
//i am setting the frame for each views that i hav added
[super layoutSubviews];
self.label1.frame = CGRectMake(10, 10, 60, 35);
self.label2.frame = CGRectMake(65, 10, 60, 35);
}
hope helps u :)
note: i am using "without ARC"
I would like to recreate this button using code so it's a reusable object, and you can set the minimum width, height, or it stretches to fit the icon and label. Throughout the app, we'll reuse the button in several areas and it will include a thin rounded rect stroke, a background color, an icon (trans PNG), and a label. We want to make the background color, and stroke color configurable so we can toggle the button on/off.
EDIT: Almost working code but the text label block is white and need to resize image to fit in frame and both to be centered.
Custom button code:
#import "CustomButton.h"
#implementation CustomButton
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border
{
self = [super initWithFrame:frame];
if (self)
{
self = [UIButton buttonWithType:UIButtonTypeCustom];
CALayer *layer = [self layer];
self.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
// background
if (background) {
layer.backgroundColor = (__bridge CGColorRef)(background);
} else {
layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
}
// border
if (border) {
layer.borderColor = (__bridge CGColorRef) (border);
} else {
layer.borderColor = [[UIColor lightGrayColor] CGColor];
}
layer.cornerRadius = 2.0f;
layer.borderWidth = 0.5f;
// icon
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:image]];
[self addSubview:imageView];
// text label
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 25, 55, 15)];
titleLabel.font = [[UIFont alloc] fontWithSize:7.00];
titleLabel.text = title;
[self addSubview:titleLabel];
[self setFrame:frame];
}
return self;
}
#end
EDIT: Updated code block above and got button to appear using the following code in the respective view in viewController:
CGRect buttonFrame = CGRectMake(125, 3, 52, 37);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:#"map.png" title:#"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];
The custom button appears but still not formatted properly.
Here is an example icon (white PNG w/ trans) that should appear in center of button.
Summary of desired functionality:
1) reusable button
2) can have min width/height or override to match width of label and height of image + label
3) has configurable stroke color
4) matches button icon above with stroke + icon + label + background color
5) can change the border color to toggle on/off
You could try something like this:
#import <QuartzCore/QuartzCore.h>
#implementation CustomButton
- (id)initWithFrame:(CGRect)frame andImageName:(NSString*)filename ofType:(NSString*)type
{
self = [super initWithFrame:frame];
if (self)
{
self = [UIButton buttonWithType:UIButtonTypeCustom];
CALayer *layer = [self layer];
layer.borderColor = [[UIColor blueColor] CGColor];
layer.cornerRadius = 4.0f;
layer.borderWidth = 2.0f;
UIImage* img = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:filename ofType:type]];
UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
[imgView setFrame:CGRectMake(0, 0, img.size.width, img.size.height)];
[self addSubview:imgView];
[self setFrame:frame];
}
return self;
}
- (void)switchColor
{
CALayer *layer = [self layer];
if(buttonIsOn)
layer.borderColor = [[UIColor blueColor] CGColor];
else
layer.borderColor = [[UIColor grayColor] CGColor];
}
#end
And everytime you use this button, just use:
CustomButton* cusButton = [[CustomButton alloc] initWithFrame:someFrame];
In order to alternate the stroke color, just call switchColor in the first line of cusButton's target method and you should be fine.
I was able to solve this problem and I'm sure it can be refined further but the button now appears as desired in question. See snap of end result, and working code below hopefully to help others.
Working screenshot:
Working code:
CustomButton.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#interface CustomButton : UIButton
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border;
#end
CustomButton.m
#import "CustomButton.h"
#implementation CustomButton
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border
{
self = [super initWithFrame:frame];
if (self)
{
self = [UIButton buttonWithType:UIButtonTypeCustom];
CALayer *layer = [self layer];
// background
if (background) {
layer.backgroundColor = (__bridge CGColorRef)(background);
} else {
layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
}
// border
if (border) {
layer.borderColor = (__bridge CGColorRef)(border);
} else {
layer.borderColor = [[UIColor lightGrayColor] CGColor];
}
layer.cornerRadius = 2.0f;
layer.borderWidth = 0.5f;
// icon
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(14,3,20,19)];
imageView.image = [UIImage imageNamed:image];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[self addSubview:imageView];
// text label
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 50, 14)];
titleLabel.opaque = NO;
titleLabel.numberOfLines = 1;
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.font = [UIFont systemFontOfSize:7.00];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.text = title;
[self addSubview:titleLabel];
[self setFrame:frame];
}
return self;
}
#end
Instantiated the button on a UIImage layer that had segue to the View Controller:
// Add custom button to image view background layer
CGRect buttonFrame = CGRectMake(125, 3, 50, 35);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:#"map.png" title:#"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];