Allen 专栏-移动互联网

android canvas 绘图笔记

android canvas 绘图笔记

1.PathEffect类
画虚线

 Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setStyle(Paint.Style.STROKE);
        p.setColor(Color.WHITE);
        p.setStrokeWidth(1);
        PathEffect effect = new DashPathEffect(new float[]{getDip2px(4), getDip2px(4), getDip2px(4), getDip2px(4)}, 1);
        p.setPathEffect(effect);
        p.setAlpha(125);//透明度50%
        p.setColor(getResources().getColor(R.color.line_chart_dash_line));
        canvas.drawLine(0, ScreenHeight / 2, ScreenWidth, ScreenHeight / 2, p);
        canvas.drawLine(ScreenWidth / 2, 0, ScreenWidth / 2, getBottom() - getDip2px(25), p);

2.android onMeasure

3.android BlurMaskFilter

***Android MaskFilter的基本使用:***

MaskFilter类可以为Paint分配边缘效果。
        对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:

        BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。
        EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

        要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:

Android MaskFilter的基本使用:

MaskFilter类可以为Paint分配边缘效果。
    对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:

    BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。
    EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

    要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:

关于设置硬件加速不能用的方法

LAYER_TYPE_NONE

LAYER_TYPE_SOFTWARE

LAYER_TYPE_HARDWARE

View级别

您可以在运行时用以下的代码关闭单个view的硬件加速:

myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
注:您不能在view级别开启硬件加速
为什么需要这么多级别的控制?
很明显,硬件加速能够带来性能提升,android为什么要弄出这么多级别的控制,
而不是默认就是全部硬件加速呢?原因是并非所有的2D绘图操作支持硬件加速,
如果您的程序中使用了自定义视图或者绘图调用,程序可能会工作不正常。
如果您的程序中只是用了标准的视图和Drawable,放心大胆的开启硬件加速吧!
具体是哪些绘图操作不支持硬件加速呢?以下是已知不支持硬件加速的绘图操作:

Canvas
clipPath()
clipRegion()
drawPicture()
drawPosText()
drawTextOnPath()
drawVertices()
Paint
setLinearText()
setMaskFilter()
setRasterizer()

另外还有一些绘图操作,开启和不开启硬件加速,效果不一样:

Canvas
clipRect(): XOR, Difference和ReverseDifference裁剪模式被忽略,3D变换将不会应用在裁剪的矩形上。

drawBitmapMesh():colors数组被忽略

drawLines():反锯齿不支持

setDrawFilter():可以设置,但无效果

Paint

setDither(): 忽略
setFilterBitmap():过滤永远开启
setShadowLayer():只能用在文本上
ComposeShader
ComposeShader
只能包含不同类型的shader (比如一个BitmapShader和一个LinearGradient,但不能是两个BitmapShader实例)

ComposeShader不能包含ComposeShader

如果应用程序受到这些影响,您可以在受影响的部分调用setLayerType(View.LAYER_TYPE_SOFTWARE, null),这样在其它地方仍然可以享受硬件加速带来的好处

2.Paint(画笔)类

   要绘制图形,首先得调整画笔,按照自己的开发需要设置画笔的相关属性。Pain类的常用属性设置方法如下:

  setAntiAlias();            //设置画笔的锯齿效果

  setColor();                 //设置画笔的颜色

  setARGB();                 //设置画笔的A、R、G、B值

  setAlpha();                 //设置画笔的Alpha值

  setTextSize();             //设置字体的尺寸

  setStyle();                  //设置画笔的风格(空心或实心)

  setStrokeWidth();        //设置空心边框的宽度

  getColor();                  //获取画笔的颜色
  

 3.Canvas(画布)类

  画笔属性设置好之后,还需要将图像绘制到画布上。Canvas类可以用来实现各种图形的绘制工作,如绘制直线、矩形、圆等等。Canvas绘制常用图形的方法如下:

  绘制直线:canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);

  绘制矩形:canvas.drawRect(float left, float top, float right, float bottom, Paint paint);

  绘制圆形:canvas.drawCircle(float cx, float cy, float radius, Paint paint);

  绘制字符:canvas.drawText(String text, float x, float y, Paint paint);

  绘制图形:canvas.drawBirmap(Bitmap bitmap, float left, float top, Paint paint);

