การโหลดและแสดงรูปภาพจากเครือข่าย

เรียกจากภาพ http://10.0.2.2/pro-android/images/

build.gradle (Module: app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.phaisarn.myapplication"
        minSdkVersion 21
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:design:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.koushikdutta.ion:ion:2.+'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

defaultConfig {

applicationId "com.phaisarn.myapplication"

minSdkVersion 21

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

implementation 'com.android.support:design:26.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

implementation 'com.android.support:cardview-v7:26.1.0'

implementation 'com.koushikdutta.ion:ion:2.+'

}

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#def"
    android:gravity="center_horizontal"
    android:paddingTop="20dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#def"

android:gravity="center_horizontal"

android:paddingTop="20dp"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        fab.hide();

        ArrayList<CustomItem> itemArray = new ArrayList<>();
        String baseUrl = "http://10.0.2.2/pro-android/images/";
        String[] fileNames = {"flower1.jpg", "flower2.jpg", "flower3.jpg", "flower4.jpg", "flower5.jpg", "flower6.jpg"};
        String url;
        for (int i = 0; i < fileNames.length; i++) {
            url = baseUrl + fileNames[i];
            itemArray.add(new CustomItem(url, "Flower " + (i + 1)));
        }

        RecyclerView rcv = (RecyclerView) findViewById(R.id.recycler_view);
        CustomAdapter adapter = new CustomAdapter(this, itemArray);
        rcv.setAdapter(adapter);

        GridLayoutManager layout = new GridLayoutManager(this, 2);
        rcv.setLayoutManager(layout);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

import android.support.v7.widget.GridLayoutManager;

import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

.setAction("Action", null).show();

}

});

fab.hide();

ArrayList<CustomItem> itemArray = new ArrayList<>();

String baseUrl = "http://10.0.2.2/pro-android/images/";

String[] fileNames = {"flower1.jpg", "flower2.jpg", "flower3.jpg", "flower4.jpg", "flower5.jpg", "flower6.jpg"};

String url;

for (int i = 0; i < fileNames.length; i++) {

url = baseUrl + fileNames[i];

itemArray.add(new CustomItem(url, "Flower " + (i + 1)));

}

RecyclerView rcv = (RecyclerView) findViewById(R.id.recycler_view);

CustomAdapter adapter = new CustomAdapter(this, itemArray);

rcv.setAdapter(adapter);

GridLayoutManager layout = new GridLayoutManager(this, 2);

rcv.setLayoutManager(layout);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

บรรทัดที่ 36 : AVD เรียกไปยังเครื่องเดียวกัน (localhost) เรียกด้วยหมายเลขไอพี 10.0.2.2

content_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical"
    android:padding="16dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".Main2Activity"
    tools:showIn="@layout/activity_main2">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="400dp"
        android:layout_height="250dp"
        android:layout_gravity="center_horizontal"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:paddingLeft="30dp"
        android:textColor="#00f"
        android:textSize="24sp" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#fff"

android:orientation="vertical"

android:padding="16dp"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".Main2Activity"

tools:showIn="@layout/activity_main2">

<ImageView

android:id="@+id/image_view"

android:layout_width="400dp"

android:layout_height="250dp"

android:layout_gravity="center_horizontal"

android:scaleType="centerCrop" />

<TextView

android:id="@+id/text_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginBottom="10dp"

android:layout_marginTop="10dp"

android:paddingLeft="30dp"

android:textColor="#00f"

android:textSize="24sp" />

</LinearLayout>

Main2Activity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.content.Intent;
import android.widget.ImageView;
import android.widget.TextView;

import com.koushikdutta.ion.Ion;

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        fab.hide();

        Intent intent = getIntent();
        String url = intent.getStringExtra("url");
        ImageView imageView = (ImageView)findViewById(R.id.image_view);
        Ion.with(imageView)
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.no_image)
                .animateIn(android.R.anim.fade_in)
                .load(url);

        String title = intent.getStringExtra("title");
        TextView textView = (TextView)findViewById(R.id.text_title);
        textView.setText(title);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.content.Intent;

import android.widget.ImageView;

import android.widget.TextView;

import com.koushikdutta.ion.Ion;

public class Main2Activity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main2);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

.setAction("Action", null).show();

}

});

fab.hide();

Intent intent = getIntent();

String url = intent.getStringExtra("url");

ImageView imageView = (ImageView)findViewById(R.id.image_view);

Ion.with(imageView)

.placeholder(R.drawable.placeholder)

.error(R.drawable.no_image)

