仿网易抽屉效果

/**
 *  源代码的链接
 *  链接: http://pan.baidu.com/s/1c2hqDzy 密码: jscx
 */

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end
#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    return YES;
}

@end
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end
#import "ViewController.h"
#import "LFCustomButton.h"
#import "LFLeftView.h"
#import "LFItems.h"
#import "LFSmileViewController.h"
#import "LFCheerViewController.h"
#import "LFHappyViewController.h"

const float leftViewTopGap = 120;
const float viewAnimateDuration = 0.3;
@interface ViewController ()<LFLeftViewDelegate>

@property (nonatomic , strong) UIImageView *bgView;//背景图片

@property (nonatomic , strong) LFLeftView *leftView;//左边的菜单栏

@property (nonatomic , strong) UIButton *coverBtn;//防止内容被操作的按钮

@property (nonatomic , strong) UINavigationController *currentVC;//当前控制器

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

//    controllers = [NSMutableArray array];
    // 设置背景图片
    self.bgView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.bgView.backgroundColor = [UIColor blackColor];
    self.bgView.opaque = 0.3;
    // 设置可操作（如果在此不设置可操作，它的子视图是不可以操作的）
    self.bgView.userInteractionEnabled = YES;
    [self.view addSubview:self.bgView];

    LFItems *item = [[LFItems alloc] init];
    //图片名
    item.images = @[@"De",@"Dx",@"monkey"];
    //标题的名称
    item.titles = @[@"开心",@"快乐",@"幸福"];
    CGPoint point= CGPointMake(0, leftViewTopGap);
    self.leftView = [[LFLeftView alloc] initWithItem:item originPoint:point];
    self.leftView.delegate = self;
    [self.bgView addSubview:self.leftView];

    LFSmileViewController *smileVC = [[LFSmileViewController alloc] init];
    [self initVC:smileVC title:@"开心"];
    LFCheerViewController *cheerVC = [[LFCheerViewController alloc] init];
    [self initVC:cheerVC title:@"快乐"];
    LFHappyViewController *happyVC = [[LFHappyViewController alloc] init];
    [self initVC:happyVC title:@"幸福"];
    // 默认第一个控制器为当前控制器
    self.currentVC = self.childViewControllers[0];
    [self.bgView addSubview:self.currentVC.view];
}

/**
 *  初始化导航控制器
 *
 *  @param vc    控制器
 *  @param title 导航栏的标题
 */
- (void)initVC:(UIViewController *)vc title:(NSString *)title{
    UINavigationController *navi = [[UINavigationController alloc] initWithRootViewController:vc];
    UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithTitle:@"左菜单栏" style:UIBarButtonItemStylePlain target:self action:@selector(showLeftMenuBar)];
    vc.title = title;
    vc.navigationItem.leftBarButtonItem = leftItem;
    [self addChildViewController:navi];
    [navi.view removeFromSuperview];
}

/**
 *  导航栏左边按钮的监听事件
 */
- (void)showLeftMenuBar{
    NSLog(@"显示左菜单栏");
    [self animation];
}

/**
 *  缩小平移动画
 */
- (void)animation{
    [UIView animateWithDuration:viewAnimateDuration animations:^{
        //计算缩放的比例
        float widthScale = 1 - self.leftView.frame.size.width/(UISCREEN_WIDTH*1.0);
        float heightScale = 1 - (leftViewTopGap * 2)/(UISCREEN_HEIGHT *1.0);
        //缩放
        CGAffineTransform scaleTransForm = CGAffineTransformMakeScale(widthScale, heightScale);

        //计算平移的距离
        CGFloat distanceX = UISCREEN_WIDTH * (1-widthScale)*0.5;
        //平移(因为moveTransForm是基于scaleTransForm执行动画，所以要除以原来的比例（widthScale）)
        CGAffineTransform moveTransForm = CGAffineTransformTranslate(scaleTransForm, distanceX/widthScale, 0);

        self.currentVC.view.transform = moveTransForm;
    } completion:^(BOOL finished) {
        self.coverBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        self.coverBtn.frame = self.currentVC.view.bounds;
        self.coverBtn.backgroundColor = [UIColor clearColor];
        [self.coverBtn addTarget:self action:@selector(coverbtnAction:) forControlEvents:UIControlEventTouchUpInside];
        [self.currentVC.view addSubview:self.coverBtn];
    }];

}