Shader 渐变色设置

 //设置渐变器后绘制
        //为Paint设置渐变器
        Shader mShasder = new LinearGradient(0, 0, 40, 60, new int[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}, null, Shader.TileMode.REPEAT);
        mPaint.setShader(mShasder);
        //设置阴影
        mPaint.setShadowLayer(45, 10, 10, Color.GRAY);

Paint.Style区别

Paint.Style.FILL    :填充内部
Paint.Style.FILL_AND_STROKE  :填充内部和描边
Paint.Style.STROKE  :仅描边

Region 判断是否在路径范围内

“onTouchEvent 在自定义View 中”

@Override  
public boolean onTouchEvent(MotionEvent event) {  
    switch (event.getAction()) {  
    case MotionEvent.ACTION_DOWN:  
        // 按下  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();   //该方法会调用onDraw方法,重新绘图  
        break;  
    case MotionEvent.ACTION_MOVE:  
        // 移动  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();  
        break;  
    case MotionEvent.ACTION_UP:  
        // 抬起  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();  
        break;  
    }  
      
    /* 
     * 备注1:此处一定要将return super.onTouchEvent(event)修改为return true,原因是: 
     * 1)父类的onTouchEvent(event)方法可能没有做任何处理,但是返回了false。 
     * 2)一旦返回false,在该方法中再也不会收到MotionEvent.ACTION_MOVE及MotionEvent.ACTION_UP事件。 
     */  
    //return super.onTouchEvent(event);  
    return true;    
}  

RectF

  • Android Rect和RectF的区别*
    1、精度不一样,Rect是使用int类型作为数值,RectF是使用float类型作为数值
    2、两个类型提供的方法也不是完全一致
    
    Rect:
    equals(Object obj)   (for some reason it as it's own implementation of equals)
    exactCenterX()
    exactCenterY()
    flattenToString()
    toShortString()
    unflattenFromString(String str)
    
    RectF:
    round(Rect dst)
    roundOut(Rect dst)
    set(Rect src)
    

Shader

//设置渐变器后绘制
        //为Paint设置渐变器
        Shader mShasder = new LinearGradient(0, 0, 40, 60, new int[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}, null, Shader.TileMode.REPEAT);
        mPaint.setShader(mShasder);
        //设置阴影
        mPaint.setShadowLayer(45, 10, 10, Color.GRAY);
Paint p=new Paint();
LinearGradient lg=new LinearGradien(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);  
参数一为渐变起初点坐标x位置,
参数二为y轴位置,
参数三和四分辨对应渐变终点,
最后参数为平铺方式,这里设置为镜像
Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下: mPaint.setShader(lg);

canvas.drawCicle(0,0,200,mPaint); //参数3为画圆的半径,类型为float型。
 
 
它除了定义开始颜色和结束颜色以外还可以定义,多种颜色组成的分段渐变效果

LinearGradient shader = new LinearGradient(0, 0, endX, endY, new int[]{startColor, midleColor, endColor},new float[]{0 , 0.5f, 1.0f}, TileMode.MIRROR);

其中参数new int[]{startColor, midleColor, endColor}是参与渐变效果的颜色集合,

其中参数new float[]{0 , 0.5f, 1.0f}是定义每个颜色处于的渐变相对位置,

这个参数可以为null,如果为null表示所有的颜色按顺序均匀的分布

LinearGradient有两个构造函数;

public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)

参数:
float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int[] colors:颜色 的int 数组

float[] positions: 相对位置的颜色数组,可为null,  若为null,可为null,颜色沿渐变线均匀分布

Shader.TileMode tile: 渲染器平铺模式

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)
float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int color0: 起始渐变色

int color1: 结束渐变色

Shader.TileMode tile: 渲染器平铺模式


Android 透明度渐变

