ListView添加头布局和脚布局

 ListView添加头布局和脚布局

之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考;

如果我们当前的页面有多个接口、多种布局的话,我们一般的选择无非就是1、多布局;2、各种复杂滑动布局外面套一层ScrollView(好low);3、头布局脚布局。有的时候我们用多布局并不能很好的实现,所以头布局跟脚布局就是我们最好的选择了;学过了ListView的话原理很简单,没啥理解的东西,直接贴代码了:

效果图:

                 

正文部分布局:

fragment_classify.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/teach_classify_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:listSelector="#00000000"/>
</LinearLayout>

classify_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/teach_classify_item_divider"
        android:background="#f3fdeeee"
        android:layout_width="match_parent"
        android:layout_height="10dp"/>

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

        <RelativeLayout
            android:id="@+id/teach_classify_left"
            android:layout_width="0dp"
            android:background="@drawable/item_pressed"
            android:layout_height="match_parent"
            android:layout_marginLeft="15dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/teach_classify_item_iamge01"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/teach_classify_item_text01"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="60dp"
                android:gravity="center_vertical"
                android:text="@string/app_name" />

        </RelativeLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#efe6e6" />

        <RelativeLayout
            android:id="@+id/teach_classify_right"
            android:layout_width="0dp"
            android:background="@drawable/item_pressed"
            android:layout_height="match_parent"
            android:layout_marginLeft="15dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/teach_classify_item_iamge02"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/teach_classify_item_text02"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="60dp"
                android:gravity="center_vertical"
                android:text="@string/app_name" />

        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

头布局:

fragment_classify_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/teach_classify_lv_header"
        android:src="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="180dp" />
</LinearLayout>

脚布局:

fragment_classify_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"       android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/teach_classify_bottom"
        android:src="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="160dp" />
</LinearLayout> 

主页面:

public class ClassifyFragment extends BaseFragment implements ClassifyAdapter.OnClickItemListener{
    public static final String TAG = ClassifyFragment.class.getSimpleName();
    private ListView mListView;
    private ClassifyAdapter adapter;
    private ImageView mHeaderImage;
    private ImageView mBottomImage;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        layout = inflater.inflate(R.layout.fragment_classify, container, false);
        return layout;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initView();
        setupView();
    }
    /**
     * Header的添加最好放在setAdapter之前,在Android4.4之前,Header添加必须放在设置Adapter之前
     */
    private void initView() {
        mListView = ((ListView) layout.findViewById(R.id.teach_classify_listview));
        //header
        View headerView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_classify_header,null);
        mHeaderImage = ((ImageView) headerView.findViewById(R.id.teach_classify_lv_header));
        //可以添加多个HeaderView
        mListView.addHeaderView(headerView);
        //bottom
        View bottomView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_classify_bottom,null);
        mBottomImage = ((ImageView) bottomView.findViewById(R.id.teach_classify_bottom));
        mListView.addFooterView(bottomView);
        adapter = new ClassifyAdapter(getActivity(), null);
        mListView.setAdapter(adapter);
    }

    /**
     * 网络请求
     */
    private void setupView() {
        HttpUtil.getStringAsync(HttpConstant.CLASSIFY_URL, new HttpUtil.RequestCallBack() {
            @Override
            public void onFailure() {
                Log.e(TAG, "onFailure: ");
            }

            @Override
            public void onSuccess(String result) {
                Log.e(TAG, "onSuccess: " + result);
                Gson gson = new Gson();
                ClassifyList classifyList = gson.fromJson(result, ClassifyList.class);
                List<Classify> list = classifyList.getList();
                //更新适配器
                adapter.updateRes(list);
                //更新Header
                ImageLoader.display(mHeaderImage,list.get(0).getCoverPath());
            }

            @Override
            public void onFinish() {
                Log.e(TAG, "onFinish: ");
            }
        });
        String URL_BOTTOM="http://adse.ximalaya.com/ting?device=android&name=cata_index_banner&network=wifi&operator=0&version=4.3.98";
        HttpUtil.getStringAsync(URL_BOTTOM, new HttpUtil.RequestCallBack() {
            @Override
            public void onFailure() {
            }

            @Override
            public void onSuccess(String result) {
                Gson gson = new Gson();
                ClassifyBottomList classifyBottomList = gson.fromJson(result, ClassifyBottomList.class);
                ImageLoader.display(mBottomImage, classifyBottomList.getData().get(0).getCover());
            }

            @Override
            public void onFinish() {
            }
        });
    }
    @Override
    public void onOnclickItem(int position) {
        Log.e(TAG, "onOnclickItem:------------- "+position );
    }
}

