高仿360云盘android端的ui实现,(原创)高仿360云盘android端的UI实现 – 孤~影
前些日子几大互联网巨头展开了一轮网盘空间大战。一下子从G级别提高到了T级别。以后谁的空间没有1T估计都不好意思开口了~~~
试用了一下360云盘的客户端,比较小清新(不是给360打广告~~~)。刚好UI这一块是我最不擅长的,于是萌发了练习模仿它的UI的念头~~~顺便把复习一下自定义控件的使用。
以下是完成的效果图,左边是官方的,右边是我模仿的:
还挺像的吧~~~
先介绍一个神器:UI Automator Viewer
这个SDK的tools文件夹或DDMS中都可以找到。
它可以很方便地查看UI的视图层级和UI控件的具体位置与实现。相当好用,有了它我们就不用去猜官方到底是怎么实现的、使用什么布局了。
具体实现
先从登录页面开始:
这个页面是比较简单的,从工具来看它的输入框是这么实现的:
一下子就清晰了。边框的线可以用一个“NinePath”图片来做:
关于NinePath的用法,可以查看官方教程:
接下来第就是自动定义按钮样式了。
首先,直接用一个背景图片肯定是不够的,因为这样就没有按下的效果了。也就是说我们要把一系列的图片组成起来,让它们根据控件的不同状态去选择。比如我们可以这么写:
还是比较好理解的,但有一点要注意,一般要在最后给一个没有android:state_xxx的item。这个item表示当前面的状态都不匹配时,使用这个item。
这个xml一般放在res/drawable目录下。然后我们就它设置到按钮的背景上即可。
关于style的使用:
以前我写布局的时候是比较少用style的,但这显然是不利的。因为android引入style的目的就在于,提供一个类似于HTML的编写方式,让样式可以重复使用,减少重复代码。而且对于样式的修改,只需要改动一处即可。
我个人的觉得,如果一个样式只用到一次就没必要把它抽到styles.xml文件中,因为抽出样式会大大妨碍我们阅读布局文件的。但如果这个样式被重复使用了,那就很有必要了。
比如刚刚的边框,就可以写到一个style里面:
match_parent
36dp
18dp
18dp
@drawable/login_border
center_vertical
10dp
horizontal
接下来是重点:
用到了SlidingMenu可以github上的一个开源项目:
左右切换可以用android-support-v4.jar提供的ViewPager,配合Fragment。
上边的指示器,360是这么实现的:
我估计它是把下边的蓝色指示条用一个RelativeLayout来盛放了。但这个是可以不用的。比如我的实现:
可以用一个TextView就实现,对于要让文字居中,只需要一个android:gravity=”center”即可。根据Android官方文档,减少视图的层级有利于程序的性能。
至于标识的切换,我们只需要给ViewPager设置一个OnPageChangeListener,然后在具体的方法中判断当前页面的编号,并改变相应的title颜色。
接下来我遇到的第一个麻烦,我该如何确定
的高度呢?(百度一下“gridview 高度”,发现好多人遇到这个问题)
显然我是没有办法使用“硬编码”的方式来实现的,因为android设备的屏幕分辨率太多,屏幕比例也很多奇葩的。
最后我只能通过动态计算的方式来实现:
第一个dp与px的转化,dp(也叫dip density-independent pixels),引入这个单位的原因应该是考虑到屏幕分辨率的原因,比如同一个100px * 100px的控件,在相同尺寸分辨率为320p和1080p上看,大小相差很多的。而px与dp是存在一定的比例关系的,如果分辨率为160,那么就是1px = 1dp。如果分辨率为240,就是1.5px = 1dp。具体的换算和理详细的介绍,请自选百度。
在代码在,我们只需要getResources().getDisplayMetrics().density,就可以获得这个比例系数了。
ListView其实没什么好说的,基本上都是通过的写法了,写过一次就知道怎么用了~~~
SlidingMenu的使用,github上的SlidingMenu是很容易用的,官方的Demo也相当给力。看一下再试一下,基本知道怎么用了。比如在我的工程中:
slidingMenu = new SlidingMenu(this);
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE); // 滑动方式
slidingMenu.setShadowDrawable(R.drawable.shadow_right); // 阴影
slidingMenu.setShadowWidth(30); // 阴影宽度
slidingMenu.setBehindOffset(80); // 前面的视图剩下多少
slidingMenu.setMode(SlidingMenu.RIGHT); // 左滑出不是右滑出
slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
slidingMenu.setMenu(R.layout.menu_frame); // 设置menu容器
FragmentManager fm = getSupportFragmentManager();
fm.beginTransaction().replace(R.id.menu_frame, new MenuFragment()).commit();
自定义进度条:
进度条和按钮不同,它是有两层的,使用的是layer-list这种drawable文件。它根据id来设置到不同的位置:
android:id=”@android:id/background”
android:drawable=”@drawable/progress_bar_bg”>
android:id=”@android:id/progress”
android:drawable=”@drawable/progress_bar_progress”/>
关于SlidingMenu的使用:
SlidingMenu是一个库项目,在我们的项目中引用,只需要在Properties中Add即可。
源码下载:
http://pan.baidu.com/share/link?shareid=1000621439&uk=1812042723
高仿360云盘android端的ui实现,(原创)高仿360云盘android端的UI实现 – 孤~影相关推荐
- Android端IM应用中的@人功能实现:仿微博、QQ、微信,零入侵、高可扩展
本文由"猫爸iYao"原创分享,感谢作者. 1.引言 最近有个需求:评论@人(没错,就是IM聊天或者微博APP里的@人功能),就像下图这样: ▲ 微信群聊界面里的@人功能 ▲ Q ...
- Android开发笔记(一百零九)利用网盘实现云存储
网盘存储 个人开发者往往没有自己的后台服务器,但同时又想获取app的运行信息,这就要借助于第三方的网络存储(也叫网盘.云盘.微盘等等).通过让app自动在网盘上存取文件,可以间接实现后台服务器的存储功 ...
- android layerlist bitmap,android shape类似的 另一个 高端用法:layer-list
android shape类似的 另一个 高端用法:layer-list : 简介: 将多个图片或上面两种效果按照顺序层叠起来 " <?xml version="1.0&qu ...
- android开发常用工具类、高仿客户端、附近厕所、验证码助手、相机图片处理等源码...
Android精选源码 android开发过程经常要用的工具类源码 Android类似QQ空间个人主页下拉头部放大的布局效果 Android高仿煎蛋客户端,Android完整项目 android帮你找 ...
- android开发常用工具类、高仿客户端、附近厕所、验证码助手、相机图片处理等源码
Android精选源码 android开发过程经常要用的工具类源码 Android类似QQ空间个人主页下拉头部放大的布局效果 Android高仿煎蛋客户端,Android完整项目 android帮你找 ...
- android 今日头条加载动画,高仿今日头条加载动画
01 每每浏览手机app时,发现有的效果体验不错,作为一位程序员,总想要是自己来做,怎么实现. 今天我们来模仿今日头条的加载动画. 首先我们来看一下我们这个demo最终效果,有图有真相. 高仿今日头条 ...
- Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果
转载自:http://blog.csdn.net/guolin_blog/article/details/8689140 大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我 ...
- 【小程序专栏】多种开发方式对比-跨端?低代码?原生?还是云开发?
目前"小程序"的开发与应用呈现"井喷"之势,作为小程序的鼻祖,2021年微信小程序开发者突破了300万,日活跃用户数(DAU)已经超过4.5亿,微信为开发者支付 ...
- android都图片mat_普通Android码农,该如何逆袭月薪5W的移动端架构师?
作为一名普通安卓码农,我相信大家都有一个成为移动端架构师的梦. 毕竟,安卓行业越来越内卷,这都是一个老生常谈的话题了.如今会写xml和Activity的程序员一抓一大把,如果你只是一名普通的安卓码农, ...
- ssh登录极路由后台_十八聊智能 篇一百一十:搭建个人云盘,蒲公英企业级路由G5评测:个人私有云+企业异地组网两大杀手锏_路由器...
2020-10-21 16:08:201点赞8收藏1评论 本文来自#千兆网络有什么用#征稿活动,不断提速的网络给你的生活带来了什么变化?快来参与活动,聊聊你玩转互联网,高速网上冲浪的经历!>点击 ...
最新文章
- 学习IOS开问题篇--视图的模型控件属性写在私有分类中的原因
- 用神经网络模拟分子:碱金属的氯化物
- Linux C 算法分析初步
- webrtc 渲染_webRTC 中 timing 信息的使用
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
- IO多路复用的机制:select、poll、epoll
- 阶段3 2.Spring_05.基于XML的IOC的案例1_4 注解IOC案例-把自己编写的类使用注解配置...
- 对即时通讯个人信息的一点想法
- grads插值_GrADS第6章变量和函数讲课.ppt
- Java实现pdf打印文件
- NetFlix 服务注册与发现 Eureka
- 图像的代数运算与逻辑运算——Matlab实现
- 阿里云服务器固定ip和弹性公网ip
- [Unity][2D]Sprite精灵多个多边形切割
- html js 打印 图片不显示 canvas
- 【2019-游记】中山纪念中学暑期游Day5
- 如何在安卓计算机里边隐藏游戏,安卓手机如何隐藏应用程序,来看看吧
- 简述BeanUtils中copyProperties
- 22年全国程序员1月薪资出炉,年收入 40 万以上的人为何那么多?
- 绿联USB4扩展坞,VL830拆解分析
热门文章
- 前端人脸识别框架tracking.js,解决ios浏览器调摄像头黑屏的问题,兼容pc、安卓、ios。
- OSChina 周四乱弹 —— 懦夫!你就不能找富婆吗
- 燃油经济性加速时间曲线matlab,汽车理论课后习题Matlab程序详解
- 【架构干货】京东是如何抗住今年春晚百亿次互动的?
- 业务流程图怎么画?一篇文章看懂
- IOS通用链接处理(Universal Links),apple-app-site-association
- Istio 南北向流量管理
- 安科瑞DTSD/ADL400通讯协议说明-Susie 周
- java mysql 公交车换乘查询算法_公交车路线查询系统后台数据库设计--换乘算法改进与优化...
- Android图片无损缩放,Android图片查看器(图片可挪动、缩放)