WebView的简单使用——学习笔记

来源：互联网发布：淘宝客服可以在家做吗编辑：程序博客网时间：2024/04/30 09:11

之前的新闻列表都只能看看标题什么的，现在如果想看详情的新闻信息，就需要进入新闻页面，一般来说都可以通过WebView配合地址的方式实现，接下来就为之前的ListView添加点击事件，让它能够进入一个新的页面，然后把新闻详情页面就放在这个新的页面中：

        listView.setOnItemClickListener(new MyListViewOnItemClickListener()); //设置ListView的点击事件

这个时候是根据item的位置去选择点击哪个，由于之前添加了一个刷新控件作为HeaderView，所以一般情况下position需要减去1才是正确的位置。不过这里我是使用的前四条新闻作为顶部轮播图片新闻，所以position的正确位置还应该应该加上4。

点击事件中添加以下代码可以先验证一下正确性：

            int realPosition = position - 5;            String title = listBeen.get(realPosition).getTitle();            Toast.makeText(context, "标题是" + title, Toast.LENGTH_SHORT).show();

下面是验证结果：
这里写图片描述

可以看到结果是正确的。然后可以做一个效果，就是把已经点击过的item的文字变为灰色，表示我已经看过这条新闻了。

所以接下来就去做判断，首先取出保存的ID，如果不存在就把这个ID放入集合，然后刷新适配器，表示我点击了这个item，也就是已阅；如果ID是存在的，就不需要去保存它，这里我们使用新闻的标题作为id，因为我使用的接口返回的json数据里面根本就没有ID。

            //1.去除保存的id集合            String idArray = CacheUtils.getString(context, READ_ARRAY_ID);            //2.判断是否存在，如果不存在才去保存id，并且刷新适配器            if (!idArray.contains(title))){  //假如这个ID是int型的话就需要加上""，由于这里title是String，所以不需要            CacheUtils.putString(context, READ_ARRAY_ID , idArray + title + ",");            //刷新适配器            adapter.notifyDataSetChanged();            }

然后在ListView的适配器把看过的新闻设置为灰色

            String idArray = CacheUtils.getString(context, READ_ARRAY_ID);            if (idArray.contains(title)){                //设置灰色                viewHolder.tv_title.setTextColor(Color.GRAY);            } else {                //设置黑色                viewHolder.tv_title.setTextColor(Color.BLACK);            }

接下来看一下效果：
这里写图片描述
即便是退出重进，效果依旧存在，因为我写在CacheUtils类中的putString方法使用的是SharedPreferences。

然后，就需要点击item跳转到一个Activity中，然后使用WebView去显示新闻的详细信息了。

在点击事件中添加如下代码：

            Intent intent = new Intent(context, NewsDetailActivity.class);            context.startActivity(intent);

创建活动NewsDetailActivity，设置它的布局activity_news_detail.xml:

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.administrator.simpleapp.activity.NewsDetailActivity">    <include layout="@layout/titlebar"/>    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <WebView            android:id="@+id/webview"            android:layout_width="match_parent"            android:layout_height="match_parent"/>        <ProgressBar            android:id="@+id/pb_loading"            android:visibility="gone"            android:layout_gravity="center"            android:layout_centerInParent="true"            android:indeterminateDrawable="@drawable/custom_progressbar"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>    </RelativeLayout></LinearLayout>

上面有标题栏，然后是WebView和ProgressBar放在一个相对布局中，ProgressBar表示网页是否加载完成，默认显示，加载完成后将其隐藏。

下面是NewsDetailActivity的代码：

public class NewsDetailActivity extends AppCompatActivity implements View.OnClickListener {    private TextView title_text;    private ImageButton ibBack;    private ImageButton ibTextsize;    private CircleImageView menu_circle_image;    private ImageButton ibShare;    private WebView webview;    private ProgressBar pbLoading;    private String url;    private WebSettings webSettings;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_news_detail);        findViews();    }    private void findViews() {        title_text = (TextView)findViewById( R.id.title_text );        ibBack = (ImageButton)findViewById( R.id.ib_back );        menu_circle_image = (CircleImageView) findViewById(R.id.menu_circle_image);        ibTextsize = (ImageButton)findViewById( R.id.ib_textsize );        ibShare = (ImageButton)findViewById( R.id.ib_share );        webview = (WebView)findViewById( R.id.webview );        pbLoading = (ProgressBar)findViewById( R.id.pb_loading );        title_text.setVisibility(View.GONE);        menu_circle_image.setVisibility(View.GONE);        ibBack.setVisibility(View.VISIBLE);        ibTextsize.setVisibility(View.VISIBLE);        ibShare.setVisibility(View.VISIBLE);        ibBack.setOnClickListener( this );        ibTextsize.setOnClickListener( this );        ibShare.setOnClickListener( this );    }    @Override    public void onClick(View v) {        if ( v == ibBack ) {            finish();        } else if ( v == ibTextsize ) {            Toast.makeText(this, "设置文字大小", Toast.LENGTH_SHORT).show();//            showChangeTextSizeDialog();        } else if ( v == ibShare ) {            Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();        }    }}

下面是运行情况：
这里写图片描述

然后如果想出现新闻页面，就必须要获取对应的地址。所以需要在NewsDetailPager.class去给NewsDetailActivity.class传入新闻地址，然后添加下面这一段：

