XListView

最新推荐文章于 2019-01-09 20:30:06 发布

原创最新推荐文章于 2019-01-09 20:30:06 发布 · 240 阅读

CC 4.0 BY-SA版权

本文介绍了一个自定义 ListView 控件 XListView 的实现原理及使用方法，包括下拉刷新和上拉加载更多功能。通过继承 ListView 并重写触摸事件，实现了头部和尾部视图的动态效果。

public class MainActivity extends Activity implements XListView.IXListViewListener {
    private XListView mListView;
    private SimpleAdapter mAdapter1;
    private Handler mHandler;
    private ArrayList<HashMap<String, Object>> dlist;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /** 下拉刷新，上拉加载 */
        dlist = new ArrayList<HashMap<String, Object>>();
        mListView = (XListView) findViewById(R.id.techan_xListView);// 这个listview是在这个layout里面
        mListView.setPullLoadEnable(true);// 设置让它上拉，FALSE为不让上拉，便不加载更多数据
        mAdapter1 = new SimpleAdapter(MainActivity.this, getData(),
                R.layout.scenic_item_list, new String[]{"name", "img",
                "content"}, new int[]{R.id.title, R.id.img,
                R.id.content});
        mListView.setAdapter(mAdapter1);
        mListView.setXListViewListener(this);
        mHandler = new Handler();
        mListView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(getApplicationContext(), "您点击了" + data[position - 1], Toast.LENGTH_LONG).show();
            }
        });
    }

    /**
     * 初始化本地数据
     */
    String data[] = new String[]{"三块石国家森林公园", "关山湖国家水利风景区", "小鹿沟青龙寺景区",
            "天女山风景区", "后安腰堡采摘园"};
    String data1[] = new String[]{"抚顺县救兵乡王木村", "抚顺县救兵乡王木村", "抚顺县救兵乡王木村",

"抚顺县救兵乡王木村", "抚顺县救兵乡王木村"};

    private ArrayList<HashMap<String, Object>> getData() {
        for (int i = 0; i < data.length; i++) {
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("name", data[i]);
            map.put("content", data1[i]);
            map.put("img", R.mipmap.ic_launcher);
            dlist.add(map);
        }
        return dlist;
    }

    /**
     * 停止刷新，
     */
    private void onLoad() {
        mListView.stopRefresh();
        mListView.stopLoadMore();
        mListView.setRefreshTime("刚刚");
    }

    // 刷新
    @Override
    public void onRefresh() {
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                getData();
                mListView.setAdapter(mAdapter1);
                onLoad();
            }
        }, 2000);
    }

    // 加载更多
    @Override
    public void onLoadMore() {
        mHandler.postDelayed(new Runnable() {

            @Override
            public void run() {
                getData();
                mAdapter1.notifyDataSetChanged();
                onLoad();
            }
        }, 2000);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
            this.finish();
        }
        return false;
    }
}

public class XListView extends ListView implements OnScrollListener {
   private float mLastY = -1; // save event y
   private Scroller mScroller; // 用于回滚
   private OnScrollListener mScrollListener; // 回滚监听
   // 触发刷新和加载更多接口.
   private IXListViewListener mListViewListener;
   // -- 头部的View
   private XListViewHeader mHeaderView;
   // 查看头部的内容，用它计算头部高度，和隐藏它
   // 当禁用的时候刷新
   private RelativeLayout mHeaderViewContent;
   private TextView mHeaderTimeView;
   private int mHeaderViewHeight; // 头部View的高
   private boolean mEnablePullRefresh = true;
   private boolean mPullRefreshing = false; // 是否刷新.
   // -- 底部的View
   private XListViewFooter mFooterView;
   private boolean mEnablePullLoad;
   private boolean mPullLoading;
   private boolean mIsFooterReady = false;
   // 总列表项，用于检测列表视图的底部
   private int mTotalItemCount;

   // for mScroller, 滚动页眉或者页脚
   private int mScrollBack;
   private final static int SCROLLBACK_HEADER = 0;// 顶部
   private final static int SCROLLBACK_FOOTER = 1;// 下部

   private final static int SCROLL_DURATION = 400; // 滚动回时间
   private final static int PULL_LOAD_MORE_DELTA = 50; // 当大于50PX的时候，加载更多

   private final static float OFFSET_RADIO = 1.8f; // support iOS like pull
   // feature.

