登录
当前位置： 首页 > 编程笔记 >

Android ListView添加头布局和脚布局实例详解

昌栋
2023-03-14
本文向大家介绍Android ListView添加头布局和脚布局实例详解，包括了Android ListView添加头布局和脚布局实例详解的使用技巧和注意事项，需要的朋友参考一下

Android 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 html" target="_blank">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;
  }
}

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

 类似资料：
  • 9.4.5 布局实例

    掌握了响应式设计的核心技术之后，你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂，但事实上，它比你想象的要简单。 下面通过构建一个响应式的页面基本布局，让你快速了解如何使用响应式设计技术来构建响应式网站。 首先，创建HTML结构和页面布局。 最常见基本布局将页面划分为 4 个部分，分别是头部、主内容区、侧边栏和页脚，而主内容区和侧边栏一般都会包含在一个容器中。如： <b

  • Android布局之表格布局TableLayout详解

    本文向大家介绍Android布局之表格布局TableLayout详解，包括了Android布局之表格布局TableLayout详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android表格布局TableLayout的具体代码，供大家参考，具体内容如下 1.TableLayout TableLayout表格布局模型以行列的形式管理子控件，每一行为一个TableRow的对象， 当

  • Android  LayoutInflater加载布局详解及实例代码

    本文向大家介绍Android  LayoutInflater加载布局详解及实例代码，包括了Android  LayoutInflater加载布局详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说，一定使用过LayoutInflater.inflater()来加载布局文件，但并不一定去深究过它

  • Android  AbsoluteLayout和RelativeLayout布局详解

    本文向大家介绍Android  AbsoluteLayout和RelativeLayout布局详解，包括了Android  AbsoluteLayout和RelativeLayout布局详解的使用技巧和注意事项，需要的朋友参考一下 Android 线性布局： AbsoluteLayout布局和RelativeLayout布局。  1、绝对布局 AbsoluteLayout 绝对定位Absolute

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    本文向大家介绍第七篇Bootstrap表单布局实例代码详解(三种表单布局)，包括了第七篇Bootstrap表单布局实例代码详解(三种表单布局)的使用技巧和注意事项，需要的朋友参考一下 Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。 创建垂直或基本表单： •·向父 <form> 元素添加 role="form"。 •·把标签和控件放在

  • 相对布局和绝对布局，position:relative和obsolute。

    本文向大家介绍相对布局和绝对布局，position:relative和obsolute。相关面试题，主要包含被问及相对布局和绝对布局，position:relative和obsolute。时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 相对定位relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

相关阅读

相对布局和绝对布局，position:relative和obsolute。Android 表格布局TableLayout示例详解Bootstrap布局方式详解OnClickListener和表布局Android FlowLayout流式布局实现详解

相关文章

JavaFX BorderPane布局JavaFX FlowPane布局2.2.4 FrameLayout(帧布局)CSS弹性布局CSS多列布局

相关问答

PDFBox PDDocument是否添加PDF布局文档？使布局适合视图而不管它们添加到布局中的顺序？如何添加具有线性布局的背景图像作为根布局，并具有嵌套的线性布局如何为线性布局添加阴影-android？向XMLHttpRequest（）的所有实例全局添加X-CSRF-Token头；

相关工具

仿QQ聊天布局局域网发布共享文件仿网易新闻的滑动视图布局瀑布效果，不同的实现方式上拉和下拉刷新的瀑布流

相关文档

分布式 Java幕布帮助文档ZooKeeper 分布式进程协同蓝天数据采集发布系统Masonry 瀑布流插件中文API文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.