扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关Android中怎么实现一个瀑布流控件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到恩阳网站设计与恩阳网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟空间、企业邮箱。业务覆盖恩阳地区。
具体如下:
public class FlowLayout extends ViewGroup { /**行里子view之间的行距离*/ public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding); /**行里子view之间的垂直距离*/ public int mVerticalSpace = Util.getDimen(R.dimen.top_padding); /**创建行的集合*/ private ListmLines = new ArrayList (); /**当前行*/ private Line mCurrentLine; /**当前行使用的宽度*/ private int mCurrentUseWidth = 0; /**父容器的宽高*/ private int parentWidthSize; private int parentHeightSize; public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public FlowLayout(Context context, AttributeSet attrs) { super(context, attrs); } public FlowLayout(Context context) { super(context); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //0.先清空行集合里的数据 clear(); //1.得到父viewGroup的模式与大小 int parentWidthMode = MeasureSpec.getMode(widthMeasureSpec);// parentWidthSize = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight(); int parentHeightMode = MeasureSpec.getMode(heightMeasureSpec); parentHeightSize = MeasureSpec.getSize(heightMeasureSpec) - getPaddingBottom() - getPaddingTop(); /* 每个子view都是包裹内容 * layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT * 得到每个孩子的测量规则 */ //2.得到每个孩子的模式 int childWidthMode = parentWidthMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentWidthMode; int childHeightMode = parentHeightMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentHeightMode; //3.根据模式得到子控件的大小 int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthMode, parentWidthSize); int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeightMode, parentHeightSize); //得到子view的个数 int count = getChildCount(); //创建新的行 mCurrentLine = new Line(); for (int i = 0; i < count; i++) { View childView = getChildAt(i); //4.测量每个孩子 childView.measure(childWidthMeasureSpec, childHeightMeasureSpec); //5.得到测量后的孩子的宽高 int childMeasureWidth = MeasureSpec.getSize(childWidthMeasureSpec); //int childMeasureHeight = MeasureSpec.getSize(childHeightMeasureSpec); //6.得到此行使用的宽度 mCurrentUseWidth += childMeasureWidth; //7.判断此行的宽度是否大于父控件的宽度,如果大于则换行 if (mCurrentUseWidth > parentWidthSize) { //8.如果当前的子view的宽度大于父容器的宽度,强行把这个view添加的集合里 if (mCurrentLine.getChildCount()<1) { mLines.add(mCurrentLine); } //9.换行 newLine(); }else { //8.把当前子view添加到行里 mCurrentLine.addChild(childView); //9.添加间隔 mCurrentUseWidth += mHorizontolSpace; if (mCurrentUseWidth > parentWidthSize) { //10.换行 newLine(); } } } //11.如果集合里没有添加当前行,则把当前添加到集合 if (!mLines.contains(mCurrentLine)) { mLines.add(mCurrentLine); } //12.设置富容器的总宽高 int parentWidth = parentWidthSize + getPaddingLeft() + getPaddingRight(); int parentHeight = (mLines.size()-1) * mVerticalSpace + getPaddingBottom() + getPaddingTop(); for(Line line : mLines){ //得到所以line的高度 parentHeight += line.getHeight(); } //13.resolveSize表示哪个高度合适,就用哪个 setMeasuredDimension(parentWidth, resolveSize(parentHeightSize, parentHeight)); /*setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));*/ } /** * 换行 */ private void newLine() { //a.先把当前的行添加到集合 mLines.add(mCurrentLine); //b.创建新的一行 mCurrentLine = new Line(); //c.新行里的使用的行必须设置为0 mCurrentUseWidth = 0; } public void clear() { mLines.clear(); mCurrentLine = null; mCurrentUseWidth = 0; } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { //15.得到每个line孩子的左上角的坐标 int left = l + getPaddingLeft(); int top = t + getPaddingTop(); //现在容器里只有line是子孩子 for (int i = 0; i < mLines.size(); i++) { Line line = mLines.get(i); //16.把分配位置给line去处理 line.layout(left, top); //17.设置第一行后的其它行的top数值 top += line.getHeight() + mVerticalSpace; } } /** * 行类,用来封装一行的view */ private class Line{ /**当前行的宽度*/ private int mWidth = 0; /**当前行的高度*/ private int mHeight = 0; /**每个孩子得到的剩余空间*/ int mChildPdding = 0; private List children = new ArrayList (); public void addChild(View childView) { children.add(childView); //取得之view里最高的高度 if (childView.getMeasuredHeight() > mHeight) { mHeight = childView.getMeasuredHeight(); } //18.得到行宽度 mWidth += childView.getMeasuredWidth(); } /** * 定位每个line在富容器里的额位置 * @param left * @param top */ public void layout(int left, int top) { //18.得到行宽度 mWidth += mHorizontolSpace * (children.size() -1); //19.得到剩余的宽度大小 //int padding = getMeasuredWidth() - mWidth; int padding = parentWidthSize - mWidth; if (padding > 0) { mChildPdding = padding / children.size(); } // getWidth()view显示的时候大小,如果view没显示,这个值就为0,步包括隐藏的部分, getMeasuredWidth()控件实际大小,包括隐藏的部分 //一般来说 getMeasuredWidth() > getWidth(); for (int i = 0; i < children.size(); i++) { View child = children.get(i); //第一种:有间隔的flow int bottom = child.getMeasuredHeight() + top; //20.把剩余的空间分配给每个view int right = child.getMeasuredWidth() + left + mChildPdding; //第二种:无间隔的flow // int bottom = getMeasuredHeight() + top; // int right = getMeasuredWidth() + left; //第一个child的位置 child.layout(left, top, right, bottom); //第二个及后面child的right right += child.getMeasuredWidth() + mHorizontolSpace + mChildPdding; } } /** * 得到子view的大小 * @return */ public int getChildCount() { if (children != null) { return children.size(); } return 0; } public int getHeight() { return mHeight; } } }
使用方法:
public class TopFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ScrollView scrollView = new ScrollView(getActivity()); FlowLayout layout = new FlowLayout(getActivity()); layout.setBackgroundDrawable(Util.getDrawable(R.drawable.list_item_bg)); int padding = Util.getDimen(R.dimen.top_padding); layout.setPadding(padding, padding, padding, padding); GradientDrawable pressDrawable = DrawableUtil.createDrawable(0xffcecece); for (int i = 0; i < mDatas.size(); i++) { mTextView = new TextView(getActivity()); mTextView.setText(mDatas.get(i)); GradientDrawable randomDrawable = DrawableUtil.createRandomDrawable(); StateListDrawable stateListDrawable = DrawableUtil.createStateDrawable(pressDrawable, randomDrawable); mTextView.setBackgroundDrawable(stateListDrawable); mTextView.setTextColor(Color.WHITE); int left = Util.px2dip(7); int top = Util.px2dip(4); int right = Util.px2dip(7); int bottom = Util.px2dip(4); mTextView.setPadding(left, top, right, bottom); mTextView.setTag(mDatas.get(i)); mTextView.setOnClickListener(this); layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, - 2)); } scrollView.addView(layout); } return scrollView; }
工具类:
public class DrawableUtil { /** * 创建随机背景的drawable * @return */ public static GradientDrawable createRandomDrawable(){ GradientDrawable drawable = new GradientDrawable(); drawable.setCornerRadius(Util.px2dip(5)); Random random = new Random(); int red = random.nextInt(200) + 20; int green = random.nextInt(200) + 20; int blue = random.nextInt(200) + 20; int color = Color.rgb(red, green, blue); drawable.setColor(color); return drawable; } /** * 创建带有背景的drawable * @return */ public static GradientDrawable createDrawable(int color){ GradientDrawable drawable = new GradientDrawable(); drawable.setCornerRadius(Util.px2dip(5)); drawable.setColor(color); return drawable; } /** * 状态选择器 * @param press * @param normal * @return */ public static StateListDrawable createStateDrawable(Drawable press, Drawable normal){ StateListDrawable drawable = new StateListDrawable(); //按下 drawable.addState(new int[]{android.R.attr.state_pressed}, press); //正常 drawable.addState(new int[]{}, normal); return drawable; } }
以上就是Android中怎么实现一个瀑布流控件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流