（仿头条APP项目）8.新闻详情页面实现和butterknife插件使用

butterknife插件使用

导入依赖

下载插件

使用

选中视图


选择点击事件

新闻详情页面显示

效果图

实现思路

• 用点击事件跳出窗口选择字体实现字体大小改变
• 收藏功能用数据库实现，点击收藏时将对应内容的数据存入数据库，取消收藏时将数据从数据库中删除，根据数据库中数据将列表显示在我的收藏中。

具体实现

布局

fragment_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <RelativeLayout
        android:background="#FF4444"
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            style="@style/text_detail"
            android:text="详情"/>

            <ImageView
                android:id="@+id/iv_back_detail"
               style="@style/image_back_detail"
                android:src="@mipmap/back"/>

            <LinearLayout
              style="@style/ll_detail"
                >
                <ImageView
                    android:id="@+id/iv_textsize_detail"
                    style="@style/image_detail_bar"
                    android:src="@mipmap/text_size"/>
                <ImageView
                    android:id="@+id/iv_shrae_detail"
                    style="@style/image_detail_bar"
                    android:src="@mipmap/share"/>
                <ImageView
                    android:id="@+id/iv_collect_detail"
                    style="@style/image_detail_bar"
                    android:src="@mipmap/collect"/>
            </LinearLayout>
    </RelativeLayout>
    <ProgressBar
        android:id="@+id/progress_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="10"/>
  <WebView
      android:id="@+id/webview_detail"
      style="@style/webview_detail"></WebView>
</LinearLayout>

style

    <style name="text_detail">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">#ffffff</item>
    </style>

    <style name="image_back_detail">
        <item name="android:layout_width">25dp</item>
        <item name="android:layout_height">25dp</item>

        <item name="android:layout_centerVertical">true</item>
    </style>

    <style name="ll_detail">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_alignParentRight">true</item>
        <item name="android:orientation">horizontal</item>
    </style>

    <style name="image_detail_bar">
        <item name="android:layout_width">25dp</item>
        <item name="android:layout_height">25dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_gravity">center_vertical</item>
    </style>

    <style name="webview_detail">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">#d7d41b</item>

    </style>

数据库添加收藏表

添加收藏表

设置对象与表的关系

新闻详情页面具体业务逻辑实现

import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.example.administrator.zhjrtt.R;
import com.j256.ormlite.dao.Dao;
import com.xzit.bean.NewListData;
import com.xzit.db.MyDbHelper;

import java.sql.SQLException;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import butterknife.Unbinder;
//1.布局
//2.加载布局
public class DetailFragment extends BaseFragment {

    @BindView(R.id.iv_back_detail)
    ImageView Back;
    @BindView(R.id.iv_textsize_detail)
    ImageView Textsize;
    @BindView(R.id.iv_shrae_detail)
    ImageView Shrae;
    @BindView(R.id.iv_collect_detail)
    ImageView Collect;
    @BindView(R.id.progress_detail)
    ProgressBar progress;
    @BindView(R.id.webview_detail)
    WebView webview;
    Unbinder unbinder;
    //创建Newsbean对象
    private NewListData.DataBean.NewsBean bean;

    public DetailFragment() {
    }

    @SuppressLint("ValidFragment")
    public DetailFragment(NewListData.DataBean.NewsBean bean) {
        this.bean = bean;

    }

    @Override
    protected View getMyView() {
        View view = View.inflate(getContext(), R.layout.fragment_detail, null);
        //初始化数据库对象
        initDao();
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //3.加载网页数据

        loadWebView();
    }