android 代码截屏

 /**
     * Returns the bitmap that represents the chart.
     *
     * @return
     */
    public Bitmap getChartBitmap() {
        // Define a bitmap with the same size as the view
        Bitmap returnedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);
        // Bind a canvas to it
        Canvas canvas = new Canvas(returnedBitmap);
        // Get the view's background
        Drawable bgDrawable = getBackground();
        if (bgDrawable != null)
            // has background drawable, then draw it on the canvas
            bgDrawable.draw(canvas);
        else
            // does not have background drawable, then draw white background on
            // the canvas
            canvas.drawColor(Color.WHITE);
        // draw the view on the canvas
        draw(canvas);
        // return the bitmap
        return returnedBitmap;
    }
 /**
     * Returns the bitmap that represents the chart.
     *
     * @return
     */
    public Bitmap getChartBitmap() {
        // Define a bitmap with the same size as the view
        Bitmap returnedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);
        // Bind a canvas to it
        Canvas canvas = new Canvas(returnedBitmap);
        // Get the view's background
        Drawable bgDrawable = getBackground();
        if (bgDrawable != null)
            // has background drawable, then draw it on the canvas
            bgDrawable.draw(canvas);
        else
            // does not have background drawable, then draw white background on
            // the canvas
            canvas.drawColor(Color.WHITE);
        // draw the view on the canvas
        draw(canvas);
        // return the bitmap
        return returnedBitmap;
    }

对canvas的translate()方法的理解

canvas.save();//锁画布(为了保存之前的画布状态)
        canvas.translate(10, 10);//把当前画布的原点移到(10,10),后面的操作都以(10,10)作为参照点,默认原点为(0,0)
        drawScene(canvas);
        canvas.restore();//把当前画布返回(调整)到上一个save()状态之前

        canvas.save();//锁画布(为了保存之前的画布状态)
        canvas.translate(160, 10);//把当前画布的原点移到(160,10),后面的操作都以(160,10)作为参照点,
        canvas.clipRect(10, 10, 90, 90);//这里的真实坐标为左上(170,170)、右下(250,250)
        canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
        drawScene(canvas);
        canvas.restore();

图片镜像

public Bitmap convertBmp(Bitmap bmp) {  
        int w = bmp.getWidth();  
        int h = bmp.getHeight();  
  
        Matrix matrix = new Matrix();  
        matrix.postScale(-1, 1); // 镜像水平翻转  
        Bitmap convertBmp = Bitmap.createBitmap(bmp, 0, 0, w, h, matrix, true);  
          
        return convertBmp;  
    }  

Android 防内存泄露handler

Android 防内存泄露handler

1.使用弱引用 WeakRefHander

	/**
	 * 作者: allen on 15/11/24.感谢开源作者https://coding.net/u/coding/p/Coding-Android/git
	 */
	
	/**
	 * 弱引用 handler 防止内存泄露
	 */
	public class WeakRefHander extends Handler {
	
	    private final WeakReference<Handler.Callback> mRef;
	    private final int mLoopTime;
	    private int NO_LOOP = -1;
	    private int what =0;
	
	    /**
	     * 循环
	     *
	     * @param loopAction
	     * @param loopTime
	     */
	    public WeakRefHander(Handler.Callback loopAction, int loopTime) {
	        super();
	        this.mRef = new WeakReference<>(loopAction);
	        this.mLoopTime = loopTime;
	
	    }
	
	    /**
	     * 不循环
	     *
	     * @param loopAction
	     */
	    public WeakRefHander(Handler.Callback loopAction) {
	        super();
	        mRef = new WeakReference<>(loopAction);
	        mLoopTime = NO_LOOP;
	    }
	
	    @Override
	    public void handleMessage(Message msg) {
	        Handler.Callback action = mRef.get();
	        if (action != null) {
	            action.handleMessage(msg);
	            if (mLoopTime != NO_LOOP) {
	                sendEmptyMessageDelayed(what, mLoopTime);
	            }
	        }
	    }
	
	    public void start() {
	        removeMessages(0);
	        sendEmptyMessageDelayed(0, 0);
	    }
	
	    public void start(int what, long delay) {
	        this.what = what;
	        removeMessages(what);
	        sendEmptyMessageDelayed(what, delay);
	    }
	
	    public void stop() {
	        removeMessages(what);
	    }
	
	    public void clear() {
	        removeMessages(what);
	        mRef.clear();
		    }
		}

2. 实现 Activity implements WeakRefHander.Callback

3. 在handleMessage处理业务逻辑

