android仿qq空间、微信朋友圈图片展示

废话不多说，先上效果图



由于近期须要做朋友圈功能，所以在此记录一下，事实上非常多人不明确的一点应该是在图片的排列上面吧，不规则的排列，事实上非常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里面方法，使界面撑到最大
@Override
protected 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 {

@Override
protected 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="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/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("");
}
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return 10;// 返回10条数据
}

@Override
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public 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() {
@Override
public 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="http://schemas.android.com/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;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return num;
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public 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() {
@Override
public 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 2016/3/6 15:51

author wangqi

再啰嗦两句，今天星期天。天气晴。我在淮南师范图书馆6楼写程序=.=