实例讲解Android中的View类以及自定义View控件的方法

View的简单理解和实例
1.View的基本概念
在Activity显示的控件 都叫做View(View类 是所有的控件类的父类  比如 文本 按钮)

2.在Activity当中获取代表View的对象
Activity读取布局文件生成相对应的 各种View对象

TextView textView=(TextView)findViewBy(R.id.textView)

3.设置view的属性
Activity_mian.xml 这样的xml布局文件中发现了,类似@+id/和@id/到底有什么区别呢? 这里@可以理解为引用,而多出的+代表自己新声明的

4.为View设置监听器
一个控件可以绑定多个监听器 不通过的监听器响应不同的事件:

(1)获取代表控件的对象
(2)定义一个类,实现监听接口 implements  OnClickListener
(3)生成监听对象
(4)为控件绑定监听对象

5.实例
布局文件(改成垂直布局)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity" > 

  <TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="80px"
    android:background="#FF0000"
    android:text="hello_world 熊" /> 

  <Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="点击"/> 

</LinearLayout>

MianActivity文件

package com.xiong.fisrt_android; 

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView; 

public class MainActivity extends Activity { 

  private TextView textView;
  private Button button;
  private int count = 0; 

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textView = (TextView) findViewById(R.id.textView);
    button = (Button) findViewById(R.id.button);
    textView.setText("hello Android!!!");
    textView.setBackgroundColor(Color.BLUE);
    ButtoneListener buttoneListener = new ButtoneListener();// 生成监听对象
    button.setOnClickListener(buttoneListener);// 按钮绑定一个监听器
  } 

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  } 

  class ButtoneListener implements OnClickListener// 创建一个类实现监听事件的接口
  { 

    @Override
    public void onClick(View arg0) {
      // TODO Auto-generated method stub
      count++;
      textView.setText(Integer.toString(count)); 

    } 

  } 

}

View的自定义
通过继承View,可以很方便地定制出有个性的控件出来。

实现自定义View的最主要的是重写onDraw(Canvas canvas)函数,当每次系统重绘界面的时候,都会调用这个函数,并传下一个Canvas,在这个函数内,应该将这个View所要显示的内容都draw到这个Canvas上,界面显示出来的内容几乎都由这个Canvas来决定。Canvas的具体画法可以很容易查得到,应该说Android内所有函数的命名都是很直观,一目了然的,自己看一下函数名都大概可以明白这个函数是有什么用的。SDK也是查询Android API的最好的工具,多使用些肯定有好处的。

View的显示出来的大小最主要的决定者是Parent Layout,View可以自定义自己的宽高的最小值,但这并不能保证能到达这种最小值,如果Parent本身的大小已经比这个值小了。

View的重绘——系统不会经常去调用View的OnDraw函数,为了能够在View上实现动画效果,比如说游戏(但好像很多游戏是用更高效的SurfaceView为实现的),在主线程是执行完程序的逻辑后,应该要调用postInvalidate(),通知系统去调用onDraw函数去重绘界面,才能将动画的效果给显示出来。

下面的代码是我自己写的一个模拟两个球不断碰撞的View,主要由一个线程来不断更新View内两个球的位置,在发现两个球和墙壁发生碰撞后,改变球的逻辑参数,更新完后,调用postInvalidate(),重绘界面。来实现效果

package com.androidclub.elfman.homework3;
import java.util.ArrayList;
import java.util.Random;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.os.Bundle;
import android.view.View;
public class Main extends Activity {
  TheScreen mScreen;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //mScreen是自定义的View
    mScreen = new TheScreen(this);
    setContentView(mScreen);
  } 

  //为避免在程序退出后线程仍在进行,造成不必要的系统资源浪费,在Activity退出是时候,主动将线程停止
  @Override
  public void onDestroy()
  {
    mScreen.stopDrawing();
    super.onDestroy();
  }
}
/**
 * 自定义的View类,为两个球的碰撞模拟
 * @author windy
 *
 */
class TheScreen extends View
{ 

