Android自定义ViewGroup实现流式布局

本文实例为大家分享了Android自定义ViewGroup实现流式布局的具体代码,供大家参考,具体内容如下

1.概述

本篇给大家带来一个实例,FlowLayout,什么是FlowLayout,我们常在App 的搜索界面看到热门搜索词,就是FlowLayout,我们要实现的就是图中的效果,就是根据容器的宽,往容器里面添加元素,如果剩余的控件不足时候,自行添加到下一行,FlowLayout也叫流式布局,在开发中还是挺常用的.

2.对所有的子View进行测量

onMeasure方法的调用次数是不确定的,所以为了避免测量出错,需要把总的List集合,清空一下,一个View的绘制,需要经过onMeasure方法的测量,和onLayout方法的排版才能显示出来,在测量的方法中,我们把该ViewGroup中的所有子View遍历出来,添加到一行中的List集合中,再把一行中的所有的元素集合添加到总的集合中去,并对每个子View元素进行测量,测量的参数,我们给0,或者未指定,,如果不是一行中的第一元素,并且通过 getUsablewWidth()方法获取一行中可用的宽度,不够容纳下一元素,时就新创建一个集合,来装一行中所有元素,再把所有的子View元素全部测量完成后,我们还需要通过setMeasuredDemoetion()方法把测量出来的宽和高保存起来,保存之后可以调用getMeasureWidth获取测量之后的宽了.

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  allLines.clear();
  //测量容器的宽和高
  int containerMeasuredWidth = MeasureSpec.getSize(widthMeasureSpec);
  //这个集合用于保存单行
  ArrayList<View> oneLine = null;
  for (int i = 0; i < getChildCount(); i++) {
   //获取每一Chiledview
   View child = getChildAt(i);
    int UnspecifiedMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
   child.measure(UnspecifiedMeasureSpec, UnspecifiedMeasureSpec);//相当于传了一个0,0;
   //如果是第1个view就new一个新行出来,或者View大于了可用的宽度,
   if (i == 0 || child.getMeasuredWidth() > getUsablewWidth(containerMeasuredWidth, oneLine,oneLine.size())) {
    oneLine = new ArrayList<View>();
    allLines.add(oneLine);
   }
   oneLine.add(child);

  }

  int lineNumber = allLines.size();
  int allLinesHeight = getChildAt(0).getMeasuredHeight() * lineNumber;
  int verticalTotalpadding = getPaddingBottom() + getPaddingTop();
  //垂直总的spcing
  int verticalTotalSpcing = 8 * (lineNumber - 1);
  //容器的高 = 所有View的高 + 垂直方向的Padding + 垂直总的spcing
  int containerMeasureHeight = allLinesHeight + verticalTotalpadding + verticalTotalSpcing;
  setMeasuredDimension(containerMeasuredWidth, containerMeasureHeight);
 }

3.获取一行中可用的空间

获取一行中可用的宽度,需要我们传入容器的宽度,和一行元素的集合,和元素之间的间隔,,然后遍历所有的元素,通过一个变量来保存所有View测量出来宽度的总和,用容器的宽 减去,子View宽度的总和减去水平方向的间隔,以及左右两边的Padding,得到一行中可用的宽度

private int getUsablewWidth(int containerMeasuredWidth, ArrayList<View> oneLine,int needSpacingCount) {
  int oneLineWidth = 0;
  for (View view : oneLine) {
   oneLineWidth += view.getMeasuredWidth();
  }
  //水平方向两边的padding
  int horizotalPadding = getPaddingLeft() + getPaddingRight();
  int horizontalTotalSpcing = horizotalPadding * needSpacingCount;
  int usablewWidth = containerMeasuredWidth - oneLineWidth - horizotalPadding - horizontalTotalSpcing;
  return usablewWidth;
 }

4.对所有的子View进行排版

还是遍历每一行中的每一个元素,对该元素执行排版方法,通过child.getMeasuredWidth();和child.getMeasuredHeight();获取测量后的View的宽和高,通过child.layout(l,t,r,b),对View进行位置的摆放,left就是上个元素的Rigth,Top,就是上一行元素的Bootom,Rigth就是Left+View自身的宽度,Bottom是Top+View自身的高度,最后,因为我们手动把TextView的宽改变了,跟测量时的宽不一样了,重新调用测量即可

protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int tempRight = 0;//保存一行中上一个View的Right
  int tempBottom = 0;//保存上一行View的Bottom位置
  ///遍历第一排
  for (int row = 0; row < allLines.size(); row++) {
   ArrayList<View> oneLines = allLines.get(row);
   //计算一行中每个Veiw可以分到的平均宽度
   int totalUsableWidth= getUsablewWidth(getMeasuredWidth(), oneLines,oneLines.size()-1);
   int averageUsablewWidth = totalUsableWidth/oneLines.size();
   //遍历的是一行的内容
   for (int column = 0; column < oneLines.size(); column++) {
    View child = oneLines.get(column);
    //获取测量的宽高
    int measuredWidth = child.getMeasuredWidth();
    int measuredHeight = child.getMeasuredHeight();
    //如果是一行中的第一个View则排在第0个位置
    int left = column == 0 ? getPaddingLeft() : tempRight + 8;
    //如果是第1行Top坐标是PaddingTop的位置,否则就上一个View的bottom位置
    int top = row == 0 ? getPaddingTop() : tempBottom + 8;
    int right = left + measuredWidth ;//+ averageUsablewWidth;

    int bootom = top + measuredHeight;
    child.layout(left, top, right, bootom);
    tempRight = right;

    int WidthMeasureSpec = MeasureSpec.makeMeasureSpec(child.getWidth(), MeasureSpec.EXACTLY);
    int HeightMakeMeasureSpec = MeasureSpec.makeMeasureSpec(child.getHeight(), MeasureSpec.EXACTLY);
    child.measure(WidthMeasureSpec,HeightMakeMeasureSpec);
   }
   tempBottom = oneLines.get(0).getBottom();
  }
 }

5.Activity

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 FlowLayout flowLayout = new FlowLayout(this);
 flowLayout.setPadding(6, 6, 6, 6);

 for (String text : list) {
    TextView textView = new TextView(this);
    textView.setBackgroundResource(R.drawable.bg_text);
    textView.setGravity(Gravity.CENTER);
    textView.setPadding(6, 6, 6, 6);
    textView.setText(text);
    textView.setTextSize(20);
    flowLayout.addView(textView);
   }

 setContentView(flowLayout);
 }
 }

6.TextView 的背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <stroke android:width="1dp"
  android:color="#5000" />
 <corners android:radius="6dp"/>
</shape>

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

(0)

