GridView简单使用
简介
GridView
是网格,同ListView
一样,也有scrollbar
。
效果图
xml属性
属性 | 说明 |
---|---|
android:columnWidth=”60dp” | 列宽 |
android:scrollbars=”vertical” | scrollbar |
android:numColumns=”auto_fit” | 列数 |
android:horizontalSpacing=”5dp” | 网格水平间距 |
android:verticalSpacing=”10dp” | 网格竖直间距 |
android:gravity=”end” | 内容排放 |
android:stretchMode=”spacingWidth” | 设置拉伸模式 |
以下是可选值: | – |
none | 不拉伸 |
spacingWidth | 拉伸元素间的间隔空隙 |
columnWidth | 仅仅拉伸表格元素自身 |
spacingWidthUniform | 既拉元素间距又拉伸他们之间的间隔空袭 |
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
tools:context="com.cqc.gridviewdemo01.MainActivity">
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:columnWidth="60dp"
android:gravity="end"
android:scrollbars="vertical"
android:scrollbarSize="50dp"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:stretchMode="spacingWidth"
android:verticalSpacing="10dp"
/>
</LinearLayout>
方法
xml属性都有对应的代码设置方式,一般是setxx(...)
,或者这些值是通过getxx(...)
方法 | 说明 |
---|---|
setAdapter (ListAdapter adapter) | 设置适配器 |
setSelection (int position) | 默认选中第几个 |
setOnItemClickListener (AdapterView.OnItemClickListener listener) | 设置监听 |
GridView
的adapter
继承自BaseAdapter
adapter
package com.cqc.gridviewdemo01;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
/**
* Created by ${cqc} on 2017/1/5.
*/
public class MyAdapter extends BaseAdapter {
private String[] array;
private int position;
public void setPosition(int position) {
this.position = position;
}
public MyAdapter(String[] array) {
this.array = array;
}
@Override
public int getCount() {
return array.length;
}
@Override
public Object getItem(int i) {
return array[i];
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public View getView(int i, View convertView, ViewGroup viewGroup) {
final ViewHolder holder;
if (convertView == null) {
convertView = View.inflate(viewGroup.getContext(), R.layout.item, null);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tv.setText(array[i]);
return convertView;
}
public class ViewHolder {
TextView tv;
public ViewHolder(View itemView) {
tv = (TextView) itemView.findViewById(R.id.tv);
}
}
}
使用
provinces = getResources().getStringArray(R.array.province);
gridView = (GridView) findViewById(R.id.gridView);
adapter = new MyAdapter(provinces);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int i, long l) {
view.setSelected(true);
}
});
源码
https://git.oschina.net/AndroidUI/GridViewDemo01
http://git.oschina.net/beifang2008/gridview03
图片选择后的显示
多图选择后,用GridView
显示,当点击删除按钮后,删除该图片;当点击+按钮时,重新选择图片。
如果对多选中9张图片,有2种类型,一种是当数量达到9时不显示+,另一种是显示+
第一种:
@Override
public int getCount() {
if (pathList.size() == limitCount) {
return limitCount;
}
return pathList.size() + 1;
}
第二种:
@Override
public int getCount() {
return pathList.size() + 1;
}
第一种:
由于有+,所以adapter
中getCount()
返回pathList.size() + 1
public class MainActivity extends AppCompatActivity {
private GridView gridView;
private List<String> pathList;
private MyAdapter adapter;
private int limitCount = 3;//最多选择3张
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btn1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MultiImageSelector.create().count(3).start(MainActivity.this, 100);
}
});
gridView = (GridView) findViewById(R.id.gridView);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (position < pathList.size()) {
pathList.remove(position);
adapter.notifyDataSetChanged();
} else {
MultiImageSelector.create().count(limitCount).start(MainActivity.this, 100);
}
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == 100) {
if (resultCode == RESULT_OK) {
pathList = data.getStringArrayListExtra(MultiImageSelectorActivity.EXTRA_RESULT);
if (pathList.size() <= limitCount + 1) {
adapter = new MyAdapter();
gridView.setAdapter(adapter);
} else {
Toast.makeText(MainActivity.this, "最多选择" + limitCount + "个", Toast.LENGTH_SHORT).show();
}
}
}
}
public class MyAdapter extends BaseAdapter {
@Override
public int getCount() {
return pathList.size() + 1;
}
@Override
public Object getItem(int position) {
return pathList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
if (position == pathList.size()) {
Glide.with(parent.getContext()).load(R.mipmap.add).into(holder.iv);
holder.iv_delete.setVisibility(View.GONE);
} else {
Glide.with(parent.getContext()).load("file://" + pathList.get(position)).into(holder.iv);
}
return convertView;
}
}
public static class ViewHolder {
ImageView iv;
ImageView iv_delete;
public ViewHolder(View itemView) {
super();
iv = (ImageView) itemView.findViewById(R.id.iv);
iv_delete = (ImageView) itemView.findViewById(R.id.iv_delete);
}
}
}
gridview
分3列显示,把屏幕的宽度/3设置imageview
的宽和高,或者convertview
的宽和高。
获取宽
int mGridWidth;
public MyAdapter() {
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
int width = 0;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
Point size = new Point();
wm.getDefaultDisplay().getSize(size);
width = size.x;
} else {
width = wm.getDefaultDisplay().getWidth();
}
mGridWidth = width / 3;
}
当设为imageview
的宽和高时,item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="100dp">
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<ImageView
android:id="@+id/iv_delete"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:background="@mipmap/delete"/>
</RelativeLayout>
设置ImageView
的宽高
ViewGroup.LayoutParams params = holder.iv.getLayoutParams();
params.width = mGridWidth;
params.height = mGridWidth;
holder.iv.setLayoutParams(params);
当然也可以设置convertview
的宽高
ViewGroup.LayoutParams params = convertView.getLayoutParams();
params.width = mGridWidth;
params.height = mGridWidth;
convertView.setLayoutParams(params);
第二种
item
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/root_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<ImageView
android:id="@+id/iv_delete"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:background="@mipmap/delete"/>
</RelativeLayout>
adapter = new MyAdapter();
gridView.setAdapter(adapter);
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == 100) {
if (resultCode == RESULT_OK) {
pathList.clear();
pathList.addAll(data.getStringArrayListExtra(MultiImageSelectorActivity.EXTRA_RESULT));
adapter.notifyDataSetChanged();
}
}
}
public class MyAdapter extends BaseAdapter {
int mItemWidth;
public MyAdapter() {
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
int width = 0;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
Point size = new Point();
wm.getDefaultDisplay().getSize(size);
width = size.x;
} else {//getWidth()在API>=13后 过时了,
width = wm.getDefaultDisplay().getWidth();
}
mItemWidth = width / 3;
}
@Override
public int getCount() {
if (pathList.size() == limitCount) {
return limitCount;
}
return pathList.size() + 1;
}
@Override
public Object getItem(int position) {
return pathList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item2, parent, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
ViewGroup.LayoutParams params = convertView.getLayoutParams();
params.width = mItemWidth;
params.height = mItemWidth;
convertView.setLayoutParams(params);
if (position == pathList.size()) {
Glide.with(parent.getContext()).load(R.mipmap.add).into(holder.iv);
holder.iv_delete.setVisibility(View.GONE);
holder.iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MultiImageSelector.create().count(9).start(MainActivity2.this, 100);
}
});
} else {
Glide.with(parent.getContext()).load("file://" + pathList.get(position)).into(holder.iv);
holder.iv_delete.setVisibility(View.VISIBLE);
holder.iv_delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
pathList.remove(position);
notifyDataSetChanged();
}
});
}
return convertView;
}
}
public class ViewHolder {
ImageView iv;
ImageView iv_delete;
public ViewHolder(View itemView) {
super();
iv = (ImageView) itemView.findViewById(R.id.iv);
iv_delete = (ImageView) itemView.findViewById(R.id.iv_delete);
}
}
demo: https://git.oschina.net/beifang2008/gridview03
GridViewWithHeaderAndFooter
可以像ListView一样添加头尾布局,而且在setOnItemClickListener(...)
不需在list(position-headerCount-footerCount)
,直接使用position
。
Gradle
compile 'in.srain.cube:grid-view-with-header-footer:1.0.12'
使用示例
注意addHeaderView()+addFooterView()必须在setAdapter()前
gridVivew = (GridViewWithHeaderAndFooter) findViewById(R.id.gridView);
View headerView1 = LayoutInflater.from(context).inflate(R.layout.header_1, gridVivew, false);
View headerView2 = LayoutInflater.from(context).inflate(R.layout.header_2, gridVivew, false);
View footerView1 = LayoutInflater.from(context).inflate(R.layout.footer_1, gridVivew, false);
View footerView2 = LayoutInflater.from(context).inflate(R.layout.footer_2, gridVivew, false);
//addHeaderView()+addFooterView()必须在setAdapter()前
gridVivew.addHeaderView(headerView1);
gridVivew.addHeaderView(headerView2);
gridVivew.addFooterView(footerView1);
gridVivew.addFooterView(footerView2);
MyGridViewAdapter adapter = new MyGridViewAdapter();
gridVivew.setAdapter(adapter);
gridVivew.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(context, provinces[position] + position, Toast.LENGTH_SHORT).show();
}
});
Demo: https://git.oschina.net/libraryDemo/GridViewWithHeaderAndFooter01