java资讯类项目介绍_Android 资讯类App项目实战 第三章 新闻模块

前言：

正在做一个资讯类app,打算一边做一边整理，供自己学习与巩固。用到的知识复杂度不高，仅适于新手。经验不多，如果写出来的代码有不好的地方欢迎讨论。

以往的内容

第三章 新闻模块

本章内容最终效果：

新闻模块效果.gif

知识点：

RecyclerView.Adapter,CoordinatorLayout,AppBarLayout,cardView,Glide,WebView

学习目标：

1、使用RecyclerView、cardView显示列表数据。

2、使用Glide加载图片。

3、WebView显示网页。

新闻模块是资讯类App的主体，主要内容包括新闻列表，新闻详情。

项目实战：

注意

本章用到的drawable资源、values资源皆存放在百度网盘

(请将values文件夹中的style.xml或color.xml更新一致后再运行，如有后续更新自行修改)

1.1 项目结构

本章增加的类和布局：

类

布局

需导入的库：

导入了cardView和图片加载库Glide。

build.gradle

1.2 item_news及适配器

新闻的显示需要用RecyclerView,所以先完成每个新闻item的代码。

新建一个布局文件，命名为item_news。

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/iv_news_img"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/tv_news_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/iv_news_img"

android:background="#34000000"

android:textColor="@color/colorWhite"

android:textSize="20dp"

android:typeface="serif" />

android:id="@+id/tv_news_digest"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="5dp"

android:maxLines="3"

android:textSize="16dp" />

然后为我们的item_news写上适配器代码。

新建一个java文件，命名为ItemNewsAdapter。

public class ItemNewsAdapter extends RecyclerView.Adapter {

private List objects = new ArrayList();

private Context context;

public ItemNewsAdapter(Context context) {

this.context = context;

}

public void setData(List objects) {

this.objects = objects;

}

@Override

public ItemNewsHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View view = LayoutInflater.from(parent.getContext())

.inflate(R.layout.item_news, parent, false);

return new ItemNewsHolder(view);

}

@Override

public void onBindViewHolder(ItemNewsHolder holder, int position) {

NewsBean.Bean bean = objects.get(position);

if (bean == null) {

return;

}

Glide.with(context)

.load(bean.getImgsrc())

.into(holder.ivNewsImg);

if (position == 0) {

holder.tvNewsDigest.setVisibility(View.GONE);

holder.tvNewsTitle.setText("图片：" + bean.getTitle());

} else {

holder.tvNewsTitle.setText(bean.getTitle());

holder.tvNewsDigest.setText(bean.getMtime() + " : " + bean.getDigest());

}

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public int getItemCount() {

return objects.size();

}

protected class ItemNewsHolder extends RecyclerView.ViewHolder {

private ImageView ivNewsImg;

private TextView tvNewsTitle;

private TextView tvNewsDigest;

public ItemNewsHolder(View view) {

super(view);

ivNewsImg = (ImageView) view.findViewById(R.id.iv_news_img);

tvNewsTitle = (TextView) view.findViewById(R.id.tv_news_title);

tvNewsDigest = (TextView) view.findViewById(R.id.tv_news_digest);

}

}

}

这里面的图片加载用到的是Glide,这是谷歌推荐的图片加载库，加载速度快，引用也很简单。只需下面3行代码就能用。

Glide

中间对控件的处理也是基于api返回的数据(网易新闻接口会图片新闻的数据)，这里只是做了个简单的处理，具体优化还需要进一步分析接口数据。

item里显示的内容

1.3 RecycleView

接下来我们让刚才做的item在fragment里显示出来。

首先修改fg_news_list的布局代码，加入RecycleView：

fg_news_list.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/tv_news_list"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

android:id="@+id/srl_news"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/rv_news"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

然后修改FgNewsListFragment的代码：

FgNewsListFragment.java

public class FgNewsListFragment extends Fragment implements INewsView {

private NewsPresenter presenter;

private int type;

private SwipeRefreshLayout srl_news;

private RecyclerView rv_news;

private ItemNewsAdapter adapter;

private List newsBeanList;

private TextView tv_news_list;

public static FgNewsListFragment newInstance(int type) {

Bundle args = new Bundle();

FgNewsListFragment fragment = new FgNewsListFragment();

args.putInt("type", type);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fg_news_list, null);

}

@Override

public void onViewCreated(View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

type = getArguments().getInt("type");

presenter = new NewsPresenter(this);

rv_news = view.findViewById(R.id.rv_news);

adapter = new ItemNewsAdapter(getActivity());

tv_news_list = view.findViewById(R.id.tv_news_list);

srl_news = view.findViewById(R.id.srl_news);

srl_news.setColorSchemeColors(Color.parseColor("#ffce3d3a"));

srl_news.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {

@Override

public void onRefresh() {

presenter.loadNews(type, 0);

}

});

presenter.loadNews(type, 0);

}

@Override

public void showNews(final NewsBean newsBean) {

switch (type) {

case FgNewsFragment.NEWS_TYPE_TOP:

newsBeanList = newsBean.getTop();

break;

case FgNewsFragment.NEWS_TYPE_NBA:

newsBeanList = newsBean.getNba();

break;

case FgNewsFragment.NEWS_TYPE_JOKES:

newsBeanList = newsBean.getJoke();

break;

}

adapter.setData(newsBeanList);

rv_news.setLayoutManager(new LinearLayoutManager(getActivity(),

LinearLayoutManager.VERTICAL, false));

rv_news.setAdapter(adapter);

tv_news_list.setVisibility(View.GONE);

}

@Override

public void hideDialog() {

srl_news.setRefreshing(false);

}

