1. 程式人生 > >ios 底部彈出框選單

ios 底部彈出框選單

在IOS開發中,經常用到底部選單,這是一個簡單的底部彈出選單的實現

程式碼如下:

     標頭檔案(.h)
   

#import <UIKit/UIKit.h>

@interface ShareMenuView : UIView
{
    UIButton *_backView;
}

- (void)show;
- (void)hide;

@property(nonatomic,copy)void (^ shareButtonClickBlock)(NSInteger index);

@end

_backView 是選單彈出時的半透明背景,點選背景選單消失,show和hide方法是選單彈出和選單消失的方法,shareButtonClickBlock是選單中按鈕點選的響應,其中用index來區分選單中的按鈕,也可用代理實現。

   類檔案(.m)

#import "ShareMenuView.h"

#define AnimateDuration     0.4

@implementation ShareMenuView



- (instancetype)init{
    
    self = [super init];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup{
    
    //彈出選單,新增半透明背景
    _backView = [UIButton buttonWithType:UIButtonTypeCustom];
    _backView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    _backView.alpha = 0.3;
    _backView.backgroundColor = [UIColor blackColor];
    [_backView addTarget:self action:@selector(backViewClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    self.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, ShareMenuHeight);
    self.backgroundColor = [UIColor whiteColor];
    [[[UIApplication sharedApplication] keyWindow] addSubview:self];
    
    NSMutableArray *shareTitleArray = [[NSMutableArray alloc]initWithObjects:@"QQ",@"QQ空間",@"微信",@"朋友圈",@"複製連結", nil];
    NSMutableArray *shareIconArray = [[NSMutableArray alloc]initWithObjects:@"news_control_center_qq",@"news_control_center_zone",@"news_control_center_wechat",@"news_control_center_wechatQ",@"news_control_center_link", nil];
    
    
    for (int i = 0; i < shareIconArray.count; i ++) {
        
        UIButton *itemView = [UIButton buttonWithType:UIButtonTypeCustom];
        itemView.backgroundColor = [UIColor clearColor];
        itemView.tag = i;
        [itemView addTarget:self action:@selector(share:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:itemView];
        
        //圖示
        UIImageView *icon = [[UIImageView alloc]init];
        icon.backgroundColor = [UIColor clearColor];
        icon.image = [UIImage imageNamed:shareIconArray[i]];
        [itemView addSubview:icon];
        
        //標題
        UILabel *title = [[UILabel alloc]init];
        title.font = [UIFont systemFontOfSize:13.0f];
        title.backgroundColor = [UIColor clearColor];
        [title sizeToFit];
        title.text = shareTitleArray[i];
        [itemView addSubview:title];
        
        [itemView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo(@70);
            make.width.equalTo(@(SCREEN_WIDTH*1/4));
            make.left.equalTo(self.mas_left).offset((SCREEN_WIDTH*(i%4)/4));
            make.top.equalTo(self.mas_top).offset(70*(i/4));
//            if (i == shareIconArray.count - 1) {
//                make.bottom.equalTo(self.mas_bottom).offset(-10);
//            }
        }];
        
        [icon mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.width.equalTo(@40);
            make.top.equalTo(itemView.mas_top).offset(10);
            make.centerX.equalTo(itemView.mas_centerX);
        }];
    
        [title mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(itemView.mas_centerX);
            make.top.equalTo(icon.mas_bottom).offset(5);
            make.bottom.equalTo(itemView.mas_bottom);
        }];
        
    }
}

- (void)backViewClicked:(id)sender{
    [self hide];
}

- (void)show{
    
    [[[UIApplication sharedApplication] keyWindow] addSubview:_backView];
    [[[UIApplication sharedApplication] keyWindow] insertSubview:self aboveSubview:_backView];
    
    [UIView animateWithDuration:AnimateDuration animations:^{
        
        self.frame = CGRectMake(0, SCREEN_HEIGHT - ShareMenuHeight, SCREEN_WIDTH, ShareMenuHeight);
        
    } completion:^(BOOL finished) {
        
    }];
    
}

- (void)hide{
    
    [_backView removeFromSuperview];
    
    [UIView animateWithDuration:AnimateDuration animations:^{
        
        self.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, ShareMenuHeight);
        
    } completion:^(BOOL finished) {
        
    }];

    
}

