glmis项目工作日志2_增加登录界面_将drawerlayout改为挤压滑动

昨天做的这些工作,今天才找出时间整理日志。佀老师要今天向学院领导汇报项目进度,所以我昨天加了一个登录界面,仅仅是静态界面。婷姐说抽屉菜单的滑动做成qq那样的挤压效果会更好。drawerlayout默认的是拉出抽屉后抽屉覆盖主内容区域,所以我改成了挤压滑动。


登录界面

这里我偷了懒,as创建项目时会有模板供开发者选择,于是我直接使用了登录的模板,增加了一个LoginActivity,这个过程中出了个小问题,由于MainActivity使用了主题,在添加LoginActivity后我忘记在AndroidManifest给MainActivity设置主题。出现的问题如下图

这里写图片描述

这里写图片描述

添加即可

drwaerlayout改为挤压

这里写图片描述

效果如图

这里参考了 Android抽屉效果的实现(不挤压,不覆盖)

只需在MainActivity加入

    int mDrawerWidth;//抽屉全部拉出来时的宽度
    float scrollWidth;//抽屉被拉出部分的宽度

在ActionBarDrawerToggle重写onDrawerSlide方法

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this,
                drawer,
                toolbar,
                R.string.navigation_drawer_open,
                R.string.navigation_drawer_close){
            //抽屉被拉出来或者推回去
            @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
            public void onDrawerSlide(View arg0, float arg1) {
                //因为arg1的范围是0.0-1.0,是一个相对整个抽屉宽度的比例
                //所以要准换成
                scrollWidth=arg1*mDrawerWidth;
                //setScroll中的参数,正数表示向左移动,负数向右
                mFrameLayout.setScrollX((int)(-1*scrollWidth));

            }

        };

这样就实现了挤压效果。
我觉得推特的布局蛮简洁的,可以将我们的项目布局设计成类似的。好了,继续撸代码吧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你需要在 Vue2 中使用一个滑动组件库,例如 Swipe.js 或者 Swiper.js。这些库提供了滑动效果和交互的基本功能,你可以将其集成到你的登录页面中。 以下是一个使用 Swiper.js 实现滑动效果的示例: 1. 安装 Swiper.js 在终端中输入以下命令: ``` npm install swiper --save ``` 2. 在 Vue 中引入 Swiper.js 在你的 Vue 组件中添加以下代码: ``` import Swiper from 'swiper' import 'swiper/css/swiper.css' export default { mounted() { new Swiper('.swiper-container', { // Swiper 配置选项 }) } } ``` 3. 添加 HTML 模板 在你的组件中添加一个 `<div>` 元素,其类名为 `swiper-container`,并包含一个 `<div>` 元素,其类名为 `swiper-wrapper`。在 `swiper-wrapper` 中添加多个 `<div>` 元素,每个元素代表一个滑动屏幕。 ``` <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- 第一个滑动屏幕内容 --> </div> <div class="swiper-slide"> <!-- 第二个滑动屏幕内容 --> </div> <div class="swiper-slide"> <!-- 第三个滑动屏幕内容 --> </div> </div> </div> </template> ``` 4. 配置 Swiper.js 选项 在 `mounted()` 钩子函数中添加 Swiper.js 的配置选项,例如: ``` mounted() { new Swiper('.swiper-container', { // Swiper 配置选项 direction: 'vertical', // 垂直滑动 loop: false, // 不循环滑动 speed: 500, // 滑动速度为 0.5 秒 pagination: { el: '.swiper-pagination', // 分页器元素 clickable: true // 可点击分页器 }, navigation: { nextEl: '.swiper-button-next', // 下一页按钮元素 prevEl: '.swiper-button-prev' // 上一页按钮元素 } }) } ``` 5. 添加分页器和按钮 在 HTML 模板中添加分页器和按钮元素: ``` <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- 第一个滑动屏幕内容 --> </div> <div class="swiper-slide"> <!-- 第二个滑动屏幕内容 --> </div> <div class="swiper-slide"> <!-- 第三个滑动屏幕内容 --> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </template> ``` 现在你的登录界面已经具有滑动效果了!你可以根据自己的需求修改 Swiper.js 的配置选项,以实现更加丰富的滑动交互效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值