上一节对欢迎模块进行了综述(可参见 2. 欢迎模块 进行了解)，接下来将从首页模块开始详细介绍：
- 首页模块（一）之搭建服务器
- 首页模块（二）之工具类
- 首页模块（三）之首页
- 首页模块（四）之新闻详情
- [首页模块（五）之Python学科]
知识点：
- 掌握新闻详情模块的开发，实现新闻详情界面的显示
- 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" />
网友评论