- Android可以做很多有意思的事情,而这正是我喜欢她的原因。
今天会做一个在屏幕上随着手指移动而变化的效果。
步骤如下
首先,我们要自定义一个View组件,而这个组件就是在之后会用到的屏幕上移动的小组件。然后我们在一个布局上添加这个View,并且给此View添加onTouch触摸事件。
此外,此组件内也要重写onDraw方法,对此组件进行绘制。
废话不说,代码见真章:
class GirlView extends View{
public float bitmapX;public float bitmapY; public Bitmap bitmap= BitmapFactory.decodeResource(getResources(), R.drawable.s_1); public GirlView(Context context) { super(context); this.bitmapX = 0; this.bitmapY = 60; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint paint = new Paint();//画笔 canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint);//作画 if (bitmap.isRecycled()) { bitmap.recycle();//回收 } } }
绘制三步骤:
1. 准备画板,也就是:Canvas canvas对象
2. 准备画布,
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.s_1);
3. 画笔准备,Paint paint = new Paint();
4. 然后开始绘制就行了。
接着,再奉上Activity内的代码:
public class FrameActivity extends AppCompatActivity {private FrameLayout frameLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_frame); frameLayout = (FrameLayout) findViewById(R.id.main_frame); final GirlView girlView = new GirlView(this); girlView.setOnTouchListener(new View.OnTouchListener() { float startX; float startY; float moveX; float moveY; int i=0; @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX()-200; startY = event.getY()-250; girlView.bitmapX = startX; girlView.bitmapY = startY; girlView.invalidate(); break; case MotionEvent.ACTION_MOVE: moveX = event.getX(); moveY = event.getY(); /*减去的200和250分别指代图片本来的宽和高。 * Touch事件的时候,手指的落点会在此View的左上角,做减法的原因 * 就是要让手指落点到View的中心*/ if (Math.abs(moveX-startX)>50|| Math.abs(moveY-startY)>50) { girlView.bitmapX = moveX-200; girlView.bitmapY = moveY-250; i++; girlView.bitmap = getMove(i % 8); girlView.invalidate();//重新绘制 startX=moveX; startY = moveY; } } return true; } }); frameLayout.addView(girlView); } /*得到不同的画布*/ public Bitmap getMove(int i) { Bitmap bitmap = BitmapFactory.decodeResource(getResources(), getDrawID(i)); return bitmap; } public int getDrawID(int i) { int drawID = R.drawable.s_1; switch (i) { case 0: drawID =R.drawable.s_1; break; case 1: drawID =R.drawable.s_2; break; case 2: drawID =R.drawable.s_3; break; case 3: drawID =R.drawable.s_4; break; case 4: drawID =R.drawable.s_5; break; case 5: drawID =R.drawable.s_6; break; case 6: drawID =R.drawable.s_7; break; case 7: drawID =R.drawable.s_8; break; } return drawID; }
分析如下:
这里我们首先准备八张图,这八张图连起来就会形成一个动画效果。
在oTouch的方法内,我们设定了这样一个条件,只要手指移动的距离,在X轴和Y轴上不管哪一个超过50的话,就会让GrilView切换一张画布。
同时,为了保证手指落下的点在组件内部,要减去相应地距离。因为如果直接让moveX和moveY的值等于GrilView的x和y的值的话,这样手指的落点就会在此组件的左上角,那样效果不是很好。
最后,切记onTouch方法要返回true。
以上