[Android] Ví dụ về load ảnh từ internet với Picasso
Ở phần trước mình đã giới thiệu tới các bạn về Picasso – một thư viện load ảnh cực kì mạnh mẽ., và trong bài viết này mình sẽ gửi tới các bạn một ví dụ mà mình tự thiết kế để minh họa cho khả năng load ảnh tuyệt vời của Picasso.
Trước khi bắt đầu bài viết này, nếu bạn nào chưa đọc bài viết sau thì hãy đọc trước đi nhé, bởi mình sẽ không giới thiệu lại về cách sử dụng Picasso nữa đâu, tất cả đều đã có ở trong bài viết này rồi nhé: [Android] Load ảnh với thư viện Picasso
Ví dụ
Trong ví dụ này mình sẽ chỉ đơn giản là load các ảnh từ internet vào 1 ListView và hiển thị ra màn hình mà thôi. Để cho thống nhất, các ảnh đã được mình fix cứng trong code và đều có kích thước là 1080×1920 (1080p). Để thực hiện ví dụ minh họa này, các bạn làm theo các bước sau đây nhé:
Các bước tiến hành
Bước 1: Đầu tiên chúng ta hãy tạo 1 project mới trên Android Studio nhé:
Bước 2: Tiếp theo chúng ta thêm 1 ListView vào trong file activity_main.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.that2u.android.demo.picassodemo.MainActivity"> <ListView android:id="@+id/image_list" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </RelativeLayout> |
Bước 3: Chúng ta tạo file image_item_layout.xml làm layout cho 1 item trong listview. Layout này chỉ có duy nhất 1 ImageView là ảnh cần hiển thị:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
Bước 4: Ta tạo ra 1 class Adapter cho ListView có tên là ImageAdapter.java, Adapter này có chứa 1 mảng các URL của các ảnh được lưu lại dưới dạng String và sử dụng Picasso để load ảnh từ internet về ImageView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
public class ImageAdapter extends ArrayAdapter<String> { public ImageAdapter(Context context, int resource, String[] objects) { super(context, resource, objects); } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder vh = null; if(convertView == null){ //create viewholder convertView = LayoutInflater.from(getContext()).inflate(R.layout.image_item_layout, null); ImageView imageView = (ImageView) convertView.findViewById(R.id.image); vh = new ViewHolder(); vh.imageView = imageView; convertView.setTag(vh); }else{ vh = (ViewHolder) convertView.getTag(); } //Load image from internet via Picasso Picasso.with(getContext()) .load(getItem(position)) .placeholder(R.drawable.loading_bar) .error(R.drawable.warning) .into(vh.imageView); return convertView; } private static class ViewHolder{ ImageView imageView; } } |
Bước 5: Trong MainActivity.java, chúng ta khai báo danh sách các URL của các ảnh và tạo 1 đối tượng của ImageAdapter để gán cho ListView:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
public class MainActivity extends AppCompatActivity { private static final String[] IMAGE_LINKS = { "http://wallpapercave.com/wp/k4cxWQK.jpg", "http://wallpapercave.com/wp/648uTUS.jpg", "http://wallpapercave.com/wp/XR7SftE.jpg", "http://wallpapercave.com/wp/bk2ZBV6.jpg", "http://wallpapercave.com/wp/DLHAWyM.jpg", "http://wallpapercave.com/wp/iP1BNBR.jpg", "http://wallpapercave.com/wp/51WHQ1z.jpg", "http://wallpapercave.com/wp/jhhZ6aC.jpg", "http://wallpapercave.com/wp/KYZrjTW.jpg", "http://wallpapercave.com/wp/A5mhExG.jpg", "http://wallpapercave.com/wp/4bnIMUF.jpg", "http://wallpapercave.com/wp/vlLx0SY.jpg", "http://wallpapercave.com/wp/lCVnfdn.jpg", "http://wallpapercave.com/wp/F7g5feF.jpg", "http://wallpapercave.com/wp/j8ub2eb.jpg", "http://wallpapercave.com/wp/9QXJJF8.jpg" }; private ListView mListView; private ImageAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mListView = (ListView) findViewById(R.id.image_list); mAdapter = new ImageAdapter(this, R.layout.image_item_layout, IMAGE_LINKS); mListView.setAdapter(mAdapter); } } |
Bước 6: Cuối cùng chúng ta thêm quyền truy cập internet cho Application vào trong Manifest.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.that2u.android.demo.picassodemo"> <uses-permission android:name="android.permission.INTERNET"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
Như vậy là chúng ta đã hoàn thành xong ví dụ đơn giản về sức mạnh của Picasso trong việc load ảnh từ Internet, giờ các bạn hãy thử build và thử nghiệm nhé.
About Author
Minh Phạm
Chào các bạn. Mình là Phạm Anh Minh. Hiện mình đang làm công việc performance analysis cho Samsung R&D Việt Nam. Hi vọng các bài viết của mình giúp ích được cho các bạn.
Facebook
Google+
Wordpress