相关推荐

  • Android自定义View圆形图片控件代码详解

    前言 在日常开发中,圆形的图片效果还是很常见的.可以通过给Paint设置Xfermode来实现,这里简单记录如下. 实现 实现圆形效果的核心是PorterDuffXfermode,对于PorterDuffXfermode,这里不展开,可以查询相关资料. 核心代码 //绘制背景 canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint); //设置模式为:显示背景层和上层的交集,且显示上层图像 mPaint.setXfermode(new

  • Android自定义View实现抖音飘动红心效果

    本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下 自定义View--抖音飘动红心 效果展示 动画效果 使用自定义view完成红心飘动效果 View实现 动画:属性动画(位移+缩放+透明度+旋转) + 随机数:(属性动画参数+颜色选取) View /** * 飘心效果 * 1.创建ImageView * 2.ImageView执行组合动画 * 3.动画执行完成后销毁View */ public class FlyHeartView exten

  • Android自定义view实现倒计时控件

    本文实例为大家分享了Android自定义view实现倒计时控件的具体代码,供大家参考,具体内容如下 直接上代码 自定义TextView 文字展示 public class StrokeTextView extends TextView { private TextView borderText = null;///用于描边的TextView private Context mContext; public StrokeTextView(Context context) { super(conte

  • Android自定义View实现圆形进度条

    本文实例为大家分享了Android自定义View实现圆形进度条的具体代码,供大家参考,具体内容如下 效果如下: 主要代码 CircularProgressView.java public class CircularProgressView extends View { private Paint mBackPaint, mProgPaint; // 绘制画笔 private RectF mRectF; // 绘制区域 private int[] mColorArray; // 圆环渐变色 pr

  • Android自定义View实现圆环进度条

    本文实例为大家分享了Android自定义View实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 View实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条弧线 View /** * 圆环进度条 */ public class RoundProgressBar extends View { //绘制矩形区域 private RectF rectF; //起始角度 private float startAngle; //扫过角度 private floa

  • Android自定义view实现标签栏功能(只支持固定两个标签)

    实现效果图 主要代码 完整源代码 class TabView(context: Context, attributeSet: AttributeSet?) : LinearLayout(context, attributeSet) { private lateinit var firstTab: View private lateinit var secondTab: View private val firstTabIndex = 0 private val secondTabIndex =

  • Android自定义View实现跟随手指移动的小兔子

    本文实例为大家分享了Android自定义View实现跟随手指移动的小兔子,供大家参考,具体内容如下 自定义的View实现跟随手指的小兔子 按前面的例子新创建一个project,再在project中新创建一个module 将需要的背景图和兔子图片放入mipmap中 将布局管理器改为帧布局管理器 <?xml version="1.0" encoding="utf-8"?> //修改为帧布局管理器FrameLayout <FrameLayout xmln

  • Android自定义ViewGroup实现流式布局

    本文实例为大家分享了Android自定义ViewGroup实现流式布局的具体代码,供大家参考,具体内容如下 1.概述 本篇给大家带来一个实例,FlowLayout,什么是FlowLayout,我们常在App 的搜索界面看到热门搜索词,就是FlowLayout,我们要实现的就是图中的效果,就是根据容器的宽,往容器里面添加元素,如果剩余的控件不足时候,自行添加到下一行,FlowLayout也叫流式布局,在开发中还是挺常用的. 2.对所有的子View进行测量 onMeasure方法的调用次数是不确定的

  • Android 深入探究自定义view之流式布局FlowLayout的使用

    引子 文章开始前思考个问题,view到底是如何摆放到屏幕上的?在xml布局中,我们可能用到match_parent.wrap_content或是具体的值,那我们如何转为具体的dp?对于层层嵌套的布局,他们用的都不是具体的dp,我们又该如何确定它们的尺寸? 下图是实现效果 自定义View的流程 想想自定义view我们都要做哪些事情 布局,我们要确定view的尺寸以及要摆放的位置,也就是 onMeasure() .onLayout() 两方法 显示,布局之后是怎么把它显示出来,主要用的是onDraw

  • Android 简单实现一个流式布局的示例

    本篇文章主要介绍了Android 简单实现一个流式布局的示例,分享给大家,具体如下: 流式布局应该是我们很常见的一种布局了,在很多场景下都会遇到它,例如:标签之类的功能等.用轮子不如造轮子来的爽,这里自己简单的实现下流式布局: onMeasure onLayout 通过以上两个方法我们就可以完成对流式布局的基本操作: onMeasure @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

  • Android自定View流式布局根据文字数量换行

    本文实例为大家分享了Android根据文字数量换行的具体代码,供大家参考,具体内容如下 //主页 定义数据框 package com.example.customwaterfallviewgroup; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.EditText; import java.util

  • Android实现单行标签流式布局

    近期产品提了有关流式布局的新需求,要求显示字数不定的标签,如果一行显示不完,就只显示一行的内容,而且还在一两个页面采取了多种样式,无语了 自己归类了一下,需求有以下几个区别 1:可选择添加标签与否 2:是否有具体数量限制(比如最多显示3个) 3:是否要靠右对齐 有需求,先找一波现有的工具,看是不是可以直接用 参考Android流式布局实现热门标签效果 FlowLayout原样式: 这个和我们的需求已经比较符合了,但是他并不能控制只显示单行内容 如果要实现这样的布局,官方也提供了Flexbox和F

  • Android自定义ViewGroup之实现FlowLayout流式布局

    整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: git

  • Android流式布局FlowLayout详解

    现在商城类的APP几乎都要用到流式布局来实现选择属性功能,在我的demo中是通过FlowLayout工具类实现流式布局 使用起来非常简单,十几行代码就可以实现: 在我们的项目中大部分都是单选效果,为了防止用到多选,demo中也实现了多选: FlowLayout大家不用研究怎么实现的,只要会使用就好: 就好比谷歌提供的ListView条目点击事件一样,只要会用就好,没必要研究个所以然:大家在用的时候直接从demo中复制到项目中即可: 大家可以将FlowLayout理解为一个线性布局:将准备好的一个

  • Android自定义ViewGroup之FlowLayout(三)

    本篇继续来讲自定义ViewGroup,给大家带来一个实例:FlowLayout.何为FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行,所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: 定义FlowLayout LayoutParams,onLayout的写法都和上一篇讲WaterfallLayout一模一样,在此不再赘述了,没看过的可以参照

  • Android实现简单的自定义ViewGroup流式布局

    目录 前言 一.基本的测量与布局 二.流式的布局的layout 三.流式的布局的Measure 后记 前言 前面几篇我们简单的复习了一下自定义 View 的测量与绘制,并且回顾了常见的一些事件的处理方式. 那么如果我们想自定义 ViewGroup 的话,它和自定义View又有什么区别呢?其实我们把 ViewGroup 当做 View 来用的话也不是不可以.但是既然我们用到了容器 ViewGroup 当时是想用它的一些特殊的特性了. 比如 ViewGroup 的测量,ViewGroup的布局,Vi

  • Android简单实现自定义流式布局的方法

    本文实例讲述了Android简单实现自定义流式布局的方法.分享给大家供大家参考,具体如下: 首先来看一下 手淘HD - 商品详情 - 选择商品属性 页面的UI 商品有很多尺码,而且展现每个尺码所需要的View的大小也不同(主要是宽度),所以在从服务器端拉到数据之前,展现所有尺码所需要的行数和每一行的个数都无法确定,因此不能直接使用GridView或ListView. 如果使用LinearLayout呢? 一个LinearLayout只能显示一行,如果要展示多行,则每一行都要new一个Linear

随机推荐