适配器:

public class ClassifyAdapter extends BaseAdapter implements View.OnClickListener {

    private static final String TAG = ClassifyAdapter.class.getSimpleName();
    private List<Classify> data;
    private LayoutInflater inflater;
    private OnClickItemListener listener;//持有接口

    public void setListener(OnClickItemListener listener){
            this.listener=listener;
    }

    public ClassifyAdapter(Context context,List<Classify>data) {
        inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (data!=null) {
            this.data=data;
        }
        else {
            this.data=new ArrayList<>();
        }
    }

    public void updateRes(List<Classify> data){
        if (data!=null) {
            this.data.clear();
            this.data.addAll(data);
            notifyDataSetChanged();
        }
    }

    @Override
    public int getCount() {
        int count=0;
        if (data!=null) {
            count=(data.size()-1)/2;
        }
        return count;
    }

    @Override
    public Classify getItem(int position) {
        return data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder=null;
        if (convertView==null) {
            convertView=inflater.inflate(R.layout.classify_item,parent,false);
            holder=new ViewHolder();
            holder.itemIamge01= (ImageView) convertView.findViewById(R.id.teach_classify_item_iamge01);
            holder.itemImage02= (ImageView) convertView.findViewById(R.id.teach_classify_item_iamge02);
            holder.itemText01= (TextView) convertView.findViewById(R.id.teach_classify_item_text01);
            holder.itemText02= (TextView) convertView.findViewById(R.id.teach_classify_item_text02);
            holder.topDivider=convertView.findViewById(R.id.teach_classify_item_divider);
            holder.leftItem=convertView.findViewById(R.id.teach_classify_left);
            holder.rightItem=convertView.findViewById(R.id.teach_classify_right);
            convertView.setTag(holder);
        }
        else {
            holder= (ViewHolder) convertView.getTag();
        }
        //根据条件判断是否显示分割线
        if (position%3==0&&position!=0) {
            holder.topDivider.setVisibility(View.VISIBLE);
        }else {
            holder.topDivider.setVisibility(View.GONE);
        }
        //加载数据
        holder.itemText01.setText(data.get(position*2+1).getTitle());
        holder.itemText02.setText(data.get(position*2+2).getTitle());
        //设置监听
        holder.leftItem.setOnClickListener(this);
        holder.rightItem.setOnClickListener(this);
        //设置标记
        holder.leftItem.setTag(position*2+1);
        holder.rightItem.setTag(position*2+2);
        //加载图片
        ImageLoader.display(holder.itemIamge01,data.get(position*2+1).getCoverPath());
        ImageLoader.display(holder.itemImage02,data.get(position*2+2).getCoverPath());
        return convertView;
    }

    @Override
    public void onClick(View v) {
        Integer position = (Integer) v.getTag();
        Log.e(TAG, "onClick: "+position );
        if (listener!=null) {
            listener.onOnclickItem(position);
        }

    }

    private static class ViewHolder{
        //左边的图片
        ImageView itemIamge01;
        //右边的图片
        ImageView itemImage02;
        //右边
        TextView itemText01;
        TextView itemText02;

        //分割线
        View topDivider;
        //左右布局
        View leftItem,rightItem;
    }

    public interface OnClickItemListener{
        void onOnclickItem(int position);
    }
}

model类:

public class Classify {

    private String title;
    private String coverPath;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getCoverPath() {
        return coverPath;
    }

    public void setCoverPath(String coverPath) {
        this.coverPath = coverPath;
    }
}
public class ClassifyList {
    private List<Classify> list;

    public List<Classify> getList() {
        return list;
    }

    public void setList(List<Classify> list) {
        this.list = list;
    }
}
public class ClassifyBottom {
    private String cover;

    public String getCover() {
        return cover;
    }

    public void setCover(String cover) {
        this.cover = cover;
    }
}
public class ClassifyBottomList {
    private List<ClassifyBottom> data;

    public List<ClassifyBottom> getData() {
        return data;
    }

    public void setData(List<ClassifyBottom> data) {
        this.data = data;
    }
}
时间: 2024-11-03 21:14:47

