React Native For Android初探-问题小结

2016-01-19

在上一篇文章中，我介绍了React Native For Android的基本使用。这篇文章重点介绍一下使用过程中碰到的问题以及解决办法。

真机运行白屏

在执行react-native run-android指令编译安装apk到真机之后，运行程序，发现程序白屏，感觉像ANR一样。
这里写图片描述
解决方法：手机设置中打开应用管理，选择我们安装的应用。然后点击权限管理，将显示悬浮框设置为允许。

白屏问题便能解决了。

more >>

React Native For Android初探

2016-01-15

介绍

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native。React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

对于不太了解React Native是什么以及Facebook为什么要创建React Native，可以先看看这篇博客。

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台–Android。

最近项目技术负责人说可能以后我们也会使用这套框架进行App开发，所以便预先学习一下，顺便做下笔记，分享给大家。

more >>

Android Hybrid开发实战之图片的交互

2016-01-14

前言

最近一直在学习Hybrid开发，如何在H5页面调用Android原生接口，并返回值，以及回调。学习了一段时间，总算是有点收获，效果也做出来了。于是写下这篇博客，记录一下。

本文中我以2个接口示例，来进行讲解。第1个示例很简单，就是调用接口，返回登录Token；第2个示例是H5调用接口，弹出Android原生界面进行图片选择，选择完之后返回选择图片的Base64格式的字符串。然后H5页面接收返回的字符串，回调进行图片显示。

Base64

首先，讲解一下Base64。图片也是一个文件，可以通过Base64返回这个文件的Base64字符串，这个字符串可以直接放到H5的img标签进行显示。

more >>

Android Notification使用小记

2016-01-11

介绍

最近的项目中，需要用到Notification。上一下效果图：
这里写图片描述

首先，学习一下关于Notification的基本知识。

状态通知栏主要涉及到2个类： Notification 和 NotificationManager 。
Notification为通知信息类，它里面对应了通知栏的各个属性。
NotificationManager ：是状态栏通知的管理类，负责发通知、清除通知等操作。
注意：NotificationManager 是一个系统Service，必须通过 getSystemService(NOTIFICATION_SERVICE)方法来获取：

1	mNotificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);

自定义Notification大致分为以下几步：

自定义布局；
使用NotificationCompat.Builder创建Notification。使用RemoteViews填充自定义布局，然后通过setContent()添加到Builder中；
使用广播，添加按钮点击事件；
NotificationManager.notify()将Notification显示到手机状态栏。

下面结合代码进行说明。

more >>

Android Hybrid开发入门：原生Android与JS的交互

2015-12-25

介绍

我们知道，现在App大致分为3类：Hybrid App、Web App、Native App。Hybrid App兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”，市面上现在也有许多Hybrid App。

最近做的项目，也会使用到Hybrid开发，之前没做过的。所以今天初步学习了一下，记录一下学习心得。

代码

首先，新建一个新的AS module，然后新建assets目录，至于src/main文件夹下。如下图：
这里写图片描述
我们再assets目录下，新建一个hello.html，编辑内容如下：

<html>
<head>
    <script>
    function hello() {
        document.getElementById("demo").innerHTML = "Hello Hybrid!";
    }
    </script>
</head>
<body>
<div>
    <a href="#" id="demo" onclick="window.demo.clickOnAndroid()">Click Me</a>
</div>
</body>
</html>

一个很简单的html页面。

more >>

Android仿QQ空间浏览图片

2015-12-08

前言

最近的项目中需要用到类似QQ空间那样的图片浏览功能，于是Google了一波，发现使用ViewPager与PhotoView即可实现。有了思路便开撸了。

代码

首先，我们定义一个用于展示原图的Activity。

public class ImageBrowseActivity extends Activity {

