一起撸个朋友圈吧(step1) - ListView(中)篇

项目地址:https://github.com/razerdp/FriendCircle
一起撸个朋友圈吧这是本文所处文集,所有更新都会在这个文集里面哦,欢迎关注

上篇链接:http://www.jianshu.com/p/7fa237cfddbb
下篇链接:http://www.jianshu.com/p/68e13214cde4

上一篇我们初步弄出了一个Header,虽然这个header实现的仅仅是弄了一个灰色的图层,但我们需要的是它的回调。

这一篇,我们针对框架封装一个listview出来。

这里简要说说android-Ultra-Pull-To-Refresh这个框架,这个框架继承viewgroup,其实现原理是只能够add2个view,一个作为header,一个作为content,事件分发在dispatchTouchEvent处理,由于继承的viewgroup,所以理论上来说可以添加任何view来实现下拉刷新。

那我们目的就很明确,要将这个框架弄成一个listview(起码让使用的人看起来就是一个listview),我们就要按照listview的风格去弄这个控件,首先当然是定义我们的attrs,我们的attrs属性直接拉官方的包,在as中切换到project标签,依次打开<android api platform> ->res->values->attrs.xml,然后ctrl+f找到abslistview和listview,把你觉得常用的都拉到我们自己新建的attrs.xml里面。

参考图

经过筛选,初步提取出以下属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FriendCirclePtrListView">
        <!--abslistview start-->
        <!--=====================================-->     
        <attr name="listSelector" format="color|reference" />
        <attr name="transcriptMode">      
            <enum name="disabled" value="0"/>      
            <enum name="normal" value="1" />    
            <enum name="alwaysScroll" value="2" />
        </attr>  
        <attr name="cacheColorHint" format="color" /> 
        <attr name="fastScrollEnabled" format="boolean" />
        <attr name="fastScrollStyle" format="reference" />
        <attr name="smoothScrollbar" format="boolean" />
        <attr name="choiceMode">
            <!-- Normal list that does not indicate choices. -->
            <enum name="none" value="0" />
            <!-- The list allows up to one choice. -->
            <enum name="singleChoice" value="1" />
            <!-- The list allows multiple choices. -->
            <enum name="multipleChoice" value="2" />
            <!-- The list allows multiple choices in a custom selection mode. -->
            <enum name="multipleChoiceModal" value="3" />
        </attr>
        <!--=====================================-->
        <!--abslistview end-->
        <!--=====================================-->
        <!--listview start-->
        <attr name="listview_divider" format="reference|color" />
        <attr name="dividerHeight" format="dimension" />
        <attr name="overScrollHeader" format="reference|color" />
        <attr name="overScrollFooter" format="reference|color" />
    </declare-styleable>
</resources>

然后在我们的构造器中直接拉官方源码:

    private void initAttrs(Context context, AttributeSet attrs) {
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FriendCirclePtrListView);

        final Drawable selector = a.getDrawable(R.styleable.FriendCirclePtrListView_listSelector);
        if (selector != null) {
            mListView.setSelector(selector);
        }

        mListView.setTranscriptMode(a.getInt(R.styleable.FriendCirclePtrListView_transcriptMode, 0));
        mListView.setCacheColorHint(a.getColor(R.styleable.FriendCirclePtrListView_cacheColorHint, 0));
        mListView.setFastScrollEnabled(a.getBoolean(R.styleable.FriendCirclePtrListView_fastScrollEnabled, false));
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            mListView.setFastScrollStyle(a.getResourceId(R.styleable.FriendCirclePtrListView_fastScrollStyle, 0));
        }
        mListView.setSmoothScrollbarEnabled(a.getBoolean(R.styleable.FriendCirclePtrListView_smoothScrollbar, true));
        mListView.setChoiceMode(a.getInt(R.styleable.FriendCirclePtrListView_choiceMode, 0));

        final Drawable d = a.getDrawable(R.styleable.FriendCirclePtrListView_listview_divider);
        if (d != null) {
            // Use an implicit divider height which may be explicitly
            // overridden by android:dividerHeight further down.
            mListView.setDivider(d);
        }

        // Use an explicit divider height, if specified.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
            if (a.hasValueOrEmpty(R.styleable.FriendCirclePtrListView_dividerHeight)) {
                final int dividerHeight = a.getDimensionPixelSize(R.styleable.FriendCirclePtrListView_dividerHeight, 0);
                if (dividerHeight != 0) {
                    mListView.setDividerHeight(dividerHeight);
                }
            }
        }
        else {
            final int dividerHeight = a.getDimensionPixelSize(R.styleable.FriendCirclePtrListView_dividerHeight, 0);
            if (dividerHeight != 0) {
                mListView.setDividerHeight(dividerHeight);
            }
        }

        final Drawable osHeader = a.getDrawable(R.styleable.FriendCirclePtrListView_overScrollHeader);
        if (osHeader != null) {
            mListView.setOverscrollHeader(osHeader);
        }

        final Drawable osFooter = a.getDrawable(R.styleable.FriendCirclePtrListView_overScrollFooter);
        if (osFooter != null) {
            mListView.setOverscrollFooter(osFooter);
        }
        a.recycle();
    }

值得注意的是dividerheight这个属性,需要区分一下SDK版本,另外我的divider这个属性不知道为什么会提示重复属性,于是我只好改了一下名字改为listview_divider

