iOS開發(fā)筆記:實現(xiàn)修改頭像

剛轉(zhuǎn)行iOS的搬磚工人,在此記錄下這條路上的點(diǎn)點(diǎn)滴滴,共勉

在之前的筆記中夜只,講了如何實現(xiàn)圓形頭像,這里接著上一次的筆記蒜魄,講一下怎么修改頭像(通過圖庫和拍照方式)扔亥。

重點(diǎn)

手勢(UITapGestureRecognizer)
提示框(UIAlertController)谈为、
相冊拍照(UIImagePickerController)

流程

一般在APP中旅挤,修改頭像是最基本的功能之一了。一般是兩種方式的修改:從相冊選擇圖片或者拍照伞鲫。那么這里就來講一下如何具體實現(xiàn)這個功能粘茄。

Step1:點(diǎn)擊頭像 ->手勢(UITapGestureRecognizer)

QQ的更換頭像操作

首先,點(diǎn)擊頭像秕脓。因為頭像是直接放在ImageView中的柒瓣,默認(rèn)情況下當(dāng)我們點(diǎn)擊頭像的時候,頭像是不會有任何反應(yīng)的吠架。因此芙贫,我們需要給頭像的ImageView添加一個點(diǎn)擊事件,方法如下:

    /**
     *  添加手勢:也就是當(dāng)用戶點(diǎn)擊頭像了之后傍药,對這個操作進(jìn)行反應(yīng)
     */
        //允許用戶交互
    _myHeadPortrait.userInteractionEnabled = YES;
        //初始化一個手勢
    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self
                                                                action:@selector(alterHeadPortrait:)];
        //給ImageView添加手勢
    [_myHeadPortrait addGestureRecognizer:singleTap];
    }

Step2:彈出選擇提示->提示框(UIAlertController)

通過添加UITapGestureRecognizer(手勢)磺平,系統(tǒng)就知道了我點(diǎn)擊了頭像,接著拐辽,就可以添加具體的方法來進(jìn)行操作了拣挪。在上一步,我為這個手勢的action俱诸,selector(選擇)了一個方法來執(zhí)行菠劝,即alterHeadPortrait:(注意有冒號的),也就是當(dāng)我們點(diǎn)擊了頭像之后乙埃,會執(zhí)行alterHeadPortrait:這個方法:

