iOS 中的彩色进度条

Posted 2023-02-24

【中文标题】iOS 中的彩色进度条

【英文标题】：Multicolored Progressbar in iOS

【发布时间】：2013-04-24 09:51:40

【问题描述】：

我需要在 ios 应用程序中设置这种 Progressbar。任何人都可以建议我在完成进度后如何获得这种外观（第二张图片）。

【问题讨论】：

可能是重复的 = seethis

我建议您使用自定义视图作为进度条，也可以使用自定义图像视图。

【参考方案1】：

看看cocoa controls的一些东西

YLProgressBar for iOS

【参考方案2】：

看到这个：

AMGProgressView for iOS

【参考方案3】：

试试我的自定义编码：您可以根据需要更改图像。

.h 文件

        //ProgressBar
            NSTimer *splashtimer;
            UIImage *ProgressBarBackgroundImage;
            UIImageView *ProgressBarLeft;
            UIImageView *ProgressBarRight;
            UIImageView *ProgressBarMiddle;
            UIImageView *LoadingBackground;

            NSInteger totalSizeOfProgressBarAnimation;
            NSInteger totalCountOfProgressBarAnimation;
            NSInteger NoOfPercentage;
            NSInteger startingvalue;
            int progressValue;


        //ProgressBar
        @property (nonatomic,retain) UIImageView *ProgressBarLeft;
        @property (nonatomic,retain) UIImageView *ProgressBarRight;
        @property (nonatomic,retain) UIImageView *ProgressBarMiddle;
        @property (nonatomic,retain) UIImageView *LoadingBackground;

        - (void) ProgressBarSizeCheck:(NSInteger)starting:(NSInteger)ending;

.m 文件

        @synthesize ProgressBarLeft,ProgressBarRight,ProgressBarMiddle,LoadingBackground;
        - (void)viewDidLoad 
            [super viewDidLoad]

            splashtimer = [NSTimer scheduledTimerWithTimeInterval: 0.75 target: self selector: @selector(startMoveProgress) userInfo: nil repeats: NO];

            ProgressBarLeft = [[UIImageView alloc] init];
            ProgressBarMiddle = [[UIImageView alloc] init];
            ProgressBarRight = [[UIImageView alloc] init];
            LoadingBackground = [[UIImageView alloc] init];
            ProgressBarBackgroundImage = [UIImage imageNamed: @"loaderbg.png"];
           [self.view addSubview: LoadingBackground];
        

pragma mark -

pragma mark 进度条方法

        -(void)ProgressBarSizeCheck:(NSInteger)starting:(NSInteger)ending 
            startingvalue = starting;
            endingValue = ending;
            NoOfPercentage = ending - starting;

            if (startingvalue==0) 
                //ProgressBarLeft Image
                ProgressBarLeft.frame = CGRectMake(23,410,10,20);
                UIImage *ProgressBarImage = [UIImage imageNamed: @"loaderleftpart.png"];
                ProgressBarLeft.image = ProgressBarImage;
                [self.view addSubview: ProgressBarLeft];
                //LeftImageOver

                //ProgressBarMiddleImage
                ProgressBarMiddle.frame = CGRectMake(33,410,0,20);
                UIImage *ProgressBarImageMiddle = [UIImage imageNamed: @"loadercenterpart.png"];
                ProgressBarMiddle.image = ProgressBarImageMiddle;
                [self.view addSubview: ProgressBarMiddle];
                //MiddleImageOver

                //ProgressBarRightImage
                ProgressBarRight.frame = CGRectMake(33,410,10,20);
                UIImage *ProgressBarImageRight = [UIImage imageNamed: @"loaderrightpart.png"];
                ProgressBarRight.image = ProgressBarImageRight;
                [self.view addSubview: ProgressBarRight];
                //RightImageOver

                totalSizeOfProgressBarAnimation = 276 * NoOfPercentage / 100;
                totalSizeOfProgressBarAnimation=totalSizeOfProgressBarAnimation-20;
                int Duration=NoOfPercentage/10;
                [self moveDown:Duration:totalSizeOfProgressBarAnimation];

            
            else 
                totalSizeOfProgressBarAnimation = 276 * startingvalue / 100;
                totalSizeOfProgressBarAnimation=totalSizeOfProgressBarAnimation-20;

                //ProgressBarLeftImage
                ProgressBarLeft.frame = CGRectMake(23,410,10,20);
                UIImage *ProgressBarImage = [UIImage imageNamed: @"loaderleftpart.png"];
                ProgressBarLeft.image = ProgressBarImage;
                [self.view addSubview: ProgressBarLeft];
                //LeftImageOver

                //ProgressbarMiddleImage
                ProgressBarMiddle.frame = CGRectMake(33,410,totalSizeOfProgressBarAnimation,20);
                UIImage *ProgressBarImageMiddle = [UIImage imageNamed: @"loadercenterpart.png"];
                ProgressBarMiddle.image = ProgressBarImageMiddle;
                [self.view addSubview: ProgressBarMiddle];
                //MiddleImageOver

                //ProgressBarRightImage
                ProgressBarRight.frame = CGRectMake(33+totalSizeOfProgressBarAnimation,410,10,20);
                UIImage *ProgressBarImageRight = [UIImage imageNamed: @"loaderrightpart.png"];
                ProgressBarRight.image = ProgressBarImageRight;
                [self.view addSubview: ProgressBarRight];
                //RightImageOver

                totalSizeOfProgressBarAnimation = 276 * NoOfPercentage / 100;
                int Duration=NoOfPercentage/10;
                [self moveDown:Duration:totalSizeOfProgressBarAnimation];
            

        

        -(void)moveDown:(NSInteger)animationDuration:(NSInteger)size 
            CGRect startFrame = [ProgressBarMiddle frame];
            [UIView beginAnimations:@"move10" context:NULL];
            [UIView setAnimationDuration:animationDuration];
            [ProgressBarMiddle setFrame:CGRectMake(startFrame.origin.x, 410, startFrame.size.width+size, startFrame.size.height)];
            [ProgressBarRight setFrame:CGRectMake(33+(startFrame.size.width+size),410,10,20)];
            [UIView setAnimationDelegate:self];
            [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
            [UIView commitAnimations];

            splashtimer = [NSTimer scheduledTimerWithTimeInterval: animationDuration target: self selector: @selector(pushTabControl) userInfo: nil repeats: NO];
        
        -(void)pushTabControl 
            [self.navigationController pushViewController: tabObj animated:YES];
        

        -(void) startMoveProgress 

            LoadingBackground.frame = CGRectMake(22,410,276,22);
            UIImage *ProgressBarBackgroundImage = [UIImage imageNamed: @"loaderbg.png"];
            [LoadingBackground setUserInteractionEnabled: YES];
            LoadingBackground.image = ProgressBarBackgroundImage;
            [self ProgressBarSizeCheck:0:100];

        

//查看图片

1)loaderbg.png

2)加载器中心部分

3)loaderrightpart

4) 左侧部分

【参考方案4】：

看到这个：

MJProgressView for iOS