单独的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:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin" >
<HorizontalScrollView
android:id="@+id/product_hscroll"
android:layout_width="match_parent"
android:layout_height="@dimen/line_width_40"
android:scrollbars="none" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="@+id/product_boy"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:background="#ccc"
android:gravity="center"
android:text="男装"
android:textColor="#f00"
android:textSize="16sp" />
<TextView
android:id="@+id/product_nv"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:background="#ccc"
android:gravity="center"
android:text="女装"
android:textColor="#f00"
android:textSize="16sp" />
<TextView
android:id="@+id/product_tong"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:background="#ccc"
android:gravity="center"
android:text="童装"
android:textColor="#f00"
android:textSize="16sp" />
<TextView
android:id="@+id/product_shipin"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:background="#ccc"
android:gravity="center"
android:text="饰品"
android:textColor="#f00"
android:textSize="16sp" />
<TextView
android:id="@+id/product_bag"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:background="#ccc"
android:gravity="center"
android:text="包包"
android:textColor="#f00"
android:textSize="16sp" />
</LinearLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/product_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp" />
</LinearLayout>
public class ProductFragment extends Fragment implements OnClickListener {
private View rootView;
// ViewPager相关
private ViewPager viewPager;
private List<Fragment> viewPagerData;
private FragmentPagerAdapter viewPagerAdapter;
private TextView[] tvCategorys;
private HorizontalScrollView hScrollView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (rootView == null) {
rootView = inflater.inflate(R.layout.fragment_product, container,
false);
initView(rootView);
}
ViewGroup par = (ViewGroup) rootView.getParent();
if (par != null) {
par.removeView(rootView);
}
return rootView;
}
private void initView(View rootView) {
// ViewPager相关
viewPager = (ViewPager) rootView.findViewById(R.id.product_viewpager);
// 数据源
viewPagerData = new ArrayList<Fragment>();
viewPagerData.add(ProductCategoryFragment.newInstance("男装"));
viewPagerData.add(ProductCategoryFragment.newInstance("女装"));
viewPagerData.add(ProductCategoryFragment.newInstance("童装"));
viewPagerData.add(ProductCategoryFragment.newInstance("饰品"));
viewPagerData.add(ProductCategoryFragment.newInstance("包包"));
// 适配器
viewPagerAdapter = new ViewPagerProductAdapter(
getChildFragmentManager(), viewPagerData);
// 控件绑定适配器
viewPager.setAdapter(viewPagerAdapter);
// 滑动页面时让对应的标签跟着一起改变,滑动到第几个页面arg0的值随着改变,数组tvCategorys[arg0]对应的标签也随着改变,但tvCategorys在后面部分也没有影响
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
for (int i = 0; i < tvCategorys.length; i++) {
tvCategorys[i].setTextColor(Color.BLACK);
tvCategorys[i].setBackgroundColor(Color.rgb(0xDD, 0xDD,
0xDD));
}
tvCategorys[arg0].setBackgroundColor(Color.BLUE);
tvCategorys[arg0].setTextColor(Color.WHITE);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
// //
tvCategorys = new TextView[5];
tvCategorys[0] = (TextView) rootView.findViewById(R.id.product_boy);
tvCategorys[1] = (TextView) rootView.findViewById(R.id.product_nv);
tvCategorys[2] = (TextView) rootView.findViewById(R.id.product_tong);
tvCategorys[3] = (TextView) rootView.findViewById(R.id.product_shipin);
tvCategorys[4] = (TextView) rootView.findViewById(R.id.product_bag);
for (int i = 0; i < tvCategorys.length; i++) {
tvCategorys[i].setOnClickListener(this);
}
hScrollView = (HorizontalScrollView) rootView
.findViewById(R.id.product_hscroll);
}
// 通过点击控件进行对应页面的切换
@Override
public void onClick(View v) {
for (int i = 0; i < tvCategorys.length; i++) {
tvCategorys[i].setTextColor(Color.BLACK);
tvCategorys[i].setBackgroundColor(Color.rgb(0xDD, 0xDD, 0xDD));
}
// 判断具体点击了哪一个TextView
for (int i = 0; i < tvCategorys.length; i++) {
if (v == tvCategorys[i]) {
tvCategorys[i].setBackgroundColor(Color.BLUE);
tvCategorys[i].setTextColor(Color.WHITE);
viewPager.setCurrentItem(i);
break;
}
}
}
}
创建一个productcategory_listview,目的是为了把紧接着下面的这个listview_item_product这个控件放入这个布局中:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/productcategory_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#0000"
></ListView>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal" >
<ImageView
android:id="@+id/listview_item_product_img"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:orientation="vertical"
>
<TextView
android:id="@+id/listview_item_product_tv_name"
android:layout_width="match_parent"
android:layout_height="30dp"
android:textSize="16sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/listview_item_product_tv_desc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="end"
android:lineSpacingExtra="4dp"
/>
</LinearLayout>
</LinearLayout>
通过java代码创建一个适配器,加载入listview_item_product中所有控件,但在这之前还需要创建一个product命名的标准类,为了方便阅读,接着创建在一下这个类后面:
public class ListViewProductAdapter extends BaseAdapter{
// 需要两个成员变量
private Context context ;
private List<Product> data ;
public ListViewProductAdapter(Context context, List<Product> data) {
super();
this.context = context;
this.data = data;
}
@Override
public int getCount() {
return data.size() ;
}
@Override
public Object 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(null == convertView) {
convertView = LayoutInflater.from(context).inflate(R.layout.listview_product_item, null) ;
holder = new ViewHolder() ;
holder.iv = (ImageView) convertView.findViewById(R.id.listview_item_product_img) ;
holder.tvTitle = (TextView) convertView.findViewById(R.id.listview_item_product_tv_name) ;
holder.tvDesc = (TextView) convertView.findViewById(R.id.listview_item_product_tv_desc) ;
convertView.setTag(holder) ;
}
else {
holder = (ViewHolder) convertView.getTag() ;
}
// 为控件绑定数据项
Product current = data.get(position) ;
holder.iv.setImageResource(current.getImg()) ;
holder.tvDesc.setText(current.getDesc()) ;
holder.tvTitle.setText(current.getName()) ;
return convertView ;
}
static class ViewHolder{
// 声明你的item布局layout文件中所需要使用的控件
ImageView iv;
TextView tvTitle , tvDesc ;
}
}
标准的product类:
public class Product {
private long id ;
private int img;
private String name , desc ;
private double price ;
private int count ;
private String imgUrl ;
public Product(long id, int img, String name, String desc, double price,
int count) {
super();
this.id = id;
this.img = img;
this.name = name;
this.desc = desc;
this.price = price;
this.count = count;
}
public Product(long id, String imgUrl, String name, String desc, double price,
int count) {
super();
this.id = id;
this.imgUrl = imgUrl;
this.name = name;
this.desc = desc;
this.price = price;
this.count = count;
}
public long getId() {
return id;
}
public int getImg() {
return img;
}
public String getName() {
return name;
}
public String getDesc() {
return desc;
}
public double getPrice() {
return price;
}
public int getCount() {
return count;
}
public String getImgUrl() {
return imgUrl;
}
@Override
public String toString() {
return "Product [id=" + id + ", img=" + img + ", name=" + name
+ ", desc=" + desc + ", price=" + price + ", count=" + count
+ ", imgUrl=" + imgUrl + "]";
}
}
创建一个ProductCategoryFragment,把适配器加载到listview
public class ProductCategoryFragment extends Fragment {
private View rootView;
private String category;
private ListView listview;
private List<Product> data;
private BaseAdapter adapter;
// 当前Fragment初始化时需要传入字符串类型的商品类别
public static ProductCategoryFragment newInstance(String categoryName) {
// 把参数放入Bundle
Bundle bundle = new Bundle();
bundle.putString("category", categoryName);
// 初始化当前Fragment对象
ProductCategoryFragment f = new ProductCategoryFragment();
// 将Bundle放入当前Fragment对象的arguments里面
f.setArguments(bundle);
// 返回定义的当前Fragment对象
return f;
}
// 获取Fragment初始化时传入的参数
public String getCategory() {
// 从Arguments中取出Bundle
Bundle bundle = getArguments();
// 从Bundle中取出数据
String result = null;
if (null != bundle) {
result = bundle.getString("category");
}
return result;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (null == rootView) {
rootView = inflater.inflate(R.layout.fragment_productcategory,
container, false);
initView(rootView);
}
ViewGroup parent = (ViewGroup) rootView.getParent();
if (null != parent) {
parent.removeView(rootView);
}
return rootView;
}
private void initView(View rootView) {
category = getCategory();
if (null == category) {
return;
}
listview = (ListView) rootView
.findViewById(R.id.productcategory_listview);
data = new ArrayList<Product>();
if ("男装".equals(category)) {
data.add(new Product(1, R.drawable.nan_1, "dfsd", "dfdsgds", 128, 4));
data.add(new Product(2, R.drawable.nan_2, "jeep", "dssdf", 228, 4));
data.add(new Product(3, R.drawable.nan_3, "dfssdf", "dfdsgsdg",
128, 4));
} else if ("女装".equals(category)) {
data.add(new Product(1, R.drawable.nv_1, "only", "only ", 128, 4));
data.add(new Product(2, R.drawable.nv_2, "Very moda", "fdsfs", 128,
4));
} else if ("童装".equals(category)) {
data.add(new Product(1, R.drawable.tong_1, "balala", "dfdsfs", 128,
4));
data.add(new Product(2, R.drawable.tong_2, "tom", "fgsf", 128, 4));
data.add(new Product(2, R.drawable.tong_3, "cat", "dfsdf", 128, 4));
} else if ("饰品".equals(category)) {
data.add(new Product(2, R.drawable.shi_1, "Chanel", "dsfdsfds",
128, 4));
} else if ("包包".equals(category)) {
data.add(new Product(2, R.drawable.bao_1, "MK", "MK", 128, 4));
data.add(new Product(2, R.drawable.bao_2, "baburry", "dfdsf", 128,
4));
data.add(new Product(2, R.drawable.bao_3, "NineWest", "dfdsfsd",
128, 4));
}
// 适配器
adapter = new ListViewProductAdapter(getActivity(), data);
listview.setAdapter(adapter);
}
}