在滚动期间更改背景颜色

时间:2016-04-13 05:13:52

标签: ios objective-c swift uiscrollview uiscrollviewdelegate

我的应用程序的入门部分有4页用户水平滚动以了解如何使用应用程序(标准)。我希望在用户从一个页面滚动到另一个页面时转换背景颜色。

我想要使用4个RGB值:

241170170

170201241

188170241

241199170

我知道我必须使用滚动视图委托+内容偏移量来更改uicolor值,但我不知道如何让它转到我选择的特定颜色。

非常感谢任何帮助。 任何实现都可以,swift或objective-c

感谢

5 个答案:

答案 0 :(得分:6)

对任何有兴趣的人。这是解决方案。我结合了我在堆栈上找到的一些答案并将其调整为使用4种颜色

- (void)scrollViewDidScroll:(UIScrollView *)scrollView  {
CGFloat pageWidth = self.scrollView.frame.size.width;
float fractionalPage = self.scrollView.contentOffset.x / pageWidth;
NSInteger page = lround(fractionalPage);
self.pageControl.currentPage = page;

// horizontal
CGFloat maximumHorizontalOffset = scrollView.contentSize.width - CGRectGetWidth(scrollView.frame);
CGFloat currentHorizontalOffset = scrollView.contentOffset.x;

// percentages
CGFloat percentageHorizontalOffset = currentHorizontalOffset / maximumHorizontalOffset;

NSLog(@"content offfset: %f", percentageHorizontalOffset);

if (percentageHorizontalOffset < 0.333333) {
    self.view.backgroundColor = [self fadeFromColor:self.colorArray[0] toColor:self.colorArray[1] withPercentage:percentageHorizontalOffset*3];
} else if (percentageHorizontalOffset >= 0.333333 && percentageHorizontalOffset < 0.666667) {
    self.view.backgroundColor = [self fadeFromColor:self.colorArray[1] toColor:self.colorArray[2] withPercentage:(percentageHorizontalOffset-0.333333)*3];
} else if (percentageHorizontalOffset >= 0.666667) {
    self.view.backgroundColor = [self fadeFromColor:self.colorArray[2] toColor:self.colorArray[3] withPercentage:(percentageHorizontalOffset-0.666667)*3];
}
}

- (UIColor *)fadeFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor withPercentage:(CGFloat)percentage
{
    // get the RGBA values from the colours
CGFloat fromRed, fromGreen, fromBlue, fromAlpha;
[fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];

CGFloat toRed, toGreen, toBlue, toAlpha;
[toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];

//calculate the actual RGBA values of the fade colour
CGFloat red = (toRed - fromRed) * percentage + fromRed;
CGFloat green = (toGreen - fromGreen) * percentage + fromGreen;
CGFloat blue = (toBlue - fromBlue) * percentage + fromBlue;
CGFloat alpha = (toAlpha - fromAlpha) * percentage + fromAlpha;

// return the fade colour
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}    

答案 1 :(得分:2)

要在scrollview中启用分页,您必须首先从属性检查器启用scrollview的分页属性。

根据您的要求,您有4页。所以你的scrollview内容大小将像scrollviewWidth * 4

将此代码放在viewDidLoad

[self.scrollVw setContentSize:CGSizeMake(self.scrollVw.frame.size.width * 4,0)];

然后使用数组存储类似下面的颜色值。

 arrColor = [[NSMutableArray alloc]init];

 [arrColor addObject:[UIColor colorWithRed:(241.0f/255.0f) green:(170.0f/255.0f) blue:(170.0f/255.0f) alpha:1.0f]];

 [arrColor addObject:[UIColor colorWithRed:(170.0f/255.0f) green:(201.0f/255.0f) blue:(241/255.0f) alpha:1.0f]];
 [arrColor addObject:[UIColor colorWithRed:(188.0f/255.0f) green:(170.0f/255.0f) blue:(241.0f/255.0f) alpha:1.0f]];
 [arrColor addObject:[UIColor colorWithRed:(241.0f/255.0f) green:(199.0f/255.0f) blue:(170.0f/255.0f) alpha:1.0f]];

 [self.scrollVw setBackgroundColor:[arrColor objectAtIndex:0]]; //this is for first time to display first color when scrollview is load. you can avoid this by directly setting color from UI

Scrollview委托方法代码。

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
 [self.scrollVw setBackgroundColor:[arrColor objectAtIndex:currentPage]]; //currentPage overhere is simple int variable which i had incremented and decremented its values based on current offset of scrollview. Also currentPage value should not be > 4.
}

希望这会帮助你。快乐的编码:)

答案 2 :(得分:1)

设置滚动视图委托并使用以下方法

//This method is called when scroll view ends scrolling
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self updateColor];
}

答案 3 :(得分:0)

您可以根据需要使用代理。如果您在滚动时同时更改背景颜色,则应使用 scrollViewDidScroll 方法,您可以在其中动态获取contentOffSet并更改背景颜色。如果您在完成滚动后想要它,可以使用@Chetan说

答案 4 :(得分:0)

    var currPage = 0
    let colors: [UIColor] = [.red, .blue, .green, .yellow, .purple, .orange]

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // for horizontal scrolling
        let progress = scrollView.contentOffset.x / scrollView.bounds.width
        let page = Int(progress)
        if currPage != page { currPage = page }
        let nextPage = Int(progress + 1)
        let prog = 1 - (CGFloat(Int(progress + 1)) - progress)
        print("\(currPage) \(nextPage) \(prog)")
        if currPage >= 0 && currPage < colors.count && nextPage >= 0 && nextPage < colors.count {
            let interColor = colorBetween(col1: colors[currPage], col2: colors[nextPage], percent: prog)
            scrollView.backgroundColor = interColor.withAlphaComponent(0.5)
        }
    }

    // calculates intermediate color, percent should in between 0.0 - 1.0
    func colorBetween(col1: UIColor, col2: UIColor, percent: CGFloat) -> UIColor {
        let c1 = CIColor(color: col1)
        let c2 = CIColor(color: col2)

        let alpha = (c2.alpha - c1.alpha) * percent + c1.alpha
        let red = (c2.red - c1.red) * percent + c1.red
        let blue = (c2.blue - c1.blue) * percent + c1.blue
        let green = (c2.green - c1.green) * percent + c1.green

        return UIColor(red: red, green: green, blue: blue, alpha: alpha)
    }