zoukankan      html  css  js  c++  java
  • Android应用开发实例篇(1)简易涂鸦板

    一、概述

          这次要做一个简单的涂鸦板应用,以前在Qt上实现过,突然想到要把它在Android上实现,呵呵,既简单又有趣。


    二、实现

         新建工程MyWall,修改/res/layout/main.xml文件,在里面添加一个SurfaceView和两个Button,用到了RelativeLayout布局,完整的main.xml文件如下:

     1 <?xml version="1.0" encoding="utf-8"?>
    2
    3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4 android:layout_width="fill_parent"
    5 android:layout_height="fill_parent"
    6 android:orientation="vertical"
    7 >
    8
    9 <SurfaceView
    10 android:id="@+id/surfaceview"
    11 android:layout_width="fill_parent"
    12 android:layout_height="wrap_content"
    13 android:layout_above="@+id/line"
    14 android:layout_alignParentTop="true"
    15 />
    16
    17 <LinearLayout
    18 android:id="@+id/line"
    19 android:layout_width="fill_parent"
    20 android:layout_height="wrap_content"
    21 android:layout_alignParentBottom="true"
    22 >
    23
    24 <Button
    25 android:id="@+id/flushbutton"
    26 android:layout_width="fill_parent"
    27 android:layout_height="wrap_content"
    28 android:layout_weight="1"
    29 android:text="清屏"
    30 />
    31
    32 <Button
    33 android:id="@+id/colorbutton"
    34 android:layout_width="fill_parent"
    35 android:layout_height="wrap_content"
    36 android:layout_weight="1"
    37 android:text="颜色"
    38 />
    39 </LinearLayout>
    40 </RelativeLayout>

    接着,修改MyWallActivity.java文件,最主要是覆写了onTouchEvent()函数,在这个函数里过滤出触屏拖动事件,然后获取其相应的坐标和画线,关于SurfaceView的用法在基础篇里有讲到。完整的内容如下:

      1 package com.nan.wall;
    2
    3 import android.app.Activity;
    4 import android.app.AlertDialog;
    5 import android.app.Dialog;
    6 import android.content.DialogInterface;
    7 import android.graphics.Canvas;
    8 import android.graphics.Color;
    9 import android.graphics.Paint;
    10 import android.graphics.Rect;
    11 import android.os.Bundle;
    12 import android.view.MotionEvent;
    13 import android.view.SurfaceHolder;
    14 import android.view.SurfaceView;
    15 import android.view.View;
    16 import android.widget.Button;
    17
    18 public class MyWallActivity extends Activity
    19 {
    20 private SurfaceView mSurfaceView = null;
    21 private SurfaceHolder mSurfaceHolder = null;
    22 private Button cleanButton = null;
    23 private Button colorButton = null;
    24
    25 private float oldX = 0f;
    26 private float oldY = 0f;
    27
    28 private boolean canDraw = false;
    29 private Paint mPaint = null;
    30 //用来记录当前是哪一种颜色
    31 private int whichColor = 0;
    32
    33 /** Called when the activity is first created. */
    34 @Override
    35 public void onCreate(Bundle savedInstanceState)
    36 {
    37 super.onCreate(savedInstanceState);
    38 setContentView(R.layout.main);
    39
    40 mSurfaceView = (SurfaceView)this.findViewById(R.id.surfaceview);
    41 mSurfaceHolder = mSurfaceView.getHolder();
    42
    43 mPaint = new Paint();
    44 //画笔的颜色
    45 mPaint.setColor(Color.RED);
    46 //画笔的粗细
    47 mPaint.setStrokeWidth(2.0f);
    48
    49 cleanButton = (Button)this.findViewById(R.id.flushbutton);
    50 //按钮监听
    51 cleanButton.setOnClickListener(new View.OnClickListener()
    52 {
    53
    54 @Override
    55 public void onClick(View v)
    56 {
    57 // TODO Auto-generated method stub
    58 //锁定整个SurfaceView
    59 Canvas mCanvas = mSurfaceHolder.lockCanvas();
    60 mCanvas.drawColor(Color.BLACK);
    61 //绘制完成,提交修改
    62 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
    63 //重新锁一次
    64 mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
    65 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
    66 }
    67 });
    68
    69 colorButton = (Button)this.findViewById(R.id.colorbutton);
    70 //按钮监听
    71 colorButton.setOnClickListener(new View.OnClickListener()
    72 {
    73
    74 @Override
    75 public void onClick(View v)
    76 {
    77 // TODO Auto-generated method stub
    78 Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)
    79 .setTitle("颜色设置")
    80 .setSingleChoiceItems(new String[]{"红色","绿色","蓝色"}, whichColor, new DialogInterface.OnClickListener()
    81 {
    82
    83 @Override
    84 public void onClick(DialogInterface dialog, int which)
    85 {
    86 // TODO Auto-generated method stub
    87 switch(which)
    88 {
    89 case 0:
    90 {
    91 //画笔的颜色
    92 mPaint.setColor(Color.RED);
    93 whichColor = 0;
    94 break;
    95 }
    96 case 1:
    97 {
    98 //画笔的颜色
    99 mPaint.setColor(Color.GREEN);
    100 whichColor = 1;
    101 break;
    102 }
    103 case 2:
    104 {
    105 //画笔的颜色
    106 mPaint.setColor(Color.BLUE);
    107 whichColor = 2;
    108 break;
    109 }
    110 }
    111 }
    112 })
    113 .setPositiveButton("确定", new DialogInterface.OnClickListener()
    114 {
    115
    116 @Override
    117 public void onClick(DialogInterface dialog, int which)
    118 {
    119 // TODO Auto-generated method stub
    120 dialog.dismiss();
    121 }
    122 })
    123 .create();
    124 mDialog.show();
    125 }
    126 });
    127
    128 }
    129
    130
    131 @Override
    132 public boolean onTouchEvent(MotionEvent event)
    133 {
    134 //获取x坐标
    135 float x = event.getX();
    136 //获取y坐标(不知道为什么要减去一个偏移值才对得准屏幕)
    137 float y = event.getY()-50;
    138
    139 //第一次进来先不管
    140 if(canDraw)
    141 {
    142 //获取触屏事件
    143 switch(event.getAction())
    144 {
    145 //如果是拖动事件
    146 case MotionEvent.ACTION_MOVE:
    147 {
    148
    149 //锁定整个SurfaceView
    150 Canvas mCanvas = mSurfaceHolder.lockCanvas();
    151 mCanvas.drawLine(x, y, oldX, oldY, mPaint);
    152 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
    153 //重新锁一次
    154 mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
    155 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
    156 break;
    157 }
    158 }
    159
    160 }
    161 //保存目前的x坐标值
    162 oldX = x;
    163 //保存目前的y坐标值
    164 oldY = y;
    165
    166 canDraw = true;
    167
    168 return true;
    169 }
    170
    171 }

    好了,在模拟器上运行效果如下:

    在真机上运行效果如下:

    呵呵,写得比较丑。


          在获取了Y坐标后减去一个偏移值50,这个值是我直接猜出来的,没想到在模拟器和真机上定位得还蛮准的,哈哈。当然这个应用的功能不多,不过有兴趣的话可以再完善它,希望能起到抛砖引玉的作用。




  • 相关阅读:
    用户输入
    hashlib 加密
    vue-cli项目配置mock数据(新版本)
    vue-cli 本地开发mock数据使用方法
    使用nodeJs安装Vue-cli
    购物车实现三
    购物车实现二
    购物车实现一
    极限开发与敏捷开发
    敏捷软件开发-极限编程
  • 原文地址:https://www.cnblogs.com/lknlfy/p/2378328.html
Copyright © 2011-2022 走看看