devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ListView的使用_类型“{ id: string; imgurl: string; name: string; pri

作者：代码探险家 | 2024-07-04 15:35:17

赞

踩

类型“{ id: string; imgurl: string; name: string; price: string; } & { id: s

单独的ListView使用见Listview的DEMO


通过在Activity中Fragment中引用ListView与直接在Activity中引用ListView有所不同

ListView的使用 + BaseAdapter
1）在layout文件中声明控件
2）定义一个layout文件描述ListView的item的外观控件
3）java代码找出ListView控件
4）定义ListView的数据源并添加数据
List<自定义类>
5）适配器：定义类 extends BaseAdapter
6）java代码中初始化适配器
7）ListView调用setAdapter()

实现的效果图：通过点击“男装”，“女装”等标签分别显示listview加载出来的内容，或者通过向左右活动屏幕切换到新的页面，相应的标签栏也进行了切换


首相进行Layout的创建 product_fragment：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical"
  5.     android:padding="@dimen/activity_horizontal_margin" >
  6.  
  7.     <HorizontalScrollView
  8.         android:id="@+id/product_hscroll"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="@dimen/line_width_40"
  11.         android:scrollbars="none" >
  12.  
  13.         <LinearLayout
  14.             android:layout_width="match_parent"
  15.             android:layout_height="40dp"
  16.             android:background="#fff"
  17.             android:orientation="horizontal" >
  18.  
  19.             <TextView
  20.                 android:id="@+id/product_boy"
  21.                 android:layout_width="100dp"
  22.                 android:layout_height="match_parent"
  23.                 android:layout_marginLeft="1dp"
  24.                 android:background="#ccc"
  25.                 android:gravity="center"
  26.                 android:text="男装"
  27.                 android:textColor="#f00"
  28.                 android:textSize="16sp" />
  29.  
  30.             <TextView
  31.                 android:id="@+id/product_nv"
  32.                 android:layout_width="100dp"
  33.                 android:layout_height="match_parent"
  34.                 android:layout_marginLeft="1dp"
  35.                 android:background="#ccc"
  36.                 android:gravity="center"
  37.                 android:text="女装"
  38.                 android:textColor="#f00"
  39.                 android:textSize="16sp" />
  40.  
  41.             <TextView
  42.                 android:id="@+id/product_tong"
  43.                 android:layout_width="100dp"
  44.                 android:layout_height="match_parent"
  45.                 android:layout_marginLeft="1dp"
  46.                 android:background="#ccc"
  47.                 android:gravity="center"
  48.                 android:text="童装"
  49.                 android:textColor="#f00"
  50.                 android:textSize="16sp" />
  51.             <TextView
  52.                 android:id="@+id/product_shipin"
  53.                 android:layout_width="100dp"
  54.                 android:layout_height="match_parent"
  55.                 android:layout_marginLeft="1dp"
  56.                 android:background="#ccc"
  57.                 android:gravity="center"
  58.                 android:text="饰品"
  59.                 android:textColor="#f00"
  60.                 android:textSize="16sp" />
  61.             <TextView
  62.                 android:id="@+id/product_bag"
  63.                 android:layout_width="100dp"
  64.                 android:layout_height="match_parent"
  65.                 android:layout_marginLeft="1dp"
  66.                 android:background="#ccc"
  67.                 android:gravity="center"
  68.                 android:text="包包"
  69.                 android:textColor="#f00"
  70.                 android:textSize="16sp" />
  71.         </LinearLayout>
  72.   </HorizontalScrollView>
  73.   <android.support.v4.view.ViewPager
  74.         android:id="@+id/product_viewpager"
  75.         android:layout_width="match_parent"
  76.         android:layout_height="wrap_content"
  77.         android:layout_marginTop="2dp" />
  78. </LinearLayout>


创建一个ProductFragment用于获取上面的布局： 

  1. public class ProductFragment extends Fragment implements OnClickListener {
  2. 	private View rootView;
  3. 	// ViewPager相关
  4. 	private ViewPager viewPager;
  5. 	private List<Fragment> viewPagerData;
  6. 	private FragmentPagerAdapter viewPagerAdapter;
  7.  
  8. 	private TextView[] tvCategorys;
  9. 	private HorizontalScrollView hScrollView;
  10.  
  11. 	@Override
  12. 	public View onCreateView(LayoutInflater inflater, ViewGroup container,
  13. 			Bundle savedInstanceState) {
  14. 		if (rootView == null) {
  15. 			rootView = inflater.inflate(R.layout.fragment_product, container,
  16. 					false);
  17. 			initView(rootView);
  18. 		}
  19. 		ViewGroup par = (ViewGroup) rootView.getParent();
  20. 		if (par != null) {
  21. 			par.removeView(rootView);
  22. 		}
  23. 		return rootView;
  24. 	}
  25.  
  26. 	private void initView(View rootView) {
  27. 		// ViewPager相关
  28. 		viewPager = (ViewPager) rootView.findViewById(R.id.product_viewpager);
  29. 		// 数据源
  30. 		viewPagerData = new ArrayList<Fragment>();
  31. 		viewPagerData.add(ProductCategoryFragment.newInstance("男装"));
  32. 		viewPagerData.add(ProductCategoryFragment.newInstance("女装"));
  33. 		viewPagerData.add(ProductCategoryFragment.newInstance("童装"));
  34. 		viewPagerData.add(ProductCategoryFragment.newInstance("饰品"));
  35. 		viewPagerData.add(ProductCategoryFragment.newInstance("包包"));
  36. 		// 适配器
  37. 		viewPagerAdapter = new ViewPagerProductAdapter(
  38. 				getChildFragmentManager(), viewPagerData);
  39. 		// 控件绑定适配器
  40. 		viewPager.setAdapter(viewPagerAdapter);
  41. 		// 滑动页面时让对应的标签跟着一起改变，滑动到第几个页面arg0的值随着改变，数组tvCategorys[arg0]对应的标签也随着改变，但tvCategorys在后面部分也没有影响
  42. 		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
  43.  
  44. 			@Override
  45. 			public void onPageSelected(int arg0) {
  46. 				for (int i = 0; i < tvCategorys.length; i++) {
  47. 					tvCategorys[i].setTextColor(Color.BLACK);
  48. 					tvCategorys[i].setBackgroundColor(Color.rgb(0xDD, 0xDD,
  49. 							0xDD));
  50. 				}
  51. 				tvCategorys[arg0].setBackgroundColor(Color.BLUE);
  52. 				tvCategorys[arg0].setTextColor(Color.WHITE);
  53. 			}
  54.  
  55. 			@Override
  56. 			public void onPageScrolled(int arg0, float arg1, int arg2) {
  57.  
  58. 			}
  59.  
  60. 			@Override
  61. 			public void onPageScrollStateChanged(int arg0) {
  62.  
  63. 			}
  64. 		});
  65. 		// //
  66. 		tvCategorys = new TextView[5];
  67. 		tvCategorys[0] = (TextView) rootView.findViewById(R.id.product_boy);
  68. 		tvCategorys[1] = (TextView) rootView.findViewById(R.id.product_nv);
  69. 		tvCategorys[2] = (TextView) rootView.findViewById(R.id.product_tong);
  70. 		tvCategorys[3] = (TextView) rootView.findViewById(R.id.product_shipin);
  71. 		tvCategorys[4] = (TextView) rootView.findViewById(R.id.product_bag);
  72. 		for (int i = 0; i < tvCategorys.length; i++) {
  73. 			tvCategorys[i].setOnClickListener(this);
  74. 		}
  75. 		hScrollView = (HorizontalScrollView) rootView
  76. 				.findViewById(R.id.product_hscroll);
  77. 	}
  78.  
  79. 	// 通过点击控件进行对应页面的切换
  80. 	@Override
  81. 	public void onClick(View v) {
  82. 		for (int i = 0; i < tvCategorys.length; i++) {
  83. 			tvCategorys[i].setTextColor(Color.BLACK);
  84. 			tvCategorys[i].setBackgroundColor(Color.rgb(0xDD, 0xDD, 0xDD));
  85. 		}
  86. 		// 判断具体点击了哪一个TextView
  87. 		for (int i = 0; i < tvCategorys.length; i++) {
  88.  
  89. 			if (v == tvCategorys[i]) {
  90. 				tvCategorys[i].setBackgroundColor(Color.BLUE);
  91. 				tvCategorys[i].setTextColor(Color.WHITE);
  92. 				viewPager.setCurrentItem(i);
  93. 				break;
  94. 			}
  95. 		}
  96. 	}
  97. }