//  方法:alterHeadPortrait
-(void)alterHeadPortrait:(UITapGestureRecognizer *)gesture{
    /**
     *  彈出提示框
     */
        //初始化提示框
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
        //按鈕:從相冊選擇闸英,類型:UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"從相冊選擇" style:UIAlertActionStyleDefault handler:nil]];
        //按鈕:拍照,類型:UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:nil]];
        //按鈕:取消介袜,類型:UIAlertActionStyleCancel
    [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [self presentViewController:alert animated:YES completion:nil];
}

通過UIAlertController(提示框)這個類甫何,我們創(chuàng)建好了一個提示框,如下:

點(diǎn)擊頭像遇伞,彈出提示框

現(xiàn)在辙喂,當(dāng)我們點(diǎn)擊取消(或者點(diǎn)擊按鈕以外的區(qū)域)提示框就會被自動取消掉,并將提示框收起來。

Step3:從相冊選擇或者拍照選擇頭像->UIImagePickerController

好了巍耗,繞了這么久秋麸,終于開始進(jìn)入主題了,即選擇圖片或者拍照了炬太。那么現(xiàn)在該腫么辦呢灸蟆?好像毫無頭緒的樣子。亲族。炒考。
這里就需要通過UIImagePickerController,通過它霎迫,我們就可以讓我們的APP輕松的實現(xiàn)訪問相冊或者拍照:
操作UIImagePickerController斋枢,需要實現(xiàn)兩個協(xié)議:

<UINavigationControllerDelegate,UIImagePickerControllerDelegate>

進(jìn)行相冊圖片選擇或者相機(jī)拍照的實現(xiàn)代碼如下:

            //初始化UIImagePickerController
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //獲取方式1:通過相冊(呈現(xiàn)全部相冊),UIImagePickerControllerSourceTypePhotoLibrary
            //獲取方式2知给,通過相機(jī)瓤帚,UIImagePickerControllerSourceTypeCamera
            //獲取方方式3,通過相冊(呈現(xiàn)全部圖片)涩赢,UIImagePickerControllerSourceTypeSavedPhotosAlbum
        PickerImage.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;//方式1
            //允許編輯戈次,即放大裁剪
        PickerImage.allowsEditing = YES;
            //自代理
        PickerImage.delegate = self;
            //頁面跳轉(zhuǎn)
        [self presentViewController:PickerImage animated:YES completion:nil];

運(yùn)行效果如圖:


選擇圖片,自由裁剪

Step4:替換頭像->大功告成谒主!

現(xiàn)在朝扼,我們已經(jīng)能夠打開相冊,或者拍照(拍照功能模擬機(jī)無法拍照霎肯,會報錯擎颖,只有用真機(jī)測試)。
可是問題來了观游,現(xiàn)在選擇了新圖片搂捧,確定之后,頭像還是原來的頭像懂缕,并沒有更新允跑。這是因為我們這里還沒有對圖片選擇完全之后的代理方法進(jìn)行實現(xiàn):

//PickerImage完成后的代理方法
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    //定義一個newPhoto,用來存放我們選擇的圖片搪柑。
    UIImage *newPhoto = [info objectForKey:@"UIImagePickerControllerEditedImage"];
    //把newPhono設(shè)置成頭像
    _myHeadPortrait.image = newPhoto;
    //關(guān)閉當(dāng)前界面聋丝,即回到主界面去
    [self dismissViewControllerAnimated:YES completion:nil];
}

大功告成:


修改頭像成功

完全代碼如下:


#import "ViewController.h"

@interface ViewController ()<UINavigationControllerDelegate,UIImagePickerControllerDelegate>
@property (strong, nonatomic) IBOutlet UIImageView *myHeadPortrait;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //  調(diào)用setHeadPortrait方法
    [self setHeadPortrait];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

//  方法:設(shè)置頭像樣式
-(void)setHeadPortrait{
    //  把頭像設(shè)置成圓形
    self.myHeadPortrait.layer.cornerRadius=self.myHeadPortrait.frame.size.width/2;
    self.myHeadPortrait.layer.masksToBounds=YES;
    //  給頭像加一個圓形邊框
    self.myHeadPortrait.layer.borderWidth = 1.5f;
    self.myHeadPortrait.layer.borderColor = [UIColor whiteColor].CGColor;
    
    /**
     *  添加手勢:也就是當(dāng)用戶點(diǎn)擊頭像了之后,對這個操作進(jìn)行反應(yīng)
     */
        //允許用戶交互
    _myHeadPortrait.userInteractionEnabled = YES;
    
        //初始化一個手勢
    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self
                                                                action:@selector(alterHeadPortrait:)];
    
        //給imageView添加手勢
    [_myHeadPortrait addGestureRecognizer:singleTap];
    }

