閱讀146 返回首頁    go 阿裏雲 go 技術社區[雲棲]


模仿網易新聞圖片點擊放大效果

先把效果拿出來看一下,點擊新聞圖片可以彈出一個DIALOG放大


原理如下:
服務端需要處理:
1、定義一個新聞瀏覽頁麵,如news_list.php?newsid=1
把新聞瀏覽的內容讀取出來

需要注意的是內容裏的圖片,需要給圖片增加一個事件onClick=\"javascript:contactsAction.setImgSrc('$url')\" 



$code = "<img src=\"$turl\" border=\"0\"  onClick=\"javascript:contactsAction.setImgSrc('$url')\"  style=\"$styleCss\" onload=\"$onload\" $alt>";


客戶端處理

1、bbsinfo_listhtml.xml 新聞內容顯示模版
2、bbsimgshow.xml 新聞圖片點擊放大效果
3、BbsinfoList.java 新聞內容讀取頁麵
4、BbsImageShow.java 圖片放大頁麵


處理過程:
新聞內容頁放置webview控件
當內容顯示出來時,點擊圖片觸發服務端的JS事件,客戶端抓取服務端返回的數據,然後打開圖片放大窗體,進行顯示。再點擊一次就關閉窗體。
1、bbsinfo_listhtml.xml代碼
  <WebView
            android:
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

2、bbsimgshow.xml代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:andro
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  
<ImageView android:
        android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>

3、BbsinfoList.java

package com.wyf.tab;

import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.wyf.tab.util.Constant;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebView.HitTestResult;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class BbsinfoList extends Activity implements OnClickListener {
        private WebView wv;
        String tid;
        private String url;

        LinearLayout ld;
        private ImageView bt_left;
        Intent intent = new Intent();

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.bbsinfo_listhtml);
                // 加載動畫
                ld = (LinearLayout) findViewById(R.id.loading);
                ld.setVisibility(View.VISIBLE);
                findview();
                //
                Thread thread = new Thread(new Runnable() {
                        public void run() {
                                Message message = new Message();
                                message.what = 0;
                                mHandler.sendMessage(message);
                        }
                });
                thread.start();
                // 獲取傳過來的參數
                Bundle bundle = this.getIntent().getExtras();
                tid = bundle.getString("tid");
                url = Constant.WEB_DIR + Constant.ThreadInfoUrl_webview + tid;

        }

        // 處理跳轉到主Activity
        private Handler mHandler = new Handler() {
                @Override
                public void handleMessage(Message msg) {
                        Log.d(">>>>>Mhandler", "開始handleMessage");
                        showContent(url);
                        Log.d(">>>>>Mhandler", "LoadActivity關閉");
                        if (msg.what == 0) {
                                ld.setVisibility(View.GONE);
                        }
                }
        };

        private void findview() {

                wv = (WebView) findViewById(R.id.webView1);
                wv.setVisibility(WebView.VISIBLE);
                WebSettings ws = wv.getSettings();
                ws.setUseWideViewPort(true);
                ws.setJavaScriptEnabled(true);
                wv.addJavascriptInterface(new ContactsPlugin(), "contactsAction");
                ws.setSupportZoom(true);
                wv.setWebChromeClient(new WebChromeClient() {

                        public void onProgressChanged(WebView view, int progress) {
                                setTitle("頁麵加載中,請稍候..." + progress + "%");
                                setProgress(progress * 100);
                                ld.setVisibility(View.VISIBLE);
                                if (progress == 100) {
                                        setTitle(R.string.app_name);
                                        ld.setVisibility(View.GONE);
                                }
                        }
                });
                //
                bt_left = (ImageView) findViewById(R.id.btn_left);
                bt_left.setOnClickListener(new View.OnClickListener() {

                        @Override
                        public void onClick(View v) {
                                finish();
                        }
                });
        }

        private void showContent(String url) {
                wv.loadUrl(url);
        }

        @Override
        public void onClick(View v) {
                // TODO Auto-generated method stub

        }
        
        private class ContactsPlugin {            
            /**
             * 撥號
             */
            @SuppressWarnings("unused")
                public void setImgSrc(String imgSrc) {
                    //Toast.makeText(BbsinfoList.this, imgSrc + "數據加載完!",
                        //                Toast.LENGTH_LONG).show();
                        Log.e("imgurl", imgSrc);
                        Intent intent = new Intent(BbsinfoList.this, BbsImageShow.class);
                        Bundle bundle = new Bundle();
                        bundle.putString("imgSrc", imgSrc);
                        intent.putExtras(bundle);
                        startActivity(intent);
            }
    }

}

4、BbsImageShow.java

package com.wyf.tab;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.Toast;
public class BbsImageShow  extends Activity{
        private ImageView iv;

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                requestWindowFeature(Window.FEATURE_NO_TITLE);
                setContentView(R.layout.bbsimgshow);

                findview();
        }

        /*
         * 初始化控件,加載數據
         */
        private void findview() {
                Intent intent = this.getIntent();
                Bundle bundle = intent.getExtras();
                String imgSrc = bundle.getString("imgSrc");
                //Bitmap bm = BitmapFactory.decodeFile(imgSrc);
                Bitmap bm = returnBitMap(imgSrc); 
                iv = (ImageView) findViewById(R.id.ivbig);
                iv.setImageBitmap(bm);
                iv.setOnClickListener(new ImageView.OnClickListener() {

                        public void onClick(View arg0) {
                                //Toast.makeText(ImageShow.this, "關閉圖片", Toast.LENGTH_SHORT).show();
                                finish();
                        }
                });
                

        }
         //獲取圖片路徑函數
          public static Bitmap returnBitMap(String url) {  
                  URL myFileUrl = null;  
                  Bitmap bitmap = null;  
                  try {  
                  myFileUrl = new URL(url);  
                  } catch (MalformedURLException e) {  
                  e.printStackTrace();  
                  }  
                  try {  
                  HttpURLConnection conn = (HttpURLConnection) myFileUrl.openConnection();  
                  conn.setDoInput(true);  
                  conn.connect();  
                  InputStream is = conn.getInputStream();  
                  bitmap = BitmapFactory.decodeStream(is);  
                  is.close();  
                  } catch (IOException e) {  
                  e.printStackTrace();  
                  }  
                  return bitmap;  
                } 
}


最後更新:2017-04-02 17:28:41

  上一篇:go Android3.0版本以上出現android.os.NetworkOnMainThreadException異常與處理方式
  下一篇:go c語言基礎(四)之指針