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

文章目录

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插件使用相关推荐

（仿头条APP项目）5.列表页面设计实现
文章目录列表页面设计效果图具体实现添加Glide依赖添加主页面和两个列表布局用GsonFormat快速创建NewListData实体类存放新闻列表数据 MyApi添加一个获取新闻列表的方法 ...
（仿头条APP项目）3.二级页面首页的ViewPager页面切换
文章目录二级页面首页的ViewPager页面切换效果展示代码实现创建几个三级页面Fragment视图 ViewPager的Fragment数据丢失问题创建fragment_home视图文件 ...
（仿头条APP项目）7.首页标签页完善和微头条页面设计实现
文章目录一.首页标签页完善效果图具体实现二.微头条页面设计实现效果图实现思路具体实现布局微头条页面实体类业务逻辑代码一.首页标签页完善在之前已经把首页北京标签的新闻列表页面基本 ...
（仿头条APP项目）2.主界面按钮切换Fragment页面
文章目录主界面按钮切换Fragment页面效果展示框架结构 xml视图主视图选择器和style java代码模块创建4个Fragment 1.绑定按钮选择事件 2.初始化和用HashMap ...
（仿头条App项目）9.视频列表页面实现
文章目录视频列表页面实现效果图相关布局功能实现引入第三方视频库插件从服务端获取数据显示滚动播放功能实现视频列表页面实现效果图相关布局视频VideoFragment页面放一个Li ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
（仿头条APP项目）4.父类BaseFragment创建，用retrofit和gson获取并解析服务器端数据
文章目录父类BaseFragment创建,用retrofit和gson获取并解析服务器端数据效果展示创建父类BaseFragment解决代码重复问题用retrofit和gson获取并解析服务器 ...
（仿头条APP项目）1.app载入界面相关功能实现
app载入界面相关功能实现模块功能 1.设置页面布局 2.初始化视频播放 //控制是否跳到主界面private boolean isjump = false;private VideoView vi ...
第三个页面：构建新闻详情页面
笔记内容:构建新闻详情页面笔记日期:2018-01-09 从文章列表跳转到新闻详情页(组件自定义属性及获取属性) 在编写从文章列表跳转到新闻详情页的代码之前,先来修改一下之前的页面,之前我们编写了两 ...

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

文章目录

butterknife插件使用

导入依赖

下载插件

使用

新闻详情页面显示

效果图

实现思路

具体实现

布局

数据库添加收藏表

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

详情页面跳转

效果图

具体实现步骤

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

最新文章

热门文章