  private static final String TAG = "Draw";
  //界面主线程的控制变量
  private boolean drawing = false;
  //储存当前已有的球的信息
  private ArrayList<Circle> circles;
  private Paint mPaint;
  //两个球的运动范围
  public static final int WIDTH = 300;
  public static final int HEIGHT = 400;
  public static final double PI = 3.14159265;
  Paint mPaint2 = new Paint();
  public TheScreen(Context context)
  {
    super(context);
    circles = new ArrayList<Circle>();
    //加入了两个球
    circles.add(new Circle());
    circles.add(new Circle(20, 30, 10));
    mPaint = new Paint();
    mPaint.setColor(Color.YELLOW);
    mPaint.setAntiAlias(true);
    mPaint2.setStyle(Style.STROKE);
    mPaint2.setColor(Color.RED);
    mPaint2.setAntiAlias(true);
    //启动界面线程,开始自动更新界面
    drawing = true;
    new Thread(mRunnable).start();
  } 

  private Runnable mRunnable = new Runnable() {
    //界面的主线程
    @Override
    public void run() {
      while( drawing )
      {
        try {
          //更新球的位置信息
          update();
          //通知系统更新界面,相当于调用了onDraw函数
          postInvalidate();
          //界面更新的频率,这里是每30ms更新一次界面
          Thread.sleep(30);
          //Log.e(TAG, "drawing");
        } catch (InterruptedException e) {
          e.printStackTrace();
        }
      }
    }
  }; 

  public void stopDrawing()
  {
    drawing = false;
  } 

  @Override
  public void onDraw(Canvas canvas)
  {
    //在canvas上绘上边框
    canvas.drawRect(0, 0, WIDTH, HEIGHT, mPaint2);
    //在canvas上绘上球
    for( Circle circle : circles)
    {
      canvas.drawCircle(circle.x, circle.y, circle.radius, mPaint);
    }
  } 

  //界面的逻辑函数,主要检查球是否发生碰撞,以及更新球的位置
  private void update()
  {
    if( circles.size()>1)
    {
      for( int i1=0; i1<circles.size()-1; i1++)
      {
        //当两个球发生碰撞,交换两个球的角度值
        for( int i2=i1+1; i2<circles.size(); i2++)
          if( checkBumb(circles.get(i1),circles.get(i2)))
          {
            circles.get(i1).changeDerection(circles.get(i2));
          }
      } 

    }
    //更新球的位置
    for( Circle circle: circles)
      circle.updateLocate();
  } 

  private boolean checkBumb(Circle c1, Circle c2)
  {
    return (c1.x-c2.x)*(c1.x-c2.x) + (c1.y-c2.y)*(c1.y-c2.y) <= (c1.radius+c2.radius)*(c1.radius+c2.radius);
  } 

  /**
   * 自定义的View的内部类,存储每一个球的信息
   * @author windy
   *
   */
  class Circle
  {
    float x=50;
    float y=70;
    double angle= (new Random().nextFloat())*2*PI;;
    int speed=4;
    int radius=10; 

    public Circle() {
    } 

    public Circle( float x, float y, int r )
    {
      this.x = x;
      this.y = y;
      radius = r;
    } 

    //利用三角函数计算出球的新位置值,当与边界发生碰撞时,改变球的角度
    public void updateLocate()
    {
      x = x+ (float)(speed *Math.cos(angle));
      //Log.v(TAG, Math.cos(angle)+"");
      y = y+ (float)(speed *Math.sin(angle));
      //Log.v(TAG, Math.cos(angle)+"");
      if( (x+radius)>=WIDTH )
      {
        if( angle >=0 && angle <= (PI/2))
          angle = PI - angle;
        if( angle > 1.5 * PI && angle <= 2*PI)
          angle = 3 * PI - angle;
      }
      if( x-radius <=0 )
      {
        if( angle >= PI && angle <= 1.5*PI )
          angle = 3*PI - angle;
        if( angle >= PI/2 && angle < PI)
          angle = PI - angle;
      }
      if( y-radius<=0 || y+radius>=HEIGHT)
        angle = 2*PI - angle; 

    }
    //两球交换角度
    public void changeDerection(Circle other)
    {
      double temp = this.angle;
      this.angle = other.angle;
      other.angle = temp;
    }
  }
}

这段代码已经写有注释了,具体下次再介绍了。。。应该不难的看懂的吧。

时间: 2016-04-23

Android自定义View之继承TextView绘制背景

本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

Android自定义view制作绚丽的验证码

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤 自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承

Android自定义view实现阻尼效果的加载动画

效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运

Android自定义View实现竖直跑马灯效果案例解析

