Exemples de didacticiels sur la personnalisation de View et ViewGroup dans le développement d'applications Android

View
Tous les contrôles Android sont des View ou des sous-classes de View. Il représente en fait une zone rectangulaire sur l'écran, représentée par un Rect Left et top représentent la View par rapport à sa View parent. et la hauteur représentent la largeur et la hauteur de la vue. Grâce à ces quatre champs, la position de la vue sur l'écran peut être déterminée. Après avoir déterminé la position, vous pouvez commencer à dessiner le contenu de la vue.

Processus de dessin de vue
Le dessin de vue peut être divisé en trois processus suivants :

Mesurer
La vue effectuera d'abord une mesure pour calculer la surface qu'elle doit occuper. Le processus Measure de View nous expose une interface onMeasure. La définition de la méthode est la suivante,

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}

La classe View a fourni une implémentation de base de onMeasure,

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
     getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
public static int getDefaultSize(int size, int measureSpec) {
 int result = size;
 int specMode = MeasureSpec.getMode(measureSpec);
 int specSize = MeasureSpec.getSize(measureSpec);
 
 switch (specMode) {
 case MeasureSpec.UNSPECIFIED:
   result = size;
   break;
 case MeasureSpec.AT_MOST:
 case MeasureSpec.EXACTLY:
   result = specSize;
   break;
 }
 return result;
}

La méthode setMeasuredDimension() est invoquée pour définir la largeur et la hauteur de la vue pendant le processus de mesure. getSuggestedMinimumWidth() renvoie la largeur minimale de la vue, et Height a également une méthode correspondante. Quelques mots, la classe MeasureSpec est une classe statique interne de la classe View. Elle définit trois constantes UNSPECIFIED, AT_MOST et EXACTLY. En fait, on peut la comprendre ainsi. Elles correspondent respectivement à match_parent, wrap_content et xxxdp dans LayoutParams. . Nous pouvons remplacer onMeasure pour redéfinir la largeur et la hauteur de la vue.

Layout
Le processus Layout est très simple pour la classe View View nous expose également la méthode onLayout

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
}

Parce que nous discutons de View maintenant, il n'y a pas de sous-vues qui doivent être organisées, nous n'avons donc pas réellement besoin de faire de travail supplémentaire dans cette étape. D'ailleurs, pour la classe ViewGroup, dans la méthode onLayout, nous devons définir la taille, la largeur et la hauteur de toutes les sous-vues. Nous expliquerons cela en détail dans le prochain article.

Dessiner
Le processus de dessin consiste à dessiner le style de vue dont nous avons besoin sur la toile. De même, View nous expose la méthode onDraw

protected void onDraw(Canvas canvas) {
}

OnDraw de la classe View par défaut n'a pas de ligne de code, mais nous fournit un canevas vierge par exemple, c'est comme. a Tout comme un rouleau d'images, nous sommes les peintres et l'effet que nous pouvons créer dépend entièrement de nous.

Il existe trois méthodes plus importantes dans View
requestLayout
View rappelle le processus de mise en page.

invalidate
View rappelle le processus de dessin

forceLayout
indique que la vue doit être redessinée la prochaine fois et que le processus de mise en page doit être appelé à nouveau.

Attributs personnalisés
Nous avons déjà présenté l'ensemble du processus de dessin de View, et il existe une autre connaissance très importante, les attributs de contrôle personnalisés. Nous savons tous que View possède déjà des attributs de base, tels que layout_width, layout_height , arrière-plan, etc. Nous devons souvent définir nos propres attributs, afin que vous puissiez le faire spécifiquement.

1. Dans le dossier des valeurs, ouvrez attrs.xml. En fait, le nom de ce fichier peut être arbitraire. Il est plus standardisé de l'écrire ici, ce qui signifie que tous les attributs de la vue. y sont placés.
2. Parce que notre exemple suivant utilisera deux attributs de longueur et une valeur de couleur, nous créons ici d'abord trois attributs.

<declare-styleable name="rainbowbar">
 <attr name="rainbowbar_hspace" format="dimension"></attr>
 <attr name="rainbowbar_vspace" format="dimension"></attr>
 <attr name="rainbowbar_color" format="color"></attr>
</declare-styleable>

Alors comment l'utiliser, nous allons regarder un exemple.

Implémentez une barre de progression Google Rainbow relativement simple.
Par souci de simplicité, je n'utilise ici qu'une seule couleur, vous laissant plusieurs couleurs, passons directement au code.

public class RainbowBar extends View {
 
 //progress bar color
 int barColor = Color.parseColor("#1E88E5");
 //every bar segment width
 int hSpace = Utils.dpToPx(80, getResources());
 //every bar segment height
 int vSpace = Utils.dpToPx(4, getResources());
 //space among bars
 int space = Utils.dpToPx(10, getResources());
 float startX = 0;
 float delta = 10f;
 Paint mPaint;
 
