废话不多说，先上效果图
由于近期须要做朋友圈功能，所以在此记录一下，事实上非常多人不明确的一点应该是在图片的排列上面吧，不规则的排列，事实上非常easy的。就是一个GridView。然而你xml光光写GridView是不行的哦，你们会发现，图片仅仅显示一行，并且这个gridView还能够滑动，是吧，事实上我们得重写GridView的onMeasure方法，使其扩大至内容的最大状态。
项目类图
内容不多，接下来就一一解说吧
PictureGridView.java
重写GridView的onMeasure方法
public class PictureGridView extends GridView {public PictureGridView(Context context) {super(context);// TODO Auto-generated constructor stub}public PictureGridView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub}public PictureGridView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// TODO Auto-generated constructor stub}//重写onMeasure里面方法，使界面撑到最大@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {heightMeasureSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, heightMeasureSpec);}}
WindowSize.java 用来获取当前屏幕的宽度
public class WindowSize {public static int getWidth(Context context) {WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);int width = manager.getDefaultDisplay().getWidth();return width;}}
MainActivity.java
public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ListView listview = (ListView) findViewById(R.id.listview);listview.setAdapter(new MyListViewAdapter(this));}}
main.xml
<RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.qq.MainActivity" ><ListView android:id="@+id/listview"android:layout_width="match_parent"android:layout_height="match_parent" ></ListView></RelativeLayout>
MyListViewAdapter.java
class MyListViewAdapter extends BaseAdapter {private Context context;List<String> data;public MyListViewAdapter(Context context) {this.context = context;//生成9条数据data = new ArrayList<String>();for (int i = 0; i < 9; i++) {data.add("");}}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn 10;// 返回10条数据}@Overridepublic Object getItem(int arg0) {// TODO Auto-generated method stubreturn null;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder;if (convertView == null) {holder = new ViewHolder();convertView = LayoutInflater.from(context).inflate(R.layout.item,parent, false);holder.gridview = (PictureGridView) convertView.findViewById(R.id.gridView);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}int num = position % data.size() + 1;//获取当前的图片数目int col = 1;//默认列数Log.i("tag", "num" + num);if (num == 1) {holder.gridview.setNumColumns(1);col = 1;} else if (num == 2 || num == 4) {holder.gridview.setNumColumns(2);col = 2;} else {holder.gridview.setNumColumns(3);col = 3;}holder.gridview.setAdapter(new MyGridViewAdapter(context, num, col));holder.gridview.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?
> arg0, View arg1, int position, long arg3) { Toast.makeText(context, "" + position, 0).show(); } }); return convertView; } private class ViewHolder {PictureGridView gridview; } }
item.xml
<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="10dp" android:src="@drawable/ic_launcher" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:gravity="center_vertical" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="信奇哥得永生" android:textSize="15dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="17:66" android:textColor="#777" android:textSize="13dp" /> </LinearLayout> </LinearLayout> <com.example.qq.PictureGridView android:verticalSpacing="5dp" android:horizontalSpacing="5dp" android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>MyGridViewAdapter.java
public class MyGridViewAdapter extends BaseAdapter {Context context;int num;int col;public MyGridViewAdapter(Context context, int num, int col) {this.context = context;this.num = num;this.col = col;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn num;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn null;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {ImageView img = new ImageView(context);img.setScaleType(ImageView.ScaleType.CENTER_CROP);int width = WindowSize.getWidth(context);// 获取屏幕宽度Log.i("tag", "width" + width);int height = 0;width = width / col;// 对当前的列数进行设置imgView的宽度height = width;img.setLayoutParams(new AbsListView.LayoutParams(width, height));img.setImageResource(R.drawable.user_photo);img.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(context, "" + position, 0).show();}});return img;}
好了，代码已经展示出了，技巧大家应该也明确了吧。非常easy的，尽管我这做的潦草
但思想还是存在的。即便是载入网络图片，也是这样。先获取图片的url数量，然后来推断该怎么设置GridView的列，设置好列后把列数传给GridViewAdapter，让adapter去设置图片的宽度，为了适应屏幕，我们获取了屏幕的宽度然后除以列数。图片的填充样式也设置了ImageView.ScaleType.CENTER_CROP。为了使图片看起来更美观一点，事实上我之前还想到了一点，不知道是不是这样做的，就是我们上传图片的时候。服务端应该生成了两种图片。一种是缩略图。一种是原图，我们qq空间中显示的应该是缩略图。然后点击查看显示原图。那么这个缩略图的宽高依照当前最流行的机型的宽度来设置的话。应该屏幕适应会更好点吧，再加上ImageView设置了ImageView.ScaleType.CENTER_CROP。这样就绝不会产生图片上下带空白的效果了。
create by /3/6 15:51
author wangqi
再啰嗦两句，今天星期天。天气晴。我在淮南师范图书馆6楼写程序=.=
