流式布局的实现-1

流式布局可以实现逐行填满的布局效果;适用于关键词搜索和热门展示,可以动态的添加标签,用起来十分方便与快捷

源码下载(由慕课网的老师提供,谢谢)

之后说说主要的安排:

第一篇:创建类,确定继承关系,实现构造函数,确定成员函数;

第二篇:实现FlowLayout(流式布局)主要函数的方法;

第一篇:创建类,确定继承关系,实现构造函数,确定成员函数;

第二篇与之后几篇:实现各函数,并说明成员变量的作用;

和用listView实现下拉刷新一样,还是先分析文件结构:

包括了两个类:

public class MainActivity extends Activity;
public class FlowLayout extends ViewGroup;

MainActivity:用于加载主布局,将子View动态的添加到自定义布局中;

FlowLayout:继承自ViewGroup,用于实现流式布局;ViewGroup是容纳各种UI组件的容器,继承自View(官方解释:A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers.),常见的继承自ViewGroup的有我们所熟悉的ListView(ListView
<- AbsListView <- AdapterView <- ViewGroup);

在Activity中:

成员变量:

private String[] mVals;
private FlowLayout mFlowLayout;

mVals:用于动态加载标签,作为TextView的Text数据源;

mFlowLayout:FlowLayout布局;

成员函数:

public void initData()

initData:添加标签,将mVals中的字符写入到标签中,并将标签加载到FlowLayout布局中;

init方法:

public void initData()
    {
        LayoutInflater mInflater = LayoutInflater.from(this);
        for (int i = 0; i < mVals.length; i++)
        {
            TextView tv = (TextView) mInflater.inflate(R.layout.tv,
                    mFlowLayout, false);
            tv.setText(mVals[i]);
            mFlowLayout.addView(tv);
        }

    }

首先调用LayoutInflater的静态成员函数from,获得主布局的LayoutInflater,以便之后设置主布局中嵌套的FlowLayout布局的View对象;

之后在for循环中,用主布局的inflate函数得到一个新的TextView对象,将数据源mVals中的数据写入到TextView中,调用FlowLayout布局的addView方法,将新的TextView加入到其中;

在FlowLayout类中:

成员变量:

private List<List<View>> mAllViews;
private List<Integer> mLineHeight;

mAllViews:存储所有的View;

mLineHeight:每一行的高度;

成员函数:

public FlowLayout(Context context);
public FlowLayout(Context context, AttributeSet attrs);
public FlowLayout(Context context, AttributeSet attrs, int defStyle);
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec);
protected void onLayout(boolean changed, int l, int t, int r, int b);
public LayoutParams generateLayoutParams(AttributeSet attrs);

各个构造函数的参数,调用时机与重写:

一个参数的:为上下文;new一个控件,传入的是上下文对象;重写,让他调用两个参数的构造方法;

两个参数的:为上下文和属性集;是在布局文件中书写控件的属性时而没有自定义属性时调用;重写,让他调用三个参数的构造方法;

三个参数:为上下文,属性集和defStyle,是在布局文件中书写控件的属性时而且使用了自定义属性时调用;

onMerasure:测量view及其内容来确定view的宽度和高度。这个方法在measure(int, int)中被调用,必须被重写来精确和有效的测量view的内容;

onLayout:在view给其孩子设置尺寸和位置时被调用。子view,包括孩子在内,必须重写onLayout(boolean, int, int, int, int)方法,并且调用各自的layout(int, int, int, int)方法。参数changed表示view有新的尺寸或位置;参数l表示相对于父view的Left位置;参数t表示相对于父view的Top位置;参数r表示相对于父view的Right位置;参数b表示相对于父view的Bottom位置。

generateLayoutParams:指明ViewGroup与LayoutParams的关系;因为要规定间距,所以直接return new MarginLayoutParams(getContext,attrs);

时间: 2024-12-25 13:47:54

流式布局的实现-1的相关文章

含有过滤功能的android流式布局

FilterFlowLayout 含有过滤功能的流式布局, 参考FlowLayout 可以去除宽度不在范围(比例或真实值)内的子view 可以设置最大行数 可以添加组件间水平间距 可以添加行间距 系统要求 Android 4.0以上 快速使用 <me.codeboy.android.lib.FilterFlowLayout xmlns:cb="http://schemas.android.com/apk/res-auto" android:id="@+id/filter

Android自定义之流式布局

流式布局,好处就是父类布局可以自动的判断子孩子是不是需要换行,什么时候需要换行,可以做到网页版的标签的效果.今天就是简单的做了自定义的流式布局. 具体效果: 原理: 其实很简单,Measure  Layout.只需要这两个步骤就可以搞定了.完全的手动去Measure  Layout. 我们看一下代码. 解释就在代码里面做注释了,因为使用为知笔记写的博客,格式不符合代码格式.大家可以看具体的源码.最后又源码下载地址. 1.Measure  测量 @Override protected void o

GUI布局:边界布局、流式布局、网格布局、卡片布局

边界布局 package guiTest; //JFrame默认的是边界布局BorderLayout import java.awt.BorderLayout; import javax.swing.JButton; import javax.swing.JFrame; public class BorderLayoutDemo { public static void main(String[] args) { JFrame f = new JFrame("边界布局BorderLayout&q

c# winform panel 流式布局 panel块可自动排列

代码下载地址  http://download.csdn.net/detail/simadi/7677053 c# winform panel 流式布局 panel块可自动排列,布布扣,bubuko.com

css3流式布局

css3布局方式: 不推荐使用float,有时候使用浮动的时候,对于可适应的流氏布局,无法胜任. 推荐使用css3的display:webkit-box. 使用的html代码 <div class="warp"> <div class="one"> </div> <div class="two"></div> <div class="three"><

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,

移动web中的流式布局和viewport知识介绍

1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 2    Viewport 我们猜想下pc页面在移动设备上显示情况. 放不下,缩放? 我们测试下pc页面在移动设备上显示. 默认的缩放的显示的 认识viewport 在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设

JAVA 流式布局管理器

//流式布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian2 extends JFrame{ //定义组件 JButton[] an = {null,null,null,null,null,null,null,null}; public static void main(String[] args){ //运行本类的构造方法 Jiemian2 jiemian = new Jiemian2(); } public

android流式布局热门标签的实现

在日常的app使用中,我们会在android 的app中看见热门标签等自动换行的流式布局,今天就为大家分享一种android流式布局的实现. 先看最终效果 自定义流式布局的实现 package com.sunny.flowlayout.view; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.util.AttributeSet; import an

自定义流式布局

1.概述 何为FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: 这些都特别适合使用FlowLayout 2.简单的分析 1.对于FlowLayout,需要指定的LayoutParams,我们目前只需要能够识别margin即可,即使用Mar