初始化中进行各种各样的框架属性定义,代码如下:

 private void initView(Context context) {
        //header
        mHeader = new FriendCirclePtrHeader(context);
        //listview
        mListView = new ListView(context);
        mListView.setSelector(android.R.color.transparent);
        mListView.setLayoutParams(
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        //footer
        mFooter = new FriendCirclePtrFooter(context);

        //view add
        setHeaderView(mHeader);
        addView(mListView);

        //ptr option
        addPtrUIHandler(mHeader.getPtrUIHandler());
        setPtrHandler(this);
        setResistance(2.3f);
        setRatioOfHeaderHeightToRefresh(.25f);
        setDurationToClose(200);
        setDurationToCloseHeader(1000);
        //刷新时的固定的偏移量
        setOffsetToKeepHeaderWhileLoading(0);

        //下拉刷新,即下拉到距离就刷新而不是松开刷新
        setPullToRefresh(false);
        //刷新的时候保持头部?
        setKeepHeaderWhenRefresh(false);

        setScrollListener();
    }

我们在控件中new一个listview,作为content,然后new一个header,就是上一篇的那个header,作为我们的header,接着footer备用,用于滑到底部自动加载时显示用的,这里没有什么技术含量,在setScrollListener(),我们对listview进行滑动监听,当滑动到底部的时候,进行加载更多的操作(本篇暂未实现

    int lastItem = 0;

    private void setScrollListener() {
        mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                if (mOnLoadMoreRefreshListener != null) {
                    if (SCROLL_STATE_IDLE == scrollState &&
                            0 != mListView.getFirstVisiblePosition() && lastItem == mListView.getCount()) {
                        if (hasMore && loadmoreState != PullStatus.REFRESHING) {
                            // TODO: 2016/2/10 待完成
                            //当有更多同时当前加载更多布局不再刷新状态,则执行刷新
                        }
                    }
                }
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                lastItem = firstVisibleItem + visibleItemCount;
            }
        });
    }

那么,现在listview有了,滑动监听也有了,我们该如何实现下拉刷新的监听呢,在框架中有这么一个接口PtrHandler,这个接口需要我们实现两个回调:

public interface PtrHandler {

    /**
     * Check can do refresh or not. For example the content is empty or the first child is in view.
     * <p/>
     * {@link in.srain.cube.views.ptr.PtrDefaultHandler#checkContentCanBePulledDown}
     */
    public boolean checkCanDoRefresh(final PtrFrameLayout frame, final View content, final View header);

    /**
     * When refresh begin
     *
     * @param frame
     */
    public void onRefreshBegin(final PtrFrameLayout frame);
}

根据官方文档,第一个回调是我们决定能否下拉,通常返回官方自带的判断工具类就可以了,第二个就是刷新回调了。

为了方便控制,我们在控件里定义两个枚举:

  • 当前模式:下拉刷新、上拉加载
  • 当前状态:普通(无状态)、正在刷新

定义这两个状态的目的是为了方便我们以后扩展的时候用,比如如果当前状态是正在刷新,我们就禁用掉下拉功能什么的。。。。

public enum PullStatus {
    NORMAL,REFRESHING
}
public enum PullMode {
    FROM_START,FROM_BOTTOM
}

同时,我们定义两个接口,这两个接口用于外部回调,方便控制状态:

/**
 * Created by 大灯泡 on 2016/2/9.
 * 下拉刷新接口
 */
public interface OnPullDownRefreshListener {
    void onRefreshing(PtrFrameLayout frame);
}
/**
 * Created by 大灯泡 on 2016/2/9.
 * 加载更多接口
 */
public interface OnLoadMoreRefreshListener {
    void onRefreshing();
}

接下来在我们的框架回调中执行下面步骤:

   @Override
    public void onRefreshBegin(PtrFrameLayout frame) {
        curMode = PullMode.FROM_START;
        loadmoreState = PullStatus.NORMAL;
        if (mOnPullDownRefreshListener != null) mOnPullDownRefreshListener.onRefreshing(frame);
    }

根据官方文档,官方并未提供上拉加载更多的接口,也就是说这个回调必定是下拉刷新的回调,所以我们的模式指定为from_start,loadmoreState(加载更多状态)则是normal,另外还有一个pullState,这个是下拉状态,该状态由header对应ui接口回调控制。(详情看上篇)

做完这一系列的操作后,我们的下拉刷新基本完成了,但是还有一个很重要的东东,就是刷新的icon,但是这个icon我们的listview不负责控制,控制在header里面(详情看上篇),listview仅用于传值。

在中篇最后让我们分析一下:

到目前为止:

  • 我们写了一个header,一个listview(继承PtrFrameLayout)
  • 其中:
    • header有两个作用,一个是控制自身下拉的展示,另一个是控制刷新icon的展示
    • listview则是继承框架,其作用是做刷新相关操作以及暴露listview接口,让外界看起来像是一个listview

写到这里我思考到一个问题:刷新icon,listview,header这三者的耦合度是不是有点太高了

另外,关于icon使用margintop来更新是否会重复导致measure和layout的问题,在我的测试打印日志里面没有发生。

//更正:、

另外,关于icon使用margintop来更新是否会重复导致measure和layout的问题,在我的测试打印日志里面没有发生。

这个有误,在setAdapter后发现采用relativelayout的话在不断的改变margin时会导致多次测量(如果布局复杂,将会导致测量时间较长,在视觉上表现为掉帧),现改正布局根节点为FrameLayout,多次测量消失。

//更正结束

关于这个问题,待我查查官方资料,以及思考一下,在下篇讨论一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容