 public RainbowBar(Context context) {
  super(context);
 }
 
 public RainbowBar(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public RainbowBar(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  //read custom attrs
  TypedArray t = context.obtainStyledAttributes(attrs,
      R.styleable.rainbowbar, 0, 0);
  hSpace = t.getDimensionPixelSize(R.styleable.rainbowbar_rainbowbar_hspace, hSpace);
  vSpace = t.getDimensionPixelOffset(R.styleable.rainbowbar_rainbowbar_vspace, vSpace);
  barColor = t.getColor(R.styleable.rainbowbar_rainbowbar_color, barColor);
  t.recycle();  // we should always recycle after used
  mPaint = new Paint();
  mPaint.setAntiAlias(true);
  mPaint.setColor(barColor);
  mPaint.setStrokeWidth(vSpace);
 }
 
 .......
}

View a trois méthodes de construction que nous devons réécrire. Voici les scénarios dans lesquels les trois méthodes seront appelées

La première méthode, Généralement. , elle sera appelée lorsque nous l'utiliserons comme ceci, View view = new View(context);
La deuxième méthode, lorsque nous utilisons View dans le fichier de mise en page XML, sera appelée lors de la mise en page gonflée,
3c2dec8b70e9a4f4cd913230f09543d9.
La troisième méthode est similaire à la deuxième méthode, mais ajoute le paramètre d'attribut de style. À ce stade, le troisième constructeur sera appelé lors de la mise en page du gonfleur.
a298b83783294fb1ecb90b876eada1d0.
Ce qui vous semble peut-être un peu confus ci-dessus, c'est que j'ai écrit le code pour initialiser et lire les attributs personnalisés hspace, vspace et barcolor dans la troisième méthode de construction, mais ma RainbowBar n'a pas ajouté l'attribut de style dans la disposition linéaire. . (), selon notre explication ci-dessus, le deuxième constructeur doit être invoqué lors du gonflage de la mise en page, mais nous avons appelé le troisième constructeur dans le deuxième constructeur, this(context, attrs, 0); dans la troisième méthode de construction. Il s'agit d'un petit détail pour éviter la redondance du code -, -

Draw
car nous n'avons pas besoin de prêter attention au processus de mesure et de mise en page ici, directement Remplacez simplement onDraw. méthode.

//draw be invoke numbers.
int index = 0;
@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //get screen width
  float sw = this.getMeasuredWidth();
  if (startX >= sw + (hSpace + space) - (sw % (hSpace + space))) {
    startX = 0;
  } else {
    startX += delta;
  }
  float start = startX;
  // draw latter parse
  while (start < sw) {
    canvas.drawLine(start, 5, start + hSpace, 5, mPaint);
    start += (hSpace + space);
  }
 
  start = startX - space - hSpace;
 
  // draw front parse
  while (start >= -hSpace) {
    canvas.drawLine(start, 5, start + hSpace, 5, mPaint);
    start -= (hSpace + space);
  }
  if (index >= 700000) {
    index = 0;
  }
  invalidate();
}

Fichier de mise en page :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginTop="40dp"
android:orientation="vertical" >
 
<com.sw.demo.widget.RainbowBar
    android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:rainbowbar_color="@android:color/holo_blue_bright"
  app:rainbowbar_hspace="80dp"
  app:rainbowbar_vspace="10dp"
  ></com.sw.demo.widget.RainbowBar>
 
</LinearLayout>

En fait, il s'agit d'appeler la méthode drawLine du canevas, puis de déplacer le point de départ du tirage à chaque fois que nous avançons, à la fin de la méthode, nous appelons la méthode invalidate Comme nous l'avons expliqué ci-dessus, cette méthode fera que View appellera à nouveau la méthode onDraw, nous obtiendrons donc l'effet que notre barre de progression. est toujours en train d'avancer. Vous trouverez ci-dessous l'effet d'affichage final. Il semble y avoir une différence de couleur lorsqu'il est transformé en gif, mais l'effet réel est le bleu. Nous n'avons écrit que quelques dizaines de lignes de code. La personnalisation de View n'est pas aussi difficile que nous l'imaginions. Dans le prochain article, nous continuerons à apprendre le processus de dessin de ViewGroup.

自定义ViewGroup
ViewGroup
我们知道ViewGroup就是View的容器类，我们经常用的LinearLayout，RelativeLayout等都是ViewGroup的子类，因为ViewGroup有很多子View，所以它的整个绘制过程相对于View会复杂一点，但是还是三个步骤measure，layout，draw，我们一次说明。