/**
 *  coverBtn按钮的监听事件
 */
- (void)coverbtnAction:(UIButton *)sender{
    [self recoverAnimation];
}

/**
 *  恢复原来尺寸的动画
 */
- (void)recoverAnimation{
    [UIView animateWithDuration:viewAnimateDuration animations:^{
        self.currentVC.view.transform =CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        [self.coverBtn removeFromSuperview];
    }];
}

#pragma mark -- LFLeftViewDelegate --
- (void)exchangeControllerFromIndex:(int)index toIndex:(int)nextIndex{

    //移除旧控制器
    [self.currentVC.view removeFromSuperview];
    [self recoverAnimation];

    //显示新的控制器
    UINavigationController *willShowVC = self.childViewControllers[nextIndex];
    self.currentVC = willShowVC;
    [self.bgView addSubview:willShowVC.view];

}

@end
#import <UIKit/UIKit.h>

@interface LFSmileViewController : UIViewController

@end
#import "LFSmileViewController.h"

@interface LFSmileViewController ()

@end

@implementation LFSmileViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor redColor];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

}

@end
#import <UIKit/UIKit.h>

@interface LFCheerViewController : UIViewController

@end
#import "LFCheerViewController.h"

@interface LFCheerViewController ()

@end

@implementation LFCheerViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor orangeColor];
}

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

@end
#import <UIKit/UIKit.h>

@interface LFHappyViewController : UIViewController

@end
#import "LFHappyViewController.h"

@interface LFHappyViewController ()

@end

@implementation LFHappyViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor yellowColor];
}

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

@end
#import <Foundation/Foundation.h>

@interface LFItems : NSObject

/**
 *  images存放图片名
 */
@property (nonatomic , strong) NSArray *images;

/**
 *  titles 名称
 */
@property (nonatomic, strong) NSArray *titles;

@end
#import "LFItems.h"

@implementation LFItems

/**
 *  初始化时，给images和titles申请内存
 */
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.images = [[NSArray alloc] init];
        self.titles = [[NSArray alloc] init];
    }
    return self;
}

@end
#import <UIKit/UIKit.h>

@interface LFCustomButton : UIButton

@end
#import "LFCustomButton.h"

const float LFCustomButtonScale = 0.5;

@implementation LFCustomButton

/**
 *  重写按钮title的尺寸
 */
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(contentRect.size.width * LFCustomButtonScale, 0, contentRect.size.width *(1 - LFCustomButtonScale), contentRect.size.height);
}

/**
 *  重写按钮Image的尺寸
 */
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGRect titleFrame = CGRectMake(0, 0, contentRect.size.width * LFCustomButtonScale, contentRect.size.height);
    return titleFrame;
}

@end
#import <UIKit/UIKit.h>

@class LFItems;
@protocol LFLeftViewDelegate;

@interface LFLeftView : UIView

@property (nonatomic , weak) id<LFLeftViewDelegate> delegate;

/**
 *  初始化的方法
 *
 *  @param item  数据（title和image）
 *  @param point 在父视图的初始位置
 *
 *  @return 返回LFLeftView的对象
 */
- (LFLeftView *)initWithItem:(LFItems *)item originPoint:(CGPoint)point;

@end

@protocol LFLeftViewDelegate <NSObject>

- (void)exchangeControllerFromIndex:(int)index toIndex:(int)nextIndex;

@end
#import "LFLeftView.h"
#import "LFItems.h"
#import "LFCustomButton.h"
#import "UIImage+CreatImageWithColor.h"
#define LFCustomButtonWidth  UISCREEN_WIDTH/2.0
#define LFCustomButtonHeight  60

