6. 首页模块（四）之新闻详情

上一节对欢迎模块进行了综述(可参见 2. 欢迎模块 进行了解)，接下来将从首页模块开始详细介绍：

知识点：

  • 掌握新闻详情模块的开发，实现新闻详情界面的显示
  • WebView控件加载传递过来的新闻链接展示数据界面
  • 实现加载的动画效果（逐帧动画）

新闻详情：

任务综述：
首页的广告栏图片与新闻列表的条目在被点击后跳转到新闻详情界面，这个界面主要是通过WebView控件加载一个新闻链接展现界面信息的。该界面右上角有一个收藏图标，当用户处于登录状态时，点击收藏图标会把对应的新闻信息保存到数据库中，便于后续查询。当用户处于未登录状态时，点击收藏图标会提示用户“您未登录，请先登录”（新闻收藏功能在实现登录注册后会进一步完善，此处暂不处理）。

1. “新闻详情”界面

任务分析：
在头条项目中，点击广告栏图片或新闻列表条目会跳转到“新闻详情”界面，“新闻详情”界面是通过WebView控件加载传递过来的新闻链接展示界面数据的。

“新闻详情”界面

任务实施：
（1）创建“新闻详情”界面。在activity包中创建一个NewsDetailActivity的类，并将布局文件名指定为activity_news_detail。

（2）导入界面图片。
drawable-dhpi:
collection_normal,collection_selected,app_loading_0,app_loading_1。

（3）放置界面控件。
一个WebView控件用于加载新闻地址；
一个TextView控件用于显示New Loading文字；
一个ProgressBar控件用于显示正在加载的提示。

activity_news_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_news_detail"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/main_title_bar" />
        <WebView
            android:id="@+id/webView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_loading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone">
        <ProgressBar
            android:layout_width="150dp"
            android:layout_height="133dp"
            android:indeterminateDrawable="@drawable/pb_loading" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Now Loading..."
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>
</RelativeLayout>

（4）实现加载的动画效果。“新闻详情”界面在数据还未加载完全时会有一个提示正在加载数据的动画效果，这种效果可以通过逐帧动画实现。创建pd_loading.xml文件，在该文件中，android:drawable表示需要显示的图片，android：duration表示显示该图片的时间。

pd_loading.xml

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="150" android:drawable="@drawable/app_loading_0" />
    <item android:duration="150" android:drawable="@drawable/app_loading_1" />
</animation-list>

（5）修改main_title_bar.xml文件。根据“新闻详情”界面的效果可知，“新闻详情”界面标题栏的右边有一个收藏图标，因此需要在2. 欢迎模块 下的1. 标题栏中找到main_title_bar.xml，在该文件中添加以下代码：

   <ImageView
        android:id="@+id/iv_collection"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:src="@drawable/collection_normal"
        android:visibility="gone" />

2. “新闻详情”界面逻辑代码

任务分析：
“新闻详情”界面主要加载一个从上个界面传递过来的新闻地址，展示“新闻详情”界面的信息。在“新闻详情”界面的右上角有一个收藏图标，当用户登录时，点击该图标会收藏本页面的新闻信息到数据库中，当用户未登录时，点击该图标会提示“您还未登录，请先登录”。

任务实施
（1）获取界面控件。在NewsDetailActivity中创建界面控件的初始化方法init()，用于获取新闻详情界面所要用到的控件。

（2）设置WebView控件。在NewsDetailActivity中创建WebView控件的初始化方法initWebView()，用于处于初始化WebView控件并设置新闻地址。

NewsDetailActivity.java

