Android移动开发之网络图片浏览器案例详细实现方法

网络图片浏览器的实现效果：

实现步骤：

① 用户交互界面的设计与实现

② 界面逻辑代码的设计与实现

③ 添加访问网络权限

1. 我们启动android studio开发工具。
2. 创建一个新项目，选择Empty Activity空模板，点击下一步。
3. 项目名字命名为ImageView，点击finish完成，等待项目相关配置自动加载完成。
4. 准备工作，我们案例中用到了背景图片bg.jpg，我们先将图片素材放到res-drawable文件夹中。
5. 接下来我们开始用户交互界面的设计与实现，在res-layout文件夹中打开Activity_main文件，我们整个界面采用相对布局Relaticelayout来设计其中的控件。我们修改一下相关参数：

<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:background="@drawable/bg"
    tools:context=".MainActivity">
</RelativeLayout>

6. 接下来添加一个线型布局，并在其中添加文本编辑控件和按钮控件。

<LinearLayout
        android:id="@+id/ll_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">
        <EditText
            android:id="@+id/et_path"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="3dp"
            android:layout_weight="1"
            android:background="#EBEBEB"
            android:hint="请输入图片路径"
            android:inputType="textUri"
            android:paddingLeft="3dp"
            android:textColor="#696969"
            android:textSize="20sp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="4"
            android:background="#EBEBEB"
            android:onClick="click"
            android:text="浏览"
            android:textColor="#696969"
            android:textSize="20sp" />
    </LinearLayout>

7. 在线型布局下面添加一个视图控件，用来显示获取的网络图像。

<ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/ll_text"
        android:scaleType="centerCrop" />

到目前为止我们的界面布局代码就编写完成。

我们开始界面逻辑代码的设计与实现，我们在java文件夹中找到MainActivity文件。

public class MainActivity extends AppCompatActivity {
    protected static final int CHANGE_UI = 1;
    protected static final int ERROR = 2;
    private EditText et_path;
    private ImageView ivPic;
    // 主线程创建消息处理器
    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            if (msg.what == CHANGE_UI) {
                Bitmap bitmap = (Bitmap) msg.obj;
                ivPic.setImageBitmap(bitmap);
            } else if (msg.what == ERROR) {
                Toast.makeText(MainActivity.this, "显示图片错误",
                        Toast.LENGTH_SHORT).show();
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        et_path = (EditText) findViewById(R.id.et_path);
        ivPic = (ImageView) findViewById(R.id.iv_pic);
    }
    public void click(View view) {
        final String path = et_path.getText().toString().trim();
        if (TextUtils.isEmpty(path)) {
            Toast.makeText(this, "图片路径不能为空", Toast.LENGTH_SHORT).show();
        } else {
            //子线程请求网络,Android4.0以后访问网络不能放在主线程中
            new Thread() {
                private HttpURLConnection conn;
                private Bitmap bitmap;
                public void run() {
                    // 连接服务器 get 请求 获取图片
                    try {
                        //创建URL对象
                        URL url = new URL(path);
                        // 根据url 发送 http的请求
                        conn = (HttpURLConnection) url.openConnection();
                        // 设置请求的方式
                        conn.setRequestMethod("GET");
                        //设置超时时间
                        conn.setConnectTimeout(5000);
                        // 得到服务器返回的响应码
                        int code = conn.getResponseCode();
                        //请求网络成功后返回码是200
                        if (code == 200) {
                            //获取输入流
                            InputStream is = conn.getInputStream();
                            //将流转换成Bitmap对象
                            bitmap = BitmapFactory.decodeStream(is);
                            //将更改主界面的消息发送给主线程
                            Message msg = new Message();
                            msg.what = CHANGE_UI;
                            msg.obj = bitmap;
                            handler.sendMessage(msg);
                        } else {
                            //返回码不等于200 请求服务器失败
                            Message msg = new Message();
                            msg.what = ERROR;
                            handler.sendMessage(msg);
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                        Message msg = new Message();
                        msg.what = ERROR;
                        handler.sendMessage(msg);
                    }
                    //关闭连接
                    conn.disconnect();
                }
            }.start();
        }
    }
}

最后添加访问网络权限。
在清单文件中添加代码：

<user-permission android:name=”android.permission.INTERNET”/> 

整个程序开发完成，我们将程序部署到模拟设备上，输入图片地址https://www.photophoto.cn/m6/018/030/0180300388.jpg， 单击“浏览”按钮，我们可以看到成功的从服务器获取到了图片显示在了ImageView上。
最后我们总结一下案例实现设计思路：
根据页面显示效果需要，在布局文件中完成用户交互界面设计。
在界面交互代码编写中，先查找添加界面控件-编写处理点击事件函数-启动子线程进行联网操作-通过URL获取httpURLConnection对象-获取到服务器的响应数据-通过handler返回主线程处理消息-添加获取访问网络权限-更新主界面呈现网络图片。