QQ空间HD(6)-实现自定义的选项卡切换效果

DJTabbarButton.m

#import "DJTabbarButton.h"

@implementation DJTabbarButton

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {
        [self setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"] forState:UIControlStateDisabled];
        self.imageView.contentMode = UIViewContentModeCenter;

        /* 设置当按钮不可用或高亮状态时不要修改图片 */
        self.adjustsImageWhenDisabled = NO;
        self.adjustsImageWhenHighlighted = NO;
//        self.backgroundColor = [UIColor greenColor];
    }
    return self;
}

- (void)layoutSubviews {

    [super layoutSubviews];

    if (DJLandscape) { // 横屏

        /* imageView */
        self.imageView.x = 0;
        self.imageView.y = 0;
        self.imageView.width = self.width * 0.4;
        self.imageView.height = self.height;

        /* titleLabel */
        self.titleLabel.hidden = NO;
        self.titleLabel.x = self.imageView.width;
        self.titleLabel.y = 0;
        self.titleLabel.width = self.width - self.imageView.width;
        self.titleLabel.height = self.height;

    } else { // 竖屏

        /* imageView */
        self.imageView.frame = self.bounds;
        /* titleLabel */
        self.titleLabel.hidden = YES;
    }
}

/* 设置按钮无高亮状态 */
- (void)setHighlighted:(BOOL)highlighted {

}

@end

DJHomeViewController.m

// 添加子控制器
- (void)setupChildViewControllers {

    for (int i = 0; i < 6; i++) {
        UIViewController *childVC = [[UIViewController alloc] init];
        childVC.view.backgroundColor = DJRandomColor;
        [self addChildViewController:childVC];
    }
}

- (void)replaceCurrentShowingController:(DJTabBarIndex)index {

    // 将当前显示的子控制器的View从界面上移除
    [self.showingChildVc.view removeFromSuperview];
    UIViewController *newShowingVc;
    switch (index) {
        case DJTabBarIndexAllStatus: // 全部动态
            newShowingVc = self.childViewControllers[0];
            break;
        case DJTabBarIndexWithMe: // 与我相关
             newShowingVc = self.childViewControllers[1];
            break;
        case DJTabBarIndexPhotoWall: // 照片樯
             newShowingVc = self.childViewControllers[2];
            break;
        case DJTabBarIndexPhotoFrame: // 电子相框
             newShowingVc = self.childViewControllers[3];
            break;
        case DJTabBarIndexFriend: // 好友
             newShowingVc = self.childViewControllers[4];
            break;
        case DJTabBarIndexMore: // 更多
             newShowingVc = self.childViewControllers[5];
            break;
    }

    newShowingVc.view.x = self.menuView.width;
    newShowingVc.view.y = 0;
    newShowingVc.view.width = self.view.width - self.menuView.width;
    newShowingVc.view.height = self.view.height;
    [self.view addSubview:newShowingVc.view];
    self.showingChildVc = newShowingVc;

}

- (void)updateSubViewFrameInLandscape {

    /* menuView */
    self.menuView.width = DJMenuViewLW;
    self.menuView.height = DJScreenLH;
    self.menuView.x = 0;
    self.menuView.y = 0;

    /* showingChildVc */
    self.showingChildVc.view.x = self.menuView.width;
    self.showingChildVc.view.y = 0;
    self.showingChildVc.view.width = DJScreenLW - self.menuView.width;
    self.showingChildVc.view.height = DJScreenLH;

}

- (void)updateSubViewsViewFrameInPortrait {

    /* menuView */
    self.menuView.width = DJMenuViewPW;
    self.menuView.height = DJScrrenPH;
    self.menuView.x = 0;
    self.menuView.y = 0;

    /* showingChildVc */
    self.showingChildVc.view.x = self.menuView.width;
    self.showingChildVc.view.y = 0;
    self.showingChildVc.view.width = DJScreenPW - self.menuView.width;
    self.showingChildVc.view.height = DJScrrenPH;

}
// 当屏幕方向将会发生改变时调用此方法
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {

    if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) { // 横屏
        [self updateSubViewFrameInLandscape];
    } else { // 竖屏
        [self updateSubViewsViewFrameInPortrait];
    }

    // 设置当前子控制器的View不拉伸
    self.showingChildVc.view.autoresizingMask = UIViewAutoresizingNone;

}

最终效果:

时间: 2024-10-11 05:48:03

QQ空间HD(6)-实现自定义的选项卡切换效果的相关文章

用html+css+js实现选项卡切换效果

文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3居260万 二环稀缺2居

vue实现选项卡切换效果

效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta charset="UTF-8"> <base target="_blank"> <title>vue实现选项卡切换效果</title> <script src="js/jquery-1.8.2.min.js"&g

vue实现tab选项卡切换效果

tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div class="tab"> <span @click="cur = 0">首页</span> <span @click="cur = 1">广场</span> <span @click=&qu

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

用js实现选项卡切换效果

这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li></ul><div class="tab_box"> <div> 275万购昌平邻铁三居

js选项卡切换效果

选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab选项卡</title> 6 <style> 7 *{margin:0;padding:0;font-size

QQ空间HD(5)-添加左侧菜单栏内容

DJIconView.m #import "DJIconView.h" @implementation DJIconView - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // self.backgroundColor = [UIColor redColor]; self.imageView.layer.cornerRadius = 5; [self set