public class NewsDetailActivity extends AppCompatActivity {
    private RelativeLayout rl_title_bar;
    private WebView webView;
    private TextView tv_main_title, tv_back;
    private ImageView iv_collection;
    private SwipeBackLayout layout;
    private String newsUrl;
    private NewsBean bean;
    private String position;
    private LinearLayout ll_loading;
    private boolean isCollection=false;
    private DBUtils db;
    private String userName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        layout = (SwipeBackLayout) LayoutInflater.from(this).inflate(
                R.layout.base, null);
        layout.attachToActivity(this);
        setContentView(R.layout.activity_news_detail);
        bean = (NewsBean) getIntent().getSerializableExtra("newsBean");
        position = getIntent().getStringExtra("position");
        if (bean == null) return;
        db=DBUtils.getInstance(NewsDetailActivity.this);
        newsUrl = bean.getNewsUrl();
        userName= UtilsHelper.readLoginUserName(NewsDetailActivity.this);
        init();
        initWebView();
    }
    private void init() {
        tv_main_title = (TextView) findViewById(R.id.tv_main_title);
        tv_main_title.setText("新闻详情");
        rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);
        rl_title_bar.setBackgroundColor(getResources().getColor(R.color.
                rdTextColorPress));
        ll_loading = (LinearLayout) findViewById(R.id.ll_loading);
        iv_collection = (ImageView) findViewById(R.id.iv_collection);
        iv_collection.setVisibility(View.VISIBLE);
        if(db.hasCollectionNewsInfo(bean.getId(),bean.getType(),userName)){
            iv_collection.setImageResource(R.drawable.collection_selected);
            isCollection=true;
        }else{
            iv_collection.setImageResource(R.drawable.collection_normal);
            isCollection=false;
        }
        tv_back = (TextView) findViewById(R.id.tv_back);
        tv_back.setVisibility(View.VISIBLE);
        tv_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                NewsDetailActivity.this.finish();
            }
        });
        webView = (WebView) findViewById(R.id.webView);
        iv_collection.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (UtilsHelper.readLoginStatus(NewsDetailActivity.this)) {
                    if (isCollection) {
                        iv_collection.setImageResource(R.drawable.collection_normal);
                        isCollection = false;
                        //删除保存到新闻收藏数据库中的数据
                        db.delCollectionNewsInfo(bean.getId(), bean.getType(), userName);
                        Toast.makeText(NewsDetailActivity.this, "取消收藏", Toast.LENGTH_SHORT).show();
                        Intent data = new Intent();
                        data.putExtra("position", position);
                        setResult(RESULT_OK, data);
                    } else {
                        iv_collection.setImageResource(R.drawable.collection_selected);
                        isCollection = true;
                        //把该数据保存到新闻收藏数据库中
                        db.saveCollectionNewsInfo(bean, userName);
                        Toast.makeText(NewsDetailActivity.this, "收藏成功", Toast.LENGTH_SHORT).show();
                    }
                }else{
                    Toast.makeText(NewsDetailActivity.this, "您还未登录，请先登录",Toast.LENGTH_SHORT).
                            show();
                }
            }
        });
    }
    private void initWebView() {
        webView.loadUrl(newsUrl);
        WebSettings mWebSettings = webView.getSettings();
        mWebSettings.setSupportZoom(true);
        mWebSettings.setLoadWithOverviewMode(true);
        mWebSettings.setUseWideViewPort(true);
        mWebSettings.setDefaultTextEncodingName("GBK");//设置解码格式
        mWebSettings.setLoadsImagesAutomatically(true);
        mWebSettings.setJavaScriptEnabled(true);//支持js 特效
        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
                view.loadUrl(url);
                return true;
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                ll_loading.setVisibility(View.VISIBLE);//开始加载动画
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                ll_loading.setVisibility(View.GONE);//当加载结束时隐藏动画
            }
        });
    }
}

（3）自定义SwipeBackLayout控件。在此项目中，向右滑动“新闻详情”界面会关闭该界面，因此需要通过自定义控件SwipeBackLayout完成。首先将图片shadow_left.png导入drawble-hdpi文件夹，然后在view包中创建一个SwipeBackLayout类并继承FrameLayout类。

SwipeBackLayout.java