首先给出跑马灯效果图 中间的色块是因为视频转成GIF造成的失真,自动忽略哈. 大家知道,横向的跑马灯android自带的TextView就可以实现,详情请百度[Android跑马灯效果].但是竖直的跑马灯效果原生Android是不支持的.网上也有很多网友实现了自定义的效果,但是我一贯是不喜欢看别人的代码,所以这篇博客的思路完全是我自己的想法哈. 首先,我们需要给自定义的控件梳理一下格局,如下图所示: 1.首先我们将控件分为三个区块,上面绿色部分为消失不可见的块,中间黑色部分为可见区域,下面红色部

Android实现上拉加载更多以及下拉刷新功能(ListView)

首先为大家介绍Andorid5.0原生下拉刷新简单实现. 先上效果图: 相对于上一个19.1.0版本中的横条效果好看了很多.使用起来也很简单. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" and

Android自定义View实现折线图效果

下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

Android自定义View实现带数字的进度条实例代码

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

Android开发使用自定义view实现ListView下拉的视差特效功能

本文实例讲述了Android开发使用自定义view实现ListView下拉的视差特效功能.分享给大家供大家参考,具体如下: 一.概述: 现在流型的APP如微信朋友圈,QQ空间,微博个人展示都有视差特效的影子. 如图:下拉图片会产生图片拉升的效果,放手后图片有弹回到原处: 那我们如何实现呢? 1)重写ListView控件: 2)重写里面的overScrollBy方法 3)在松手后执行值动画 二.具体实现: 1.创建ParallaListView 自定义ListView public class P

android开发教程之实现listview下拉刷新和上拉刷新效果

复制代码 代码如下: public class PullToLoadListView extends ListView implements OnScrollListener { private static final String TAG = PullToLoadListView.class.getSimpleName(); private static final int STATE_NON = 0; private static final int STATE_PULL_TO_REFRE

Android自定义View实现广告信息上下滚动效果

先看看效果: 实现代码: public class ScrollBanner extends LinearLayout { private TextView mBannerTV1; private TextView mBannerTV2; private Handler handler; private boolean isShow; private int startY1, endY1, startY2, endY2; private Runnable runnable; private Li

Android 自定义View的使用介绍

在项目开发中,可能系统自带的一些widget不能满足我们的需求,这时就需要自定义View. 通过查看系统中的常用widget如Button,TextView,EditText,他们都继承自View,所以我们在继承自定义View的时候也自然的需要继承View.1.首先新建一个类LView继承自View 复制代码 代码如下: public class LView extends View { private Paint paint; public LView(Context context) {  

Android 自定义View时使用TypedArray配置样式属性详细介绍

 Android 自定义View时使用TypedArray配置样式属性详细介绍 在自定义view时为了提高复用性和扩展性,可以为自定义的view添加样式属性的配置,比如自定义图片资源.文字大小.控件属性等,就这需要用到TypedArray类,下面以一个自定义的可点击扩展和收缩的TextView为例记录下这个类的简单使用. 先上效果图: 点击以后为 再贴代码: 1.自定义view类: /** * @title ExpandTextView * @description 可扩展TextView,可以

Android 自定义View的构造函数详细介绍

 Android自定义View的构造函数 自定义View是Android中一个常见的需求,每个自定义的View都需要实现三个基本的构造函数,而这三个构造函数又有两种常见的写法. 第一种 每个构造函数分别调用基类的构造函数,再调用一个公共的初始化方法做额外初始化. public class MyView extends ListView { public MyView(Context context) { super(context); sharedConstructor(); } public

Android自定义View中attrs.xml的实例详解

Android自定义View中attrs.xml的实例详解 我们在自定义View的时候通常需要先完成attrs.xml文件 在values中定义一个attrs.xml 然后添加相关属性 这一篇先详细介绍一下attrs.xml的属性. <?xml version="1.0" encoding="utf-8"?> <resources> //自定义属性名,定义公共属性 <attr name="titleText" for

Android自定义View 仿QQ侧滑菜单的实现代码

先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

Android自定义View绘制的方法及过程(二)

上一篇<Android 自定义View(一) Paint.Rect.Canvas介绍>讲了最基础的如何自定义一个View,以及View用到的一些工具类.下面讲下View绘制的方法及过程 public class MyView extends View { private String TAG = "--------MyView"; private int width, height; public MyView(Context context, AttributeSet a

Android自定义View实现loading动画加载效果

项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

Android自定义View的三个构造函数

自定义View有三个构造方法,它们的作用是不同的. public MyView(Context context) { super(context); } public MyView(Context context, AttributeSet attrs) { super(context, attrs); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, de

Android自定义View实现照片裁剪框与照片裁剪功能

本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