一、概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何
自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出)
类似的自定义布局。下面我们就来详细介绍流式布局的应用特点以及用的的技术点:
1.流式布局的特点以及应用场景
特点:当上面一行的空间不够容纳新的TextView时候,
才开辟下一行的空间
原理图:
场景:主要用于关键词搜索或者热门标签等场景
2.自定义ViewGroup,重点重写下面两个方法
1、onMeasure:测量子view的宽高,设置自己的宽和高
2、onLayout:设置子view的位置
onMeasure:根据子view的布局文件中属性,来为子view设置测量模式和测量值
测量=测量模式+测量值;
测量模式有3种:
EXACTLY:表示设置了精确的值,一般当childView设置其宽、高为精确值、match_parent时,ViewGroup会将其设置为EXACTLY;
AT_MOST:表示子布局被限制在一个最大值内,一般当childView设置其宽、高为wrap_content时,ViewGroup会将其设置为AT_MOST;
UNSPECIFIED:表示子布局想要多大就多大,一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中;此种模式比较少见。
3.LayoutParams
ViewGroup LayoutParams :每个 ViewGroup 对应一个 LayoutParams; 即 ViewGroup -> LayoutParams
getLayoutParams 不知道转为哪个对应的LayoutParams ,其实很简单,就是如下:
子View.getLayoutParams 得到的LayoutParams对应的就是 子View所在的父控件的LayoutParams;
例如,LinearLayout 里面的子view.getLayoutParams ->LinearLayout.LayoutParams
所以 咱们的FlowLayout 也需要一个LayoutParams,由于上面的效果图是子View的 margin,
所以应该使用MarginLayoutParams。即FlowLayout->MarginLayoutParams
4.最后来看看实现的最终效果图:
二、热门标签的流式布局的实现:
1. 自定义热门标签的ViewGroup实现
根据上面的技术分析,自定义类继承于ViewGroup,并重写 onMeasure和onLayout等方法。具体实现代码如下:
package com.czm.flowlayout;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
/**
*
* @author caizhiming
* @created on 2015-4-13
*/
public class XCFlowLayout extends ViewGroup{
//存储所有子View
private List> mAllChildViews &#61; new ArrayList<>();
//每一行的高度
private List mLineHeight &#61; new ArrayList<>();
public XCFlowLayout(Context context) {
this(context, null);
// TODO Auto-generated constructor stub
}
public XCFlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
// TODO Auto-generated constructor stub
}
public XCFlowLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
&#64;Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
//父控件传进来的宽度和高度以及对应的测量模式
int sizeWidth &#61; MeasureSpec.getSize(widthMeasureSpec);
int modeWidth &#61; MeasureSpec.getMode(widthMeasureSpec);
int sizeHeight &#61; MeasureSpec.getSize(heightMeasureSpec);
int modeHeight &#61; MeasureSpec.getMode(heightMeasureSpec);
//如果当前ViewGroup的宽高为wrap_content的情况
int width &#61; 0;//自己测量的 宽度
int height &#61; 0;//自己测量的高度
//记录每一行的宽度和高度
int lineWidth &#61; 0;
int lineHeight &#61; 0;
//获取子view的个数
int childCount &#61; getChildCount();
for(int i &#61; 0;i
View child &#61; getChildAt(i);
//测量子View的宽和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//得到LayoutParams
MarginLayoutParams lp &#61; (MarginLayoutParams) getLayoutParams();
//子View占据的宽度
int childWidth &#61; child.getMeasuredWidth() &#43; lp.leftMargin &#43; lp.rightMargin;
//子View占据的高度
int childHeight &#61; child.getMeasuredHeight() &#43; lp.topMargin &#43; lp.bottomMargin;
//换行时候
if(lineWidth &#43; childWidth > sizeWidth){
//对比得到最大的宽度
width &#61; Math.max(width, lineWidth);
//重置lineWidth
lineWidth &#61; childWidth;
//记录行高
height &#43;&#61; lineHeight;
lineHeight &#61; childHeight;
}else{//不换行情况
//叠加行宽
lineWidth &#43;&#61; childWidth;
//得到最大行高
lineHeight &#61; Math.max(lineHeight, childHeight);
}
//处理最后一个子View的情况
if(i &#61;&#61; childCount -1){
width &#61; Math.max(width, lineWidth);
height &#43;&#61; lineHeight;
}
}
//wrap_content
setMeasuredDimension(modeWidth &#61;&#61; MeasureSpec.EXACTLY ? sizeWidth : width,
modeHeight &#61;&#61; MeasureSpec.EXACTLY ? sizeHeight : height);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
&#64;Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
mAllChildViews.clear();
mLineHeight.clear();
//获取当前ViewGroup的宽度
int width &#61; getWidth();
int lineWidth &#61; 0;
int lineHeight &#61; 0;
//记录当前行的view
List lineViews &#61; new ArrayList();
int childCount &#61; getChildCount();
for(int i &#61; 0;i
View child &#61; getChildAt(i);
MarginLayoutParams lp &#61; (MarginLayoutParams) child.getLayoutParams();
int childWidth &#61; child.getMeasuredWidth();
int childHeight &#61; child.getMeasuredHeight();
//如果需要换行
if(childWidth &#43; lineWidth &#43; lp.leftMargin &#43; lp.rightMargin > width){
//记录LineHeight
mLineHeight.add(lineHeight);
//记录当前行的Views
mAllChildViews.add(lineViews);
//重置行的宽高
lineWidth &#61; 0;
lineHeight &#61; childHeight &#43; lp.topMargin &#43; lp.bottomMargin;
//重置view的集合
lineViews &#61; new ArrayList();
}
lineWidth &#43;&#61; childWidth &#43; lp.leftMargin &#43; lp.rightMargin;
lineHeight &#61; Math.max(lineHeight, childHeight &#43; lp.topMargin &#43; lp.bottomMargin);
lineViews.add(child);
}
//处理最后一行
mLineHeight.add(lineHeight);
mAllChildViews.add(lineViews);
//设置子View的位置
int left &#61; 0;
int top &#61; 0;
//获取行数
int lineCount &#61; mAllChildViews.size();
for(int i &#61; 0; i
//当前行的views和高度
lineViews &#61; mAllChildViews.get(i);
lineHeight &#61; mLineHeight.get(i);
for(int j &#61; 0; j
View child &#61; lineViews.get(j);
//判断是否显示
if(child.getVisibility() &#61;&#61; View.GONE){
continue;
}
MarginLayoutParams lp &#61; (MarginLayoutParams) child.getLayoutParams();
int cLeft &#61; left &#43; lp.leftMargin;
int cTop &#61; top &#43; lp.topMargin;
int cRight &#61; cLeft &#43; child.getMeasuredWidth();
int cBottom &#61; cTop &#43; child.getMeasuredHeight();
//进行子View进行布局
child.layout(cLeft, cTop, cRight, cBottom);
left &#43;&#61; child.getMeasuredWidth() &#43; lp.leftMargin &#43; lp.rightMargin;
}
left &#61; 0;
top &#43;&#61; lineHeight;
}
}
/**
* 与当前ViewGroup对应的LayoutParams
*/
&#64;Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
// TODO Auto-generated method stub
return new MarginLayoutParams(getContext(), attrs);
}
}
2.相关的布局文件&#xff1a;
引用自定义控件&#xff1a;
xmlns:tools&#61;"http://schemas.android.com/tools"
android:id&#61;"&#64;&#43;id/container"
android:layout_width&#61;"match_parent"
android:layout_height&#61;"match_parent" >
android:id&#61;"&#64;&#43;id/flowlayout"
android:layout_width&#61;"match_parent"
android:layout_height&#61;"match_parent" >
TextView的样式文件&#xff1a;
android:left&#61;"5dp"
android:right&#61;"5dp"
android:top&#61;"5dp"
android:bottom&#61;"5dp"
/>
三、使用该自定义布局控件类
最后&#xff0c;如何使用该自定义的热门标签控件类呢&#xff1f;很简单&#xff0c;请看下面实例代码&#xff1a;
package com.czm.flowlayout;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.view.ViewGroup.MarginLayoutParams;
import android.widget.TextView;
/**
*
* &#64;author caizhiming
* &#64;created on 2015-4-13
*/
public class MainActivity extends Activity {
private String mNames[] &#61; {
"welcome","android","TextView",
"apple","jamy","kobe bryant",
"jordan","layout","viewgroup",
"margin","padding","text",
"name","type","search","logcat"
};
private XCFlowLayout mFlowLayout;
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initChildViews();
}
private void initChildViews() {
// TODO Auto-generated method stub
mFlowLayout &#61; (XCFlowLayout) findViewById(R.id.flowlayout);
MarginLayoutParams lp &#61; new MarginLayoutParams(
LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
lp.leftMargin &#61; 5;
lp.rightMargin &#61; 5;
lp.topMargin &#61; 5;
lp.bottomMargin &#61; 5;
for(int i &#61; 0; i
TextView view &#61; new TextView(this);
view.setText(mNames[i]);
view.setTextColor(Color.WHITE);
view.setBackgroundDrawable(getResources().getDrawable(R.drawable.textview_bg));
mFlowLayout.addView(view,lp);
}
}
}
四、源码下载
此源码下载完之后&#xff0c;往往有个要点我们容易忽略&#xff0c;那就是源码的安全性问题&#xff0c;此处可点击移动应用安全智能服务提供商爱加密的Android加密&#xff0c;源码保护&#xff01;