网络图片浏览器的实现效果:
实现步骤:
① 用户交互界面的设计与实现
② 界面逻辑代码的设计与实现
③ 添加访问网络权限
- 我们启动android studio开发工具。
- 创建一个新项目,选择Empty Activity空模板,点击下一步。
- 项目名字命名为ImageView,点击finish完成,等待项目相关配置自动加载完成。
- 准备工作,我们案例中用到了背景图片bg.jpg,我们先将图片素材放到res-drawable文件夹中。
- 接下来我们开始用户交互界面的设计与实现,在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>
- 接下来添加一个线型布局,并在其中添加文本编辑控件和按钮控件。
<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>
- 在线型布局下面添加一个视图控件,用来显示获取的网络图像。
<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返回主线程处理消息-添加获取访问网络权限-更新主界面呈现网络图片。