//  方法:alterHeadPortrait
-(void)alterHeadPortrait:(UITapGestureRecognizer *)gesture{
    /**
     *  彈出提示框
     */
            //初始化提示框
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
            //按鈕:從相冊選擇工碾,類型:UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"從相冊選擇" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            //初始化UIImagePickerController
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //獲取方式1:通過相冊(呈現(xiàn)全部相冊)弱睦,UIImagePickerControllerSourceTypePhotoLibrary
            //獲取方式2,通過相機(jī)渊额,UIImagePickerControllerSourceTypeCamera
            //獲取方法3况木,通過相冊(呈現(xiàn)全部圖片)垒拢,UIImagePickerControllerSourceTypeSavedPhotosAlbum
        PickerImage.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            //允許編輯,即放大裁剪
        PickerImage.allowsEditing = YES;
            //自代理
        PickerImage.delegate = self;
            //頁面跳轉(zhuǎn)
        [self presentViewController:PickerImage animated:YES completion:nil];
    }]];
        //按鈕:拍照火惊,類型:UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action){
        /**
         其實和從相冊選擇一樣求类,只是獲取方式不同,前面是通過相冊屹耐,而現(xiàn)在尸疆,我們要通過相機(jī)的方式
         */
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //獲取方式:通過相機(jī)
        PickerImage.sourceType = UIImagePickerControllerSourceTypeCamera;
        PickerImage.allowsEditing = YES;
        PickerImage.delegate = self;
        [self presentViewController:PickerImage animated:YES completion:nil];
    }]];
        //按鈕:取消,類型:UIAlertActionStyleCancel
    [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [self presentViewController:alert animated:YES completion:nil];
}
//PickerImage完成后的代理方法
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    //定義一個newPhoto张症,用來存放我們選擇的圖片仓技。
    UIImage *newPhoto = [info objectForKey:@"UIImagePickerControllerEditedImage"];
    _myHeadPortrait.image = newPhoto;
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鸵贬,一起剝皮案震驚了整個濱河市俗他,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌阔逼,老刑警劉巖兆衅,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嗜浮,居然都是意外死亡羡亩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門危融,熙熙樓的掌柜王于貴愁眉苦臉地迎上來畏铆,“玉大人,你說我怎么就攤上這事吉殃〈蔷樱” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵蛋勺,是天一觀的道長瓦灶。 經(jīng)常有香客問我,道長抱完,這世上最難降的妖魔是什么贼陶? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮巧娱,結(jié)果婚禮上碉怔,老公的妹妹穿的比我還像新娘。我一直安慰自己禁添,他們只是感情好撮胧,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著上荡,像睡著了一般趴樱。 火紅的嫁衣襯著肌膚如雪馒闷。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天叁征,我揣著相機(jī)與錄音纳账,去河邊找鬼。 笑死捺疼,一個胖子當(dāng)著我的面吹牛疏虫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播啤呼,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼卧秘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了官扣?” 一聲冷哼從身側(cè)響起翅敌,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎惕蹄,沒想到半個月后蚯涮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡卖陵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年遭顶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泪蔫。...
    茶點(diǎn)故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡棒旗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出撩荣,到底是詐尸還是另有隱情铣揉,我是刑警寧澤,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布婿滓,位于F島的核電站老速,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏凸主。R本人自食惡果不足惜橘券,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卿吐。 院中可真熱鬧旁舰,春花似錦、人聲如沸嗡官。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衍腥。三九已至磺樱,卻和暖如春纳猫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背竹捉。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工芜辕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人块差。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓侵续,卻偏偏與公主長得像,于是被迫代替她去往敵國和親憨闰。 傳聞我的和親對象是個殘疾皇子状蜗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容

  • #import"ViewController.h"@interfaceViewController()@prope...
    以德扶人閱讀 1,410評論 0 50
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件鹉动、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • { 11轧坎、核心動畫 需要簽協(xié)議,但是系統(tǒng)幫簽好 一训裆、CABasicAnimation 1眶根、創(chuàng)建基礎(chǔ)動畫對象 CAB...
    CYC666閱讀 1,530評論 2 4
  • 屈原《橘頌》原文、注釋边琉、翻譯、賞析 【原詩】:九章·橘頌后皇嘉樹记劝,橘徠服兮⑴变姨。受命不遷,生南國兮⑵厌丑。深固難徙定欧,更壹...
    xcy無名閱讀 1,133評論 0 1
  • 小A戀愛了,一臉羞澀地說“他今天叫我和他去玩兒怒竿,但是我想認(rèn)識沒多久就出去有點(diǎn)太不矜持砍鸠,你們覺得呢?”這種問題隔三差...
    二貓二毛閱讀 316評論 0 0