No more nonsense, first on the renderings

Because of the recent need to do the circle of friends function, so here to record, in fact, many people do not understand the point should be in the image arrangement, irregular arrangement, in fact, very simple, is a GridView, but you can not write XML GridView oh, you will find that the image display only one line, And the gridView can also slide, right, so we actually have to rewrite the gridView’s onMeasure method to scale it up to the maximum state of the content.

  • Project class diagram



It’s not much, so let’s go through them

  • PictureGridView.java

Overrides the GridView onMeasure method

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} @override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { heightMeasureSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST); super.onMeasure(widthMeasureSpec, heightMeasureSpec); }}Copy the code
  • Windowsie.java is used to get the width of the current screen
public class WindowSize { public static int getWidth(Context context) { WindowManager manager = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); int width = manager.getDefaultDisplay().getWidth(); return width; }}Copy the code
  • 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)); }}Copy the code
  • 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>Copy the code
  • MyListViewAdapter.java
class MyListViewAdapter extends BaseAdapter { private Context context; List<String> data; public MyListViewAdapter(Context context) { this.context = context; Data = new ArrayList<String>(); for (int i = 0; i < 9; i++) { data.add(""); } } @Override public int getCount() { // TODO Auto-generated method stub return 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; }}Copy the code
  • item.xml
<? The 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=" 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>Copy the code
  • 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; }Copy the code

Okay, so I’ve shown you the trick, and I think you get the idea, it’s pretty simple, even if I’m sloppy here, but the idea is still there, even if I’m loading a web image, to get the url number of the image, and then figure out how to set up the GridView columns, Set column after column digital to GridViewAdapter, adapter to set the width of the image, in order to adapt to the screen, we obtain the width of the screen and then divided by the number of columns, picture fill style also set the ImageView. The ScaleType. CENTER_CROP, In order to make the picture looks more beautiful, in fact, I also thought about that before I don’t know whether to do so, is a time when we upload pictures, the service side should generate two images, one is a thumbnail, one kind is the original image, we should show in the qq space is a thumbnail, and then click view shows the original image, Then the thumbnail wide high according to the width of the most popular model to set up, should better adapt to the screen points, plus the ImageView set the ImageView. ScaleType. CENTER_CROP, up and down so it won’t produce images with the effects of a blank.

create by 2016/3/6 15:51

author wangqi

Again long-winded two sentences, today Sunday, the weather is fine, I in huainan normal library on the 6th floor of the code =.=