创建一个productcategory_listview，目的是为了把紧接着下面的这个listview_item_product这个控件放入这个布局中：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical" >
  5.     <ListView
  6.         android:id="@+id/productcategory_listview"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content"
  9.         android:cacheColorHint="#0000" 
  10.         ></ListView>
  11.  
  12. </LinearLayout>


创建一个listview_item_product： 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="100dp"
  4.     android:orientation="horizontal" >
  5.     <ImageView
  6.         android:id="@+id/listview_item_product_img"
  7.         android:layout_width="100dp"
  8.         android:layout_height="100dp" 
  9.         />
  10.     <LinearLayout
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:layout_marginLeft="4dp"
  14.         android:orientation="vertical" 
  15.         >
  16.         <TextView
  17.             android:id="@+id/listview_item_product_tv_name"
  18.             android:layout_width="match_parent"
  19.             android:layout_height="30dp"
  20.             android:textSize="16sp"
  21.             android:textStyle="bold"
  22.             />
  23.         <TextView
  24.             android:id="@+id/listview_item_product_tv_desc"
  25.             android:layout_width="match_parent"
  26.             android:layout_height="match_parent"
  27.             android:ellipsize="end"
  28.             android:lineSpacingExtra="4dp"
  29.             />
  30.     </LinearLayout>
  31.  
  32. </LinearLayout>

