Android gets and displays remote pictures using the Picasso Framework (ii)

Reprint Please specify source: Minsan Android

In the previous article, we introduced the basic usage of Picasso, this article as the above practice;

This article code GitHub address: Usepicasso

Implementation effect: (Dynamic diagram please load patiently)

The knowledge points needed

1. Understanding the use of the Picasso framework : Android gets and displays the use of the remote picture Picasso frame (i)
2. Know how to customize the GridView

We need to write two layout files: activity_gridview.xml activity_main.xml as well as ImageAdapter classes, GridImageActivity and MainActivity ;

If you have mastered the above points of knowledge, then the next part of the code will be easy:

1. Create the project: Usepicasso : Add Picasso to our project, how to add I don't have to repeat it (do not know can go to see an article) ~ ~ Picasso-2.5.2.jar

2. Create a layout file we need to create a grid layout to display the picture:res/layout/activity_gridview.xml

<GridView xmlns:android="Http://schemas.android.com/apk/res/android"            Android:id="@+id/grid_view"            Android:numcolumns="Auto_fit"            android:gravity="Center"            Android:stretchmode="ColumnWidth"            Android:columnwidth="90DP"            android:horizontalspacing="10DP"            android:verticalspacing="5DP"            Android:background="#ffffff"            Android:layout_width="Match_parent"            Android:layout_height="Match_parent"> </GridView>

There are several properties in the GridView that we need to take note of:

numColumns="auto_fit"，这里我们使用"auto_fit"，当然你也可以指定固定值stretchMode="columWidth",单元格拉伸类型，这里仅拉伸表格元素本身android:columnWidth="90dp",指定列宽android:horizontalSpacing="10dp"，水平间隔android:verticalSpacing="5dp"，竖直间隔

Another layout file: res/layout/activity_main.xml used to display a specific picture:

<linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"  Android:background="#00000000"android:padding="10DP"android:layout_width ="Match_parent"android:layout_height="Match_parent">                                        <ImageViewandroid:id= "@+id/full_image"android:layout_width=" Match_parent "android:layout_height=" match_parent " />                                    </linearlayout>

3. Custom adapter: Create ImageAdapter class: We need to inherit from Baseadapter, and overwrite four of them, the most important is the getView() method, finally through it to control the display of the specific view The details of the custom adapter are no longer explained here, and the unfamiliar classmate can refer to this article: Using the Arrayadapter with ListView

 Public  class imageadapter extends baseadapter {    PrivateContext context;//Image URL address (multiple pictures)    Privatearraylist<string> URLs; Public Imageadapter(Context context,arraylist<string> URLs) { This. Context = Context; This. Urls=urls; }@Override     Public int GetCount() {returnUrls.size (); }@Override     PublicObjectGetItem(inti) {returnUrls.get (i); }@Override     Public Long Getitemid(inti) {returnI }@Override     PublicViewGetView(intI, view view, ViewGroup viewgroup) {ImageView imageview=NewImageView (context);//Set placeholder and error imagePicasso.with (context). Load (Urls.get (i)). Placeholder (R.mipmap.image_placholder). Error (R.mipmap.ic_launcher). Into (ImageView);//Set the properties of the ImageView to be displayed in the gridImageview.setscaletype (ImageView.ScaleType.CENTER_CROP); Imageview.setlayoutparams (NewGridview.layoutparams (280,280));returnImageView; }   }

4. Picture Resources : We have used two images in the above code: R.miamap.ic_launcher and R.mipmap.image_placeholder (or r.drawable ... ), you can add them to your own projects, or you can use your own pictures:

We also need to get 18 pictures from the network , I have put the picture on the server: can pass: http://www.jycoder.com/json/Image/1.jp ... 18.jpg This URL access, which is also the image URL address we will be using in the code

5. Create GridImageActivity : We use gridimageactivity to display the grid picture:

 Public  class gridimageactivity extends Activity {    PrivateImageadapter adapter;PrivateGridView GridView;//used to store 18 URL addresses that we need to use    PrivateArraylist<string> urls=NewArraylist<> ();Private FinalString baseurl="http://www.jycoder.com/json/Image/";@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_gridview); gridview= (GridView) Findviewbyid (R.id.grid_view);//Image URL address         for(intI=1; i<= -; i++) {Urls.add (baseurl+i+". jpg"); } adapter=NewImageadapter (gridimageactivity. This, URLs); Gridview.setadapter (adapter);//For each grid add click event Listener, click to jump to the picture Display page mainactivityGridview.setonitemclicklistener (NewAdapterview.onitemclicklistener () {@Override             Public void Onitemclick(adapterview<?> Adapterview, view view,intILongL) {Intent intent=NewIntent (gridimageactivity. This, Mainactivity.class);//We need to pass the URL address of this image to MainactivityIntent.putextra ("ImageUrl", Urls.get (i));            StartActivity (Intent);    }        }); }    }

5. Complete MainActivity * *

 Public  class mainactivity extends Activity {    PrivateImageView ImageView;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main); imageview= (ImageView) Findviewbyid (r.id.full_image);//Get the ImageUrl passed in, and display the image, note the settings PlaceholerIntent intent=getintent (); String Imageurl=intent.getextras (). GetString ("ImageUrl"); Picasso.with (mainactivity. This). Load (IMAGEURL). Placeholder (R.mipmap.image_placholder). Error (R.mipmap.ic_launcher). into (ImageView); }}

6. Rewrite Manifest.xml : We need to add network permissions, and will be GridImageActivity set to start the activity, and MainActivity as a picture to show activity

<?xml version= "1.0" encoding= "Utf-8"?>    <manifest xmlns:android="Http://schemas.android.com/apk/res/android"  package ="Com.coder.usepicasso" >        <uses-permission android:name="Android.permission.INTERNET"/>    <applicationandroid:allowbackup="true"android:icon="@mipmap/ic_ Launcher "android:label=" @string/app_name "android:theme=" @style/ Apptheme " >                                        <activityandroid:name=". Gridimageactivity "android:label=" @string/app_name " >                                    <intent-filter>                <action android:name="Android.intent.action.MAIN" />                <category android:name="Android.intent.category.LAUNCHER" />            </intent-filter>        </activity>        <activity android:name=". Mainactivity "/>    </Application></manifest>

OK, our code is done ~ try to let it run

Summary:

Through the above practice, the use of Picasso has been basically mastered, but we do not involve the most important point is the image of the cache, why did not write this part of it, because this part of the relatively involved in more things, so I intend to write another article specifically explore the android cache mechanism, And not just in the framework of the discussion ~ ~, attention to the public number: Itbird, and small partners to learn together with progress!

Resources:

Picasso official website

• Weibo: @ Ming sang Android Black history
• E-mail: <[email protected]>
• Personal homepage: Minsan wins the black history of Android Wang

• Public Number: Itbird

Android gets and displays remote pictures using the Picasso Framework (ii)