1. 程式人生 > >iOS 簡單的loading彈出框實現

iOS 簡單的loading彈出框實現

————-LoadingAlerter.h———–

//
//  LoadingAlerter.h
//  SdkModle
//
//  Created by Sean on 15/2/10.
//  Copyright (c) 2015年 Feiyu. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface LoadingAlerter : NSObject

- (id) initWithParentView:(UIView*)parentView;

- (void
) startAlert; - (void) stopAlert; @end

——LoadingAlerter.m——

//
//  LoadingAlerter.m
//  SdkModle
//
//  Created by Sean on 15/2/10.
//  Copyright (c) 2015年 Feiyu. All rights reserved.
//

#import "LoadingAlerter.h"

@interface LoadingAlerter()

@property (nonatomic) UIActivityIndicatorView* indicatorWaiting;
@property
(nonatomic) UIView* viewAlert; @property (nonatomic) UIView* viewParent; @property (nonatomic) UILabel* labWaiting; @property (copy, nonatomic) NSString* strWaiting; @property (nonatomic) BOOL isStart; @end @implementation LoadingAlerter //初始化 //parentView 父view - (id) initWithParentView:(UIView*)parentView { if
(self = [super init]) { self.viewParent = parentView; self.isStart = NO; } return self; } //彈出框彈出 - (void) startAlert { if (self.isStart == YES) { return; } //-----設定彈出框----- self.viewAlert = [[UIView alloc] init]; //設定顏色 [self.viewAlert setBackgroundColor:[UIColor blackColor]]; //設定透明度 [self.viewAlert setAlpha:0.6]; //設定圓角 self.viewAlert.layer.cornerRadius = 10; //填充圖片時,如果加圓角,圖片會超出圓角框,即還是直角,得加一句masksToBounds self.viewAlert.layer.masksToBounds = YES; //設定邊框的寬度,當然可以不要 self.viewAlert.layer.borderWidth = 0; //設定邊框的顏色 self.viewAlert.layer.borderColor = [[UIColor grayColor] CGColor]; //防止了控制元件佈局與自動佈局衝突 [self.viewAlert setTranslatesAutoresizingMaskIntoConstraints:NO]; //將彈出框加入到父view [self.viewParent addSubview:self.viewAlert]; //給彈出框新增約束,涉及到自動佈局的知識; //給控制元件新增約束之前一定先要將其新增到父控制元件上,不然會報異常 [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.viewAlert attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:80]]; [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.viewAlert attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1 constant:200]]; [self.viewParent addConstraint:[NSLayoutConstraint constraintWithItem:self.viewAlert attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewParent attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; [self.viewParent addConstraint:[NSLayoutConstraint constraintWithItem:self.viewAlert attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewParent attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //-----設定指示器----- self.indicatorWaiting = [[UIActivityIndicatorView alloc] init]; [self.indicatorWaiting setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite]; [self.indicatorWaiting setTranslatesAutoresizingMaskIntoConstraints:NO]; [self.viewAlert addSubview:self.indicatorWaiting]; [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.indicatorWaiting attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewAlert attribute:NSLayoutAttributeTop multiplier:1 constant:40]]; [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.indicatorWaiting attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewAlert attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //-----設定文字框----- self.strWaiting = @"正在努力載入中..."; self.labWaiting = [[UILabel alloc] init]; self.labWaiting.text = self.strWaiting; self.labWaiting.textAlignment = NSTextAlignmentCenter; self.labWaiting.font = [UIFont fontWithName:@"Helvetica" size:14]; [self.labWaiting setTextColor:[UIColor whiteColor]]; [self.labWaiting setTranslatesAutoresizingMaskIntoConstraints:NO]; [self.viewAlert addSubview:self.labWaiting]; [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.labWaiting attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewAlert attribute:NSLayoutAttributeTop multiplier:1 constant:20]]; [self.viewAlert addConstraint:[NSLayoutConstraint constraintWithItem:self.labWaiting attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.viewAlert attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //開始動畫 [self.indicatorWaiting startAnimating]; self.isStart = YES; } //彈出框收起 - (void) stopAlert { //停止動畫 [self.indicatorWaiting stopAnimating]; //將彈出框從父view刪除 [self.viewAlert removeFromSuperview]; self.isStart = NO; } @end

使用方式
1.初始化的時候

self.loadingAlert = [[LoadingAlerter alloc] initWithParentView:self.view];

2.開始載入的時候

[self.loadingAlert startAlert];

3.結束載入的時候

[self.loadingAlert stopAlert];

附:自動佈局的用法
1.要給控制元件加約束,要先找到它的父控制元件,將約束新增到齊父控制元件上

[self.viewAlert addConstraint:[NSLayoutConstraint                 constraintWithItem:self.indicatorWaiting
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationLessThanOrEqual
                                                                  toItem:self.viewAlert
                                                               attribute:NSLayoutAttributeTop
                                                              multiplier:1
                                                                constant:40]];

上面程式碼給指示器indicatorWaiting新增約束。

2.NSLayoutConstraint的constraintWithItem方法說明

+ (instancetype)constraintWithItem:(id)view1
                         attribute:(NSLayoutAttribute)attr1
                         relatedBy:(NSLayoutRelation)relation
                            toItem:(id)view2
                         attribute:(NSLayoutAttribute)attr2
                        multiplier:(CGFloat)multiplier
                          constant:(CGFloat)c

