解决ScrollView中嵌套TextView滑动问题
开发中遇到的问题
客户需要在页面可以上下滚动的情况下,填充一个TextView用于展示信息,同时TextView的内容还可以上下滚动。
ScrollView + TextView 实现
1. 当TextView 绘制长度不超过屏幕效果 如下
2. 实现布局
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="第一个TextView"
android:textColor="@color/black"
android:textSize="18sp" />
<!--android:scrollbars="vertical" 设置滚动条-->
<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_margin="20dp"
android:background="@drawable/textview_box"
android:padding="10dp"
android:scrollbars="vertical"
android:textColor="@color/black"
android:textSize="18sp" />
</LinearLayout>
</ScrollView>
3. 填充数据,并设置TextViw滚动
public class MainActivity extends AppCompatActivity {
private TextView tv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv1 = findViewById(R.id.tv1);
//填充足够长的内容用于测试
tv1.setText("google官方对他的介绍,翻译过来就是可以滚动的用户布局容器,如果手机显示不下子布局,那么可以使用scrollView," +
"当然谷歌也说NestedscrollView已经提供了更好的用户体验,这个我们以后再详细总结下。\n" +
"谷歌官方已经提示,不要在scrollView中添加RecyclerView或者是ListView布局,这样会引起不好的体验因为会有滑动冲突的问题出现。\n" +
"另外,ScrollView的直接子View只能有一个。也就是说如果你的视图结构比较复杂,你需要一个标准的容器,如LinearLayout、RelativeLayout等。" +
"ScrollView只支持竖直滑动,水平滑动使HorizontalScrollView。" +
"也就是说如果你的视图结构比较复杂,你需要一个标准的容器,如LinearLayout、RelativeLayout等 " +
"ScrollView只支持竖直滑动,水平滑动使HorizontalScrollView。");
//让TextView可以滑动
tv1.setMovementMethod(ScrollingMovementMethod.getInstance());
}
}
4. 但是当ScrollView 绘制超过屏幕,也就是ScrollView 可以上下滚动后,会发现TextView滑动被ScrollView 给吃了。
原因是应为ScrollView 把 TextView 的手势给消费了,导致TextView 的滚动没有了。
5. 于是乎度娘一波,发现大陆
6. 按照大佬的思路,把父控件的 ScrollViw 的在TextView 里消费了,效果如下。
- 问题可能会迟到,但是他永远不会缺席,仔细看会发现 如果在TextView 里滑动顶部或底部 ScrollView 不能滑动了,只有滑动 TextView 之外的地方才能滑动 ScrollView。
- So 有木有一个比较完美的方法呢?借用大佬文章里的 可以通过计算TextView 滑动的值来解决向下滑动,那么向上滑动呢?
7. 需求如下,当TextView 里的内容滑动到顶部或底部,不需要滑动TextView已外的地方来滑动ScrollView.
- 大概思路如下
- 通过手势判断用户是上滑还是下滑;
- 借用大佬的计算TextView 滑动值来判断是滑动到底部还是头部;
- 当TextView 滑动到头部或底部,就可以滑动ScrollView;
- 贴代码 布局文件我就不贴了,就是添加几个TextView
public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
private static final String TAG = "MainActivity";
private TextView tv1;
private TextView tv2;
private TextView tv3;
private float y1 = 0;
@SuppressLint("ClickableViewAccessibility")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv1 = findViewById(R.id.tv1);
tv2 = findViewById(R.id.tv2);
tv3 = findViewById(R.id.tv3);
//填充足够长的内容用于测试
tv1.setText("填充足够长的内容用于测试");
tv2.setText("填充足够长的内容用于测试");
tv3.setText("填充足够长的内容用于测试");
//让TextView可以滑动
tv1.setMovementMethod(ScrollingMovementMethod.getInstance());
tv2.setMovementMethod(ScrollingMovementMethod.getInstance());
tv3.setMovementMethod(ScrollingMovementMethod.getInstance());
//手势监听
tv1.setOnTouchListener(this::onTouch);
tv2.setOnTouchListener(this::onTouch);
tv3.setOnTouchListener(this::onTouch);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
//按下去第一个Y坐标
y1 = event.getY();
//通知父控件不要干扰
v.getParent().requestDisallowInterceptTouchEvent(true);
}
if (event.getAction() == MotionEvent.ACTION_MOVE) {
if (y1 - event.getY() > 50) {
Log.e(TAG, "向上滑");
v.getParent().requestDisallowInterceptTouchEvent(canVerticalScroll((TextView) v, true));
} else if (event.getY() - y1 > 380) {
Log.e(TAG, "向下滑: ");
v.getParent().requestDisallowInterceptTouchEvent(canVerticalScroll((TextView) v, false));
}
}
if (event.getAction() == MotionEvent.ACTION_UP) {
v.getParent().requestDisallowInterceptTouchEvent(false);
}
return false;
}
/**
* @param view 滑动的TextView
* @param flag true 向上滑动 false 向下滑动
* @return
*/
protected boolean canVerticalScroll(TextView view, boolean flag) {
//滚动的距离
int scrollY = view.getScrollY();
Log.e(TAG, "滚动距离: " + scrollY);
//控件内容的总高度
int scrollRange = view.getLayout().getHeight();
Log.e(TAG, "控件内容的总高度: " + scrollRange);
//控件实际显示的高度
int scrollExtent = view.getHeight() - view.getCompoundPaddingTop() - view.getCompoundPaddingBottom();
Log.e(TAG, "控件实际显示的高度: " + scrollExtent);
//控件内容总高度与实际显示高度的差值
int scrollDifference = scrollRange - scrollExtent;
Log.e(TAG, "显示高度的差值: " + scrollDifference);
if (flag) {
return scrollDifference == scrollY ? false : true;
} else {
return scrollDifference == 0;
}
}
}
- 效果如下
效果不错吧,要的就是这么丝滑,当TextView内容滑动到底部,就可以滑动ScrollView,同理滑动到头部就可以向上滑动了。
GitHub:https://github.com/Puppet-xiaoyi/TextViewDemo