   /**
   * @param context
   */
   public XListView(Context context) {
       super(context);
       initWithContext(context);
   }

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

   public XListView(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
       initWithContext(context);
   }

   private void initWithContext(Context context) {
       mScroller = new Scroller(context, new DecelerateInterpolator());
       // XListView need the scroll event, and it will dispatch the event to
       // user's listener (as a proxy).
       super.setOnScrollListener(this);

       // 初始化头部View
       mHeaderView = new XListViewHeader(context);
       mHeaderViewContent = (RelativeLayout) mHeaderView
               .findViewById(R.id.xlistview_header_content);
       mHeaderTimeView = (TextView) mHeaderView
               .findViewById(R.id.xlistview_header_time);
       addHeaderView(mHeaderView);// 把头部这个视图添加进去

       // 初始化底部的View
       mFooterView = new XListViewFooter(context);

       // 初始化头部高度
       mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(
               new OnGlobalLayoutListener() {
                   @Override
                   public void onGlobalLayout() {
                       mHeaderViewHeight = mHeaderViewContent.getHeight();
                       getViewTreeObserver()
                               .removeGlobalOnLayoutListener(this);
                   }
               });
   }

   @Override
   public void setAdapter(ListAdapter adapter) {
       // 确定XListViewFooter是最后底部的View, 并且只有一次
       if (mIsFooterReady == false) {
           mIsFooterReady = true;
           addFooterView(mFooterView);
       }
       super.setAdapter(adapter);
   }

   /**
   * 启用或禁用下拉刷新功能.
   *
   * @param enable
   */
   public void setPullRefreshEnable(boolean enable) {
       mEnablePullRefresh = enable;
       if (!mEnablePullRefresh) { // 禁用,隐藏内容
           mHeaderViewContent.setVisibility(View.INVISIBLE);// 如果为false则隐藏下拉刷新功能
       } else {
           mHeaderViewContent.setVisibility(View.VISIBLE);// 否则就显示下拉刷新功能
       }
   }

   /**
   * 启用或禁用加载更多的功能.
   *
   * @param enable
   */
   public void setPullLoadEnable(boolean enable) {
       mEnablePullLoad = enable;
       if (!mEnablePullLoad) {
           mFooterView.hide();// 隐藏
           mFooterView.setOnClickListener(null);
       } else {
           mPullLoading = false;
           mFooterView.show();// 显示
           mFooterView.setState( XListViewFooter.STATE_NORMAL);
           // both "上拉" 和 "点击" 将调用加载更多.
           mFooterView.setOnClickListener(new OnClickListener() {
               @Override
               public void onClick(View v) {
                   startLoadMore();
               }
           });
       }
   }

   /**
   * 停止刷新, 重置头视图.
   */
   public void stopRefresh() {
       if (mPullRefreshing == true) {
           mPullRefreshing = false;
           resetHeaderHeight();
       }
   }

   /**
   * stop load more, reset footer view.
   */
   public void stopLoadMore() {
       if (mPullLoading == true) {
           mPullLoading = false;
           mFooterView.setState( XListViewFooter.STATE_NORMAL);
       }
   }

   /**
   * 設置最後一次刷新時間
   *
   * @param time
   */
   @SuppressLint("SimpleDateFormat")
   public void setRefreshTime(String time) {
       SimpleDateFormat   formatter   =   new   SimpleDateFormat   ("yyyy年MM月dd日   HH:mm:ss     ");
       Date   curDate   =   new   Date(System.currentTimeMillis());
       //获取当前时间
       String   str   =   formatter.format(curDate);
       mHeaderTimeView.setText(str);
   }

   private void invokeOnScrolling() {
       if (mScrollListener instanceof OnXScrollListener) {
           OnXScrollListener l = (OnXScrollListener) mScrollListener;
           l.onXScrolling(this);
       }
   }

   private void updateHeaderHeight(float delta) {
       mHeaderView.setVisiableHeight((int) delta
               + mHeaderView.getVisiableHeight());
       if (mEnablePullRefresh && !mPullRefreshing) { // 未处于刷新状态，更新箭头
           if (mHeaderView.getVisiableHeight() > mHeaderViewHeight) {
               mHeaderView.setState( XListViewHeader.STATE_READY);
           } else {
               mHeaderView.setState( XListViewHeader.STATE_NORMAL);
           }
       }
       setSelection(0); // scroll to top each time
   }

