ScrollView嵌套圆角Listview 实现同时滑动效果

最新推荐文章于 2022-04-13 17:29:57 发布

易辰_

最新推荐文章于 2022-04-13 17:29:57 发布

阅读量1.5k

点赞数

分类专栏： Android控件实例

本文链接：https://blog.csdn.net/u013210620/article/details/52193710

版权

Android控件实例专栏收录该内容

79 篇文章 0 订阅

订阅专栏

免积分下载demo

效果图如下，我的模拟器异常，就看个静态图片把：
这里写图片描述

首先看主布局文件activity_main.xml

<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.example.scrollview.MainActivity" >

    <com.example.scrollview.ElasticScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <com.example.scrollview.CornerListView
                android:id="@+id/contact_secret_listview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dip"
                android:background="@drawable/secret_contact_bg"
                android:cacheColorHint="#00000000"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:scrollbars="none" />

        </LinearLayout>

    </com.example.scrollview.ElasticScrollView>

</RelativeLayout>

listview圆角secret_contact_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/a" />

    <corners android:bottomLeftRadius="5dip"
        android:bottomRightRadius="5dip" android:topLeftRadius="5dip"
        android:topRightRadius="5dip" />

    <stroke android:color="@color/dividerColor" android:width="0.5dp"></stroke>
</shape>



 <color name="a">#ffffff</color>
 <color name="dividerColor">#cccccc</color>

MainActivity主界面代码

package com.example.scrollview;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

    CornerListView cornerListView;
    private MyAdapter myAdapter;
    String[] datas = { "aaa", "bbb", "ccc", "ddd", "eee" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cornerListView = (CornerListView) findViewById(R.id.contact_secret_listview);

        // adapter
        myAdapter = new MyAdapter();

        cornerListView.setAdapter(myAdapter);
        setListViewHeightBasedOnChildren(cornerListView);

    }

    public void setListViewHeightBasedOnChildren(ListView listView) {
        // 获取ListView对应的Adapter
        ListAdapter listAdapter = listView.getAdapter();
        if (listAdapter == null) {
            return;
        }

        int totalHeight = 0;
        for (int i = 0, len = listAdapter.getCount(); i < len; i++) {
            // listAdapter.getCount()返回数据项的数目
            View listItem = listAdapter.getView(i, null, listView);
            // 计算子项View 的宽高
            listItem.measure(0, 0);
            // 统计所有子项的总高度
            totalHeight += listItem.getMeasuredHeight();
        }

        ViewGroup.LayoutParams params = listView.getLayoutParams();
        params.height = totalHeight
                + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
        // listView.getDividerHeight()获取子项间分隔符占用的高度
        // params.height最后得到整个ListView完整显示需要的高度
        listView.setLayoutParams(params);
    }

    class MyAdapter extends BaseAdapter {

        LayoutInflater inflater;

        public MyAdapter() {
            inflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return datas.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return datas[position];
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if (convertView == null) {
                convertView = inflater.inflate(
                        R.layout.contact_secret_listview_item, parent, false);
                viewHolder = new ViewHolder(convertView);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

            viewHolder.secretContactName.setText(datas[position]);
            return convertView;
        }

        class ViewHolder {
            private TextView secretContactName;

            ViewHolder(View view) {
                secretContactName = (TextView) view
                        .findViewById(R.id.secret_contact_name);
            }
        }

    }
}

ElasticScrollView

