Use of the Picasso framework for obtaining and Displaying Remote images in Android (2 ),

Use of the Picasso framework for obtaining and Displaying Remote images in Android (2 ),

Reprinted please indicate the source: mingsang Android

I introduced the basic usage of Picasso in the previous article. This article serves as the above exercise;

Github address: UsePicasso

Implementation results: (Please be patient with animations)

Required knowledge points

We need to write two layout files:activity_gridview.xml activity_main.xmlAndImageAdapterClass,GridImageActivityAndMainActivity;

If you have mastered the above knowledge points, the following code sections will be very easy:

1.Create a project: UsePicasso: Add Picasso to our project. I don't need to go into details about how to add it. (If you don't know, you can go to the previous article )~~ Picasso-2.5.2.jar

2. Create a layout FileWe need to create a grid layout for displaying images: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>

GridViewNote the following attributes:

NumColumns = "auto_fit", here we use "auto_fit", of course you can also specify the fixed value stretchMode = "columWidth", cell stretch type, here only stretch the table element itself android: columnWidth = "90dp", specifying the column width android: horizontalSpacing = "10dp", horizontal interval android: verticalSpacing = "5dp", vertical interval

Another layout file:res/layout/activity_main.xmlUsed to display a specific image:

<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">        <ImageView            android:id="@+id/full_image"            android:layout_width="match_parent"            android:layout_height="match_parent" /></LinearLayout>

3. Custom Adapter: CreateImageAdapterClass:We need to inherit from BaseAdapter and overwrite the four methods. The most important thing isgetView()Method to Control the display of a specific View. The details of the custom Adapter are not described here. For unfamiliar users, refer to this article: Using an ArrayAdapter with ListView.

Public class ImageAdapter extends BaseAdapter {private Context context; // image url (multiple images) private ArrayList <String> urls; public ImageAdapter (Context context, ArrayList <String> urls) {this. context = context; this. urls = urls ;}@ Override public int getCount () {return urls. size () ;}@ Override public Object getItem (int I) {return urls. get (I) ;}@ Override public long getItemId (int I) {return I ;}@ Override public View getView (int I, View view, ViewGroup viewGroup) {ImageView imageView = new ImageView (context); // set placeholder and error image Picasso. with (context ). load (urls. get (I )). placeholder (R. mipmap. image_placholder ). error (R. mipmap. ic_launcher ). into (imageView); // set the imageView attribute in the grid. setScaleType (ImageView. scaleType. CENTER_CROP); imageView. setLayoutParams (new GridView. layoutParams (280,280); return imageView ;}}

4.Image Resources: The above Code uses two images: R. miamap. ic_launcher and R. mipmap. image_placeholder (orR. drawable...), You can add them to your project, or use your own images:

We also need to obtain 18 images from the network.I have already placed the image on the server: You can use: http://www.jycoder.com/json/Image/1.jp... 18. jpg url access, which is also the image Url we will use in the code

5. CreateGridImageActivity:We use GridImageActivity to display grid images:

Public class GridImageActivity extends Activity {private ImageAdapter adapter; private GridView gridView; // used to store the 18 urls we need: private ArrayList <String> urls = new ArrayList <> (); private final String baseUrl = "http://www.jycoder.com/json/Image/"; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_gridview); gridView = (G RidView) findViewById (R. id. grid_view); // image Url for (int I = 1; I <= 18; I ++) {urls. add (baseUrl + I + ". jpg ");} adapter = new ImageAdapter (GridImageActivity. this, urls); gridView. setAdapter (adapter); // Add a click event listener for each grid, and then jump to the MainActivity gridView on the Image Display page. setOnItemClickListener (new AdapterView. onItemClickListener () {@ Override public void onItemClick (AdapterView <?> AdapterView, View view, int I, long l) {Intent intent = new Intent (GridImageActivity. this, MainActivity. class); // we need to pass the Url of this image to MainActivity intent. putExtra ("imageUrl", urls. get (I); startActivity (intent );}});}}

5. CompleteMainActivity**

Public class MainActivity extends Activity {private ImageView imageView; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); imageView = (ImageView) findViewById (R. id. full_image); // obtain the passed imageUrl and display the image. Pay attention to setting placeholer Intent 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. RewriteManifest.xml:We need to add the Internet permission and addGridImageActivitySet to start Activity, andMainActivityDisplay Activity as an image

<?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"/>    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android: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>

Okay. Our code is complete ~ Try to run it.

Summary:

Through the above exercises, the use of Picasso has been basically mastered, but we did not involve the most important point is the image cache. Why didn't we write this part, this part involves a lot of things, so I plan to write another article to discuss the caching mechanism of Android, not just in this framework ~~, Public Account: ITBird, learning and making progress together with friends!

References:

Official Picasso website

• Weibo: @ mingsang Android Black History
• Mailbox: <13141459344@163.com>
• Personal Homepage: The history of mingsang's victory over Android Wang

• Public Account: ITBird