文章目錄

• • 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" ><RelativeLayoutandroid:background="#FF4444"android:layout_width="match_parent"android:layout_height="40dp"><TextViewstyle="@style/text_detail"android:text="詳情"/><ImageViewandroid:id="@+id/iv_back_detail"style="@style/image_back_detail"android:src="@mipmap/back"/><LinearLayoutstyle="@style/ll_detail"><ImageViewandroid:id="@+id/iv_textsize_detail"style="@style/image_detail_bar"android:src="@mipmap/text_size"/><ImageViewandroid:id="@+id/iv_shrae_detail"style="@style/image_detail_bar"android:src="@mipmap/share"/><ImageViewandroid:id="@+id/iv_collect_detail"style="@style/image_detail_bar"android:src="@mipmap/collect"/></LinearLayout></RelativeLayout><ProgressBarandroid:id="@+id/progress_detail"android:layout_width="match_parent"android:layout_height="wrap_content"style="?android:attr/progressBarStyleHorizontal"android:max="100"android:progress="10"/><WebViewandroid: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;}@Overrideprotected View getMyView() {View view = View.inflate(getContext(), R.layout.fragment_detail, null);//初始化數據庫對象initDao();return view;}@Overridepublic 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{@Overridepublic 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);//隱藏}}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO: inflate a fragment viewView rootView = super.onCreateView(inflater, container, savedInstanceState);unbinder = ButterKnife.bind(this, rootView);return rootView;}@Overridepublic 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();}}@Overridepublic 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，處理事件@Overridepublic void onClick(DialogInterface dialog, int which) {choiceItem = which;}});builder.setPositiveButton("確認", new DialogInterface.OnClickListener() {//確認 參1 按鈕文字 參2事件@Overridepublic 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() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();}});builder.create().show();}//返回事件private void onClickBack() {getActivity().finish();} }

詳情頁面跳轉

效果圖

具體實現步驟

在列表點擊事件中添加跳轉方法


將bean的值傳到新聞詳情頁面DetailActivity

注意：頁面傳值時需要將數據序列化

編寫DetailFragment的帶參構造方法，傳入bean

修改webview頁面地址

總結

以上是生活随笔為你收集整理的（仿头条APP项目）8.新闻详情页面实现和butterknife插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。