android仿qq空间、微信朋友圈图片展示-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 废话不多说,先上效果图 因为最近需要做朋友圈功能,所以在此记录一下,其实很多人不明白的一点应该是在图片的排列上面吧,不规则的排列,其实很简单的,就是一个GridView,然而你xml光光写GridView是不行的哦,你们会发现,图片只显示一行,而且这个gridView还可以滑动,是吧,其实我们得重写GridView的onMeasure方法,使其扩大至内容的最大状态。

废话不多说,先上效果图
这里写图片描述


因为最近需要做朋友圈功能,所以在此记录一下,其实很多人不明白的一点应该是在图片的排列上面吧,不规则的排列,其实很简单的,就是一个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;
    }

好了,代码已经展示出了,技巧大家应该也明白了吧,很简单的,虽然我这做的潦草
但思想还是存在的,即便是加载网络图片,也是这样,先获取图片的url数量,然后来判断该怎么设置GridView的列,设置好列后把列数传给GridViewAdapter,让adapter去设置图片的宽度,为了适应屏幕,我们获取了屏幕的宽度然后除以列数,图片的填充样式也设置了ImageView.ScaleType.CENTER_CROP,为了使图片看起来更美观一点,其实我之前还想到了一点,不知道是不是这样做的,就是我们上传图片的时候,服务端应该生成了两种图片,一种是缩略图,一种是原图,我们qq空间中显示的应该是缩略图,然后点击查看显示原图,那么这个缩略图的宽高按照当前最流行的机型的宽度来设置的话,应该屏幕适应会更好点吧,再加上ImageView设置了ImageView.ScaleType.CENTER_CROP,这样就绝不会产生图片上下带空白的效果了。

create by 2016/3/6 15:51
author wangqi

再啰嗦两句,今天星期天,天气晴,我在淮南师范图书馆6楼敲代码=.=

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: