（仿頭條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頁面地址