ListView添加头布局和脚布局的相关文章

Android开发之ListView添加多种布局效果演示

在这个案例中展示的新闻列表,使用到ListView控件,然后在适配器中添加多种布局效果,这里通过重写BaseAdapter类中的 getViewType()和getItemViewType()来做判断,指定ListView列表中指定位置的item加载对应的布局,在 getView中返回对应的视图,之前由于不清楚getViewTypeCount()和getItemViewType()方法,使用得比较少,一直以 为需要添加多个适配器,现在看来当时的想法说明自己见识还不够,哈哈. 第一步:创建放置Li

手把手教你给RecycleView添加头布局和尾布局

RecycleView想必大家都不陌生,它已他的高拓展性取代了传统布局显示,同时配合协调布局,可以实现很多意想不到的酷炫交互,今天就和大家介绍一下,如何给RecycleView添加头布局和尾布局,同时你也可以通过自己的拓展实现更多复杂的布局. 首先我们先看一下效果: 实现头部尾部布局其实方法还是很多,这里我推荐使用Adapter设置itemType来做,那么问题来了,为什么这么做呢?因为拓展性更强,并且更加解耦.将逻辑都写在adapter中,比起写在activity中管理起来也更加方便. 首先,

GridView不能添加头布局,并且scrollView与GridView冲突导致一些页面无法融合

此贴为标记贴 方便下次使用 在项目需求中原本是用ScrollView来进行整个页面的滑动,ScrollView里面包含的有图片轮播,文字轮播,与2列GridView的item 问题 使用原生的GridView ,ScrollView与GridView的滑动就成了分开的不能再一起滑动并且还有gridView进到ScrollView下面等小问题 百度后重写GridView的onMeasure函数后出现一次性把数据加载完 导致内存问题. 解决方法 使用RecyclerView代替了GridView 我

New UI-Java代码动态添加控件或xml布局

New UI-Java代码动态添加控件或xml布局  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://blog.

Android学习---ListView和Inflater的使用,将一个布局文件转化为一个对象

本文将介绍ListView和Inflater的使用,将接上一篇文章内容. 一.什么是ListView? 在android开发中ListView是比较常用的控件,ListView 控件可使用四种不同视图显示项目,1.大(标准)图标2.小图标3.列表4.报表,比较常用的是列表的形式.ListItem 对象可包含文本和图片.然而,若要使用图片则必须通过 Icons 和 SmallIcons 属性引用 ImageList控件. 本文将接着上一篇文章,将sqlite数据库的数据以列表的形式显示出来. 二.

【转】Android ListView加载不同的item布局

原创教程,转载请保留出处:http://www.eoeandroid.com/thread-72369-1-1.html 最近有需求需要在listView中载入不同的listItem布局,开始没有使用convertView,加载了多个item后导致了内存泄露,所以回来研究convertView在多个listItem布局时的缓存及应用,并且和大家分享 构造Adapter时,没有使用缓存的 convertView,导致内存泄露 示例代码:public View getView(int positio

Android应用之——利用getItemViewType为Listview的item设置不同的布局

一.概述 在项目的需求中,有一处需要显示一个交易记录的列表,这个列表很容易让人联想到用listview来实现,但是这个列表又有稍许不同的地方,那就是它里面的item并不是一样的布局,其中某些部分显示的是消费的记录,而有些地方显示的是充值的记录,也就对应了不同的item布局.而且,这两处地方都是从服务端获取数据的,这两个item的数据对应的类内容也各不相同,该怎么处理呢? 下面来一步步实现这个效果. 二.先看效果图 三.实现步骤 实现的原理就是listview的adapter中的一个关键的方法就是

ListView 添加 HeaderView常见错误

1.addHeaderView异常: 最近在做通讯录开发时使用ListView,发现一个奇怪的问题:当添加一个ImageView 作为HeaderView时,发现ImageView长宽始终是1:1的大小,即调用 ListView.addHeaderView(mImageView) 之后mImageView尺寸布局被忽略.具体代码如下: list_view_header_layout.xml <?xml version="1.0" encoding="utf-8"

自定义listView添加滑动删除功能

今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个删除的事件,在事件中进行删除当选行的元素,刷新listview. 一共分为以下几步进行: 1.新建一个按钮的布局文件,用来作为动态添加的按钮:layout_button.xml <?xml version="1.0" encoding="utf-8"?> &