首页 > 代码库 > ListView添加头布局和脚布局
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=http://www.mamicode.com/data; } else { this.data=http://www.mamicode.com/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 =http://www.mamicode.com/ data; } }
ListView添加头布局和脚布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。