在滚动期间更改背景颜色

Question

我的应用有一个入门部分，其中包含 4 个页面，用户可以水平滚动以了解如何使用该应用（标准）。我希望当用户从一个页面滚动到另一个页面时，背景颜色会发生变化。

我有 4 个我想使用的 RGB 值：

241,170,170

170,201,241

188,170,241

241,199,170

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

任何帮助将不胜感激。 任何实现都可以，快速或客观-c

谢谢

Answer 1

对于任何有兴趣的人。这就是解决方案。我结合了我在堆栈上找到的一些答案并将其调整为使用 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];
}    

Answer 2

要在滚动视图中启用分页，您必须首先从属性检查器中启用滚动视图的分页属性。

根据您的要求，您有 4 页。所以您的滚动视图内容大小将类似于 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.
}

希望这对您有所帮助。快乐编码:)

Answer 3

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

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

Answer 4

    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)
    }

Answer 5

您可以根据需要使用委托。如果您在滚动时何时同时更改背景颜色，您应该使用 scrollViewDidScroll 方法，您可以动态获取 contentOffSet 并更改背景颜色。如果你在完成卷轴后想要它，你可以按照@Chetan 说的那样使用