仿京东商城系列12------商品详细信息展示（nativie与
2017-08-24 本文已影响666人
小庄bb
本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
本次将为大家介绍商品列表展示，排序以及布局切换的功能，老规矩，先看效果图。
商品展示.gif
内容
- 页面设计
1.本页面的页面设计很简单，只有一个自定义Toolbar,和一个WebView。
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.cne_shop.widget.CnToolbar
android:id="@+id/toolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:leftButtonIcon="@drawable/icon_back_32px"
app:title="商品详情"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
app:rightButtonText="分享"
></com.example.cne_shop.widget.CnToolbar>
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"></WebView>
</LinearLayout>
-
基础知识
1.本页面完全通过android的WebView控件对js页面进行调用。
有关于WebView的基础使用不了解的请戳http://www.jianshu.com/p/ebffa8a61e51 -
代码分析
package com.example.cne_shop.activity;
import android.content.Context;
import android.content.Intent;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
import com.example.cne_shop.R;
import com.example.cne_shop.application.MyApplication;
import com.example.cne_shop.base.BaseActivity;
import com.example.cne_shop.bean.ShoppingCart;
import com.example.cne_shop.bean.Ware;
import com.example.cne_shop.contents.Contents;
import com.example.cne_shop.utils.CartProvider;
import com.example.cne_shop.utils.JsonUtil;
import com.example.cne_shop.widget.CnToolbar;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import dmax.dialog.SpotsDialog;
import static com.example.cne_shop.fragment.CartFragment.ORDER_WARES;
/**
* Created by 博 on 2017/8/24.
*/
public class WareDetialActivity extends BaseActivity {
@BindView(R.id.webView)
WebView webView ;
@BindView(R.id.toolBar)
CnToolbar cnToolbar ;
private Ware mWare ;
private WebAppInterface mAppInterface ;
private CartProvider cartProvider ;
private SpotsDialog dialog ;
@Override
protected int getContentViewId() {
return R.layout.ware_detial_activity;
}
@Override
protected void initView() {
Serializable serializable = getIntent().getSerializableExtra(Contents.WARE);
if (serializable == null) {
this.finish();
}
dialog = new SpotsDialog(this , "loading...");
dialog.show();
mWare = (Ware) serializable ;
cartProvider = CartProvider.getCartProvider(this) ;
initWebView() ;
}
@Override
protected void addListener() {
addBackButtonListener() ;
addShareButtonListener() ;
}
@Override
protected void beforLayout() {
}
private void addShareButtonListener(){
cnToolbar.setRightButtonIcOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showShare() ;
}
});
}
private void addBackButtonListener(){
cnToolbar.setLeftButtonIcOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
WareDetialActivity.this.finish();
}
});
}
class WC extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (dialog!=null && dialog.isShowing()){
dialog.dismiss();
}
mAppInterface.showDetail();
}
}
private void initWebView(){
WebSettings settings = webView.getSettings() ;
settings.setJavaScriptEnabled(true);
settings.setBlockNetworkImage(false);
settings.setAppCacheEnabled(true);
webView.loadUrl(Contents.API.SHOW_WARE_DETIAL);
mAppInterface = new WebAppInterface(this) ;
webView.addJavascriptInterface(mAppInterface , "appInterface");
webView.setWebViewClient(new WC());
}
class WebAppInterface{
private Context mContext ;
public WebAppInterface(Context context) {
this.mContext = context ;
}
@JavascriptInterface
public void showDetail(){
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showDetail("+mWare.getId()+")");
}
});
}
@JavascriptInterface
public void buy(long id){
}
@JavascriptInterface
public void addToCart(long id){
cartProvider.put(mWare);
Toast.makeText(mContext , "添加购物车" , Toast.LENGTH_SHORT).show();
}
}
public String getOrderWares(){
List<ShoppingCart> orderWares = new ArrayList<>() ;
ShoppingCart shoppingCart = new ShoppingCart() ;
shoppingCart.setCount(1);
shoppingCart.setChecked(true);
shoppingCart.setId(mWare.getId());
shoppingCart.setImgUrl(mWare.getImgUrl());
shoppingCart.setPrice(mWare.getPrice());
orderWares.add(shoppingCart) ;
return JsonUtil.toJSON(orderWares);
}
private void showShare() {
}
}
功能实现分析
1.得到WebView实例。
@BindView(R.id.webView)
WebView webView ;
2.得到WebSettings 对象进行WebView设置。
WebSettings settings = webView.getSettings() ;
settings.setJavaScriptEnabled(true);//设置WebView是否可以运行JavaScript。
settings.setBlockNetworkImage(false);//禁止或允许WebView从网络上加载图片。需要注意的是，如果设置是从禁止到允许的转变的话，图片数据并不会在设置改变后立刻去获取，而是在WebView调用reload()的时候才会生效。这个时候，需要确保这个app拥有访问Internet的权限，否则会抛出安全异常。通常没有禁止图片加载的需求的时候，完全不用管这个方法，因为当我们的app拥有访问Internet的权限时，这个flag的默认值就是false。
settings.setAppCacheEnabled(true);//启用或禁用应用缓存。
3.定义一个接口WebAppInterface，里面定义在js页面调用的方法，注意两点。
3.1.定义的方法名和参数一定要与js页面中一致。
3.2.定义的方法必须添加@JavascriptInterface注解
class WebAppInterface{
private Context mContext ;
public WebAppInterface(Context context) {
this.mContext = context ;
}
@JavascriptInterface
public void showDetail(){
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showDetail("+mWare.getId()+")");
}
});
}
@JavascriptInterface
public void buy(long id){
}
@JavascriptInterface
public void addToCart(long id){
cartProvider.put(mWare);
Toast.makeText(mContext , "添加购物车" , Toast.LENGTH_SHORT).show();
}
}
4.通过js页面，调用我们之前定义的方法：
webView.addJavascriptInterface(mAppInterface , "appInterface");
5.定义一个类，继承WebViewClient,并实现onPageFinished方法，在页面加载完毕时执行关闭dialog，并且显示相关商品信息。
class WC extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (dialog!=null && dialog.isShowing()){
dialog.dismiss();
}
mAppInterface.showDetail();
}
}
6.最后一步，添加WC 对象值WebView。完成设置
webView.setWebViewClient(new WC());
就此，商品展示页面网页调用部分大致完成。