通过java代码创建一个适配器，加载入listview_item_product中所有控件，但在这之前还需要创建一个product命名的标准类，为了方便阅读，接着创建在一下这个类后面： 

  1. public class ListViewProductAdapter extends BaseAdapter{
  2. 	// 需要两个成员变量
  3. 	private Context context ;
  4. 	private List<Product> data ;
  5. 	public ListViewProductAdapter(Context context, List<Product> data) {
  6. 		super();
  7. 		this.context = context;
  8. 		this.data = data;
  9. 	}
  10. 	@Override
  11. 	public int getCount() {
  12. 		return data.size() ;
  13. 	}
  14. 	@Override
  15. 	public Object getItem(int position) {
  16. 		return data.get(position) ;
  17. 	}
  18. 	@Override
  19. 	public long getItemId(int position) {
  20. 		return position ;
  21. 	}
  22. 	@Override
  23. 	public View getView(int position, View convertView, ViewGroup parent) {
  24. 		ViewHolder holder = null ;
  25. 		if(null == convertView) {
  26. 			convertView = LayoutInflater.from(context).inflate(R.layout.listview_product_item, null) ;
  27. 			holder = new ViewHolder() ;
  28. 			holder.iv = (ImageView) convertView.findViewById(R.id.listview_item_product_img) ;
  29. 			holder.tvTitle = (TextView) convertView.findViewById(R.id.listview_item_product_tv_name) ;
  30. 			holder.tvDesc = (TextView) convertView.findViewById(R.id.listview_item_product_tv_desc) ;
  31. 			convertView.setTag(holder) ;
  32. 		}
  33. 		else {
  34. 			holder = (ViewHolder) convertView.getTag() ;
  35. 		}
  36. 		// 为控件绑定数据项
  37. 		Product current = data.get(position) ;
  38. 		holder.iv.setImageResource(current.getImg()) ;
  39. 		holder.tvDesc.setText(current.getDesc()) ;
  40. 		holder.tvTitle.setText(current.getName()) ;
  41. 		
  42. 		return convertView ;
  43. 	}
  44. 	static class ViewHolder{
  45. 		// 声明你的item布局layout文件中所需要使用的控件
  46. 		ImageView iv;
  47. 		TextView tvTitle , tvDesc ;
  48. 	}
  49. }
标准的product类： 

  1. public class Product {
  2. 	private long id ;
  3. 	private int img;
  4. 	private String name , desc ;
  5. 	private double price ;
  6. 	private int count ;	
  7. 	private String imgUrl ;
  8. 	public Product(long id, int img, String name, String desc, double price,
  9. 			int count) {
  10. 		super();
  11. 		this.id = id;
  12. 		this.img = img;
  13. 		this.name = name;
  14. 		this.desc = desc;
  15. 		this.price = price;
  16. 		this.count = count;
  17. 	}
  18. 	public Product(long id, String imgUrl, String name, String desc, double price,
  19. 			int count) {
  20. 		super();
  21. 		this.id = id;
  22. 		this.imgUrl = imgUrl;
  23. 		this.name = name;
  24. 		this.desc = desc;
  25. 		this.price = price;
  26. 		this.count = count;
  27. 	}
  28. 	public long getId() {
  29. 		return id;
  30. 	}
  31. 	public int getImg() {
  32. 		return img;
  33. 	}
  34. 	public String getName() {
  35. 		return name;
  36. 	}
  37. 	public String getDesc() {
  38. 		return desc;
  39. 	}
  40. 	public double getPrice() {
  41. 		return price;
  42. 	}
  43. 	public int getCount() {
  44. 		return count;
  45. 	}
  46. 	public String getImgUrl() {
  47. 		return imgUrl;
  48. 	}
  49. 	@Override
  50. 	public String toString() {
  51. 		return "Product [id=" + id + ", img=" + img + ", name=" + name
  52. 				+ ", desc=" + desc + ", price=" + price + ", count=" + count
  53. 				+ ", imgUrl=" + imgUrl + "]";
  54. 	}
  55. 	
  56. }
