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

之前的新闻列表都只能看看标题什么的，现在如果想看详情的新闻信息，就需要进入新闻页面，一般来说都可以通过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:

扫描二维码关注公众号，回复： 1623059 查看本文章

<?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:
        }
    }

然后看一下效果