android测试掘金,仿掘金框架之listview全解（一）

最新推荐文章于 2024-08-30 14:43:07 发布

伊苏卡赤

最新推荐文章于 2024-08-30 14:43:07 发布

阅读量225

点赞数

文章标签： android测试掘金

1460000006788254

文章首发：Android程序员日记

作者：贤榆的鱼

测试阅读时间：8min

前言

有有很长一段时间没有更新了，这次给大家带来了一个框架Demo——仿掘金App，希望可以通过这个Demo和大家分享一些控件的实际使用！这次呢先给大家带来了自动隐藏布局且带下拉加载更多的listView！大家可以先看看掘金app的效果图，后面我们把自己的放上来比较一下。

今天先放静态的，明天放一张动的！

1460000006788255

正文

通过仿掘金框架的这个listView大家可以练习到一下几个方面：

[1] listView的基本用法

[2] listView的viewHolder的复用优化及多条目

[3] listview添加headerView实现一些布局和功能

[4] listview通过footerview和滚动监听实现上拉加载更多

[5] listview通过触摸监听事件实现上下bar的布局隐藏功能

[ 1 ] listView的基本用法

首先在xml文件中配置listview

android:scrollbars="none"

android:id="@+id/listView"

android:fadingEdge="vertical"

android:overScrollMode="never"

android:dividerHeight="0.5dp"

android:divider="#05999999"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop="true" />

上面用到的属性：

android:overScrollMode="never" ——滚动越界的模式：ifcontentscroll和always才会有越界效果！

android:dividerHeight="0.5dp" —— listview item之间间隔的高度

android:divider="#05999999" —— listview item之间间隔的背景或者颜色

android:fadingEdge="vertical" —— 上边和下边有黑色的阴影值为none的话就没有阴影

android:scrollbars="none" —— 值为horizontal|vertical的时候，会自动隐藏和显示相应的滚动条，值为none时隐藏滚动条。

部分常用属性补充：

android:cacheColorHint="#00000000" —— 设置拖动背景色为透明

android:fastScrollEnabled="true" —— 快速滚动效果属性配置，在快速滚动的时候旁边会出现一个小方块的快速滚动效果，自动隐藏和显示，

android:scrollbarTrackVertical="@color/colorAccent" —— 设置滚动条的背景色，只能设置引用不能直接填写“#ffffff”

android:scrollbarThumbVertical="@color/colorPrimaryDark" —— 设置滚动条游标的背景色，这里只能引用不能直接填写“#ffffff”

android:scrollbarStyle="outsideInset" —— 四个值的含义如下

outsideInset : 该ScrollBar显示在视图(view)的边缘,增加了view的padding. 如果可能的话,该ScrollBar仅仅覆盖这个view的背景.

outsideOverlay : 该ScrollBar显示在视图(view)的边缘,不增加view的padding,该ScrollBar将被半透明覆盖

insideInset :该ScrollBar显示在padding区域里面,增加了控件的padding区域,该ScrollBar不会和视图的内容重叠.

insideOverlay : 该ScrollBar显示在内容区域里面,不会增加了控件的padding区域,该ScrollBar以半透明的样式覆盖在视图(view)的内容上.

android:footerDividersEnabled —— 当设为false时，ListView将不会在各个footer之间绘制divider.默认为true。

android:headerDividersEnabled —— 当设为false时，ListView将不会在各个header之间绘制divider.默认为true。

[ 2 ] ListView的复用优化及多条目

1460000006788256

在activity中初始化listview并给他设置adapter

mlistView = (ListView) findViewById(R.id.listView);

mAdapter = new ViewHolderAdapter(this, mDates);

mlistView.setAdapter(mAdapter);

在adapter当中利用viewholder模式对listView的复用机制进行优化，在滑动的时候会更加的顺畅。以及listview多条目的使用它。通过viewholder内部类以item布局中的控件最为变量，可以有效的避免每次都通过findViewById()来实例化控件,从而达到复用控件实例,优化listview的目的！

而这里用到的多条目一般情况下是为增加listview条目的多样样行，让listview表现的更加丰富！当然还有一个情况就是为了突出数据的结构分层！我们这里就是为了凸显结构，加了一个文章分类title！