示例代码:

    public class MainActivity extends AppCompatActivity implements WeakRefHander.Callback {
        private WeakRefHander weakRefHander;
        private static final int HANDLER_MESSAGE_START = 1001;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            weakRefHander = new WeakRefHander(this, 1);
            weakRefHander.start(HANDLER_MESSAGE_START, 1000 * 30);
    }

    @Override
    public boolean handleMessage(Message msg) {
        switch (msg.what) {
            case HANDLER_MESSAGE_START:
                //Todo 处理业务逻辑
                break;
            default:
                break;
        }
        return true;
    }


    @Override
    public void onResume() {
        super.onResume();
        weakRefHander.start();
    }

    @Override
    public void onPause() {
        weakRefHander.stop();
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        weakRefHander.clear();
        super.onDestroy();
    }
    }

-Github示例参考代码

参考作者:-Coding-Android作者

AndroidCustomView(投票 ,排名对比图)

Android Arsenal

##Github 地址前往

简介(投票 ,排名对比图)


  1. 一个简单的自定义 View 可高度定制
  2. 支持设置替换 支持 ,和反对的图标
  3. 支持自定义线宽和支持反对线的字体颜色

设置比分值

效果图

Dependency

Add dependency in your app module

dependencies {
	compile 'com.allen.comparsechart:comparsechart:1.0.0'
}

Maven

<dependency>
  <groupId>com.allen.comparsechart</groupId>
  <artifactId>comparsechart</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

Usage

Java

    <com.allen.comparsechart.CompareIndicator
            android:id="@+id/CompareIndicator3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            app:approve_line_color="@android:color/holo_green_light"
            app:approve_res="@mipmap/approve"
            app:oppose_line_color="@android:color/holo_red_dark"
            app:opposite_res="@mipmap/opposite"
            />
CompareIndicator1.updateView(10,90);

股票走势图

Apk 下载地址

License

Copyright 2016 AllenCoder

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Android一键发布内测平台插件

Pre.im 插件使用说明

前言

在 Android studio 中通过引入 gradle 脚本可以方便集成一款优秀的插件,平时,我们喜欢将自己的应用上传到免费的内测平台进行下载分发,但是每次打包一个版本都需要重复上传,看完这篇,你将可以方便简单的集成一个插件,省去每次重复上传的烦恼。目前该插件已经开源 ,有兴趣的朋友可以到github看看:https://github.com/AllenCoder/UploaderPlugin
Pre.im官网链接,一款内测分发平台

在根目录下的build.gralde文件的depandencies(buildscript部分)中添加:

 dependencies {
        classpath 'com.pre.im:preuploader:1.0.2'
    }

在module的build.gradle文件的顶部添加:

apply plugin: 'com.pre.im'

pre {
    user_key='<your user>'
    password='<下载密码 (传空字符串或不传则不设置密码)>'
    update_notify="<向内测成员发布新版通知 (1:开启)>"
}

<Project>/build.gradle文件如下:

buildscript {
        repositories {
            jcenter()
        }
        dependencies {
            ...
            classpath 'com.pre.im:preuploader:1.0.2'
        }
    }}

<Project>/<Module>/build.gradle文件如下:

apply plugin: 'com.pre.im'
pre {
    user_key='a33333333333rrrr4ddeeeeeeedd'
    password='1222222'
    update_notify="1"
}

项目应用了Pre插件之后,插件默认是开启的,会在工程Gradle projects生成以下两个task:
Paste_Image.png

可以直接点击执行或者在命令行输入以下命令:

gradle uploadReleasePreApkFile

上传成功之后就可以在内测平台看到版本信息:

Paste_Image.png

Thanks Bugly,
BuglyDevTeam,
IT_xiao小巫

License

Copyright 2016 AllenCoder

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Android 项目中嵌入 ReactNative 模块

ReactNative的发展已经进入了很多开发者视野,作为一名原生开发者更是对 RN 充满了无限的好奇和期待,
本节将详细讲述如何将一个原生的 Android App 项目嵌入最新的 RN 模块

1. 准备开始

  1. 一个已有的 Android 原生项目
    1. 已经配置好的原生 Android 开发环境和 node.js已经 RN 环境
    2. 改造之后的流程图
      图片

2.开始改造

  1. 在原生 Android 项目的在app/build.gradle文件中,添加React Native依赖:
compile"com.facebook.react:react-native:+
  1. 加入.so 库
ndk {
    abiFilters "armeabi-v7a", "x86"
}   
  1. 在工程目录下找到工程的 build.gradle文件中,添加 maven依赖
allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}
  1. 在 app 目录里添加需要的权限
 <uses-permission android:name="android.permission.INTERNET"/>
 /**设置调试 的权限**/
 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
4.添加 FaceBook 的 ReactNative 调试的 activity
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

2. 编写原生的 ReactNative 模块 ,废话不多说,直接上代码

package com.allen.reactapp;

import android.app.Activity;
import android.os.Bundle;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

/**
 * 作者: allen on 16/7/31.
 */
public  class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                /**
                 * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
                 * 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因
                 */
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "myreactactivity", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }


}


 

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

========================================================================

========================================================================

3. 下面配置工程项目的 RN开发环境

  1. 先后顺序依次执行一下命令
 $ npm init

该命令会创建一个package.json文件,并且提示我们输入一些信息,默认不输入即可,不过name必须要为全英文小写哦,

##然后再依次去执行以下命令

 $ npm install --save react
 $ npm install --save react-native
 $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

创建完成后,去工程目录下修改 package.json
在scripts标签那边添加如下代码:

"start":"node_modules/react-native/packager/packager.sh"

package_json

3. 工程目录下创建 index.android.js 由于是测试代码直接 Copy FaceBook 的源码



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生项目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myreactactivity', () => AwesomeProject);


注意:此处需要修改注册的入口 保持一致,我的是 my_react_activity

4.检查以上所有步骤,有无遗漏,如果正常,接下来就可以顺利的运行你的混合 APP 了,如果还不行,你需要检查你的姿势是否正确?

运行你的 APP

  1. 在项目的工程路径运行以下命令来启动你的开发服务器
react-native start

或者执行

npm start
  1. android studio 调试你的 APP
    1. 演示效果图

===================

错误解决:

  Process: com.allen.reactapp, PID: 20469
java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:911)
at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:100)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:197)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:180)
at android.os.AsyncTask$2.call(AsyncTask.java:295)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:234)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:882)
    ... 9 more
Caused by: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices

解决办法:
.setUseDeveloperSupport(true) 调试模式下,建议直接写成 true 吧,

签名打包混合 APP
1. 将 js 文件存入 bundle 一起打包
执行命令:

curl -k "http://localhost:8081/index.android.bundle"> reactapp/src/main/assets/index.android.bundle

执行完命令成功,在 assets目录应该看到 index.android.bundle文件

Android studio 执行打包过程,作为一名 Android 老司机我就不再具体描述了

原 Android 移植 React Native 项目地址

Recyclerview 常见问题处理(持续更新维护中…)

Recyclerview 常见问题处理(持续更新维护中…)

注:该博客代码和相关Demo均已上传https://github.com/AllenCoder/Recyclerview

##1. RecyclerView滚动定位

经常在开发中,需要将Recyclerview滑动到某个位置,然后定位这一个具体项,将他显示到顶部,用RecyclerView的默认移动的方法并不能实现这一点
但是,利用LinearLayoutManager,可以很方便的实现这一点。
不多说,直接上代码


 int positon ="你指定滚动的位置";
 layoutManager.scrollToPositionWithOffset(positon,0);
 layoutManager.setStackFromEnd(true);

演示动画

##2. Recyclerview 动态调整View的宽高

假如你有 10个item ,产品偶尔会让你一屏幕适配6个 ,剩余的可以滚动
下面介绍两种情况下的处理方案,一种是水平布局,一种是垂直布局
网易效果

###方便的处理办法1:修改适配器


public class HorizationAdapter extends BaseQuickAdapter<News,BaseViewHolder> {
    private LayoutInflater layoutInflater;
    private int N ;


    public HorizationAdapter(Context mContex, int N) {
        super(item, DataServer.getNews());
        this.N =N;
        layoutInflater =LayoutInflater.from(mContex);
    }


    @Override
    protected void convert(final BaseViewHolder newsViewHolder, final News news) {
        newsViewHolder.setText(R.id.tv_title,news.title);
    }
    @Override
    protected View getItemView(final int layoutResId, final ViewGroup parent) {
        View view = layoutInflater.inflate(R.layout.item_news_title, parent, false);
        view.setMinimumWidth(parent.getWidth() / N);
        LinearLayout.LayoutParams parms = new LinearLayout.LayoutParams(parent.getWidth() / N, ViewGroup.LayoutParams.MATCH_PARENT);
        view.setLayoutParams(parms);
        return view;
    }

}