public class SwipeBackLayout extends FrameLayout {
    private View mContentView;
    private int mTouchSlop,downX,downY,tempX,viewWidth;
    private Scroller mScroller;
    private boolean isSilding,isFinish;
    private Drawable mShadowDrawable;
    private Activity mActivity;
    private List<ViewPager> mViewPagers = new LinkedList<ViewPager>();
    public SwipeBackLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public SwipeBackLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        //触发移动事件的最短距离，如果小于这个距离就不触发移动控件
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mScroller = new Scroller(context);
        mShadowDrawable = getResources().getDrawable(R.drawable.shadow_left);
    }
    public void attachToActivity(Activity activity) {
        mActivity = activity;
        TypedArray a = activity.getTheme().obtainStyledAttributes(
                new int[]{android.R.attr.windowBackground});
        int background = a.getResourceId(0, 0);
        a.recycle();
        ViewGroup decor = (ViewGroup) activity.getWindow().getDecorView();
        ViewGroup decorChild = (ViewGroup) decor.getChildAt(0);
        decorChild.setBackgroundResource(background);
        decor.removeView(decorChild);
        addView(decorChild);
        setContentView(decorChild);
        decor.addView(this);
    }
    private void setContentView(View decorChild) {
        mContentView = (View) decorChild.getParent();
    }
    /**
     * 事件拦截操作
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //处理ViewPager冲突问题
        ViewPager mViewPager = getTouchViewPager(mViewPagers, ev);
        if (mViewPager != null && mViewPager.getCurrentItem() != 0) {
            return super.onInterceptTouchEvent(ev);
        }
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = tempX = (int) ev.getRawX();
                downY = (int) ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int) ev.getRawX();
                // 满足此条件屏蔽SildingFinishLayout里面子类的touch事件
                if (moveX - downX > mTouchSlop
                        && Math.abs((int) ev.getRawY() - downY) < mTouchSlop) {
                    return true;
                }
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int moveX = (int) event.getRawX();
                int deltaX = tempX - moveX;
                tempX = moveX;
                if (moveX - downX > mTouchSlop
                        && Math.abs((int) event.getRawY() - downY) < mTouchSlop) {
                    isSilding = true;
                }
                if (moveX - downX >= 0 && isSilding) {
                    mContentView.scrollBy(deltaX, 0);
                }
                break;
            case MotionEvent.ACTION_UP:
                isSilding = false;
                if (mContentView.getScrollX() <= -viewWidth / 2) {
                    isFinish = true;
                    scrollRight();
                } else {
                    scrollOrigin();
                    isFinish = false;
                }
                break;
        }
        return true;
    }
    /**
     * 获取SwipeBackLayout里面的ViewPager的集合
     */
    private void getAlLViewPager(List<ViewPager> mViewPagers, ViewGroup parent) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            if (child instanceof ViewPager) {
                mViewPagers.add((ViewPager) child);
            } else if (child instanceof ViewGroup) {
                getAlLViewPager(mViewPagers, (ViewGroup) child);
            }
        }
    }
    /**
     * 返回touch的ViewPager
     */
    private ViewPager getTouchViewPager(List<ViewPager> mViewPagers, MotionEvent ev)
    {
        if (mViewPagers == null || mViewPagers.size() == 0) {
            return null;
        }
        Rect mRect = new Rect();
        for (ViewPager v : mViewPagers) {
            v.getHitRect(mRect);
            if (mRect.contains((int) ev.getX(), (int) ev.getY())) {
                return v;
            }
        }
        return null;
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed) {
            viewWidth = this.getWidth();
            getAlLViewPager(mViewPagers, this);
        }
    }
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (mShadowDrawable != null && mContentView != null) {
            int left = mContentView.getLeft()- mShadowDrawable.getIntrinsicWidth();
            int right = left + mShadowDrawable.getIntrinsicWidth();
            int top = mContentView.getTop();
            int bottom = mContentView.getBottom();
            mShadowDrawable.setBounds(left, top, right, bottom);
            mShadowDrawable.draw(canvas);
        }
    }
    /**
     * 滚动出界面
     */
    private void scrollRight() {
        final int delta = (viewWidth + mContentView.getScrollX());
        //调用startScroll方法来设置一些滚动的参数
        mScroller.startScroll(mContentView.getScrollX(), 0, -delta + 1, 0,
                Math.abs(delta));
        postInvalidate();
    }
    /**
     * 滚动到起始位置
     */
    private void scrollOrigin() {
        int delta = mContentView.getScrollX();
        mScroller.startScroll(mContentView.getScrollX(), 0, -delta, 0,
                Math.abs(delta));
        postInvalidate();
    }
    @Override
    public void computeScroll() {
        //调用startScroll()方法时，scroller.computeScrollOffset()返回为true，
        if (mScroller.computeScrollOffset()) {
            mContentView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
            if (mScroller.isFinished() && isFinish) {
                mActivity.finish();
            }
        }
    }
}