public class ViewHolderAdapter extends BaseAdapter {

private final Context mContext;

private List mDates=new ArrayList<>();

private static final int TITLE=0;

private static final int CONTENT=1;

public ViewHolderAdapter(Context mcontext, List newsItems) {

this.mContext=mcontext;

//添加分类的标题

mDates.add(new NewsItem("热门文章"));

mDates.addAll(1,newsItems);

}

@Override

public int getItemViewType(int position) {

if(position==0){//position为0是itemType为分类Title

return TITLE;

}else{

return CONTENT;

}

//返回listview条目类型的总数，我们这只有文章和分类title两种！

@Override

public int getViewTypeCount() {

return 2;

}

//返回listview中的条目数据总数

@Override

public int getCount() {

return mDates==null?0:mDates.size();

}

//返回条目位置对应的内容

@Override

public NewsItem getItem(int position) {

return mDates.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

//在getView当中对多条目的条目类型进行区分并分别做处理！

@Override

public View getView(int position, View convertView, ViewGroup parent) {

NewsItem item = getItem(position);

ContentViewHolder contentViewHolder;

TieleViewHolder tieleViewHolder;

int type = getItemViewType(position);

if(convertView==null){

switch (type){

case TITLE:

tieleViewHolder=new TieleViewHolder();

convertView=View.inflate(mContext,R.layout.lv_item_title,null);

tieleViewHolder.tv_title= (TextView) convertView.findViewById(R.id.tv_top_title);

tieleViewHolder.tv_title.setText(item.getTitle());

//绑定一个viewHolder方便在对convertView复用时也对viewHolder进行复用

convertView.setTag(tieleViewHolder);

break;

case CONTENT:

contentViewHolder=new ContentViewHolder();

convertView=View.inflate(mContext,R.layout.lv_item,null);

contentViewHolder.iamge= (ImageView) convertView.findViewById(R.id.iv_image);

contentViewHolder.tv_articleInfo= (TextView) convertView.findViewById(R.id.tv_info);

contentViewHolder.tv_title= (TextView) convertView.findViewById(R.id.tv_title);

contentViewHolder.iamge.setImageResource(item.getImage());

contentViewHolder.tv_title.setText(item.getTitle());

contentViewHolder.tv_articleInfo.setText(item.getArtcileInfo());

convertView.setTag(contentViewHolder);

break;

}

}else{

switch (type){

case TITLE:

tieleViewHolder= (TieleViewHolder) convertView.getTag();

tieleViewHolder.tv_title.setText(item.getTitle());

break;

case CONTENT:

//复用绑定的ViewHolder

contentViewHolder= (ContentViewHolder) convertView.getTag();

contentViewHolder.iamge.setImageResource(item.getImage());

contentViewHolder.tv_title.setText(item.getTitle());

contentViewHolder.tv_articleInfo.setText(item.getArtcileInfo());

}

return convertView;

}

public void addDate(List newsItems, boolean isHead) {

if(mDates==null){

this.mDates =newsItems;

}else{

if (isHead){

mDates.addAll(1,newsItems);

}else{

mDates.addAll(getCount(),newsItems);

}

//创建两个不同itemType对应的ViewHolder内部类

public class ContentViewHolder {

ImageView iamge;

TextView tv_title;

TextView tv_articleInfo;

}

public class TieleViewHolder {

TextView tv_title;

}

[ 3 ] ListView添加HeaderView

ListView通过添加HeaderView其实可以实现很多的效果，比如下拉刷新的动画就可以放在HeadView当中。当然这次仿掘金的app用了SwipeRefreshLayout实现了下拉刷新，后面会针对这个写一篇的大家也别急！而这个app中依然也用到了headerView。这里是添加了一个头布局。如下图：

1460000006788257

我们在[ 2 ] 的初始化listview代码之后设置adapter之前加上添加headerView的代码

header = LayoutInflater.from(this).inflate(R.layout.lv_headerview, mlistView, false);

//header = getLayoutInflater().inflate(R.layout.lv_headerview,null,true);

//header=View.inflate(this,R.layout.lv_headerview,null);

mlistView.addHeaderView(header);

注 :

关于lv_headerview.xml的代码大家可以在文末的github地址中获取到，这里就不贴出来了！不过上面代码中也有要注意的地方，我写了三种方式实例化headerView！第一种和第二种是一样！而第三种方法省去了第三个参数！

大家在实例化的时候需要注意的是，如果你的headerview有预留的一段空隙，像我的不居中的一样，那么你的第二个参数需要填写listview的实例对象，而第三个参数需要填写false！否则heaaderview下面的空白就会消失(上面的第二、三个方法就会有该现象)！还有一个就第二个参数填写了listview实例，而第三个对象填写了true！这个时候，就会报错崩溃报如下错误：

Caused by: java.lang.UnsupportedOperationException: addView(View, LayoutParams) is not supported in AdapterView

[ 4 ] 通过footerview和滚动监听实现上拉加载更多

1460000006788258