   /**
   * 重置头视图的高度
   */
   private void resetHeaderHeight() {
       int height = mHeaderView.getVisiableHeight();
       if (height == 0) // 不显示.
           return;
       // 不显示刷新和标题的时候，什么都不显示
       if (mPullRefreshing && height <= mHeaderViewHeight) {
           return;
       }
       int finalHeight = 0; // 默认：滚动回头.
       // 当滚动回显示所有头标题时候，刷新
       if (mPullRefreshing && height > mHeaderViewHeight) {
           finalHeight = mHeaderViewHeight;
       }
       mScrollBack = SCROLLBACK_HEADER;
       mScroller.startScroll(0, height, 0, finalHeight - height,
               SCROLL_DURATION);
       // 触发刷新
       invalidate();
   }

   // 改变底部视图高度
   private void updateFooterHeight(float delta) {
       int height = mFooterView.getBottomMargin() + (int) delta;
       if (mEnablePullLoad && !mPullLoading) {
           if (height > PULL_LOAD_MORE_DELTA) { // 高度足以调用加载更多
               mFooterView.setState( XListViewFooter.STATE_READY);
           } else {
               mFooterView.setState( XListViewFooter.STATE_NORMAL);
           }
       }
       mFooterView.setBottomMargin(height);

       // setSelection(mTotalItemCount - 1); // scroll to bottom
   }

   private void resetFooterHeight() {
       int bottomMargin = mFooterView.getBottomMargin();
       if (bottomMargin > 0) {
           mScrollBack = SCROLLBACK_FOOTER;
           mScroller.startScroll(0, bottomMargin, 0, -bottomMargin,
                   SCROLL_DURATION);
           invalidate();
       }
   }

   // 开始加载更多
   private void startLoadMore() {
       mPullLoading = true;
       mFooterView.setState( XListViewFooter.STATE_LOADING);
       if (mListViewListener != null) {
           mListViewListener.onLoadMore();
       }
   }

   // 触发事件
   @Override
   public boolean onTouchEvent(MotionEvent ev) {
       if (mLastY == -1) {
           mLastY = ev.getRawY();
       }

       switch (ev.getAction()) {
           case MotionEvent.ACTION_DOWN:
               mLastY = ev.getRawY();
               break;
           case MotionEvent.ACTION_MOVE:
               final float deltaY = ev.getRawY() - mLastY;
               mLastY = ev.getRawY();
               System.out.println("数据监测：" + getFirstVisiblePosition() + "---->"
                       + getLastVisiblePosition());
               if (getFirstVisiblePosition() == 0
                       && (mHeaderView.getVisiableHeight() > 0 || deltaY > 0)) {
                   // 第一项显示,标题显示或拉下来.
                   updateHeaderHeight(deltaY / OFFSET_RADIO);
                   invokeOnScrolling();
               } else if (getLastVisiblePosition() == mTotalItemCount - 1
                       && (mFooterView.getBottomMargin() > 0 || deltaY < 0)) {
                   // 最后一页，已停止或者想拉起
                   updateFooterHeight(-deltaY / OFFSET_RADIO);
               }
               break;
           default:
               mLastY = -1; // 重置
               if (getFirstVisiblePosition() == 0) {
                   // 调用刷新,如果头部视图高度大于设定高度。
                   if (mEnablePullRefresh
                           && mHeaderView.getVisiableHeight() > mHeaderViewHeight) {
                       mPullRefreshing = true;// 那么刷新
                       mHeaderView.setState( XListViewHeader.STATE_REFRESHING);
                       if (mListViewListener != null) {
                           mListViewListener.onRefresh();
                       }
                   }
                   resetHeaderHeight();// 刷新完毕，重置头部高度，也就是返回上不
               }
               if (getLastVisiblePosition() == mTotalItemCount - 1) {
                   // 调用加载更多.
                   if (mEnablePullLoad
                           && mFooterView.getBottomMargin() > PULL_LOAD_MORE_DELTA) {
                       startLoadMore();// 如果底部视图高度大于可以加载高度，那么就开始加载
                   }
                   resetFooterHeight();// 重置加载更多视图高度
               }
               break;
       }
       return super.onTouchEvent(ev);
   }
   @Override
   public void computeScroll() {
       if (mScroller.computeScrollOffset()) {
           if (mScrollBack == SCROLLBACK_HEADER) {
               mHeaderView.setVisiableHeight(mScroller.getCurrY());
           } else {
               mFooterView.setBottomMargin(mScroller.getCurrY());
           }
           postInvalidate();
           invokeOnScrolling();
       }
       super.computeScroll();
   }
   @Override
   public void setOnScrollListener(OnScrollListener l) {
       mScrollListener = l;
   }
   @Override
   public void onScrollStateChanged(AbsListView view, int scrollState) {
       if (mScrollListener != null) {
           mScrollListener.onScrollStateChanged(view, scrollState);
       }
   }
   @Override
   public void onScroll(AbsListView view, int firstVisibleItem,
                       int visibleItemCount, int totalItemCount) {
       // 发送到用户的监听器
       mTotalItemCount = totalItemCount;
       if (mScrollListener != null) {
           mScrollListener.onScroll(view, firstVisibleItem, visibleItemCount,
                   totalItemCount);
       }
   }
   public void setXListViewListener(IXListViewListener l) {
       mListViewListener = l;
   }
   /**
   * 你可以监听到列表视图，OnScrollListener 或者这个. 他将会被调用 , 当头部或底部触发的时候
   */
   public interface OnXScrollListener extends OnScrollListener {
       public void onXScrolling(View view);
   }
   /**
   * 实现这个接口来刷新/负载更多的事件
   */
   public interface IXListViewListener {
       public void onRefresh();
       public void onLoadMore();
   }
}