- (void)share:(id)sender{
    UIButton *button = (UIButton *)sender;
    if (self.shareButtonClickBlock) {
        self.shareButtonClickBlock(button.tag);
    }
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end

     這裡面用到了一個第三方自動佈局的框架(名稱Masonry,點選可下載),程式碼很簡單,如果高見,歡迎批評指正。

效果如下:


相關推薦

ios 底部選單

在IOS開發中,經常用到底部選單,這是一個簡單的底部彈出選單的實現程式碼如下:      標頭檔案(.h)     #import <UIKit/UIKit.h> @interface ShareMenuView : UIView { UIButto

Android仿ios底部效果

準備: public class ActionSheet { public interface OnActionSheetSelected { void onClick(int whichButton); } private ActionShee

flutter showbottomsheet 底部

關閉的方法:向下滑動即可關閉。   onPressed: (){ Scaffold.of(context).showBottomSheet((BuildContext context){ return Row(

flutter showbottomsheet showmodalbottomsheet底部

關閉的方法:向下滑動即可關閉。   onPressed: (){ Scaffold.of(context).showBottomSheet((BuildContext context){ return Row(

Android 底部選擇選單ActionSheet

對於各式各樣的選擇選單彈框可以使用很多中方式來實現,下面我們來看看ActionSheet是如何實現的: 一.第三方ActionSheet實現方法: compile 'com.baoyz.actionsheet:library:1.1.4' 1.新增以上依賴,實現下面

Android中自定義底部ButtomDialog

先看看效果和你要的是否一樣 一 、先來配置自定義控制元件需要的資源。 1.在res資料夾下建立一個anim資料夾並建立兩個slide_in_bottom.xml、slide_out_bottom.xml檔案,負責彈框進出動畫。 <?xml version="1.0" enco

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

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

底部

private void show1() { Dialog bottomDialog = new Dialog(this, R.style.BottomDialog); View contentView = LayoutInflater.from(this).infla

解決ios底部固定輸入,獲取焦點時輸入法鍵盤擋住輸入

ios端比較常見的,就是在頁面底部固定的輸入框,如下,一旦獲取焦點,彈出的輸入法鍵盤就會把input輸入框完全擋住,解決方法很簡單,加上下面的幾行程式碼即可       $(".replay_text").on("click", functi

iOS 仿微信、微博底部選項

由於專案中經常使用,封裝了一個簡單的底部彈出框控制元件,可以自定義一下屬性,希望可以幫到需要的朋友。 GitHub地址 使用方法很簡單,將資料夾匯入工程中,並引入標頭檔案#import "ZGQActionSheetView.h" 同時支援block與delegate兩種回撥方式,推薦使

Android仿ios底部,支援傳入list集合,任意配置個數

不說廢話,一看程式碼誰都懂。   public class BottomDialog { private Context context; private Dialog dialog; private TextView txt_title; p

仿ios底部選單按鈕

layout佈局實現listview+button具體看程式碼: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pa

微信公眾號頁面禁止長按系統選單,相容ios和安卓

最近做的一個微信公眾號需求,需要長按撥出有刪除按鈕的浮層,可是長按的時候也會彈出系統選單“選擇複製”和“在瀏覽器開啟”,這裡記錄一下解決方案。 css程式碼如下: cssSelect{ //這裡為css選擇器 -webkit-touch-callout:non

matlab guide對話方塊+滑動條+選單+列表的使用

文章目錄 前言 matlab資料傳遞概觀 對話方塊建立 利用滑動條實現顏色調控 利用彈出式選單選擇並輸入文字框 利用列表框選擇並輸入文字框 前言 我覺得g

ListView點選item底部popupWindow刪除、修改、取消選擇

先看一下效果: 點選單個item彈出選擇框,可以選擇刪除或者修改。刪除單條item,或者跳轉到修改頁面。 listview的佈局: <?xml version="1.0" encoding="utf-8"?> <LinearLay

iOS開發- 自動消失的

- (void)timerFireMethod:(NSTimer*)theTimer//彈出框 { UIAlertView *promptAlert = (UIAlertView*)[theTimer userInfo]; [promptAlert dismi

android 底部提示的實現方式

1.android實現底部彈框的兩種實現方式: (1) 使用系統自帶對話方塊AlertDialog 實現 (2)自定義對話方塊實現  1.1使用系統自帶對話方塊AlertDialog 實現 public class MainActivity extends AppCo

Android實現背景透明度漸變的效果,類似於分享底部

實現背景透明度漸變的效果,類似於分享底部的彈出框 這是公司最近寫的一個專案,其中的一個自定義分享模組,剛開始實現的效果比較簡單,背景透明度沒有漸變,而是隨著底部分享的彈出框而一起彈出,看起來比較生硬,使用者體驗不是很好,現在要實現的效果就是類似於SharedS

iOS 兩款你可能會用到的

前言好久沒寫部落格了……最近拿到了一版原型圖,各種彈框,簡直快把老爺給彈死了……因為實現功能是其次的,最主要還得把這些東西給封裝一下,方便同事的呼叫。於是乎,我就開始了爬坑的過程。經過兩天的耕耘,出了兩款風格迥異的彈框,這裡給大家分享一下。。。同時也祭奠一下,我老去的容顏……效果圖底部PickerView彈框

iOS-禁用 UIWebView 放大鏡及拷貝貼上

大家常常在開發中會碰到這樣的需求–禁用網頁或PDF檔案中放大鏡及拷貝貼上彈出框 查詢了很多資料發現如下方法已經失效 webView.stringByEvaluatingJavaScriptFromS