ViewGroup personnalisé Android implémente l'effet flottant d'étiquette

J'étudiais plus tôt quelques articles View personnalisés de Maître Hongyang et j'ai vu le ViewGroup personnalisé pour implémenter des étiquettes flottantes. J'ai jeté un aperçu préliminaire de ses idées et j'ai combiné mes propres idées pour compléter mon propre ViewGroup personnalisé pour les étiquettes flottantes. L'implémentation actuelle peut ajouter dynamiquement des étiquettes et être cliquable. Le rendu est le suivant :

1. Idée
Tout d'abord, mesurez la largeur et la hauteur du ViewGroup dans la méthode onMeasure. L'accent est mis sur le traitement lors de notre personnalisation. ViewGroup est défini sur wrap_content. Dans ce cas, le problème est de savoir comment mesurer sa taille. Lorsque notre ViewGroup personnalisé est défini sur wrap_content, nous devons d'abord laisser la sous-vue se mesurer elle-même. Une fois la sous-vue mesurée, la largeur et la hauteur de la sous-vue peuvent être obtenues via les méthodes getMeasuredWidth et getMeasureHeight de la sous-vue. -Voir. Chaque fois avant de mesurer une sous-vue, vous devez déterminer si la ligne actuelle peut accueillir la sous-vue si la sous-vue est ajoutée. Sinon, vous devez ouvrir une nouvelle ligne et enregistrer la hauteur maximale de la ligne actuelle. .
Dans la méthode onLayout, le rôle principal est de positionner chaque sous-vue, c'est-à-dire de trouver les deux points sur le modèle de boîte pour chaque sous-vue dans le ViewGroup, qui sont le coin supérieur gauche et le coin inférieur droit coin, c'est-à-dire le point (l, t) et le point (r, b), les deux points sont déterminés et la position de la sous-vue est également déterminée.

2. Implémentation
Une fois que vous avez l'idée de base, vous pouvez essayer de l'implémenter. Le code est le suivant :
ViewGroup personnalisé :

/**
 * 流式标签(动态的，根据传入的数据动态添加标签)
 */
public class DynamicTagFlowLayout extends ViewGroup {
  
 private List<String> mTags = new ArrayList<String>();
  
 public DynamicTagFlowLayout(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 }
 
