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();
}

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

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

然后看一下效果