Measure
Measure过程还是测量ViewGroup的大小，如果layout_widht和layout_height是match_parent或具体的xxxdp，就很简答了，直接调用setMeasuredDimension()方法，设置ViewGroup的宽高即可，如果是wrap_content，就比较麻烦了，我们需要遍历所有的子View，然后对每个子View进行测量，然后根据子View的排列规则，计算出最终ViewGroup的大小。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int childCount = this.getChildCount();
 for (int i = 0; i < childCount; i++) {
   View child = this.getChildAt(i);
   this.measureChild(child, widthMeasureSpec, heightMeasureSpec);
   int cw = child.getMeasuredWidth();
   // int ch = child.getMeasuredHeight();
 }
}

你可能需要类似上面的代码，其中getChildCount()方法，返回子View的数量，measureChild()方法，调用子View的测量方法。

Layout
上面View的自定义中，我们稍微提到了，layout过程其实就是对子View的位置进行排列，onLayout方法给我一个机会，来按照我们想要的规则自定义子View排列。

@Override
protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
 int childCount = this.getChildCount();
 for (int i = 0; i < childCount; i++) {
   View child = this.getChildAt(i);
   LayoutParams lParams = (LayoutParams) child.getLayoutParams();
   child.layout(lParams.left, lParams.top, lParams.left + childWidth,
       lParams.top + childHeight);
 }
}

你同样可能需要类似上面的代码，其中child.layout（left,top,right,bottom）方法可以对子View的位置进行设置，四个参数的意思大家通过变量名都应该清楚了。
Draw
ViewGroup在draw阶段，其实就是按照子类的排列顺序，调用子类的onDraw方法，因为我们只是View的容器， 本身一般不需要draw额外的修饰，所以往往在onDraw方法里面，只需要调用ViewGroup的onDraw默认实现方法即可。

LayoutParams
ViewGroup还有一个很重要的知识LayoutParams，LayoutParams存储了子View在加入ViewGroup中时的一些参数信息，在继承ViewGroup类时，一般也需要新建一个新的LayoutParams类，就像SDK中我们熟悉的LinearLayout.LayoutParams，RelativeLayout.LayoutParams类等一样，那么可以这样做，在你定义的ViewGroup子类中，新建一个LayoutParams类继承与ViewGroup.LayoutParams。

public static class LayoutParams extends ViewGroup.LayoutParams {
 
 public int left = 0;
 public int top = 0;
 
 public LayoutParams(Context arg0, AttributeSet arg1) {
   super(arg0, arg1);
 }
 
 public LayoutParams(int arg0, int arg1) {
   super(arg0, arg1);
 }
 
 public LayoutParams(android.view.ViewGroup.LayoutParams arg0) {
   super(arg0);
 }
 
}

那么现在新的LayoutParams类已经有了，如何让我们自定义的ViewGroup使用我们自定义的LayoutParams类来添加子View呢，ViewGroup同样提供了下面这几个方法供我们重写，我们重写返回我们自定义的LayoutParams对象即可。

@Override
public android.view.ViewGroup.LayoutParams generateLayoutParams(
   AttributeSet attrs) {
 return new NinePhotoView.LayoutParams(getContext(), attrs);
}
 
@Override
protected android.view.ViewGroup.LayoutParams generateDefaultLayoutParams() {
 return new LayoutParams(LayoutParams.WRAP_CONTENT,
     LayoutParams.WRAP_CONTENT);
}
 
@Override
protected android.view.ViewGroup.LayoutParams generateLayoutParams(
   android.view.ViewGroup.LayoutParams p) {
 return new LayoutParams(p);
}
 
@Override
protected boolean checkLayoutParams(android.view.ViewGroup.LayoutParams p) {
 return p instanceof NinePhotoView.LayoutParams;
}

   

实例
我们还是做一个实例来说明，我们今天做一个类似微信朋友圈 存储要发送图片的控件，点击+号图片，可以一直加图片，最多9张。那么微信是4个一排，我们这里是3个一排，因为一般常规都是三个一排，这些都是细节不要在意（另外偷偷告诉大家，微信的实现是用TableLayout，-.-）。

public class NinePhotoView extends ViewGroup {
 
public static final int MAX_PHOTO_NUMBER = 9;
 
private int[] constImageIds = { R.drawable.girl_0, R.drawable.girl_1,
   R.drawable.girl_2, R.drawable.girl_3, R.drawable.girl_4,
   R.drawable.girl_5, R.drawable.girl_6, R.drawable.girl_7,
   R.drawable.girl_8 };
 
// horizontal space among children views
int hSpace = Utils.dpToPx(10, getResources());
// vertical space among children views
int vSpace = Utils.dpToPx(10, getResources());
 
// every child view width and height.
int childWidth = 0;
int childHeight = 0;
 
// store images res id
ArrayList<integer> mImageResArrayList = new ArrayList<integer>(9);
private View addPhotoView;
 
public NinePhotoView(Context context) {
 super(context);
}
 
public NinePhotoView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
}
 