最终效果图:

效果图

Android Architecture Component https://maven.google.com 404? 有更新!

最近想要 研究####Android Architecture Components 奈何本地的gradle一直拉不下源码,尝试切换到云服务器编译,依然落不下代码 提示错误

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApkCopy'.
   > Could not resolve android.arch.persistence.room:runtime:1.0.0-alpha3.
     Required by:
         project :app
      > Could not resolve android.arch.persistence.room:runtime:1.0.0-alpha3.
         > Could not get resource 'https://maven.google.com/android/arch/persistence/room/runtime/1.0.0-alpha3/runtime-1.0.0-alpha3.pom'.
            > Could not HEAD 'https://maven.google.com/android/arch/persistence/room/runtime/1.0.0-alpha3/runtime-1.0.0-alpha3.pom'.
               > Connect to maven.google.com:443 [maven.google.com/216.58.200.46] failed: Connection timed out: connect
   > Could not resolve android.arch.lifecycle:common:1.0.0-alpha3.
     Required by:
         project :app > android.arch.lifecycle:runtime:1.0.0-alpha3
         project :app > android.arch.lifecycle:extensions:1.0.0-alpha3
      > Could not resolve android.arch.lifecycle:common:1.0.0-alpha3.
         > Could not get resource 'https://maven.google.com/android/arch/lifecycle/common/1.0.0-alpha3/common-1.0.0-alpha3.pom'.
            > Could not HEAD 'https://maven.google.com/android/arch/lifecycle/common/1.0.0-alpha3/common-1.0.0-alpha3.pom'.
               > Connect to maven.google.com:443 [maven.google.com/216.58.200.46] failed: Connection timed out: connect


思来想去,还是没找到原因,本身网络是自带翻墙梯子的,后来看到很多人在Google issue提问题,也是无法下载依赖库
后来尝试翻看 https://developer.android.com/studio/build/dependencies.html 找到了答案,Google 建议将

https://maven.google.com
替换为 https://dl.google.com/dl/android/maven2/

答案解析 https://developer.android.com/studio/build/dependencies.html

repositories {
    maven {
        url 'https://maven.google.com'
        // Alternative URL is 'https://dl.google.com/dl/android/maven2/'
    }
}

React-Native:调用(Android)Native方法

有的时候我们使用React Native无法满足一些使用特定场景,这个时候就需要使用原生的Android方法,比如一些耗时的写操作,操作数据库或者多线程操作等。React Native可以直接调用系统的API(java方法),实现JavaScript与java语言的通讯,如果React Native中没有满足我们需求的Api,可以封装原生的方法提供JavaScript调用。

JavaScript和java通信是通过bridge实现的,在java层和JavaScript层的bridge分别存有相同的一份模块配置表。Java与JavaScript相互通信时,通过bridge里的配置表将所调用模块方式转为{moduleID,methodID,args}的形式传递给处理层,处理层通过bridge里的配置表找到对应的方法执行,如果有callback,则回传给调用层,如果没有执行就结束。

我们通过JavaScript调用Toast的例子来看下,JavaScript如何调用Java代码的。

新建一个项目:

react-native init app
在android的项目目录下面新建一个类RNToastModule,此类需要继承ReactContextBaseJavaModule。

ReactContextBaseJavaModule
ReactContextBaseJavaModule是一个抽象类,是用来被JavaScript调用对象的父类,我们需要Override一些ReactContextBaseJavaModule的方法。

首先要Override getName()方法:

   @Override
   public String getName() {
       return "RNToastAndroid";
   }

这个方法的返回值就是JavaScript中调用的名称,比如我们命名为RNToastAndroid,在JavaScript中可以这样调用:

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

在JavaScript可以这样调用:

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

最后我们定义一个React调用的方法:

     @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }

完整RNToastModule代码:

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

import android.widget.Toast;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * 文 件 名: RNToastModule
 * 创 建 人: Allen
 * 创建日期: 17/1/2 23:17
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class RNToastModule extends ReactContextBaseJavaModule{
    public RNToastModule(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RNToastAndroid";
    }
    @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }
}

这个使用了annotation定义的方式必须加上@ReactMethod。
这里的参数只能React Navive定义的参数。