 public DynamicTagFlowLayout(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 
 public DynamicTagFlowLayout(Context context) {
 super(context);
 }
  
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  
 //当前ViewGroup的总高度
 int totalHeight= 0;
 //所有行中的最大宽度
 int maxLineWidth = 0;
  
 //当前行的最大高度
 int lineMaxHeight = 0;
 //当前行的总宽度
 int currentLineWidth = 0;
  
 //每个childView所占用的宽度
 int childViewWidthSpace = 0;
 //每个childView所占用的高度
 int childViewHeightSpace = 0;
  
 int count = getChildCount();
 MarginLayoutParams layoutParams;
  
 for(int i = 0; i < count; i++){
  View child = getChildAt(i);
   
  if(child.getVisibility() != View.GONE){//只有当这个View能够显示的时候才去测量
  //测量每个子View，以获取子View的宽和高
  measureChild(child, widthMeasureSpec, heightMeasureSpec);
   
  layoutParams = (MarginLayoutParams) child.getLayoutParams();
   
  childViewWidthSpace = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
  childViewHeightSpace = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
   
  if(currentLineWidth + childViewWidthSpace > widthSize){//表示如果当前行再加上现在这个子View，就会超出总的规定宽度，需要另起一行
   totalHeight += lineMaxHeight;
   if(maxLineWidth < currentLineWidth){//如果行的最长宽度发生了变化，更新保存的最长宽度
   maxLineWidth = currentLineWidth;
   }
   currentLineWidth = childViewWidthSpace;//另起一行后，需要重置当前行宽
   lineMaxHeight = childViewHeightSpace;
  }else{//表示当前行可以继续添加子元素
   currentLineWidth += childViewWidthSpace;
   if(lineMaxHeight < childViewHeightSpace){
   lineMaxHeight = childViewHeightSpace;
   }
  }
  }
 }
  
 setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : maxLineWidth, heightMode == MeasureSpec.EXACTLY ? heightSize : totalHeight);
  
 }
 
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 //当前是第几行
 int currentLine = 1;
 //存放每一行的最大高度
 List<Integer> lineMaxHeightList = new ArrayList<Integer>();
  
 //每个childView所占用的宽度
 int childViewWidthSpace = 0;
 //每个childView所占用的高度
 int childViewHeightSpace = 0;
  
 //当前行的最大高度
 int lineMaxHeight = 0;
 //当前行的总宽度
 int currentLineWidth = 0;
  
 int count = getChildCount();
 MarginLayoutParams layoutParams;
  
 for(int i = 0; i < count; i++){
  int cl= 0, ct = 0, cr = 0, cb = 0;
  View child = getChildAt(i);
  if(child.getVisibility() != View.GONE){//只有当这个View能够显示的时候才去测量
   
  layoutParams = (MarginLayoutParams) child.getLayoutParams();
  childViewWidthSpace = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
  childViewHeightSpace = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
   
  System.out.println("getWidth()---->"+getWidth());
   
  if(currentLineWidth + childViewWidthSpace > getWidth()){//表示如果当前行再加上现在这个子View，就会超出总的规定宽度，需要另起一行
   lineMaxHeightList.add(lineMaxHeight);//此时先将这一行的最大高度加入到集合中
   //新的一行，重置一些参数
   currentLine++;
   currentLineWidth = childViewWidthSpace;
   lineMaxHeight = childViewHeightSpace;
    
   cl = layoutParams.leftMargin;
   if(currentLine > 1){
   for(int j = 0; j < currentLine - 1; j++){
    ct += lineMaxHeightList.get(j);
   }
   ct += layoutParams.topMargin ;
   }else{
   ct = layoutParams.topMargin;
   }
  }else{//表示当前行可以继续添加子元素
   cl = currentLineWidth + layoutParams.leftMargin;
   if(currentLine > 1){
   for(int j = 0; j < currentLine - 1; j++){
    ct += lineMaxHeightList.get(j);
   }
   ct += layoutParams.topMargin;
   }else{
   ct = layoutParams.topMargin;
   }
   currentLineWidth += childViewWidthSpace;
   if(lineMaxHeight < childViewHeightSpace){
   lineMaxHeight = childViewHeightSpace;
   }
  }
   
  cr = cl + child.getMeasuredWidth();
  cb = ct + child.getMeasuredHeight();
   
  child.layout(cl, ct, cr, cb);
   
  }
 }
 }
  
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
 return new MarginLayoutParams(getContext(), attrs);
 }
  
 public void setTags(List<String> tags){
 if(tags!= null){
  mTags.clear();
  mTags.addAll(tags);
  for(int i = 0; i < mTags.size(); i++){
  TextView tv = new TextView(getContext());
  MarginLayoutParams lp = new MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT, MarginLayoutParams.WRAP_CONTENT);
  lp.setMargins(15, 15, 15, 15);
//  lp.width = MarginLayoutParams.WRAP_CONTENT;
//  lp.height = MarginLayoutParams.WRAP_CONTENT;
  tv.setLayoutParams(lp);
  tv.setBackgroundResource(R.drawable.tv_bg);
  /*
   * setPadding一定要在setBackgroundResource后面使用才有效！！！
   * http://stackoverflow.com/questions/18327498/setting-padding-for-textview-not-working
   */
  tv.setPadding(15, 15, 15, 15);
  tv.setTextColor(Color.WHITE);
   
  tv.setText(mTags.get(i));
   
  tv.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
   if(listener != null){
    listener.onClick(v);
   }
   }
  });
   
  addView(tv);
  }
  requestLayout();
 }
 }
  
 private OnTagItemClickListener listener;
 public interface OnTagItemClickListener{
 public void onClick(View v);
 }
 public void setOnTagItemClickListener(OnTagItemClickListener l){
 listener = l;
 }
 
}

MainActivity :

public class MainActivity extends Activity {
  
 private DynamicTagFlowLayout dynamicTagFlowLayout;
  
 List<String> tags = new ArrayList<String>();
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_dynamic_tagflowlayout);
  
 dynamicTagFlowLayout = (DynamicTagFlowLayout) findViewById(R.id.dynamic_tag);
 dynamicTagFlowLayout.setOnTagItemClickListener(new OnTagItemClickListener() {
  @Override
  public void onClick(View v) {
  TextView tv = (TextView) v;
  Toast.makeText(MainActivity.this, tv.getText().toString(), Toast.LENGTH_SHORT).show();
  }
 });
  
 initData();
 dynamicTagFlowLayout.setTags(tags);
 }
 
 private void initData() {
 tags.add("阳哥你好！");
 tags.add("Android开发");
 tags.add("新闻热点");
 tags.add("热水进宿舍啦！");
 tags.add("I love you");
 tags.add("成都妹子");
 tags.add("新余妹子");
 tags.add("仙女湖");
 tags.add("创新工厂");
 tags.add("孵化园");
 tags.add("神州100发射");
 tags.add("有毒疫苗");
 tags.add("顶你阳哥阳哥");
 tags.add("Hello World");
 tags.add("闲逛的蚂蚁");
 tags.add("闲逛的蚂蚁");
 tags.add("闲逛的蚂蚁");
 tags.add("闲逛的蚂蚁");
 tags.add("闲逛的蚂蚁");
 tags.add("闲逛的蚂蚁");
 }
 
}

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à l'implémentation de l'effet flottant d'étiquette par ViewGroup personnalisé Android, veuillez faire attention au site Web PHP chinois !