@Override

public void showDialog() {

srl_news.setRefreshing(true);

}

@Override

public void showErrorMsg(String error) {

tv_news_list.setText("加载失败：" + error);

}

}

效果：

新闻模块效果1.gif

1.4 CardView

每一个新闻怎么做到卡片显示呢？这里我们用到了控件cardView。

cardView的使用非常简单，我把一些设置直接写在布局里了，不需要写别的逻辑代码，只要把item_news里的东西包裹进去就好了。

item_news.xml

android:layout_width="match_parent"

android:layout_height="wrap_content"

xmlns:app="http://schemas.android.com/apk/res-auto"

app:cardCornerRadius="5dp"

app:cardElevation="10dp"

android:layout_margin="10dp"

android:id="@+id/cv_news"

android:clickable="true"

android:focusable="true"

android:foreground="?android:attr/selectableItemBackground"

>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/iv_news_img"

android:layout_width="match_parent"

android:layout_height="wrap_content"

/>

android:id="@+id/tv_news_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textSize="20dp"

android:typeface="serif"

android:background="#34000000"

android:textColor="@color/colorWhite"

android:layout_alignBottom="@+id/iv_news_img" />

android:id="@+id/tv_news_digest"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="5dp"

android:textSize="16dp"

android:maxLines="3"/>

效果：

新闻模块效果2.gif

2.1 CoordinatorLayout与AppBarLayout

当滑动列表的时候，为了给屏幕腾出更多空间，上面的导航栏会有折叠的效果，这里就要用到CoordinatorLayout和AppBarLayout了。

到main_content文件里将最外层包裹上CoordinatorLayout，在将Toolbar放进AppBarLayout：

main_content.xml

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/view_status"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:visibility="gone">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:elevation="5dp"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

android:id="@+id/toolbars"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@color/colorTheme"

app:contentInsetStart="0dp"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="center"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:orientation="horizontal">

android:id="@+id/iv_title_news"

android:layout_width="55dp"

android:layout_height="match_parent"

android:padding="15dp"

android:src="@drawable/titlebar_news" />

android:id="@+id/iv_title_movie"

android:layout_width="55dp"

android:layout_height="match_parent"

android:layout_gravity="center"

android:padding="13dp"

android:src="@drawable/titlebar_movie" />

android:id="@+id/iv_title_video"

android:layout_width="55dp"

android:layout_height="match_parent"

android:padding="15dp"

android:src="@drawable/titlebar_video" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:elevation="5dp"

android:scrollbars="none"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:id="@+id/vp_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:descendantFocusability="blocksDescendants" />

AppBarLayout里有一个elevation属性，可以将bar浮起来，既然Toolbar浮到5，那么把fg_news里的TabLayout也浮到5吧。

fg_news.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/tl_news"

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="@color/colorTheme"

app:tabIndicatorColor="@color/colorWhite"

app:tabSelectedTextColor="@color/colorWhite"

app:tabTextColor="@color/colorTabTextNormal" />

android:id="@+id/vp_news"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

效果：

往上滑的是候最上面的导航会折叠

3.1 WebView打开新闻详情网页

点击每个新闻卡片后，出现的新闻详情我直接用WebView显示。

新建布局文件a_detail(新增加的图片资源到我上面的网盘地址里找):

a_detail.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize">

android:layout_width="match_parent"

android:layout_height="40dp"

android:layout_gravity="center"

android:background="@color/colorTheme">

android:id="@+id/iv_back"

android:layout_width="20dp"

android:layout_height="20dp"

android:src="@drawable/back" />

android:id="@+id/tv_bar_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="50dp"

android:maxLines="1"

android:textColor="@color/colorWhite"

android:textSize="20sp" />

android:id="@+id/wb_news"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/pb_load"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical|center_horizontal"

style="@style/common_mProgress_circle"

/>

然后写WebView的Activity代码：

ADetailActivity.java

public class ADetailActivity extends Activity {

private WebView wbNews;

private String loadUrl, title;

private WebViewClient webViewClient;

private TextView tv_bar_title;

private ImageView iv_back;

private ProgressBar pb_load;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.a_detail);

loadUrl = getIntent().getStringExtra("url");

title = getIntent().getStringExtra("title");

initView();

setWebViewClient();

}

private void setWebViewClient() {

webViewClient = new WebViewClient() {

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

pb_load.setVisibility(View.VISIBLE);

}

@Override

public void onPageFinished(WebView view, String url) {

pb_load.setVisibility(View.GONE);

}

};

wbNews.setWebViewClient(webViewClient);

}

private void initView() {

wbNews = (WebView) findViewById(R.id.wb_news);

wbNews.getSettings().setJavaScriptEnabled(true);

wbNews.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

wbNews.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

wbNews.canGoBack();

wbNews.canGoForward();

wbNews.loadUrl(loadUrl);

tv_bar_title = (TextView) findViewById(R.id.tv_bar_title);

tv_bar_title.setText(title);

iv_back = (ImageView) findViewById(R.id.iv_back);

iv_back.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

pb_load = (ProgressBar) findViewById(R.id.pb_load);

}

@Override

protected void onDestroy() {

super.onDestroy();

wbNews.destroy();

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == event.KEYCODE_BACK && wbNews.canGoBack()) {

wbNews.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

}

在ItemNewsAdapter里把跳转页面的代码补上：

ItemNewsAdapter.java

到manifest文件中声明Activity:

AndroidManifest.xml

效果：

新闻模块效果4.gif

本章的新闻模块显示的列表数量是有限的，这是因为还没做“加载更多”的功能，这些在以后有时间在慢慢优化。