    private void loadWebView() {
        //webView发请求加载网页数据
        webview.loadUrl(HOST+bean.url);
        //创建webviewclient禁止浏览器自动弹出
        webview.setWebViewClient(new WebViewClient());
        //获取加载进度
        webview.setWebChromeClient(new MyWebChromeClient());
        webview.getSettings().setJavaScriptEnabled(true);//设置js可用

    }
    //4:重写onProgressChanged的方法
    class MyWebChromeClient extends WebChromeClient{
        @Override
        public void onProgressChanged(WebView view, int newProgress) {

            System.out.println("进度"+newProgress);
            if(newProgress != 100){
                progress.setMax(100);
                progress.setProgress(newProgress);
                progress.setVisibility(View.VISIBLE);//显示
            }else{
                progress.setVisibility(View.INVISIBLE);//隐藏
            }
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO: inflate a fragment view
        View rootView = super.onCreateView(inflater, container, savedInstanceState);
        unbinder = ButterKnife.bind(this, rootView);
        return rootView;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    @OnClick({R.id.iv_back_detail, R.id.iv_textsize_detail, R.id.iv_shrae_detail, R.id.iv_collect_detail})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.iv_back_detail:
                onClickBack();
                break;
            case R.id.iv_textsize_detail:
                onFontClick();
                break;
            case R.id.iv_shrae_detail:
                Toast.makeText(getContext(),"分享",Toast.LENGTH_SHORT).show();
                break;
            case R.id.iv_collect_detail:
                onCollectClick();
                break;
        }
    }
    //创建列表数据库增删改查对象
    private Dao<NewListData.DataBean.NewsBean,Integer> dao ;
    public  void initDao(){
        MyDbHelper myDbHelper = new MyDbHelper(getContext());
        try {
            dao=myDbHelper.getDao(NewListData.DataBean.NewsBean.class);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        //查询当前新闻是否存在，如果存在 显示已收藏 否则显示未收藏
        try {
            NewListData.DataBean.NewsBean newsBean = dao.queryForId(bean.id);
            if (newsBean == null){
                isCollected=false;
                Collect.setImageResource(R.mipmap.collect);
            }else {
                isCollected = true;
                Collect.setImageResource(R.mipmap.collected);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    //收藏
    private boolean isCollected = false;
    private void onCollectClick() {
        if (isCollected){
            isCollected = false;
            Collect.setImageResource(R.mipmap.collect);
            try {
                //取消收藏时将数据从数据库删除
                dao.deleteById(bean.id);
            } catch (SQLException e) {
                e.printStackTrace();
            }
            Toast.makeText(getContext(),"取消收藏",Toast.LENGTH_SHORT).show();
        }else {
            isCollected = true;
            Collect.setImageResource(R.mipmap.collected);
            try {
                //收藏时将数据保存到数据库
                dao.create(bean);
            } catch (SQLException e) {
                e.printStackTrace();
            }
            Toast.makeText(getContext(),"收藏成功",Toast.LENGTH_SHORT).show();
        }
        try {
            List<NewListData.DataBean.NewsBean> list = dao.queryForAll();
            System.out.println("数据"+list.toString());
            System.out.println("遍历结束");
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    //5.字体大小改变事件
    private String[] levels={"小","中","大","超大"};
    private int choiceItem = 0;
    private void onFontClick() {
        //创建对话框
        AlertDialog.Builder builder =new AlertDialog.Builder(getContext());
        builder.setTitle("设置字体大小");
        builder.setSingleChoiceItems(levels, choiceItem, new DialogInterface.OnClickListener() {
            //单选  参1 选项数组 参2，默认选中 参3，处理事件
            @Override
            public void onClick(DialogInterface dialog, int which) {
                choiceItem = which;
            }
        });
        builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {
            //确认 参1 按钮文字 参2事件
            @Override
            public void onClick(DialogInterface dialog, int which) {
                switch (choiceItem){
                    case 0:
                        webview.getSettings().setTextSize(WebSettings.TextSize.SMALLER);
                        break;
                    case 1:
                        webview.getSettings().setTextSize(WebSettings.TextSize.NORMAL);
                        break;
                    case 2:
                        webview.getSettings().setTextSize(WebSettings.TextSize.LARGER);
                        break;
                    case 3:
                        webview.getSettings().setTextSize(WebSettings.TextSize.LARGEST);
                        break;
                }
                dialog.dismiss();
            }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });
        builder.create().show();
    }

    //返回事件
    private void onClickBack() {
        getActivity().finish();
    }
}

详情页面跳转

效果图

具体实现步骤

在列表点击事件中添加跳转方法


将bean的值传到新闻详情页面DetailActivity

注意：页面传值时需要将数据序列化

编写DetailFragment的带参构造方法，传入bean

修改webview页面地址