实现自己想要的View效果（1）：自定义View

2016-11-29 本文已影响0人 ZzzRicardo_Yue

整理自：
http://www.cnblogs.com/manuosex/p/5288191.html

最近一个项目里面要用到自定义View的技术，看了很多博客，准备在这里整理一下
首先，我把实现自己想要的View效果的方法分为3类：

自定义View

有多种实现方式：
Ⅰ、继承现有控件，对其控件的功能进行拓展。
Ⅱ、将现有控件进行组合，实现功能更加强大控件。
Ⅲ、重写View实现全新的控件

自定义ViewGroup

这个实际上就是我们自定义一个布局，我们在实际使用的时候依然要在这个自定义ViewGroup中加子元素（比如TextView、ImageView或者其他）

在开始讲实现自定义View的方式之前，先了解一个基础操作，有时我们看到在xml中使用自定义View时，可以添加自己的属性，并且能够与java建立联系，这个即用到了：

零、自定义布局属性：

首先我们需要在res/values/styles.xml文件（如果没有请自己新建）里面声明一个我们自定义的属性：

<resources>
    <!--name为声明的"属性集合"名，可以随便取，但是最好是设置为跟我们的View一样的名称-->
    <declare-styleable name="MyView">
        <!--声明我们的属性，名称为default_size,取值类型为尺寸类型（dp,px等）-->
        <attr name="default_size" format="dimension" />
    </declare-styleable>
</resources>

注意：需要在根标签（LinearLayout）里面设定命名空间，命名空间名称可以随便取，比如hc，命名空间后面取得值是固定的："http://schemas.android.com/apk/res-auto"

那么，这个自定属性我们怎么在java代码中真正地把它用起来呢？
在构造函数中，我们构造方法有个AttributeSet属性，就是靠它帮我们把布局里面的属性取出来：

 private int defalutSize;
  public MyView(Context context, AttributeSet attrs) {
      super(context, attrs);
      //第二个参数就是我们在styles.xml文件中的<declare-styleable>标签
        //即属性集合的标签，在R文件中名称为R.styleable+name
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyView);

        //第一个参数为属性集合里面的属性，R文件名称：R.styleable+属性集合名称+下划线+属性名称
        //第二个参数为，如果没有设置这个属性，则设置的默认的值
        defalutSize = a.getDimensionPixelSize(R.styleable.MyView_default_size, 100);

        //最后记得将TypedArray对象回收
        a.recycle();
   }

我们得到这个我们在xml中赋值的数据之后就可以拿它来做自己想做的事啦~~

下面就正式开始讲自定义View实现方式啦

一、继承现有控件，对其控件的功能进行拓展

这种自定义View方式难度最低，主要是重写onDraw()方法，假设我们要实现下面的效果：

我们要实现的效果

遇到这种情况，直接在TextView基础上自定义即可，不需要完全自己从头开始写
onDraw()方法的核心是要会灵活运用Canvas和Paint，知道在哪个位置（getMeasuredWidth等获取本控件位置的方法）用哪些效果（Canvas&Paint）在已有的控件上画上自己想要的效果，里面详细的内容这里就不讲了，可以自己看原博主的博客看一下他是怎么实现的。

二、将现有控件进行组合，实现功能更加强大控件

这个需要我们组合已有的View来完成一个复杂功能，实际上我觉得这种方式实现自己想要的效果是最简单的。
这种自定义View方法有几个要点：

它要继承的一般都是已有的布局，如LinearLayout或者RelativeLayout,看你自己想要实现的效果是怎样的，如：public class GeneralFrame extends LinearLayout{···}

这种自定义View方法也有2种做法来实现，先说第一种简单一点的做法：

