Shulou(Shulou.com)06/03 Report--

This article mainly introduces "Android how to customize ViewGroup multi-row and multi-column effect". In daily operation, I believe that many people have doubts about how to customize ViewGroup multi-row and multi-column effect in Android. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "Android how to customize ViewGroup multi-row and multi-column effect". Next, please follow the editor to study!

Take a look at the effect picture first.

Two children per row

One child per line

Realization idea

Custom viewGroup to achieve measurement and layout, make controls adapt to business scenarios.

Measure

Each child is equally allocated a fixed width according to the width of the parent control. Height is the number of rows multiplied by the height of a child, plus the height of the gap.

Count rows according to the number of children

Val rows = if (childCount% perLineChild = = 0) {childCount / perLineChild} else {childCount / perLineChild + 1}

Code example

Override fun onMeasure (widthMeasureSpec: Int, heightMeasureSpec: Int) {val width = MeasureSpec.getSize (widthMeasureSpec) for (I in 0 until childCount) {val child: View = getChildAt (I) if (child.visibility! = GONE) {val lp = child.layoutParams val childWidthMeasureSpec = getChildMeasureSpec (widthMeasureSpec, 0 (width-(perLineChild-1) * space) / perLineChild) val childHeightMeasureSpec = getChildMeasureSpec (heightMeasureSpec, 0, lp.height) child.measure (childWidthMeasureSpec ChildHeightMeasureSpec)} val rows = if (childCount% perLineChild = = 0) {childCount / perLineChild} else {childCount / perLineChild + 1} if (childCount > 0) {setMeasuredDimension (width) GetChildAt (0) .measuredHeight * rows + (rows-1) * space)}}

Overall Arrangement

It is necessary to pay attention to the order and position of placement, with a fixed number per row, and a new line to continue placement after reaching the number.

Code example

Override fun onLayout (changed: Boolean, l: Int, t: Int, r: Int, b: Int) {var left = l var top = t children.forEachIndexed {index View-> if (index% perLineChild = = 0) {left = 0 if (index! = 0) {top+= view.measuredHeight top+=space} view.layout (left, top, view.measuredWidth + left, top+ view.measuredHeight)} else {view.layout (left, top) View.measuredWidth + left, top + view.measuredHeight)} left + = view.measuredWidth left + = space}}

Complete code

Class MultiLineViewG @ JvmOverloads constructor (context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0): ViewGroup (context, attrs, defStyleAttr) {var perLineChild = 2 / * the gap between children * / var space = 10 override fun onMeasure (widthMeasureSpec: Int HeightMeasureSpec: Int) {val width = MeasureSpec.getSize (widthMeasureSpec) for (I in 0 until childCount) {val child: View = getChildAt (I) if (child.visibility! = GONE) {val lp = child.layoutParams val childWidthMeasureSpec = getChildMeasureSpec (widthMeasureSpec, 0) (width-(perLineChild-1) * space) / perLineChild) val childHeightMeasureSpec = getChildMeasureSpec (heightMeasureSpec, 0, lp.height) child.measure (childWidthMeasureSpec ChildHeightMeasureSpec)} val rows = if (childCount% perLineChild = = 0) {childCount / perLineChild} else {childCount / perLineChild + 1} if (childCount > 0) {setMeasuredDimension (width) GetChildAt (0). MeasuredHeight * rows + (rows-1) * space)}} override fun onLayout (changed: Boolean, l: Int, t: Int, r: Int, b: Int) {var left = l var top = t children.forEachIndexed {index View-> if (index% perLineChild = = 0) {left = 0 if (index! = 0) {top+= view.measuredHeight top+=space} view.layout (left, top, view.measuredWidth + left, top+ view.measuredHeight)} else {view.layout (left, top) View.measuredWidth + left, top + view.measuredHeight)} left + = view.measuredWidth left + = space} so far On the "Android how to customize ViewGroup multi-row and multi-column effect" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.