刚刚学习完Android数据存储和访问做了一个联网查看图片的小案例。
效果图如下:
源码下载地址:https://coding.net/u/gxs1225/p/InternetImageView/git
注意:
因为需要联网,所以要在 AndroidManifest.xml 中加上联网的权限,不加会报错的呦!
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">uses-permission</span> <span class="hljs-attribute">android:name</span>=<span class="hljs-value">"android.permission.INTERNET"</span>/></span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>
为什么通过子线程加载图片?
分析: 由于网络连接需要很长的时间,才能返回页面的内容。如果此连接动作直接在主线程,也就是UI线程中处理,
整个程序处于很长的一个等待状态,这样造成用户体验不好,为了解决这个问题,必须把这个任务放置到单独线程中运行,即建一个子线程,避免阻塞UI线程,这样就不会对主线程有任何影。还加快了图片的加载速度。
步骤1
分析:
首先需要写一个布局文件,一个ImageView用于存放图片显示的位置,一个EditText用于填写图片的URL地址,一个Button按钮,用于事件处理。代码如下:
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute">xmlns:tools</span>=<span class="hljs-value">"http://schemas.android.com/tools"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span> <span class="hljs-attribute">android:paddingBottom</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span> <span class="hljs-attribute">android:paddingLeft</span>=<span class="hljs-value">"@dimen/activity_horizontal_margin"</span> <span class="hljs-attribute">android:paddingRight</span>=<span class="hljs-value">"@dimen/activity_horizontal_margin"</span> <span class="hljs-attribute">android:paddingTop</span>=<span class="hljs-value">"@dimen/activity_vertical_margin"</span> <span class="hljs-attribute">tools:context</span>=<span class="hljs-value">".MainActivity"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">ImageView </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/ivImage"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">EditText </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/etImageUrl"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:ems</span>=<span class="hljs-value">"10"</span> <span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"请输入图片的地址"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"http://avatar.csdn.net/C/9/A/1_yf210yf.jpg"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">Button </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/btnView"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@drawable/button_bg"</span> <span class="hljs-attribute">android:onClick</span>=<span class="hljs-value">"viewImage"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"浏览"</span> /></span> <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span></code>步骤2
分析:
在MainActivity.java中创建一个子线程,通过这个子线程来获取图片。
当一个程序第一次启动时,Android会同时启动一个对应的主线程(Main
Thread),主线程主要负责处理与UI相关的事件。子线程不能单独处理获UI相关的事件
,那么必须借助Handler来更新界面。为此,在界面
Activity中创建一个Handler对象,并在handleMessage()中更新UI。 MainActivity.java<code class="hljs java has-numbering"><span class="hljs-keyword">package</span> com.bzu.gxs; <span class="hljs-keyword">import</span> java.io.IOException; <span class="hljs-keyword">import</span> java.io.InputStream; <span class="hljs-keyword">import</span> java.net.HttpURLConnection; <span class="hljs-keyword">import</span> java.net.MalformedURLException; <span class="hljs-keyword">import</span> java.net.URL; <span class="hljs-keyword">import</span> android.os.Bundle; <span class="hljs-keyword">import</span> android.os.Handler; <span class="hljs-keyword">import</span> android.os.Message; <span class="hljs-keyword">import</span> android.app.Activity; <span class="hljs-keyword">import</span> android.graphics.Bitmap; <span class="hljs-keyword">import</span> android.graphics.BitmapFactory; <span class="hljs-keyword">import</span> android.text.TextUtils; <span class="hljs-keyword">import</span> android.view.Menu; <span class="hljs-keyword">import</span> android.view.View; <span class="hljs-keyword">import</span> android.widget.EditText; <span class="hljs-keyword">import</span> android.widget.ImageView; <span class="hljs-keyword">import</span> android.widget.Toast; <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span> <span class="hljs-keyword">private</span> EditText etImageUrl; <span class="hljs-keyword">private</span> ImageView ivImage; <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> SHOWIMAGE=<span class="hljs-number">1</span>; <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> SHOWFAIL=<span class="hljs-number">0</span>; <span class="hljs-comment">// Handler 处理事件</span> <span class="hljs-keyword">private</span> Handler handler=<span class="hljs-keyword">new</span> Handler(){ <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">handleMessage</span>(android.os.Message msg) { <span class="hljs-keyword">switch</span> (msg.what) { <span class="hljs-keyword">case</span> SHOWIMAGE: Bitmap bitmap=(Bitmap) msg.obj; ivImage.setImageBitmap(bitmap); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> SHOWFAIL: ivImage.setImageResource(R.drawable.button_bg); Toast.makeText(MainActivity.<span class="hljs-keyword">this</span>, <span class="hljs-string">"显示图片失败"</span>, Toast.LENGTH_LONG).show(); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">default</span>: <span class="hljs-keyword">break</span>; } }; }; <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) { <span class="hljs-keyword">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); ivImage.setImageResource(R.drawable.button_bg); } <span class="hljs-comment">// 查找的ID</span> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initViews</span>() { etImageUrl=(EditText) findViewById(R.id.etImageUrl); ivImage=(ImageView) findViewById(R.id.ivImage); } <span class="hljs-comment">// 按钮点击事件</span> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">viewImage</span>(View view){ <span class="hljs-keyword">final</span> String imageUrl=etImageUrl.getText().toString(); <span class="hljs-keyword">if</span>(TextUtils.isEmpty(imageUrl)){ Toast.makeText(<span class="hljs-keyword">this</span>, <span class="hljs-string">"图片路径不能为空"</span>, Toast.LENGTH_LONG).show(); }<span class="hljs-keyword">else</span>{ <span class="hljs-keyword">new</span> Thread(){ <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">run</span>() { <span class="hljs-keyword">try</span> { URL url=<span class="hljs-keyword">new</span> URL(imageUrl); HttpURLConnection httpURLConnection=(HttpURLConnection) url.openConnection(); httpURLConnection.setRequestMethod(<span class="hljs-string">"GET"</span>); httpURLConnection.setConnectTimeout(<span class="hljs-number">5000</span>); <span class="hljs-keyword">int</span> responseCode=httpURLConnection.getResponseCode(); <span class="hljs-keyword">if</span>(responseCode==<span class="hljs-number">200</span>){ InputStream inputStream=httpURLConnection.getInputStream(); Bitmap bitmap=BitmapFactory.decodeStream(inputStream); Message message=<span class="hljs-keyword">new</span> Message(); message.what=SHOWIMAGE; message.obj=bitmap; <span class="hljs-comment">//ivImage.setImageBitmap(bitmap);</span> handler.sendMessage(message); }<span class="hljs-keyword">else</span>{ Message message=<span class="hljs-keyword">new</span> Message(); message.what=SHOWFAIL; handler.sendMessage(message); } } <span class="hljs-keyword">catch</span> (MalformedURLException e) { e.printStackTrace(); } <span class="hljs-keyword">catch</span> (IOException e) { e.printStackTrace(); } } }.start(); } } } </code>