@interface LFLeftView()

@property (nonatomic, strong) LFItems *item;

@property (nonatomic, strong) NSMutableArray *buttons;

@property (nonatomic, strong) UIButton *currentBtn;//当前选中的按钮

@end

@implementation LFLeftView

- (LFLeftView *)initWithItem:(LFItems *)item originPoint:(CGPoint)point
{
    self = [super init];
    if (self) {
        if (item == nil) {
            return nil;
        }
        self.buttons = [NSMutableArray array];
        self.userInteractionEnabled = YES;
        self.item = item;
        self.frame = CGRectMake(point.x, point.y, LFCustomButtonWidth, LFCustomButtonHeight * self.item.titles.count);
        [self creatButtons];
    }
    return self;
}

/**
 *  创建按钮
 */
- (void)creatButtons{
    //创建button的个数
    int count = (int)self.item.titles.count;
    // 通过循环创建按钮
    for (int i = 0; i < count; i++) {
        LFCustomButton *button = [LFCustomButton buttonWithType:UIButtonTypeCustom];
        //设置选中时的背景图片
        [button setBackgroundImage:[UIImage imageWithColor:[UIColor colorWithRed:253/255.0 green:0 blue:0 alpha:0.2]] forState:UIControlStateSelected];
        //默认第一个按钮为当前选中按钮
        if (i == 0) {
            self.currentBtn = button;
            self.currentBtn.selected = YES;
        }
        button.backgroundColor = [UIColor grayColor];
        [button setTitle:self.item.titles[i] forState:0];
        if (self.item.images[i] != nil) {
            [button setImage:[UIImage imageNamed:self.item.images[i]] forState:0];
        }
        button.tag = i;
        [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];
        [self.buttons addObject:button];
    }
}

/**
 *  按钮的监听事件
 */
- (void)buttonAction:(UIButton *)sender{
    NSLog(@"从第%ld个按钮跳到第%ld个按钮",(long)self.currentBtn.tag,(long)sender.tag);
    if ([_delegate respondsToSelector:@selector(exchangeControllerFromIndex: toIndex:)]) {
        [_delegate exchangeControllerFromIndex:(int)self.currentBtn.tag toIndex:(int)sender.tag];
    }
    //取消当前按钮选中状态
    self.currentBtn.selected = NO;
    //设置当前按钮为选中的按钮
    self.currentBtn = sender;
    // 设置当前按钮为选中状态
    self.currentBtn.selected = YES;
}

- (void)layoutSubviews{
    [super layoutSubviews];
    // 设置所有子视图的尺寸
    for (int i = 0; i < self.buttons.count; i++) {
        UIButton *button = self.buttons[i];
        button.frame = CGRectMake(0, i*LFCustomButtonHeight, LFCustomButtonWidth, LFCustomButtonHeight);
    }
}

@end
#import <UIKit/UIKit.h>

@interface UIImage (CreatImageWithColor)

/**
 *  通过颜色生成该纯颜色的图片
 *
 *  @param color 生成图片的颜色
 *
 *  @return 返回图片
 */
+ (UIImage *)imageWithColor:(UIColor *)color;

/**
 *  通过颜色生成该纯颜色的图片
 *
 *  @param color  生成图片的颜色
 *  @param width  生成图片的宽
 *  @param height 生成图片的高
 *
 *  @return 返回图片
 */
+ (UIImage *)imageWithColor:(UIColor *)color imageWidth:(CGFloat)width imageWithHeight:(CGFloat)height;

@end
#import "UIImage+CreatImageWithColor.h"

@implementation UIImage (CreatImageWithColor)

+ (UIImage *)imageWithColor:(UIColor *)color{
    return [UIImage imageWithColor:color imageWidth:100 imageWithHeight:100];
}

+ (UIImage *)imageWithColor:(UIColor *)color imageWidth:(CGFloat)width imageWithHeight:(CGFloat)height{

    //开启基于位图的图形上下文
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width,height), NO, 0.0);
    // 设置画笔的颜色
    [color set];
    // 画矩形，并填充
    UIRectFill(CGRectMake(0, 0, width, height));
    //获取图片
    UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
    //关闭上下文
    UIGraphicsEndImageContext();

    return resultImage;
}