创建一个ProductCategoryFragment，把适配器加载到listview 
  1. public class ProductCategoryFragment extends Fragment {
  2. 	private View rootView;
  3. 	private String category;
  4.  
  5. 	private ListView listview;
  6. 	private List<Product> data;
  7. 	private BaseAdapter adapter;
  8.  
  9. 	// 当前Fragment初始化时需要传入字符串类型的商品类别
  10. 	public static ProductCategoryFragment newInstance(String categoryName) {
  11. 		// 把参数放入Bundle
  12. 		Bundle bundle = new Bundle();
  13. 		bundle.putString("category", categoryName);
  14. 		// 初始化当前Fragment对象
  15. 		ProductCategoryFragment f = new ProductCategoryFragment();
  16. 		// 将Bundle放入当前Fragment对象的arguments里面
  17. 		f.setArguments(bundle);
  18. 		// 返回定义的当前Fragment对象
  19. 		return f;
  20. 	}
  21.  
  22. 	// 获取Fragment初始化时传入的参数
  23. 	public String getCategory() {
  24. 		// 从Arguments中取出Bundle
  25. 		Bundle bundle = getArguments();
  26. 		// 从Bundle中取出数据
  27. 		String result = null;
  28. 		if (null != bundle) {
  29. 			result = bundle.getString("category");
  30. 		}
  31. 		return result;
  32. 	}
  33.  
  34. 	@Override
  35. 	public View onCreateView(LayoutInflater inflater, ViewGroup container,
  36. 			Bundle savedInstanceState) {
  37. 		if (null == rootView) {
  38. 			rootView = inflater.inflate(R.layout.fragment_productcategory,
  39. 					container, false);
  40. 			initView(rootView);
  41. 		}
  42. 		ViewGroup parent = (ViewGroup) rootView.getParent();
  43. 		if (null != parent) {
  44. 			parent.removeView(rootView);
  45. 		}
  46. 		return rootView;
  47. 	}
  48.  
  49. 	private void initView(View rootView) {
  50. 		category = getCategory();
  51. 		if (null == category) {
  52. 			return;
  53. 		}
  54. 		listview = (ListView) rootView
  55. 				.findViewById(R.id.productcategory_listview);
  56. 		data = new ArrayList<Product>();
  57. 		if ("男装".equals(category)) {
  58. 			data.add(new Product(1, R.drawable.nan_1, "dfsd", "dfdsgds", 128, 4));
  59. 			data.add(new Product(2, R.drawable.nan_2, "jeep", "dssdf", 228, 4));
  60. 			data.add(new Product(3, R.drawable.nan_3, "dfssdf", "dfdsgsdg",
  61. 					128, 4));
  62. 		} else if ("女装".equals(category)) {
  63. 			data.add(new Product(1, R.drawable.nv_1, "only", "only ", 128, 4));
  64. 			data.add(new Product(2, R.drawable.nv_2, "Very moda", "fdsfs", 128,
  65. 					4));
  66. 		} else if ("童装".equals(category)) {
  67. 			data.add(new Product(1, R.drawable.tong_1, "balala", "dfdsfs", 128,
  68. 					4));
  69. 			data.add(new Product(2, R.drawable.tong_2, "tom", "fgsf", 128, 4));
  70. 			data.add(new Product(2, R.drawable.tong_3, "cat", "dfsdf", 128, 4));
  71. 		} else if ("饰品".equals(category)) {
  72. 			data.add(new Product(2, R.drawable.shi_1, "Chanel", "dsfdsfds",
  73. 					128, 4));
  74. 		} else if ("包包".equals(category)) {
  75. 			data.add(new Product(2, R.drawable.bao_1, "MK", "MK", 128, 4));
  76. 			data.add(new Product(2, R.drawable.bao_2, "baburry", "dfdsf", 128,
  77. 					4));
  78. 			data.add(new Product(2, R.drawable.bao_3, "NineWest", "dfdsfsd",
  79. 					128, 4));
  80. 		}
  81. 		// 适配器
  82. 		adapter = new ListViewProductAdapter(getActivity(), data);
  83. 		listview.setAdapter(adapter);
  84. 	}
  85. }





声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/787412
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号