Android解决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. 于是乎度娘一波,发现大陆

https://blog.csdn.net/KingsleyCheng/article/details/70054389?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=1328641.8385.16155215535388395&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

6. 按照大佬的思路,把父控件的 ScrollViw 的在TextView 里消费了,效果如下。
  • 问题可能会迟到,但是他永远不会缺席,仔细看会发现 如果在TextView 里滑动顶部或底部 ScrollView 不能滑动了,只有滑动 TextView 之外的地方才能滑动 ScrollView。
  • So 有木有一个比较完美的方法呢?借用大佬文章里的 可以通过计算TextView 滑动的值来解决向下滑动,那么向上滑动呢?
7. 需求如下,当TextView 里的内容滑动到顶部或底部,不需要滑动TextView已外的地方来滑动ScrollView.
  • 大概思路如下
  1. 通过手势判断用户是上滑还是下滑;
  2. 借用大佬的计算TextView 滑动值来判断是滑动到底部还是头部;
  3. 当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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值