            Intent intent = new Intent(context, NewsDetailActivity.class);            intent.putExtra("NewsUrl", url); //传入地址            context.startActivity(intent);

接下来就需要在NewsDetailActivity去接收这个地址，并且在WebView加载这个地址，可以在onCreate中添加getNewsData()方法，以下就是getNewsData()方法：

        newsUrl = getIntent().getStringExtra("NewsUrl");        webview.loadUrl(newsUrl);

然后看一下运行效果：
这里写图片描述
可以看到默认会调用系统自带的浏览器，所以接下来会解决这个问题，同时还会解决另外一个问题就是网页加载出来后，无法进行互动，也就滑动、放大都是不可以的，这时候需要让WebView支持JavaScript，同时让页面加载完成后隐藏掉ProgressBar，接下来在getNewsData()方法中添加下面的代码：

        webSettings = webview.getSettings();        webSettings.setJavaScriptEnabled(true);//设置支持javaScript        //设置双击变大变小,需要该网页的页面支持缩放才行        webSettings.setUseWideViewPort(true);        //增加缩放按钮,需要该网页的页面支持缩放才行        webSettings.setBuiltInZoomControls(true);        //设置文字大小//      webSettings.setTextSize(webSettings.getTextSize().NORMAL);        webSettings.setTextZoom(100);       //不让从当前网页跳转到系统的浏览器        webview.setWebViewClient(new WebViewClient(){            @Override            //当加载页面完成的时候回调            public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);                pbLoading.setVisibility(View.GONE);            }        });

然后是运行效果：
这里写图片描述

接下来还可以设置一下标题栏上面的改变文字大小的按钮：

private int tempSize = 2;    private int realSize = tempSize;    private void showChangeTextSizeDialog() {        AlertDialog.Builder builder = new AlertDialog.Builder(this);        builder.setTitle("设置文字大小");        String[] items = new String[]{"超大字体", "大字体", "正常字体", "小字体", "超小字体"};        builder.setSingleChoiceItems(items, realSize, new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {                tempSize = which;            }        });        builder.setNegativeButton("取消", null);        builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {                realSize = tempSize;                changeTextSize(realSize);            }        });        builder.show();    }    private void changeTextSize(int realSize) {        switch (realSize){            case 0://超大字体                webSettings.setTextZoom(200);                break;            case 1://大字体                webSettings.setTextZoom(150);                break;            case 2://正常字体                webSettings.setTextZoom(100);                break;            case 3://小字体                webSettings.setTextZoom(75);                break;            case 4://超小字体                webSettings.setTextZoom(50);                break;            default:        }    }

然后看一下效果
这里写图片描述

阅读全文

0 0