public class XListViewFooter extends LinearLayout {
   public final static int STATE_NORMAL = 0;
   public final static int STATE_READY = 1;
   public final static int STATE_LOADING = 2;

   private Context mContext;

   private View mContentView;
   private View mProgressBar;
   private TextView mHintView;

   public XListViewFooter(Context context) {
       super(context);
       initView(context);
   }

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

   public void setState(int state) {
       mHintView.setVisibility(View.INVISIBLE);// 开始底部控件都隐藏
       mProgressBar.setVisibility(View.INVISIBLE);
       mHintView.setVisibility(View.INVISIBLE);
       if (state == STATE_READY) {// 如果是第一页状态，那么“查看更多”显示
           mHintView.setVisibility(View.VISIBLE);
           mHintView.setText(R.string.xlistview_footer_hint_ready);// 松开显示更多
       } else if (state == STATE_LOADING) {// 当加载的时候
           mProgressBar.setVisibility(View.VISIBLE);// 加载进度条显示
       } else {
           mHintView.setVisibility(View.VISIBLE);
           mHintView.setText(R.string.xlistview_footer_hint_normal);// 查看更多
       }
   }

   public void setBottomMargin(int height) {
       if (height < 0)
           return;
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContentView
               .getLayoutParams();
       lp.bottomMargin = height;
       mContentView.setLayoutParams(lp);
   }

   public int getBottomMargin() {
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContentView
               .getLayoutParams();
       return lp.bottomMargin;
   }

   /**
   * normal status
   */
   public void normal() {
       mHintView.setVisibility(View.VISIBLE);
       mProgressBar.setVisibility(View.GONE);
   }

   /**
   * loading status
   */
   public void loading() {
       mHintView.setVisibility(View.GONE);
       mProgressBar.setVisibility(View.VISIBLE);
   }

   /**
   * 当禁用拉加载更多隐藏底部视图
   */
   public void hide() {
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContentView
               .getLayoutParams();
       lp.height = 0;
       mContentView.setLayoutParams(lp);
   }

   /**
   * 显示底部视图
   */
   public void show() {
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContentView
               .getLayoutParams();
       lp.height = LayoutParams.WRAP_CONTENT;
       mContentView.setLayoutParams(lp);
   }

