无设计开发漂亮App

作为一个纯技术码农,不会设计,也不会PS。开发App只能利用系统控件,界面看起来各种土气。这篇文章说说怎么在没有设计师帮助的情况下开发漂亮App。

Material design

img

Google 在设计上第一次发布最全面的设计指南。可以看成是 UI 上的设计模式,是一个UI框架。Material design 把框架搭建好了,往里面填内容可以了。也可以看这个中文同步翻译版。现在基本上推崇的是扁平化,街面上表现的基本上纯色块,不需要借助PS软件,代码就可以搞定了。

另外,这里有个 Material design 调色板,可以选定你的App的主色调,然后自动生成一系列颜色的颜色值。

Material design icon

Google想的更周到,怕你不会画icon,提供了全套的官方 Material design 风格的 icon,基本上你需要的常用icon都能在这里找到。提供 Android 版本 icon(hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi)和 iOS 版本 icon(@1x、@2x和@3x),还有网页 svg 版本。可以在这里打包下载,也可以在这里预览一下所有的icon。

这里有一个 Android Studio 插件,让你方便把MD图标加入到你的项目中。

Android Bootstrap

ab

Bootstrap 本来是 Twitter 发布的一个开源的CSS前端框架,Bearded-Hen 把它移植到了 Android 上了,目前提供了Bootstrap风格的 Button 和 Edite text 和 ImageView。还有特别值得一提的是 font awesome textsFont Awesome 是一个开源的 icon 化的字体,目前包含 479 个 icon,这些 icon 实际上是字体,这意味着你可以想处理文字一样,随意设置 icon 的大小和颜色。从上面的图片中你就能看出来。上面的效果全部是代码实现,不需要任何PS设计。

FancyButtons

fb

FancyButtons和上面的 Android Bootstrap 中的 button 类似,不过这里提供更多的定制化空间。

Android-Iconics

这是一个可以让你在你的项目中使用几乎任何字体图标的库。默认包含 FontAwesome 和 Material Design Icons 还包含Meteocons的插件。你甚至可以添加任何你自定义的字体图标 (typeface)。

screenshot

总之,有这么多的工具帮忙,开发出漂亮App又更加容易了。

Read more

Android 上的低功耗蓝牙实践

这是我在 Droidcon Beijing 2016 和 GDG Devfest 2016 上做的分享,以下是正文: Slide 01 我今天分享的主题是 Android 上低功耗蓝牙的实践。这个主题比较小众。我在过去的一年多的时间里,主要是在做低功耗蓝牙相关的开发。接触过程中发现,BLE 的开发和通常的 Android APP 的开发有点不一样,这里需要访问硬件资源,而且涉及到一些协议相关的内容,而且这方面的资料也比较少。今天我从 Android 开发者的角度,来分享一下低功耗蓝牙开发实践。 Slide 02 今天分享的内容,主要包含如下几个部分:首先对蓝牙和低功耗蓝牙做一个简单的介绍;然后介绍 Android 上对低功耗蓝牙的支持;再介绍一下在 Android 平台上可以开发哪些低功耗蓝牙应用;然后是,开发过程中,可以帮助我们调试的工具;最后,总结一下所谓的 “最佳实践”,低功耗蓝牙开发的一些小经验。 Slide

By Race604

React Native 触摸事件处理详解

触控是移动设备的核心功能,也移动应用交互的基础,Android 和 iOS 各自都有完善的触摸事件处理机制。React Native(以下简称 RN)提供了一套统一的处理方式,能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。 1. RN 基本触摸组件 RN 的组件除了 Text,其他组件默认是不支持点击事件,也不能响应基本触摸事件,所以 RN 中提供了几个直接处理响应事件的组件,基本上能够满大部分的点击处理需求TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 和 TouchableWithoutFeedback。因为这几个组件的功能和使用方法基本类似,只是 Touch 的反馈效果不一样,所以一般我们用 Touchable** 代替。Touchable** 有如下几个回调方法: * onPressIn:点击开始; * onPressOut:点击结束或者离开; * onPress:单击事件回调; * onLongPress:长按事件回调。 它们的基本使用方法如下,

By Race604

React Native 中 ScrollView 性能探究

1 基本使用 ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一。理解 ScrollView 的原理,有利于写出高性能的 RN 应用。 ScrollView 的基本使用也非常简单,如下: <ScrollView> <Child1 /> <Child2 /> ... </ScrollView> 它和 View 组件一样,可以包含一个或者多个子组件。对子组件的布局可以是垂直或者水平的,通过属性 horizontal=true/false 来控制。甚至还默认支持“下拉”刷新操作。另外还有一个特别赞的特性,超出屏幕的 View 会自动被移除,从而节省资源和提高绘制效率。我们来看如下一个例子: class

By Race604

30 天入门 Android 开发, Google 与你一起圆梦

经常会有朋友让我推荐 Android 开发入门的教程或者视频,我一直是推荐看官方的教程。大部分人或者觉得比较迷茫,或者觉得坚持不下去。这次推荐这个《30 天入门 Android 开发》是 Google 亲自发起的免费教学,以学习小组方式,大家可以一起学习和交流。一个好的开始,是成功的一半。让 Google 工程师带领你一起进入多彩的 Android 开发大门。点击这里 报名。 Android 设备已经随处可见,你想尝试一下在 Android 设备上的开发和创新吗?快来跟随 Google 的步伐,一起学习 Android 入门课吧! Google Study Jams 活动介绍 Study Jams 是一个学习 Google 在线课程的活动。该活动由学员自主发起课程学习小组,带领小组成员入门 Android 开发,最终将

By Race604