.animateIn(android.R.anim.fade_in)

.load(url);

String title = intent.getStringExtra("title");

TextView textView = (TextView)findViewById(R.id.text_title);

textView.setText(title);

}

layout/item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="15dp"
      android:layout_marginLeft="15dp"
      android:layout_marginRight="15dp"
      android:layout_marginTop="10dp"
      android:orientation="vertical"
      app:cardBackgroundColor="#fafafa"
      app:cardCornerRadius="10dp"
      app:cardElevation="5dp">

      <ImageView android:id="@+id/image_view"
                 android:layout_width="150dp"
                 android:layout_height="100dp"/>

</android.support.v7.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="15dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="10dp"

android:orientation="vertical"

app:cardBackgroundColor="#fafafa"

app:cardCornerRadius="10dp"

app:cardElevation="5dp">

<ImageView android:id="@+id/image_view"

android:layout_width="150dp"

android:layout_height="100dp"/>

</android.support.v7.widget.CardView>

CustomAdapter.java

package com.phaisarn.myapplication;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.koushikdutta.ion.Ion;

import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter<CustomHolder> {

      private ArrayList<CustomItem> mItems;
      private Context mContext;

      public CustomAdapter(Context context, ArrayList<CustomItem> items) {
            mContext = context;
            mItems = items;
      }

      @Override
      public int getItemCount() {
            return mItems.size();
      }

      @Override
      public CustomHolder onCreateViewHolder(ViewGroup vg, int type) {
            final LayoutInflater inflater = LayoutInflater.from(mContext);
            View view = inflater.inflate(R.layout.item_layout, vg, false);
            final CustomHolder vHolder = new CustomHolder(view);

            view.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View view) {
                        int pos = vHolder.getAdapterPosition();
                        if(pos != RecyclerView.NO_POSITION) {
                              CustomItem item = mItems.get(pos);
                              Intent intent = new Intent(mContext, Main2Activity.class);
                              intent.putExtra("url",  item.url);
                              intent.putExtra("title", item.title);
                              mContext.startActivity(intent);
                        }
                  }
            });
            return vHolder;
      }

      @Override
      public void onBindViewHolder(CustomHolder vHolder, int position) {
            CustomItem item = mItems.get(position);
            String url = item.url;
            Ion.with(mContext)
                    .load(url)
                    .intoImageView(vHolder.imageView);
      }
}

package com.phaisarn.myapplication;

import android.content.Context;

import android.content.Intent;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.koushikdutta.ion.Ion;

import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter<CustomHolder> {

private ArrayList<CustomItem> mItems;

private Context mContext;

public CustomAdapter(Context context, ArrayList<CustomItem> items) {

mContext = context;

mItems = items;

}

@Override

public int getItemCount() {

return mItems.size();

}

@Override

public CustomHolder onCreateViewHolder(ViewGroup vg, int type) {

final LayoutInflater inflater = LayoutInflater.from(mContext);

View view = inflater.inflate(R.layout.item_layout, vg, false);

final CustomHolder vHolder = new CustomHolder(view);

view.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

int pos = vHolder.getAdapterPosition();

if(pos != RecyclerView.NO_POSITION) {

CustomItem item = mItems.get(pos);

Intent intent = new Intent(mContext, Main2Activity.class);

intent.putExtra("url", item.url);

intent.putExtra("title", item.title);

mContext.startActivity(intent);

}

});

return vHolder;

}

@Override

public void onBindViewHolder(CustomHolder vHolder, int position) {

CustomItem item = mItems.get(position);

String url = item.url;

Ion.with(mContext)

.load(url)

.intoImageView(vHolder.imageView);

}

CustomHolder.java

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;

public class CustomHolder extends RecyclerView.ViewHolder {
      public ImageView imageView;

      public CustomHolder(View view) {
            super(view);
            imageView = (ImageView)view.findViewById(R.id.image_view);
      }
}

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.widget.ImageView;

public class CustomHolder extends RecyclerView.ViewHolder {

public ImageView imageView;

public CustomHolder(View view) {

super(view);

imageView = (ImageView)view.findViewById(R.id.image_view);

}

CustomItem.java

package com.phaisarn.myapplication;

public class CustomItem {
      public String url;
      public String title;

      public CustomItem(String url, String title) {
            this.url = url;
            this.title = title;
      }
}

package com.phaisarn.myapplication;

public class CustomItem {

public String url;

public String title;

public CustomItem(String url, String title) {

this.url = url;

this.title = title;

}

รูปที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การโหลดและแสดงรูปภาพจากเครือข่าย