注册ReactPackage
新建一个JsReactPackage类,继承ReactPackage。

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * 文 件 名: JsReactPackage
 * 创 建 人: Allen
 * 创建日期: 17/1/2 22:34
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class JsReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(final ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new RNToastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(final ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

JsReactPackage创建了一个NativeModule的List。把JsReactPackage的实例都添加进去提供给JavaScript层调用。

需要在Application中实例化。
首先实现新建一个ReactNativeHost的实例并添加RNJavaReactPackage的实例:


private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
   @Override   
   protected boolean getUseDeveloperSupport() {   
       return BuildConfig.DEBUG;   
   } 
   @Override   
   protected List<ReactPackage> getPackages() { 
         return Arrays.<ReactPackage>asList(
                new MainReactPackage(), 
                //加入此处        
               new JsReactPackage()       
         ); 
     }
};

JavaScript中调用
在JavaScript显示Toast:

'use strict';

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

这样就完成了从JavaScript中直接调用了Java中定义的方法。

参考链接

  1. https://segmentfault.com/a/1190000004486024
  2. http://blog.csdn.net/yuetingzhuying/article/details/51944254

Tomcat Ajax跨域访问

今天部署自己的solo个人博客devcoder.cn,登录时一直有提示错误信息


Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.
 
经查询是由于tomcat配置不支持ajax跨域访问,Google 搜索答案,修改tomcat 的目录下 */usr/local/tomcat/conf/web.xml/* 增加如下内容即可ok

tomcat后端允许跨域访问的配置

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>
  

Android工具类库

Android工具类库 Build Status API Gradle Version Licence

项目链接地址https://github.com/AllenCoder/SuperUtils

囊括了一大部分Android应用开发过程当中常用的工具类。工具类来源整理自网络和自己编写。(正在不断收集和整理中)

快速使用: 在工程目录下的 build.gradle 添加如下代码:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

在app的build.gradle引入依赖

1.Android 基础工具类

Android 基础工具类
AppManger 应用程序Activity管理工具类,用于Activity的管理和应用程序的退出 AppManger
Arith 精确计算工具类 Arith
BitmapUtil Bitmap 处理工具类 BitmapUtil
BtnClickUtils Android 快速点击判断拦截工具类 BtnClickUtils
CheckViewInRange View 区域范围判断工具类 CheckViewInRange
DataCleanManager Android 应用内数据清除工具类 DataCleanManager
DataUtil 数据转换工具类 DataUtil
DateTimeUtil Android 格式化时间工具类 DateTimeUtil
DigestUtils MD5加解密工具类 DigestUtils
DataCleanManager Android 应用内数据清除工具类 DataCleanManager
MLog Android Log打印工具类 支持行号 json打印 统一封装 MLog
NetUtils Android 网络状态判断工具类,检测WiFi ,4G网络状态 NetUtils
NumberUtil 金额格式化工具类(支持常用的保留指定位数的小数 和自动格式化处理) NumberUtil
RegexUtils 提供验证邮箱、手机号、电话号码、身份证号码、数字等方法 RegexUtils
ScreenListener Android屏幕状态监听工具类(判断 是否处于锁屏,亮屏状态) ScreenListener
ScreenUtil 获取屏幕状态信息 (屏幕宽高 等信息) ScreenUtil
StatusBarUtils 状态栏处理工具类 ,支持沉浸式状态栏 StatusBarUtils
ToolResource Android 获取资源工具类 ToolResource
TouchEventUtil Android Touch事件打印辅助工具类 TouchEventUtil
dependencies {
        compile 'com.github.AllenCoder.SuperUtils:apputils:1.0.2'
}

2.Android 数据库处理工具类

Android 数据库处理工具类
Utils Android 数据库导出到SD卡 Utils
dependencies {
         compile 'com.github.AllenCoder.SuperUtils:dbutils:1.0.2'
}

3.Android 多媒体处理工具类

Android 多媒体工具类
ImageTakerHelper 从相机或者相册取图片辅助类 ImageTakerHelper
Utils Utils
dependencies {
         compile 'com.github.AllenCoder.SuperUtils:mediautil:1.0.2'
}

License


  Copyright  2017 [AllenCoderr]
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
 
      http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
 limitations under the License.