直接读入已有的布局文件
比如我们要实现三国杀游戏武将的信息栏，里面包括武将头像，血条，装备区，这些元素以一种复杂的排列关系存在，我们呢不管这些，先写一个R.layout布局文件：

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal" >
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         >
         <ImageView
             android:id="@+id/touxiang"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:maxWidth="80dp"
             android:maxHeight="80dp"    
             >
         </ImageView>
         <ImageView
             android:id="@+id/blood"
             android:layout_width="wrap_content"
         android:layout_height="wrap_content"
             android:maxWidth="80dp"
             android:maxHeight="20dp"
             >            
         </ImageView>
         
     </LinearLayout>
     
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:layout_gravity="center_vertical"
         >
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="武器"
             ></TextView>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="防具"
             ></TextView>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="+1马"
             ></TextView>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="-1马"
             ></TextView>
     </LinearLayout>
 
 </LinearLayout>

然后在自定义View里面：

public class GeneralFrame extends LinearLayout {
    ImageView general;
    ImageView blood;
    TextView wuqi;
    TextView fangju;
    TextView jiayima;
    TextView jianyima;
    public GeneralFrame(Context context) {
        //super(context);
        // TODO Auto-generated constructor stub
        this(context,null);
    }
    public GeneralFrame(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        //在构造函数中将Xml中定义的布局解析出来。   
        LayoutInflater mInflater = LayoutInflater.from(context);  
        View myView = mInflater.inflate(R.layout.receive, null);  
        addView(myView); 
        general=(ImageView)findViewById(R.id.touxiang);
        blood=(ImageView)findViewById(R.id.blood);
        blood.setImageResource(R.drawable.blood);
        //wuqi=(TextView)findViewById(R.id
    }
  public void setImageResource(int Res)
  {···}

这个做法非常简单，我们最后只要留几个接口给外部进行调用就可以了。

代码中通过代码动态生成自己想要的效果，用addView()加入到你自定义的View中。
我不得不说这个方法非常地麻烦，而且极容易出错，我自己使用了一次之后就放弃了，下面来看看它的代码就知道了

private class SpeechView extends LinearLayout {     
        private TextView mTitle;    
        private TextView mDialogue;    
        public SpeechView(Context context, String title, String words) {    
            super(context);    
            this.setOrientation(VERTICAL);    
             // Here we build the child views in code. They could also have    
            // been specified in an XML file.  
            mTitle = new TextView(context);  
            mTitle.setText(title);    
            addView(mTitle, new LinearLayout.LayoutParams(    
            LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
            mDialogue = new TextView(context);    
            mDialogue.setText(words);   
            addView(mDialogue, new LinearLayout.LayoutParams(  
            LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
       }  
       public void setTitle(String title) {    
            mTitle.setText(title);    
       }         
      public void setDialogue(String words) {  
        mDialogue.setText(words);   
       }    
}

这个只是非常简单的布局效果，要是复杂起来简直要炸，这个就权当了解即可···

三、重写View实现全新的控件

这种方式适用于那种完全没有参考的一种效果，比如支付宝的信用雷达图之类的
这种方式需要重写onMeasure、onLayout等方法，是最复杂的一种
下面也举例说明：我们要实现一个圆形可以自定义颜色的view

要实现的效果

分别重写onMeasure和onDraw方法。

重写onMeasure方法：

 private int getMySize(int defaultSize, int measureSpec) {
        int mySize = defaultSize;

        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);

        switch (mode) {
            case MeasureSpec.UNSPECIFIED: {//如果没有指定大小，就设置为默认大小
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {//如果测量模式是最大取值为size
                //我们将大小取最大值,你也可以取其他值
                mySize = size;
                break;
            }
            case MeasureSpec.EXACTLY: {//如果是固定的大小，那就不要去改变它
                mySize = size;
                break;
            }
        }
        return mySize;}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMySize(100, widthMeasureSpec);
        int height = getMySize(100, heightMeasureSpec);

        if (width < height) {
            height = width;
        } else {
            width = height;
        }

        setMeasuredDimension(width, height);
}

这里onMeasure传进去的参数来自于xml的android:layout_width
和android:layout_height

<com.hc.studyview.MyView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ff0000" />

使用了我们自己定义的onMeasure函数后的效果

不重写onMeasure

我们发现onMeasure中参数MeasureSpec.getMode得到的参数不是wrap_content或者match_parent这些值，这里面的对应关系又是怎样的呢？

match_parent—>EXACTLY。怎么理解呢？match_parent就是要利用父View给我们提供的所有剩余空间，而父View剩余空间是确定的，也就是这个测量模式的整数里面存放的尺寸。

wrap_content—>AT_MOST。怎么理解：就是我们想要将大小设置为包裹我们的view内容，那么尺寸大小就是父View给我们作为参考的尺寸，只要不超过这个尺寸就可以啦，具体尺寸就根据我们的需求去设定。

固定尺寸（如100dp）—>EXACTLY。用户自己指定了尺寸大小，我们就不用再去干涉了，当然是以指定的大小为主啦。

重写onDraw()方法
在上面onMeasure的基础上我们重写onDraw，现在我们要把原来的正方形变成圆形，代码如下：

@Override
    protected void onDraw(Canvas canvas){
        //调用父View的onDraw函数，因为View这个类帮我们实现了一些
        // 基本的而绘制功能，比如绘制背景颜色、背景图片等
        super.onDraw(canvas);
        int r = getMeasuredWidth() / 2;//也可以是getMeasuredHeight()/2,本例中我们已经将宽高设置相等了
        //圆心的横坐标为当前的View的左边起始位置+半径
        int centerX = getLeft() + r;
        //圆心的纵坐标为当前的View的顶部起始位置+半径
        int centerY = getTop() + r;
        Paint paint = new Paint();
        paint.setColor(Color.GREEN);
        //开始绘制
        canvas.drawCircle(centerX, centerY, r, paint);
    }

注意这里父类的onDraw方法也放在里面，这个类帮我们实现了一些基本的绘制功能，比如绘制背景颜色、背景图片等，这样就算是完成这个可以自定义颜色的圆形View的自定义了。

最后附上完整代码：

/**
 * Package com.hc.studyview
 * Created by HuaChao on 2016/6/3.
 */
public class MyView extends View {

    private int defalutSize;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //第二个参数就是我们在styles.xml文件中的<declare-styleable>标签
        //即属性集合的标签，在R文件中名称为R.styleable+name
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyView);
        //第一个参数为属性集合里面的属性，R文件名称：R.styleable+属性集合名称+下划线+属性名称
        //第二个参数为，如果没有设置这个属性，则设置的默认的值
        defalutSize = a.getDimensionPixelSize(R.styleable.MyView_default_size, 100);
        //最后记得将TypedArray对象回收
        a.recycle();
    }


    private int getMySize(int defaultSize, int measureSpec) {
        int mySize = defaultSize;

        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);

        switch (mode) {
            case MeasureSpec.UNSPECIFIED: {//如果没有指定大小，就设置为默认大小
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {//如果测量模式是最大取值为size
                //我们将大小取最大值,你也可以取其他值
                mySize = size;
                break;
            }
            case MeasureSpec.EXACTLY: {//如果是固定的大小，那就不要去改变它
                mySize = size;
                break;
            }
        }
        return mySize;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMySize(defalutSize, widthMeasureSpec);
        int height = getMySize(defalutSize, heightMeasureSpec);

        if (width < height) {
            height = width;
        } else {
            width = height;
        }

        setMeasuredDimension(width, height);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //调用父View的onDraw函数，因为View这个类帮我们实现了一些
        // 基本的而绘制功能，比如绘制背景颜色、背景图片等
        super.onDraw(canvas);
        int r = getMeasuredWidth() / 2;//也可以是getMeasuredHeight()/2,本例中我们已经将宽高设置相等了
        //圆心的横坐标为当前的View的左边起始位置+半径
        int centerX = getLeft() + r;
        //圆心的纵坐标为当前的View的顶部起始位置+半径
        int centerY = getTop() + r;

        Paint paint = new Paint();
        paint.setColor(Color.GREEN);
        //开始绘制
        canvas.drawCircle(centerX, centerY, r, paint);
    }
}

实现自己想要的View效果（1）：自定义View

自定义View

自定义ViewGroup

零、自定义布局属性：

一、继承现有控件，对其控件的功能进行拓展

二、将现有控件进行组合，实现功能更加强大控件

三、重写View实现全新的控件

猜你喜欢

热点阅读