Заполните UIView несколькими цветами iOS - PullRequest
Новая
       48

Заполните UIView несколькими цветами iOS

3 голосов
/ 16 июня 2011

Я хотел бы заполнить фон UIView несколькими цветами. Я хочу использовать его в качестве строки состояния, поэтому, если 1/2 необходимых шагов завершено, фон UIView будет иметь 1/2 зеленого и 1/2 красного. Когда пользователь выполняет больше шагов (скажем, 2/3), большая часть фона UIView становится зеленой (2/3 в этом случае).

Полагаю, мне нужно переопределить 

-(void) drawREct: (CGRect) rect

Я предполагаю, что я получу UIView, выясню, насколько он большой, и разделю его на 2 прямоугольника, а затем заполню эти прямоугольники.

Другой вариант - добавить 2 UIViews программно, но я фанат IB.

Можно ли разделить UIView так, как я хочу?

Спасибо

Ответы [ 2 ]

9 голосов
/ 16 июня 2011

Это не решение IB, но вы можете создать подкласс UIView и переопределить метод drawRect, чтобы добавить собственный градиент. Это позволит вам выбрать любое количество цветов и сделать так, чтобы они были плавными или плавными. В Интернете есть много хороших учебных пособий, в которых должны быть разные способы (некоторые более сложные, некоторые довольно простые).

Еще один довольно простой вариант - переопределить drawRect, сделать фон красным, а затем fill прямоугольником, который занимает нижнюю половину вида. Он не допускает причудливых или плавных переходов между цветами, но его очень легко реализовать. Например, что-то вроде этого должно работать: 

-(void)drawRect:(CGRect)rect {
    CGRect upperRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height * percentDone);
    CGRect lowerRect = CGRectMake(rect.origin.x, rect.origin.y + (rect.size.height * percentDone), rect.size.width, rect.size.height *(1-percentDone));

    [[UIColor redColor] set]; 
    UIRectFill(upperRect);
    [[UIColor greenColor] set]; 
    UIRectFill(lowerRect);
}

Здесь percentDone - это число с плавающей запятой (объявите, property(nonatomic), synthesize), которое вы можете привязать к шагам пользователя. Затем просто обновите представление, когда пользователь что-то делает, с помощью 

splitView.percentDone = .5;
[splitView setNeedsDisplay];

Вы также можете сгладить это с помощью анимации.

3 голосов
/ 17 июня 2011

Простым способом было бы установить цвет фона для вашего фона, скажем, красный.Затем добавьте другое представление в фоновое представление и назовите его представлением индикатора.Установите размер и расположение индикатора, чтобы он покрыл фон, и установите его цвет фона на зеленый.Подключите вид индикатора к розетке в вашем контроллере вида, и заставьте контроллер вида отрегулировать его ширину (или высоту) по мере необходимости, чтобы соответствовать прогрессу выполняемой задачи.

Другой способ был бы как @PengOneпредлагает: создать собственное представление, присвоить ему свойство progress и переопределить -drawRect: чтобы нарисовать содержимое соответствующим образом.Если вы идете по этому пути, ничто не помешает вам стать немного креативнее.Вместо того, чтобы просто заполнить два прямоугольника, сделайте границу между двумя цветами немного более интересной.Вы можете добавить рябь или пузырьки, которые при соответствующем звуковом эффекте могут выглядеть как контейнер, заполненный жидкостью.Или вы можете сделать анимацию, подобную Qix , которая медленно заполняет экран ...; -)

...