Android自定义ViewGroup实现标签浮动效果

 更新时间:2016年06月16日 11:32:20   投稿:lijiao  
这篇文章主要为大家详细介绍了Android自定义ViewGroup实现标签浮动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前面在学习鸿洋大神的一些自定义的View文章,看到了自定义ViewGroup实现浮动标签,初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup。目前实现的可以动态添加标签、可点击。效果图如下:

1、思路
 首先在onMeasure方法中测量ViewGroup的宽和高,重点是处理当我们自定义的ViewGroup设置为wrap_content的情况下,如何去测量其大小的问题。当我们自定义的ViewGroup设置为wrap_content时,我们需要让子View先去测量自己,当子View测量完后,再通过子View的getMeasuredWidth和getMeasureHeight方法获得其子View的宽和高。每次在测量一个子View之前,都需要判断如果加入该子View,当前行是否能够容纳下该子View,如果不能,则需要新开一行,并记录下当前行的最大高度。
 在onLayout方法中,核心人物是给每个子View摆放位置,也就是为该ViewGroup中每个子View找到盒子模型上面的两个点也就是左上角和右下角,即点(l,t)和点(r,b),确定了两个点,子View的位置也就确定了。 

2、实现
 基本思路有了就可以尝试实现了,代码如下:
 自定义的ViewGroup: 

/**
 * 流式标签(动态的,根据传入的数据动态添加标签)
 */
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("闲逛的蚂蚁");
 }

}

源码下载:Android流式标签可动态添加FlowLayout  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android编程实现WebView全屏播放的方法(附源码)

    Android编程实现WebView全屏播放的方法(附源码)

    这篇文章主要介绍了Android编程实现WebView全屏播放的方法,结合实例形式较为详细的分析了Android实现WebView全屏播放的布局与功能相关技巧,需要的朋友可以参考下
    2015-11-11
  • Android App中自定义View视图的实例教程

    Android App中自定义View视图的实例教程

    这篇文章主要介绍了Android App中自定义View视图的实例教程,详细讲解了如何在创建View中定义各种锁需要的样式属性,需要的朋友可以参考下
    2016-04-04
  • Android编程自定义title bar(标题栏)示例

    Android编程自定义title bar(标题栏)示例

    这篇文章主要介绍了Android编程自定义title bar(标题栏)的方法,结合实例形式分析了Android针对标题栏的设置与页面布局操作相关技巧,需要的朋友可以参考下
    2016-10-10
  • Android EditText限制输入字数的方法

    Android EditText限制输入字数的方法

    这篇文章主要介绍了Android EditText限制输入字数的方法,涉及Android针对EditText文本与字符串操作相关技巧,需要的朋友可以参考下
    2016-01-01
  • Android短信验证码自动填充功能

    Android短信验证码自动填充功能

    点击获取验证码按钮,收到短信,当前应用不需要退出程序就可以获取到短信中的验证码,并自动填充,这篇文章主要介绍了Android短信验证码自动填充功能,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android 个人理财工具六:显示账单明细 下

    Android 个人理财工具六:显示账单明细 下

    本文主要节诶是Android 个人理财工具显示账单明细,主要实现此窗口的查询和删除功能,这里提供实现代码,有兴趣的小伙伴可以参考下
    2016-08-08
  • Android软件自动更新实现代码

    Android软件自动更新实现代码

    这篇文章主要为大家详细介绍了Android软件自动更新实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android开发之利用Activity实现Dialog对话框

    Android开发之利用Activity实现Dialog对话框

    这篇文章主要给大家介绍了Android开发之如何利用Activity实现Dialog对话框效果,文中给出了详细的示例代码,相信对大家的理解及学习具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
    2016-12-12
  • 详解android shape的使用总结

    详解android shape的使用总结

    在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,本篇文章主要介绍了android shape的使用,有兴趣的可以一起了解一下。
    2016-12-12
  • Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)

    Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)

    这篇文章主要介绍了Android 中之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论