public NinePhotoView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 
 TypedArray t = context.obtainStyledAttributes(attrs,
     R.styleable.NinePhotoView, 0, 0);
 hSpace = t.getDimensionPixelSize(
     R.styleable.NinePhotoView_ninephoto_hspace, hSpace);
 vSpace = t.getDimensionPixelSize(
     R.styleable.NinePhotoView_ninephoto_vspace, vSpace);
 t.recycle();
 
 addPhotoView = new View(context);
 addView(addPhotoView);
 mImageResArrayList.add(new integer());
}

目前为止，都跟上一篇说的大致差不多，另外拍照和从相册选择图片不是我们这一篇的重点，所以我们把图片硬编码到代码中（全是美女...）,ViewGroup初始化时我们添加了一个+号按钮，给用户点击添加新的图片。

Measure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int rw = MeasureSpec.getSize(widthMeasureSpec);
 int rh = MeasureSpec.getSize(heightMeasureSpec);
 
 childWidth = (rw - 2 * hSpace) / 3;
 childHeight = childWidth;
 
 int childCount = this.getChildCount();
 for (int i = 0; i < childCount; i++) {
   View child = this.getChildAt(i);
   //this.measureChild(child, widthMeasureSpec, heightMeasureSpec);
 
   LayoutParams lParams = (LayoutParams) child.getLayoutParams();
   lParams.left = (i % 3) * (childWidth + hSpace);
   lParams.top = (i / 3) * (childWidth + vSpace);
 }
 
 int vw = rw;
 int vh = rh;
 if (childCount < 3) {
   vw = childCount * (childWidth + hSpace);
 }
 vh = ((childCount + 3) / 3) * (childWidth + vSpace);
 setMeasuredDimension(vw, vh);
}

我们的子View三个一排，而且都是正方形，所以我们上面通过循环很好去得到所有子View的位置，注意我们上面把子View的左上角坐标存储到我们自定义的LayoutParams 的left和top二个字段中，Layout阶段会使用，最后我们算得整个ViewGroup的宽高，调用setMeasuredDimension设置。

Layout

@Override
protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
 int childCount = this.getChildCount();
 for (int i = 0; i < childCount; i++) {
   View child = this.getChildAt(i);
   LayoutParams lParams = (LayoutParams) child.getLayoutParams();
   child.layout(lParams.left, lParams.top, lParams.left + childWidth,
       lParams.top + childHeight);
 
   if (i == mImageResArrayList.size() - 1 && mImageResArrayList.size() != MAX_PHOTO_NUMBER) {
     child.setBackgroundResource(R.drawable.add_photo);
     child.setOnClickListener(new View.OnClickListener() {
 
       @Override
       public void onClick(View arg0) {
         addPhotoBtnClick();
       }
     });
   }else {
     child.setBackgroundResource(constImageIds[i]);
     child.setOnClickListener(null);
   }
 }
}
 
public void addPhoto() {
 if (mImageResArrayList.size() < MAX_PHOTO_NUMBER) {
   View newChild = new View(getContext());
   addView(newChild);
   mImageResArrayList.add(new integer());
   requestLayout();
   invalidate();
 }
}
 
public void addPhotoBtnClick() {
 final CharSequence[] items = { "Take Photo", "Photo from gallery" };
 
 AlertDialog.Builder builder = new AlertDialog.Builder(getContext());
 builder.setItems(items, new DialogInterface.OnClickListener() {
 
   @Override
   public void onClick(DialogInterface arg0, int arg1) {
     addPhoto();
   }
 
 });
 builder.show();
}

最核心的就是调用layout方法，根据我们measure阶段获得的LayoutParams中的left和top字段，也很好对每个子View进行位置排列。然后判断在图片未达到最大值9张时，默认最后一张是+号图片，然后设置点击事件，弹出对话框供用户选择操作。

Draw
不需要重写，使用ViewGroup默认实现即可。
附上布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:orientation="vertical" >
 
<com.sw.demo.widget.NinePhotoView
  android:id="@+id/photoview"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:ninephoto_hspace="10dp"
  app:ninephoto_vspace="10dp"
  app:rainbowbar_color="@android:color/holo_blue_bright" >
 
</com.sw.demo.widget.NinePhotoView>
 
</LinearLayout>

最后还是加上程序运行的效果图，今天自定义ViewGroup的讲解就这么多了，祝大家每天都有新收获，每天都有好心情~~~

更多Android App开发中自定义View和ViewGroup的实例教程相关文章请关注PHP中文网！