package com.example.scrollview;

    import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;

    /** 
     * ScrollView反弹效果的实现 
     */  
    public class ElasticScrollView extends ScrollView {  
        private View inner;// 子View  

        private float y;// 点击时y坐标  

        private Rect normal = new Rect();// 矩形(这里只是个形式，只是用于判断是否需要动画.)  

        private boolean isCount = false;// 是否开始计算  

        @SuppressLint("NewApi")  
        public ElasticScrollView(Context context, AttributeSet attrs) {  
            super(context, attrs);  
        }  

        /*** 
         * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate 
         * 方法，也应该调用父类的方法，使该方法得以执行. 
         */  


        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
            if (getChildCount() > 0) {
                inner = getChildAt(0);
            }
        }

        /***
         * 监听touch 
         */  
        @Override  
        public boolean onTouchEvent(MotionEvent ev) {  
            if (inner != null) {  
                commOnTouchEvent(ev);  
            }  
            return super.onTouchEvent(ev);  
        }  

        /*** 
         * 触摸事件 
         *  
         * @param ev 
         */  
        public void commOnTouchEvent(MotionEvent ev) {  
            int action = ev.getAction();  
            switch (action) {  
            case MotionEvent.ACTION_DOWN:  
                break;  
            case MotionEvent.ACTION_UP:  
                // 手指松开.  
                if (isNeedAnimation()) {  
                    animation();  
                    isCount = false;  
                }  
                break;  
            /** 
             * 排除出第一次移动计算，因为第一次无法得知y坐标， 在MotionEvent.ACTION_DOWN中获取不到， 
             * 因为此时是MyScrollView的touch事件传递到到了LIstView的孩子item上面.所以从第二次计算开始. 
             * 然而我们也要进行初始化，就是第一次移动的时候让滑动距离归0. 之后记录准确了就正常执行. 
             */  
            case MotionEvent.ACTION_MOVE:  
                final float preY = y;// 按下时的y坐标  
                float nowY = ev.getY();// 时时y坐标  
                int deltaY = (int) (preY - nowY);// 滑动距离  
                if (!isCount) {  
                    deltaY = 0; // 在这里要归0.  
                }  

                y = nowY;  
                // 当滚动到最上或者最下时就不会再滚动，这时移动布局  
                if (isNeedMove()) {  
                    // 初始化头部矩形  
                    if (normal.isEmpty()) {  
                        // 保存正常的布局位置  
                        normal.set(inner.getLeft(), inner.getTop(),inner.getRight(), inner.getBottom());  
                    }  
                    // 移动布局  
                    inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,inner.getRight(), inner.getBottom() - deltaY / 2);  
                }  
                isCount = true;  
                break;  

            default:  
                break;  
            }  
        }  

        /*** 
         * 回缩动画 
         */  
        public void animation() {  
            // 开启移动动画  
            TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),normal.top);  
            ta.setDuration(200);  
            inner.startAnimation(ta);  
            // 设置回到正常的布局位置  
            inner.layout(normal.left, normal.top, normal.right, normal.bottom);  

            normal.setEmpty();  

        }  

        // 是否需要开启动画  
        public boolean isNeedAnimation() {  
            return !normal.isEmpty();  
        }  

        /*** 
         * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度 
         *  
         * getHeight()：获取的是屏幕的高度 
         *  
         * @return 
         */  
        public boolean isNeedMove() {  
            int offset = inner.getMeasuredHeight() - getHeight();  
            int scrollY = getScrollY();  
            // 0是顶部，后面那个是底部  
            if (scrollY == 0 || scrollY == offset) {  
                return true;  
            }  
            return false;  
        }  
    }

CornerListView

package com.example.scrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.ExpandableListView;
import android.widget.ListView;

public class CornerListView extends ListView implements Runnable {

    // 手指点位置的Y坐标
    private float mLastDownY = 0f;
    // 移动距离
    private int mDistance = 0;
    private int mStep = 0;
    // 是否移动过
    private boolean mPositive = false;

    /**
     * 构造器
     */
    public CornerListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

    public CornerListView(Context context) {
        super(context);
    }

    /**
     * TouchEvent事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 系列事件，手指第一次按下时触发
                if (mLastDownY == 0f && mDistance == 0) {
                    mLastDownY = event.getY();
                    return true;
                }
                break;

            case MotionEvent.ACTION_CANCEL:
                break;

            case MotionEvent.ACTION_UP:
                // 手指离开之后触发
                if (mDistance != 0) {
                    mStep = 1;
                    mPositive = (mDistance >= 0);
                    // 即可把你的Runnable对象增加到UI线程中运行。
                    this.post(this);
                    return true;
                }
                // 重新赋值
                mLastDownY = 0f;
                mDistance = 0;
                break;

            case MotionEvent.ACTION_MOVE: // 手指按下之后滑动触发
                if (mLastDownY != 0f) {
                    mDistance = (int) (mLastDownY - event.getY());
                    if ((mDistance < 0 && getFirstVisiblePosition() == 0 && getChildAt(
                            0).getTop() == 0)
                            || (mDistance > 0 && getLastVisiblePosition() == getCount() - 1)) {
                        // 第一个位置并且是想下拉，就滑动或者最后一个位置向上拉
                        // 这个判断的作用是在非顶端的部分不会有此滚动
                        mDistance /= 3; // 这里是为了减少滚动的距离
                        scrollTo(0, mDistance); // 滚动
                        return true;
                    }
                }
                // 置为0，有自动滑动的效果
                mDistance = 0;
                break;
        }
        return super.onTouchEvent(event);
    }

    public void run() {
        mDistance += mDistance > 0 ? -mStep : mStep;
        scrollTo(0, mDistance);
        // 下拉mPositive是false,上拉是true
        if ((mPositive && mDistance <= 0) || (!mPositive && mDistance >= 0)) {
            scrollTo(0, 0);
            mDistance = 0;
            mLastDownY = 0f;
            return;
        }
        mStep += 1;
        this.post(this);
    }
}

contact_secret_listview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="vertical">
    <TextView
        android:id="@+id/secret_contact_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="name"
        android:layout_marginLeft="20dp" />

    <View
        android:layout_alignParentBottom="true"
        android:background="#cccccc"
        android:layout_marginLeft="14.333dp"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"></View>
</RelativeLayout>

说下需要注意的bug:
1、如果将来主布局文件改成如下的，listview直接套在scrollview下

<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.example.scrollview.MainActivity" >

    <com.example.scrollview.ElasticScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

         <com.example.scrollview.CornerListView
                android:id="@+id/contact_secret_listview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dip"
                android:background="@drawable/secret_contact_bg"
                android:cacheColorHint="#00000000"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:scrollbars="none" />

    </com.example.scrollview.ElasticScrollView>

</RelativeLayout>