    // ViewPager对象
    private ViewPager mViewPager;
    // 原图url路径List
    private List<String> imagePath;
    // 当前显示的位置
    private int position;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_images_view);
        // 获取参数
        this.position = getIntent().getIntExtra("position", 0);
        this.imagePath = getIntent().getStringArrayListExtra("imagePath");
        mViewPager = (ViewPager) findViewById(R.id.images_view);
        // 设置左右两列缓存的数目
        mViewPager.setOffscreenPageLimit(2);
        // 添加Adapter
        PagerAdapter adapter = new ImageBrowseAdapter(this, imagePath);
        mViewPager.setAdapter(adapter);
        mViewPager.setCurrentItem(position);
    }
}

more >>

Android Studio中使用.9（Nine Patch）图

2015-11-23

本文主要结合Android Studio讲述一下.9图片的原理与使用。

原理

在Android的设计过程中，为了适配不同的手机分辨率，图片大多需要拉伸或者压缩，这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式，它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸，哪些区域不可以拉伸设定好，同时可以把显示内容区域的位置标示清楚。

.9图片相比普通图片，在四条边会多出1px的空隙，我们在这1px的空隙中画上黑线，即可控制图片怎么拉伸，内容区域的位置。
这里写图片描述
讲解一下四条边的作用：

Top，图中1所示，是控制图片可横向拉伸的区域。
Left，图中2所示，是控制图片可纵向拉伸的区域。
Right&Botton，图中的3与4，结合起来控制内容显示的区域。

more >>

Android仿QQ实现ListView滑动删除

2015-11-14

前言

手机QQ应该是很普及的App了，看到QQ消息栏对话框列表的每个子项左滑的时候会弹出删除、置顶图标。like this：
这里写图片描述
于是突发奇想：想要自己实现一个这样的效果。
很显然的，这样的效果实现要依赖Android的事件分发机制，于是我先从Android事件分发入手。对于事件分发还不太熟悉的朋友可以参考Android事件分发机制学习。
下面开工！

more >>

Android事件分发机制学习小记

2015-11-14

Android事件分发机制有三类：Activity、View、ViewGroup，其调用顺序是Activity->ViewGroup->View，考虑到实际开发中Activity的事件分发很少用到，这里便不作赘述。想要了解的可自行百度、谷歌。
下面，我从View的事件分发开始。

View的事件分发

我们知道，任何触摸事件都是从dispatchTouchEvent函数开始。在View的dispatchTouchEvent函数中，会看到这样的代码块：

...
if (onFilterTouchEventForSecurity(event)) {
            //noinspection SimplifiableIfStatement
            ListenerInfo li = mListenerInfo;
            if (li != null && li.mOnTouchListener != null
                    && (mViewFlags & ENABLED_MASK) == ENABLED
                    && li.mOnTouchListener.onTouch(this, event)) {
                result = true;
            }

            if (!result && onTouchEvent(event)) {
                result = true;
            }
        }
...

说明View若要进行事件分发，那么会优先分发给onTouch()，若onTouch()返回true，则直接返回true，不会进入到onTouchEvent()中。否则，进入到onTouchEvent()。

more >>

Android Studio使用Genymotion小记

2015-11-05

在学习Android Studio的过程中，看到网上很多人都推荐使用Genymotion插件，在某些无法使用真机的情况下，这个模拟器插件能大大加快模拟器的运行速度。而且由于没有Android 5.0以上的真机，使用Genymotion可以运行Android 5.0以上的模拟器，看看Meterial Design的设计，所谓一举两得，于是便开始了一波Genymotion的学习。

安装Genymotion

安装Genymotion。进入到官网，下载Genymotion，没有安装Virtual Box的，选择带有Virtual Box的安装文件进行下载。下载成功后，安装，基本都是下一步，下一步。

Android Studio使用Genymotion插件

Android Studio安装Genymotion插件。安装过程很简单，网上一搜一大把，就不赘述了。
将Genymotion路径配置到Android Studio中。
启动Genymotion插件，选择要配置的机型，系统，点击Next，等待下载，安装，部署结束之后，启动模拟器即可进行使用了。

more >>