   private void initView(Context context) {
       mContext = context;
       LinearLayout moreView = (LinearLayout) LayoutInflater.from(mContext)
               .inflate(R.layout.xlistview_footer, null);
       addView(moreView);
       moreView.setLayoutParams(new LinearLayout.LayoutParams(
               LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

       mContentView = moreView.findViewById(R.id.xlistview_footer_content);
       mProgressBar = moreView.findViewById(R.id.xlistview_footer_progressbar);
       mHintView = (TextView) moreView
               .findViewById(R.id.xlistview_footer_hint_textview);
   }

}

public class XListViewHeader extends LinearLayout {
   private LinearLayout mContainer;
   private ImageView mArrowImageView;
   private ProgressBar mProgressBar;
   private TextView mHintTextView;
   private int mState = STATE_NORMAL;// 初始状态

   private Animation mRotateUpAnim;
   private Animation mRotateDownAnim;

   private final int ROTATE_ANIM_DURATION = 180;

   public final static int STATE_NORMAL = 0;
   public final static int STATE_READY = 1;
   public final static int STATE_REFRESHING = 2;

   public XListViewHeader(Context context) {
       super(context);
       initView(context);
   }

   /**
   * @param context
   * @param attrs
   */
   public XListViewHeader(Context context, AttributeSet attrs) {
       super(context, attrs);
       initView(context);
   }

   private void initView(Context context) {
       // 初始情况，设置下拉刷新view高度为0
       LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
               LayoutParams.FILL_PARENT, 0);
       // 时间TextView
       mContainer = (LinearLayout) LayoutInflater.from(context).inflate(
               R.layout.xlistview_header, null);
       addView(mContainer, lp);
       setGravity(Gravity.BOTTOM);
       // 找到头部页面里的控件
       mArrowImageView = (ImageView) findViewById(R.id.xlistview_header_arrow);
       mHintTextView = (TextView) findViewById(R.id.xlistview_header_hint_textview);
       mProgressBar = (ProgressBar) findViewById(R.id.xlistview_header_progressbar);

       mRotateUpAnim = new RotateAnimation(0.0f, -180.0f,
               Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
               0.5f);
       mRotateUpAnim.setDuration(ROTATE_ANIM_DURATION);
       mRotateUpAnim.setFillAfter(true);
       mRotateDownAnim = new RotateAnimation(-180.0f, 0.0f,
               Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
               0.5f);
       mRotateDownAnim.setDuration(ROTATE_ANIM_DURATION);
       mRotateDownAnim.setFillAfter(true);
   }

   // 设置状态
   public void setState(int state) {
       if (state == mState)
           return;

       if (state == STATE_REFRESHING) { // 显示进度
           mArrowImageView.clearAnimation();
           mArrowImageView.setVisibility(View.INVISIBLE);// 不显示图片
           mProgressBar.setVisibility(View.VISIBLE);// 显示进度条
       } else { // 显示箭头图片
           mArrowImageView.setVisibility(View.VISIBLE);
           mProgressBar.setVisibility(View.INVISIBLE);
       }

       switch (state) {
           case STATE_NORMAL:
               if (mState == STATE_READY) {// 当状态时准备的时候，显示动画
                   mArrowImageView.startAnimation(mRotateDownAnim);
               }
               if (mState == STATE_REFRESHING) {// 当状态显示进度条的时候，清除动画
                   mArrowImageView.clearAnimation();
               }
               mHintTextView.setText(R.string.xlistview_header_hint_normal);// 文字提示：下拉刷新
               break;
           case STATE_READY:
               if (mState != STATE_READY) {
                   mArrowImageView.clearAnimation();
                   mArrowImageView.startAnimation(mRotateUpAnim);
                   mHintTextView.setText(R.string.xlistview_header_hint_ready);// 松开刷新数据
               }
               break;
           case STATE_REFRESHING:
               mHintTextView.setText(R.string.xlistview_header_hint_loading);
               break;
           default:
       }

       mState = state;
   }
   public void setVisiableHeight(int height) {
       if (height < 0)
           height = 0;
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mContainer
               .getLayoutParams();
       lp.height = height;
       mContainer.setLayoutParams(lp);
   }
   public int getVisiableHeight() {
       return mContainer.getHeight();
   }
}
//主布局

//子布局scenic_item_list

//子布局xlistview_footer

//子布局xlistview_header

//values/strings.xml

<resources>
    <string name="app_name">包名</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <!-- 下拉刷新，上拉加载更多 -->
    <string name="xlistview_header_hint_normal">下拉刷新</string>
    <string name="xlistview_header_hint_ready">松开刷新数据</string>
    <string name="xlistview_header_hint_loading">正在加载...</string>
    <string name="xlistview_header_last_time">上次更新时间：</string>
    <string name="xlistview_footer_hint_normal">查看更多</string>
    <string name="xlistview_footer_hint_ready">松开载入更多</string>
</resources>