（4）创建base.xml文件。由于需要把自定义控件SwipeBackLayout添加到“新闻详情”界面中，因此需要在res/layout文件夹中创建一个base.xml文件，在该文件中引入SwipeBackLayout自定义控件即可。

base.xml

<com.XXXX.newsdemo.view.SwipeBackLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.itheima.topline.view.SwipeBackLayout>

注意：
如果需要向右滑动关闭一个界面，则需要添加一个自定义控件SwipeBackLayout，并把添加该控件的语句放在该界面所对应的Activity中的setContentView()方法之前，添加该自定义控件的代码：

        layout = (SwipeBackLayout) LayoutInflater.from(this).inflate(
                R.layout.base, null);
        layout.attachToActivity(this);

（5）修改AdBannerFragment类。由于点击首页的广告栏图片会跳转到“新闻详情”界面，因此需要找到5. 首页模块（三）之首页中6.创建AdBannerFragment的onCreateView()方法，在该方法的图片点击事件中添加如下代码：

                if (nb == null) return;
                Intent intent = new Intent(getActivity(), NewsDetailActivity.class);
                intent.putExtra("newsBean", nb);
                getActivity().startActivity(intent);

（6）修改HomeListAdapter类。由于点击首页的新闻列表的条目会跳转到“新闻详情”界面，因此需要找到5. 首页模块（三）之首页中8. 首页界面Adapter的onBindViewHolder()方法，在该方法中的itemView点击事件中添加如下代码：

Intent intent = new Intent(context, NewsDetailActivity.class);
                intent.putExtra("newsBean", bean);
                context.startActivity(intent);

（7）修改清单文件。由于向右滑动“新闻详情”界面时，在关闭该界面之前会出现空白界面，因此需要在清单文件中吧“新闻详情”界面的主题修改为透明主题。首先在styles.xml文件中添加一个名为AppTheme.TransparentActivity的透明主题。

    <style name="AppTheme.TransparentActivity" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>

然后在清单文件中NewsDetailActivity中引用此透明主题，具体代码如下：

     <activity
           android:name=".activity.NewsDetailActivity"
           android:theme="@style/AppTheme.TransparentActivity" />

由于“新闻详情”界面需要加载网页，因此需要在清单文件中添加网络权限。

    <uses-permission android:name="android.permission.INTERNET" />
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,928评论 6赞 509
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,748评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,282评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,065评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,101评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,855评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,521评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,414评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,931评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,053评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,191评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,873评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,529评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,074评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,188评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,491评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,173评论 2赞 357

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,982评论 3赞 119
  • Android - 收藏集
    用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你...
    hw1212阅读 12,735评论 2赞 59
  • 时光慢些吧
    #新中式宠妈艺术# 就让时光慢些吧！不要再让你变老啦--题记 离离原上草，一岁一枯荣。我们也在枯荣间慢慢长...
    荣_c968阅读 110评论 0赞 1
  • 3. daemon详解——网络
    docker网络 docker的网络模式： 桥接，采用linux bridge + NAT host，与主机共享一...
    lovenashbest阅读 3,095评论 0赞 0
  • 赣江支流
    水苏_阅读 389评论 0赞 1