听说你想玩RecyclerView嵌套GridView
xmqk1792
8年前
<p>效果图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/51695c2449929ba87fd90172c34b45f1.gif"></p> <p style="text-align:center">RecyclerView嵌套GridView</p> <p><strong>问题及原因</strong></p> <p>有很多小伙伴们可能会遇到这样的问题：</p> <p><strong>为什么不论我传入多大size的List，我的GridView只能显示一行？</strong></p> <p>因为RecyclerView和GridView都属于<strong>可滑动控件</strong> ，两者嵌套会导致<strong>滑动冲突</strong> ，Android不允许这样的情况出现，所以索性将GridView宽度定死，定为一行Item的高度且不可滑动，所以导致了我们只显示一行这个问题的出现。</p> <p><strong>源码浅析</strong></p> <p>解决的思路是： <strong> <em>重新计算高度！</em> </strong></p> <p>想要计算高度，我们就要知道它计算高度的机制。我们来看看 <strong>源码</strong> ：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9d82b30b003c3dcea4c9b69521b4af63.png"></p> <p style="text-align:center">继承GridView自定义控件里的onMeasure方法</p> <p>我们可以看到如果我们自定义控件，且什么都不做时，它会调用父类（GridView）的onMeasure方法，我们来看看GridView里面的onMeasure源码：</p> <pre> <code class="language-java">@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Sets up mListPadding
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode == MeasureSpec.UNSPECIFIED) {
if (mColumnWidth > 0) {
widthSize = mColumnWidth + mListPadding.left + mListPadding.right;
} else {
widthSize = mListPadding.left + mListPadding.right;
}
widthSize += getVerticalScrollbarWidth();
}
int childWidth = widthSize - mListPadding.left - mListPadding.right;
boolean didNotInitiallyFit = determineColumns(childWidth);
int childHeight = 0;
int childState = 0;
mItemCount = mAdapter == null ? 0 : mAdapter.getCount();
final int count = mItemCount;
if (count > 0) {
final View child = obtainView(0, mIsScrap);
AbsListView.LayoutParams p = (AbsListView.LayoutParams) child.getLayoutParams();
if (p == null) {
p = (AbsListView.LayoutParams) generateDefaultLayoutParams();
child.setLayoutParams(p);
}
p.viewType = mAdapter.getItemViewType(0);
p.forceAdd = true;
int childHeightSpec = getChildMeasureSpec(
MeasureSpec.makeSafeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec),
MeasureSpec.UNSPECIFIED), 0, p.height);
int childWidthSpec = getChildMeasureSpec(
MeasureSpec.makeMeasureSpec(mColumnWidth, MeasureSpec.EXACTLY), 0, p.width);
child.measure(childWidthSpec, childHeightSpec);
childHeight = child.getMeasuredHeight();
childState = combineMeasuredStates(childState, child.getMeasuredState());
if (mRecycler.shouldRecycleViewType(p.viewType)) {
mRecycler.addScrapView(child, -1);
}
}
if (heightMode == MeasureSpec.UNSPECIFIED) {
heightSize = mListPadding.top + mListPadding.bottom + childHeight +
getVerticalFadingEdgeLength() * 2;
}
if (heightMode == MeasureSpec.AT_MOST) {
int ourSize = mListPadding.top + mListPadding.bottom;
final int numColumns = mNumColumns;
for (int i = 0; i < count; i += numColumns) {
ourSize += childHeight;
if (i + numColumns < count) {
ourSize += mVerticalSpacing;
}
if (ourSize >= heightSize) {
ourSize = heightSize;
break;
}
}
heightSize = ourSize;
}
if (widthMode == MeasureSpec.AT_MOST && mRequestedNumColumns != AUTO_FIT) {
int ourSize = (mRequestedNumColumns*mColumnWidth)
+ ((mRequestedNumColumns-1)*mHorizontalSpacing)
+ mListPadding.left + mListPadding.right;
if (ourSize > widthSize || didNotInitiallyFit) {
widthSize |= MEASURED_STATE_TOO_SMALL;
}
}
setMeasuredDimension(widthSize, heightSize);
mWidthMeasureSpec = widthMeasureSpec;
}</code></pre> <p>既然我们关注的是高度，我们就来看看高度相关的变量：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/450d73f5ef33b1be819171693ff38845.png"></p> <p style="text-align:center">GridView的onMeasure</p> <p><strong>onMeasure()</strong>方法传入了两个变量： <strong>widthMeasureSpec</strong> 和 <strong>heightMeasureSpec</strong> ，它们是什么呢？在这之前我们讲一讲 <strong>MeasureSpec</strong> 类的模式，我们用一张图来说明：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/177dc3d2e825fd5e6d1c31f005da2179.png"></p> <p style="text-align:center">MeasureSpec的模式说明图</p> <p>我们可以把MeasureSpec的模式标记理解成一个32位的二进制数字，最高两位表示 <strong>模式</strong> ，其他30位表示 <strong>大小</strong> （即像素点或尺寸），MeasureSpec提供了 <em>三种模式</em> 用来计算控件的尺寸：</p> <p><strong>EXACTLY</strong></p> <p>在控件宽高设置为 <strong>具体数值</strong> 或 <strong>MATCH_PARENT</strong> 时，使用该模式；</p> <p><strong>AT_MOST</strong></p> <p>在控件宽高设置为 <strong>WRAP_CONTENT</strong> 时，使用该模式；</p> <p><strong>UNSPECIFIED</strong></p> <p>除上述两种情况外的其他情况（ <em>即未指定宽高时</em> ），使用该模式。</p> <p>知道了MeasureSpec，我们回到GridView的onMeasure方法，方法里获取了高度的 <strong>模式</strong> 和 <strong>大小</strong> ：</p> <pre> <code class="language-java">int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec);</code></pre> <p>PS: getMode() 及 getSize() 分析见附录一</p> <p>我们继续往下看：</p> <p><strong>【AT_MOST】</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/55bcd2fa86cd6a35c6fb31b92831be51.png"></p> <p style="text-align:center">AT_MOST模式</p> <p>如果高度模式为 <strong> <em>AT_MOST</em> </strong> ，则它首先会计算GridView的内容高度，内容高度的计算式为：</p> <pre> <code class="language-java">paddingTop: GridView上内边距 paddingBottom: GridView下内边距 verticalSpacing: GridView每行垂直方向间距 spaceNum: GridView行数 - 1 lineNum: GridView行数 itemHeight: GridView每项高度 内容高度 = paddingTop + paddingBottom + verticalSpacing * spacingNum + itemHeight * lineNum</code></pre> <p>其中， childHeight 通过 <strong>child.getMeasuredHeight()</strong> 获得。</p> <p>计算好内容高度以后，它会和最大允许高度比较：</p> <p>如果内容高度 <strong>未超过</strong> 最大高度，则 <strong>内容高度</strong> 作为GridView的高度；</p> <p>如果内容高度 <strong>超过</strong> 最大高度，则 <strong>最大高度</strong> 作为GridView的高度；</p> <p><strong>【UNSPECIFIED】</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/14fb4d859e49b614bf7241c6fcf9d564.png"></p> <p style="text-align:center">UNSPECIFIED模式</p> <p>如果高度模式为 <strong> <em>UNSPECIFIED</em> </strong> ，则它会计算包含一个Item的GridView的内容高度，其计算式为：</p> <pre> <code class="language-java">内容高度 = 上内边距 + 下内边距 + 一个子项高度 + 边宽 * 2</code></pre> <p>个人猜测， <strong>当RecyclerView嵌套GridView的时候，其GridView的MeasureSpec的模式为 <em>UNSPECIFIED</em> 。</strong></p> <p><strong>【EXACTLY】</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8c3f2d257fb9d85c00cfaf99c1a2db22.png"></p> <p style="text-align:center">EXACTLY模式</p> <p>因EXACTLY模式下，GridView的高度已经设定好了，所以不用获取子项的高度及边距等，源码中通过 int heightSize = MeasureSpec.getSize(heightMeasureSpec); 在heightSize声明的时候，将其获取到了，所以没有将 <strong>EXACTLY</strong> 单独IF语句进行判断。</p> <p>解决方案</p> <p>之前我们说过，解决思路是重新计算GridView高度，这里我们介绍两种计算GridView的高度的方法：</p> <p><strong>【自定义控件】</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/65d0e5580daaba3684f980dcc743cb77.png"></p> <p style="text-align:center">自定义控件</p> <p>通过自定义控件继承GridView，重写onMeasure方法，将计算高度的模式设置为 <strong>AT_MOST</strong> 即可。</p> <p>代码如下：</p> <pre> <code class="language-java">import android.content.Context; import android.util.AttributeSet; import android.widget.GridView; /** * Created by inerdstack on 2016/9/14. */ public class MyGridView extends GridView { public MyGridView(Context context) { super(context); } public MyGridView(Context context, AttributeSet attrs) { super(context, attrs); } public MyGridView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST); super.onMeasure(widthMeasureSpec, expandSpec); } @Override public int getNumColumns() { return 2; } }</code></pre> <p><strong>【手动计算GridView高度】</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/26d69fec36215a9aafae0a86f8c68502.png"></p> <p style="text-align:center">计算GridView高度</p> <p>这里我们计算的是相同类型View下的GridView的高度，切记要在 <strong> <em>setAdapter以后调用这个方法</em> </strong> ，否则会无效。本人尝试使用这种方法解决问题，但是没有成功，但是同事使用了这种方法写了一个Demo成功了。</p> <p>个人猜想可能跟我的布局有关，我的 <strong>GridView</strong> 所在的环境是 <strong>Activity</strong> 的 <strong>Fragment</strong> 的 <strong>PtrFrameLayout</strong> （下拉刷新框架的一个控件）的 <strong>RecyclerView</strong> 的 <strong>Item</strong> 里面，不过不排除我的代码问题，如果小伙伴们找到了我的问题所在，欢迎在文章下方评论留言。</p> <p>文章至此基本告终，接下来说说getSize()、getMode的源码浅析，感兴趣的小伙伴可以看看。</p> <h2><strong>附录一 getSize()、getMode()源码分析</strong></h2> <p>之前我们在GridView类的onMeasure方法里看到这样的方法：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ee0c0081b27db3c7faeaaac9e70e4972.png"></p> <p style="text-align:center">onMeasure方法</p> <p>我们讲到过MeasureSpec的模式组成是 <strong>模式</strong> + <strong>大小</strong> 组成的32位二进制整型数字：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/177dc3d2e825fd5e6d1c31f005da2179.png"></p> <p style="text-align:center">MeasureSpec的模式说明图</p> <p>那么它是怎么获取模式和大小的呢？</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/59eec3a7fe482d5f2315ed56b5c2adc5.png"></p> <p style="text-align:center">getMode源码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/57a5276f24b57bf1287f9cce77c78baa.png"></p> <p style="text-align:center">getSize源码</p> <p>我们可以看到两个方法里都用了 MODE_MASK ，我们来看看 MODE_MASK 是何方神圣：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f18628b79958e669fe9739d09107e341.png"></p> <p style="text-align:center">MeasureSpec.MODE_MASK</p> <p>在MeasureSpec类里面，声明了如下几个常量：</p> <p><strong>MODE_SHIFT</strong></p> <p>30位表示大小的位数的标记</p> <p><strong>MODE_MASK</strong></p> <p>经移位转换为二进制后的数值为： 11000000000000000000000000000000</p> <p><strong>UNSPECIFIED</strong></p> <p>经移位转换为二进制后的数值为： 00000000000000000000000000000000</p> <p><strong>EXACTLY</strong></p> <p>经移位转换为二进制后的数值为： 01000000000000000000000000000000</p> <p><strong>AT_MOST</strong></p> <p>经移位转换为二进制后的数值为： 10000000000000000000000000000000</p> <pre> <code class="language-java">科普： << 为二进制数的左移标记，其计算方式为： a << b 则先将a转化为二进制数，然后左移b位 如：10 << 3 10 = 101 10 << 3 = 101000</code></pre> <p>在getMode方法中, measureSpec & MODE_MASK 的逻辑计算结果是 XX000000000000000000000000000000 ，也就是说，不论我们measureSpec的低30位上数字是什么最终都会转化为 000000000000000000000000000000 ，去掉了大小位上的非0数字，得到了与模式标记数字相同的结果，实现了提取模式的作用。</p> <p>而在getSize方法中， ~MODE_MASK 是 MODE_MASK 取反，即 001111111111111111111111111111111 ， measureSpec & ~MODE_MASK 的逻辑计算结果则为 00XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ，与getMode同理，去掉了模式位上的非0数字，只留下了大小值。</p> <p>以上就是getSize()、getMode()的源码浅析，有不足的地方，欢迎小伙伴们批评指正！</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/0883583f9074</p> <p> </p>