@end
#ifndef PrefixHeader_pch
#define PrefixHeader_pch

// Include any system framework and library headers here that should be included in all compilation units.
// You will also need to set the Prefix Header build setting of one or more of your targets to reference this file.

#define UISCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define UISCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

#endif /* PrefixHeader_pch */
时间： 2024-10-27 19:18:38

仿网易抽屉效果的相关文章

iOS_19_抽屉效果_仿网易

最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD

仿网易‘垃圾箱’动画效果

一说到动画,大家会说到CSS3动画,确实,本文带来一片简单的仿网易'垃圾箱'动画效果,涉及到的知识点是transform.transition transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transform: none|transform-functions; transition 属性是一个简写属性,用于设置四个过渡属性. transition: property duration timing-function delay; 首

网易新闻侧滑抽屉效果（利用父子控制器实现）

一:类似于网易的抽屉效果,启动有广告,进入主界面后,点击左上角按钮,侧滑左抽屉,点击右上角,侧滑出右抽屉.点击左抽屉按钮,对视图进行切换 . 二代码: 1:启动图展示广告界面实现:先吧启动图控制器作为窗口的根视图控制器,展示完广告消失后,再切换窗口的根视图控制器为主控制器.其中窗口指的是项目中的主窗口也就是keyWindow,主窗口主要负责接收一些键盘事件,文本框输入事件,若是键盘文本框,textView或是textfield不能输入,则考虑是不是当前窗口是否是主窗口 @interface HM

【FastDev4Android框架开发】Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50158985 本文出自:[江清清的博客] (一).前言: 仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现.要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现.不过我们今天不讲V

高仿网易4.0新UI框架

高仿网易4.0新UI框架 新的抽屉效果,修改于SliderViewController,首页滑动导航菜单随scrollView 的滑动变化效果. 下载地址:http://www.devstore.cn/code/info/500.html 运行截图:   热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较不错的新闻客户端 版权声明:本文为博主原创文章,未经博主允许不得转载.

iOS界面-仿网易新闻左侧抽屉式交互

1.介绍 用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导航栏会跟着拖动出来,新闻内容列表会拉到最右侧.像一个抽屉拉出来一样.很酷.除了网易新闻,现在好多应用都采用了这样的交互. 对手势识别不熟悉的请参考上篇: iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) 这个交互效果主要用到两个手势,一个是pan拖拽,一个是tap点击.拖拽可以把抽屉拉出来,再推回去.点击可以把抽屉推回去. 效果如下:     那么这个效果如何实现呢? 2.实现思路和步骤 思路:从实现

【IOS源码】高仿网易4.0新UI框架

高仿网易4.0新UI框架 新的抽屉效果,修改于SliderViewController,首页滑动导航菜单随scrollView 的滑动变化效果. 下载地址: http://www.dwz.cn/yKQbV 效果图  

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

本文转载至  http://blog.csdn.net/totogo2010/article/details/8637430 1.介绍 有的博友看了上篇博文iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现, 上面的UINavigation如何嵌进去.可能不少人有这样的需求,现在花了些时间把这两个效果做一下, 和大家分享交流.思路和上篇基本差不多,但是没有用到UINavigation,其实在我看来上面的返回. 评论按钮都是可以通过addsubview添加的.

第三方抽屉效果

1.  抽屉效果的基本原理应用了父子视图的层级,视图的位置改变,动画,手势操作等主要知识点.熟练掌握基础知识并灵活运用,即可实现该效果. > 父子视图的层级: 在指定层级上插入子视图 ［view insertSubView: atIndex:] > 视图位置的改变: 通过视图的frame,center属性调整 > 动画:可使用UIView或CALayer的动画,这里主要使用了UIView的动画方法 [UIView animateWithDuration:……. ] > 手势操作:主