官方說明:
Create constraints explicitly. Constraints are of the form “view1.attr1 = view2.attr2 * multiplier + constant”
If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.

意思是說view1的某某屬性的值 = view2的某某屬性*倍數 + 長度

相關推薦

iOS 簡單loading實現

————-LoadingAlerter.h———– // // LoadingAlerter.h // SdkModle // // Created by Sean on 15/2/10. // Copyright (c) 2015年 Feiyu.

JavaScript 實現簡單關閉

JavaScript 實現簡單的 彈出框關閉框 知識點:   1.javaScript 新增HTML標籤   2.javaScript 新增HTML標籤屬性   3.javaScript 追加元素 程式碼獻上: <!doctype html> <html lang="en

Android一款介面良好使用簡單

一款Android彈出框、對話方塊、Dialog、popuwindow Example  (轉) 仿QQ底部彈出GIF.gif 仿QQ底部彈出.png 仿微信中間彈出框.png Material Design風格對話方塊.png Mat

Android 多種簡單樣式設定

簡介 這是一個基於AlertDialog和Dialog這兩個類封裝的多種彈出框樣式,其中提供各種簡單樣式的彈出框使用說明。同時也可自定義彈出框。 專案地址:https://github.com/Liumce/jjdxm_dialogui 特性 1.使用鏈式開發程式碼簡潔明瞭2.所有的彈出

Bootstrap modal實現列印的功能

頁面上引入bootstrap 相關 js  html 頁面: <div class="modal fade" id="popPrintSheet" role="dialog" aria-labelledby="printSheet" aria-hidden="true" d

bootstrap modal實現實現按鈕點選複製功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

iOS 位置許可權閃現問題

當編碼如下的時候,進入頁面的時候可以看到UIAlertView彈出框出現一下,剛想點選的時候,他不見了,這個鬱悶 CLLocationManager* _locationManager = [[CLLocationManager alloc] init

android 點選 頭像對應的 底部拍照,相簿取消 簡單實現

標準 看完這個帖子一定看看這個, 兩個結合 , 實現  拍照 相簿 回撥 主頁面佈局  這裡對應的就是一個點選事件 實現 , <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

使用jquery簡單實現

使用jquery實現點選按鈕彈出對話方塊 html: <input type="button" id="btn02" value="修改密碼" > <div i

Django:popup簡單應用實例

type 正在 elif sta alert cte cti cnblogs sha 效果:在p1.html頁面點擊,彈出p2的彈出框,填寫數據,在 popup_response頁面處理數據 1、視圖函數:views.py from django.shortcuts im

Bootstrap使用模態modal實現表單提交

-s 彈出層 lib 前端 close css 狀態 upd 技術 Bootstrap 模態框(Modal)插件 模態框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自一個單獨的源的內容,可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。如果您想要

ASP.NET—013:實現帶控件的層(

btn script lock 技術分享 trac borde stat -s scroll 在頁面中用到彈出新頁面的情況比較多的,一般來說都是使用JS方法showM

ASP.NET中的幾種提示基本實現方法

sys find xxxxx 文章 hello sage rtu msg CI 我們在.NET程序的開發過程中,常常需要和用戶進行信息交互,比如執行某項操作是否成功,“確定”還是“取消”,以及選擇“確定”或“取消”後是否需要跳轉到某個頁面等,下面是本人對常用對話框使用的小結

mvc 在實現檔案下載

var myParent = parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent; FileDown = function (fileName, realFileName) { $

用vue實現各類元件

簡單介紹一下vue中常用dialog元件的封裝: 實現動態傳入內容,實現取消,確認等回撥函式。 首先寫一個基本的彈窗樣式,如上圖所示。 在需要用到彈窗的地方中引入元件: import dialogBar from './dialog.vue' components:{ '

移動端實現漸顯和漸隱效果

在移動端想實現一個彈出框漸漸出現和消失的效果。由於用的是vue.js,所以寫法有些獨特,用變數控制是否顯示類名。但是核心解決方法就是CSS3的animation屬性應用還有CSS中的z-index應用,必須初始化定義讓彈出框在最底部。還有就是opacity屬性的應用,這樣才有漸健彈出和漸漸消失的效果。給彈出框

各種簡單樣式的 這是一個基於 AlertDialog 和 Dialog 這兩個類封裝的多種樣式,其中提供各種簡單樣式的使用說明。同時也可自定義

jjdxm_dialogui 專案地址:jjdxmashl/jjdxm_dialogui  簡介:各種簡單樣式的彈出框 這是一個基於 AlertDialog 和 Dialog 這兩個類封裝的多種彈出框樣式,其中提供各種簡單樣式的彈出框使用說明。同時也可自定義彈出框。 更多:作者

openlayers3實現

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

使用JAVASCRIPT實現,過一段時間自動消失

                 <script>   var oPopup;  var popTop=50;  var mytime;  function closemsg(){   try{    clearTimeout(mytime);   }catch(e){}   oPopup.hid

android自定義樣式實現

前言: 做專案時,感覺android自帶的彈出框樣式比較醜,很多應用都是自己做的彈出框,這裡也試著自己做了一個。 廢話不說先上圖片: 實現機制 1.先自定義一個彈出框的樣式 2.自己實現CustomDialog類,繼承自Dialog,實現裡面方法,在裡面載入自定義樣式的