自定义ViewGroup实现换行

转载 2018年04月16日 10:04:45

另外一篇实现历史搜索https://blog.csdn.net/Love_My_Life_/article/details/78055675

在做搜索页面的,往往会有热词推荐,热词推荐的表现形式一般分为两种,一种是表格的形式,这种通过GridView很容易实现,还有另外一种,如下图所示:



这种布局方式,每一行容纳的View数量是不固定的,当超过屏幕宽度时会自动换行。其实要实现起来也很简单,自定义ViewGroup,重写onLayout方法,通过计算子View所占据的空间,重新布局。

实现代码如下:

public class AutoBreakViewGroup extends ViewGroup {   
    private int mScreenWidth;    
    private int mHorizontalSpacing;    
    private int mVerticalSpacing;    

    public AutoBreakViewGroup(Context context) {      
        super(context);        
        init();
    }    

    public AutoBreakViewGroup(Context context, AttributeSet attrs) {        
        super(context, attrs);        
        init();   
    }    

    public void setSpacing(int horizontalSpacing, int verticalSpacing) {        
        mHorizontalSpacing = horizontalSpacing;           
        mVerticalSpacing = verticalSpacing;    
    }    

    private void init() {        
        DisplayMetrics dm = getResources().getDisplayMetrics();       
        mScreenWidth = dm.widthPixels;    
    }    

    @Override    
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        
        measureChildren(widthMeasureSpec, heightMeasureSpec);        
        setMeasuredDimension(widthSize, heightSize);    
    }    

    @Override    
    protected void onLayout(boolean changed, int l, int t, int r, int b) {        
        int mTotalHeight = 0;        
        int mTotalWidth = 0;        
        int mTempHeight = 0;        
        int childCount = getChildCount();        
        for (int i = 0; i < childCount; i++) {           
            View childView = getChildAt(i);            
            int measureHeight = childView.getMeasuredHeight();            
            int measuredWidth = childView.getMeasuredWidth();            
            mTempHeight = (measureHeight > mTempHeight) ? measureHeight : mTempHeight;            
            if ((measuredWidth + mTotalWidth + mHorizontalSpacing) > mScreenWidth) {                
                mTotalWidth = 0;                
                mTotalHeight += (mTempHeight + mVerticalSpacing);                
                mTempHeight = 0;            
            }
            childView.layout(mTotalWidth + mHorizontalSpacing, mTotalHeight, measuredWidth + mTotalWidth + mHorizontalSpacing, mTotalHeight + measureHeight);            
            mTotalWidth += (measuredWidth + mHorizontalSpacing);       
        }    
    }
}

代码很简单,其关键是left,top代表View左上角坐标,right,bottom代表View右下角坐标,通过简单的数学计算,就能够准确算出每个View的坐标位置。

xml文件如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context="com.stefanli.drawdemo.MainActivity">    
    <com.stefanli.drawdemo.AutoBreakViewGroup        
         android:id="@+id/autoBreakViewGroup"          
         android:layout_width="match_parent"        
         android:layout_height="wrap_content"        
         android:layout_marginTop="20dp"/>
</RelativeLayout>

Activity代码如下:

public class MainActivity extends AppCompatActivity {     
    private ArrayList<String> mData = new ArrayList<>();    
    private Context mContext;    
    private AutoBreakViewGroup autoBreakViewGroup;    

    @Override    
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
        mContext = this;       
        setContentView(R.layout.activity_main);        
        autoBreakViewGroup = (AutoBreakViewGroup) findViewById(R.id.autoBreakViewGroup);        
        autoBreakViewGroup.setSpacing(20, 20);        
        initView();    
    }    

    private void initView() {        
        mData.add("隔帘花影");        
        mData.add("国色天香");        
        mData.add("快穿");        
        mData.add("空空幻");        
        mData.add("总裁");        
        mData.add("诛仙");        
        mData.add("旋风少女");        
        mData.add("耳根");        
        mData.add("系统");        

        for (int i = 0; i < mData.size(); i++) {            
            TextView textView = new TextView(mContext);                    
            textView.setText(mData.get(i));            
            textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 16);            
            textView.setTextColor(Color.BLACK);            
            textView.setLayoutParams(new 
            LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));             
            textView.setBackgroundResource(R.drawable.item_bg);            
            textView.setPadding(20, 10, 20, 10);            
            textView.setGravity(Gravity.CENTER);            
            autoBreakViewGroup.addView(textView);        
       }    
   }
}

大功告成,实现效果如下:



文/stefanli(简书作者)
原文链接:http://www.jianshu.com/p/47c39b9e37ee
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

C#Winform报表与打印技术——自定义报表的实现

-
  • 1970年01月01日 08:00

自定义ViewGroup-自动换行Layout

一、继承ViewGroup需要做的 重写onMeasure() 不仅要完成自己的measure过程,还要完成子View的measure过程。 重写onLayout() 用来确定子View的位置...
  • u011102153
  • u011102153
  • 2016-08-18 21:56:55
  • 3366

自定义View实现搜索添加到历史纪录

自定义View实现复杂的搜索控件 ====================MainActivity======================= package com.example.lenovo....
  • wangaiminwangaimin
  • wangaiminwangaimin
  • 2017-12-06 19:27:39
  • 188

自定义ViewGroup实现标签换行(动态创建标签

具体实现步骤:  1.继承ViewGroup,实现三个构造方法  2.通过generateLayoutParams给自定义的控件指定参数  3.实现onMeasure方法         a.在这个方...
  • u010419467
  • u010419467
  • 2015-08-03 14:43:00
  • 709

自定义ViewGroup实现弹性滑动效果

使用自定义ViewGroup实现弹性滑动的效果
  • y874961524
  • y874961524
  • 2016-10-07 21:59:55
  • 750

自定义ViewGroup实现瀑布流样式

实现效果:像ListView一样调用,实现Viewfu'yong
  • ilioili
  • ilioili
  • 2014-07-31 23:56:42
  • 1176

自定义viewGroup打造花式布局

维护维护在维护,改版改版复改版! 最近项目在改版,UI给了如下的一张新界面: 首先拿到界面时,美工说为了防止界面显得太长,当图片List小于4个的时候则就竖直排列,如果大于或等于5个的时候的第一到...
  • aa4100123
  • aa4100123
  • 2016-10-13 16:24:19
  • 931

通过自定义ViewGroup来实现侧滑菜单效果,解决滑动冲

前言: 在去年跟同事做一个外包项目的时候遇到了一个问题,那就是根据需求要求实现一个侧滑菜单的效果,那时候感觉这个好牛逼,跟QQ的效果差不多,感觉有点难做,所以今天我决定写一篇博客来分析下该如何做这个侧...
  • qq_27540131
  • qq_27540131
  • 2016-03-14 21:50:07
  • 666

android之自定义viewGroup仿scrollView详解

相信学了安卓的朋友都知道自定义viewGroup离不开重写onmeasure()和onLayout(),开始讲解代码之前,先来看看与这两个方法相关知识:    一、onMeasure() :这是测量自...
  • zhongwn
  • zhongwn
  • 2016-07-21 17:53:30
  • 2818

自定义view继承viewgroup,实现组合按钮。

本篇介绍的是继承现有Viewgroup,如RelativeLayout,LinearLayout等实现自定义View,此种方式与直接继承Viewgroup方式比起来并没有什么不同,只是继承Viewgr...
  • qq_30124547
  • qq_30124547
  • 2016-11-09 10:12:44
  • 593
收藏助手
不良信息举报
您举报文章:自定义ViewGroup实现换行
举报原因:
原因补充:

(最多只允许输入30个字)