ofo 深圳 java_[Android进阶]OFO首页实现小窥
最近阅读量凄凄惨惨,难以为继,孤倍感无力,遂决定着眼于炫酷,造一些博眼球的东西以引流,比如说实现XXX页面效果,仿XXX页面效果等,各位看官如若觉得不错,还请动动手指点点赞,能转发一波就更好了,嘿呀,不说废话了,开撸。
做为这种博眼球系列的开篇,第一篇就从去年的共享经济着手仿制了,今天要实现的是OFO的首页页面效果,下面我们一起观察下OFO首页的页面构图:
从上图我们可以看出,OFO首页整体上是一个帧布局,页面底部的操作栏遮罩在最底下的MapView上,相信大家都能写出来,唯一有疑惑的地方可能是底部的实现细节,也就是下图部分:
不考虑实现细则,结合第一张图的布局边界,我们可以做如下猜测,该部分由如下五个构建组成:
1.上弧矩形
2.向下的箭头
3.圆形的扫码用车
4.用户头像
5.铃铛
那么这五个构建该怎么用Android平台的技术实现呢?
不妨将实现方案列成如下的对应表(PS:表中的基础,大家自己玩):
那么上弧矩形和圆形的扫码用车怎么整呢?好像Android控件中并没有这样的东西,该怎么实现呢?
扫码用车的实现
Shape是Android中一种XML内的图形绘制方式,可以使用Shape定义圆角矩形,矩形,圆形,椭圆等形状。Shape文件的基本格式如下:
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=""
android:useLevel="false">
android:height=""
android:width=""/>
其中根说明该文件是一个Shape资源文件,android:shape用于指定当前的形状类型,可参照下表:
用于指定Shape的宽高,用于指定shape的填充颜色,用于指定描边的相关信息,另外还有(指定圆角信息),(指定渐变信息)及(指定内部padding信息)。
扫码骑车的背景可定义为如下shape:
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
android:height="20dp"
android:width="20dp"/>
运行后效果如下:
更多shape细节大家可以自行尝试。
前三种实现都是将Shape做为整体的背景,思路很清晰,这里只贴出代码,不做赘述。
Shape+LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/scan_image_bg"
android:layout_margin="20dp"
android:orientation="vertical">
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:src="@drawable/qr_scnner"
android:layout_width="40dp"
android:layout_height="40dp"/>
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="扫码用车"
android:layout_width="wrap_content"
android:layout_height="40dp"/>
效果如下:
Shape+TextView
使用TextView的drawableTop属性,避免编写LinearLayout,降低渲染成本,代码如下:
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:background="@drawable/scan_image_bg"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textSize="20sp"
android:paddingTop="50dp"
android:drawableTop="@drawable/qr_scnner"
android:text="扫码骑车"
android:layout_width="200dp"
android:layout_height="200dp"/>
效果如下图:
上弧矩形的实现
图片
对于上弧矩形背景,我们肯定是能用.9图片解决问题的,这里不再赘述,关于在Android Studio内制作.9图片的方式,有需要的小伙伴可以留言,我下期推送。
自定义Drawable
除了使用.9图片我们也可以使用自定义Drawable来实现,仔细观察,我们可以发现上弧矩形和普通矩形最大的区别在于,有一边是弧形,而弧形我们可以通过贝塞尔曲线实现,这里我们只需要绘制一个填充颜色的path即可,如下图:
从上图我们可以看出,绘制一个上弧矩形,关键路径有四条,A'B,BC,CD',A'D',对于A'D'而言,我们可以通过AD平分线上的控制点E决定它的弯曲程度,A',D'两点坐标可以依赖于AD两点获取,那么所有问题便都迎刃而解了,代码如下:
public class ArcBackgroundDrawable extends Drawable{
private Path mPath;
@Override
public void draw(@NonNull Canvas canvas){
mPath = new Path();
//获取Drawable的边界
Rect bounds = getBounds();
//移动Path起点到A'处,其中AA'占AB总长度的十分之一
mPath.moveTo(bounds.left, bounds.top+(bounds.bottom-bounds.top)/10);
//绘制A'D',控制点在AD平分线上
mPath.quadTo(bounds.left+(bounds.right-bounds.left)/2 , bounds.top-(bounds.bottom-bounds.top)/10, bounds.right , bounds.top+(bounds.bottom-bounds.top)/10);
//绘制D'C
mPath.lineTo(bounds.right, bounds.bottom);
//绘制CB
mPath.lineTo(bounds.left, bounds.bottom);
//闭合曲线,自动绘制BA'
mPath.close();
//填充Path内为黄色
canvas.clipPath(mPath);
canvas.drawColor(Color.YELLOW);
}
@Override
public void setAlpha(int alpha){
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter){
}
@Override
public int getOpacity(){
return PixelFormat.TRANSLUCENT;
}
}
如上述步骤,我们便完成了一个上弧矩形的绘制,效果如下:
自定义View
自定义View与自定义Drawable思路一致,这里不再赘述,贴出代码即可。
public class ArcBackgroundView extends View{
private float mViewWidth;
private float mViewHeight;
private int mBackgroundColor;
private Paint mArcPaint;
private Path mPath;
public ArcBackgroundView(Context context){
super(context);
}
public ArcBackgroundView(Context context, @Nullable AttributeSet attrs){
super(context, attrs);
init(context);
}
public ArcBackgroundView(Context context, @Nullable AttributeSet attrs, int defStyleAttr){
super(context, attrs, defStyleAttr);
init(context);
}
public ArcBackgroundView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes){
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
calculatePath();
canvas.clipPath(mPath);
canvas.drawColor(mBackgroundColor);
}
private void init(Context context){
TypedArray typedArray = context.getTheme().obtainStyledAttributes(R.styleable.ArcBackgroundView);
mBackgroundColor = typedArray.getColor(R.styleable.ArcBackgroundView_backgroundColor, Color.YELLOW);
mPath = new Path();
mArcPaint = new Paint();
mArcPaint.setColor(mBackgroundColor);
}
private void calculatePath(){
mPath.moveTo(getLeft(), getTop()+(getBottom()-getTop())/10);
mPath.quadTo(getLeft()+(getRight()-getLeft())/2 , getTop()-(getBottom()-getTop())/10, getRight() , getTop()+(getBottom()-getTop())/10);
mPath.lineTo(getRight(), getBottom());
mPath.lineTo(getLeft(), getBottom());
mPath.close();
}
}
如此则解决了所有组件的绘制问题,接下来就是使用合适的layout将这五个组件组合起来了,组合后我们就实现了OFO的首页效果,运行结果如下:
其实我们还可以使用自定义ViewGroup,乃至于自定义View直接绘制这个底部操作栏,这里只是为大家提供一种辩证思路,希望对大家有所启发,Thanks for ur reading.完整代码参见:
https://github.com/tuozhaobing/CsdnDemoCode/tree/master/OFOPageDemo
ofo 深圳 java_[Android进阶]OFO首页实现小窥相关推荐
- android 仿ofo页面,[Android进阶]OFO首页实现小窥
[Android进阶]OFO首页实现小窥 个人微信公众号,欢迎大家加入. [图片上传失败...(image-81989-1544605445241)] 最近阅读量凄凄惨惨,难以为继,孤倍感无力,遂决定 ...
- [Android进阶]OFO首页实现小窥
[Android进阶]OFO首页实现小窥 个人微信公众号,欢迎大家加入. 最近阅读量凄凄惨惨,难以为继,孤倍感无力,遂决定着眼于炫酷,造一些博眼球的东西以引流,比如说实现XXX页面效果,仿XXX页面效 ...
- 仿小黄车android定位,ofo与mobike越来越像 高端版小黄车已增加定位功能
[TechWeb报道]12月5日消息,ofo在上个月的发布会上公布了与700Bike合作的消息,ofo创始人戴威在11月17日的发布会上卖了个小关子,并没有透露与700Bike的具体合作形态,不过近日 ...
- 我的Android进阶之旅------经典的大客推荐(排名不分先后)!!
今天看到一篇文章,收藏了很多大牛的博客,在这里分享一下(转载于:http://blog.csdn.net/wujxiaoz/article/details/8237096) Android中文Wiki ...
- 我的Android进阶之旅:经典的大牛博客推荐
Android中文Wiki AndroidStudio-NDK开发-移动开发团队 谦虚的天下 - 博客园 gundumw100博客 - android进阶分类文章列表 - ITeye技术网站 CSDN ...
- Android进阶之旅:经典的大牛博客推荐
Android中文Wiki AndroidStudio-NDK开发-移动开发团队 谦虚的天下 - 博客园 gundumw100博客 - android进阶分类文章列表 - ITeye技术网站 CSDN ...
- Android 进阶路线(思维导图),kotlin视频教程免费下载
2 . Android 基础 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiC8pDMN-1638256247429)(https://user-gold-cdn. ...
- apk开发用什么语言!从入门到精通的Android进阶学习笔记整理,醍醐灌顶!
行业激烈变化时,恰恰是机会最多的时候 坦白讲,许多人骨子里害怕变化和竞争. 其实大可不必. 一来,怕也没用嘛.二来,变化越快,组合要素增加了,意味着新的工作机会越多. 就像传统媒体VS新媒体. 放在1 ...
- Android进阶笔记:Messenger源码详解
Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...
- 我的Android进阶之旅------Java字符串格式化方法String.format()格式化float型时小数点变成逗号问题...
今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.好吧,又是我来维护. 好吧,先把系统语言切换到波兰语,切换到波兰语的方法查看文章 我的And ...
最新文章
- arcgis的python脚本-ArcGIS Python脚本使用
- MongoDB负载信息一目了然 阿里云HDM重磅发布MongoDB监控和诊断功
- flink入门_阿里巴巴为何选择Flink?20年大佬分11章讲解Flink从入门到实践!
- UNIX:缓冲区和重定向
- 鸿蒙是单线程还是多线程,鸿蒙 RT-Thread 两者之间究竟是不是竞争关系呢
- 我的web聊天之---序章
- poj3176 基础的动态规划算法 挑战程序设计竞赛
- Spark入门(Python版)
- 数据驱动测试之——CSV+TestNG
- [转]Qt 之 QFileSystemWatcher
- 【转】编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程
- php能从事什么岗位,ps能从事什么工作岗位
- unity开发文档_Unity以赞助人身份加入Blender开发基金
- 成为嵌入式高手,少不了这100多个软硬件开源项目
- 怎么在国内创建谷歌账号_如何在Google表格中创建下拉列表
- JAVA 中的this 是什么意思?
- eigen 在线手册
- layout-v21透明主题不生效的bug
- 小红书笔记下沉的方法和技巧
- windows检查磁盘命令
热门文章
- Ext学习笔记01 - NameSpace,类实例属性,类实例方法,类静态方法
- 普通循环和numpy速率对比
- spring中如何实现参数隐式传递_Java进阶架构之开源框架面试题系列:Spring+SpringMVC+MyBatis(含答案分享)...
- NGINX 结合 lua 动态修改upstream
- 正则表达式匹配多字符(二)
- MATLAB把型线图画静水力曲线,静水力曲线计算与绘制指导书
- error LNK2001: 无法解析的外部符号 public: void __thiscall Cmfc_DeleteFileDlg::OnBnClickedButton3(void)
- 实用的才是最好的,教你如何以MATLAB的方式实现高等应用数学问题(一)
- 线性代数及matlab实现,线性代数及其MATLAB应用
- 02-微信小程序商城 顶部广告图片(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)