Android(安卓)获取并显示远程图片 Picasso框架的使用(二)

转载请注明出处：明桑Android

在上篇文章中介绍了Picasso的基本用法，这篇文章作为以上的练习；

本文代码github地址：UsePicasso

实现效果：（动图请耐心加载）

需要的知识点

了解Picasso框架的使用：Android 获取并显示远程图片 Picasso框架的使用(一)
知道如何自定义GridView

我们需要编写两个布局文件:activity_gridview.xml activity_main.xml 以及ImageAdapter类、GridImageActivity和MainActivity；

如果你已经掌握了以上知识点，那接下来的代码部分会很轻松：

1.创建项目：UsePicasso ：将Picasso添加进我们的项目，如何添加我就不用多赘述了吧（不知道的可以去看上一篇文章）~~ picasso-2.5.2.jar

2. 创建布局文件我们需要创建一个网格布局用来显示图片：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>

GridView中有几个属性需要我们注意一下：

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

另一个布局文件:res/layout/activity_main.xml 用来显示具体的某一张图片：

<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. 自定义Adapter：创建ImageAdapter类：我们需要继承自BaseAdapter，并覆写其中四个方法，最重要的就是getView()方法，最终通过它来控制具体View的显示；这里不再讲解自定义Adapter的具体细节，不熟悉的同学可参考这篇文章：Using an ArrayAdapter with ListView

public class ImageAdapter extends BaseAdapter {    private Context context;    //图片url地址（多张图片）    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);        //设置placeholder和error image            Picasso.with(context).load(urls.get(i)).placeholder(R.mipmap.image_placholder).error(R.mipmap.ic_launcher).into(imageView);        //设置网格中显示imageView的属性        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);        imageView.setLayoutParams(new GridView.LayoutParams(280, 280));        return imageView;    }   }

4.图片资源：上面代码中我们用到了两张图片：R.miamap.ic_launcher 和 R.mipmap.image_placeholder（或者R.drawable…）,你可以将它们添加进你自己的项目，也可以使用自己的图片：

后面我们还需要从网络上获取18张图片，我已经将图片放在服务器上：可以通过：http://www.jycoder.com/json/Image/1.jp…18.jpg 这种url访问，这也是我们将要在代码中用到的图片Url地址

5.创建GridImageActivity:我们通过GridImageActivity用来显示网格图片：

public class GridImageActivity extends Activity {    private ImageAdapter adapter;    private GridView gridView;    //用来存储我们需要用到的18个Url地址    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= (GridView) findViewById(R.id.grid_view);        //图片Url地址        for(int i=1;i<=18;i++){            urls.add(baseUrl+i+".jpg");        }        adapter=new ImageAdapter(GridImageActivity.this,urls);        gridView.setAdapter(adapter);        //为每个网格添加单击事件监听，单击后跳转到图片展示页面MainActivity        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {                Intent intent=new Intent(GridImageActivity.this,MainActivity.class);                //我们需要传递这张图片的Url地址给MainActivity                intent.putExtra("imageUrl",urls.get(i));                startActivity(intent);            }        });    }    }

5.完成MainActivity**

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);        //获取传递过来的imageUrl，并将image显示出来，注意设置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.改写Manifest.xml:我们需要添加联网权限，还有将GridImageActivity设为启动Activity，而MainActivity作为图片具体显示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"/>    <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>

好的，我们的代码已经完成了~试着让它运行起来吧

总结：

通过上面的练习，Picasso的使用已经基本上掌握了，但是我们却没有涉及最最重要的一点就是图片的缓存，为什么没有写这一部分呢，因为这部分相对涉及的东西比较多，所以我打算写另一篇文章具体探讨一下Android的缓存机制，而不仅仅是在这个框架内讨论~~，关注微信公众号：ITBird，和小伙伴们一起学习一起进步！

参考资料：

Picasso官网

微博： @明桑Android黑历史
邮箱： <13141459344@163.com>
个人主页：明桑战胜Android汪的黑历史
微信公众号： ITBird

总结：

更多相关文章

随机推荐