1. 参考资料
NOspy的https://www.jianshu.com/p/333f7feeb842
Screenshot_20181106-221940.jpg
2. 主界面结构
image.png
- 标题栏
- Banner
- RecycleView
3. 标题栏实现
ToolBar的使用
- AppBarLayout使用：手动添加implementation'com.android.support:design:27.1.1'
在ToolBar外面包裹AppBarLayout。
4. RecycleView实现
-
ItemView
image.png - 重写 RecyclerView.Adapter
private List<NewsInfo.StoryBean> mStoryList;
private Context mContext;
private OnItemClickListner mOnItemClickListner;
//传入参数：list和context
public StoryAdapter(List<NewsInfo.StoryBean> storyList,Context context) {...}
@NonNull
@Override
//绘制Item_view.xml得到View,并传递给ViewHolder
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {...}
@Override
//通过position获得数据对象，并将数据加载到ViewHolder持有的View中
public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {...}
@Override
public int getItemCount() {...}
//ViewHolder用来持有View中的子控件，避免每次执行findViewById()
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView mImageView;
TextView mTextView;
public ViewHolder(View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.story_image);
mTextView = itemView.findViewById(R.id.story_title);
}
}
5. Banner使用
https://github.com/youth5201314/banner
- 重写GlideImageLoader
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
}
- 在activity中new,set,start
mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE)
.setImageLoader(new GlideImageLoader())
.setImages(imageUrls)
.setBannerTitles(titles); //banner样式有title才能显示
mBanner.start();
6. 点击跳转到具体的story
- RecyclerView点击事件
//在mAdapter中写一个有点击方法的内部接口。
public interface OnItemClickListner {
void onItemClick(View view,int position);
}
//通过一个方法添加接口对象
private OnItemClickListner mOnItemClickListner;
public void setOnItemClickListner(OnItemClickListner onItemClickListner) {
mOnItemClickListner = onItemClickListner;
}
//在onBindViewHolder（）中实现Item_view中控件的点击事件，在OnClick（）方法中调用接口的方法
holder.mTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getLayoutPosition();
mOnItemClickListner.onItemClick(holder.mTextView,position);
}
});
- 获取Story数据
学着BiliBili客户端封装了NetUtil，只要是OKhttp的单例模式实现，和Retrofit的配置
public class RetrofitHelper {
private static OkHttpClient mOkHttpClient;
static { initOkhttpClient(); }
private static void initOkhttpClient() {
if(mOkHttpClient == null) {
synchronized (RetrofitHelper.class) {
if(mOkHttpClient == null) {
mOkHttpClient = new OkHttpClient.Builder()
.connectTimeout(5, TimeUnit.SECONDS)
.build();
...}
public static <T>T createApi(Class<T> T) {
Retrofit retrofit = new Retrofit.Builder()
.client(mOkHttpClient)
.baseUrl("http://news-at.zhihu.com/api/4/")
.addConverterFactory(GsonConverterFactory.create())
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.build();
return retrofit.create(T);
}
}
7.StoryLayout结构
-
这里偷懒直接用了demo的布局，但是toolbar没写好，先空着
image.png
8.Story数据的显示
Webview加载js代码：
-
String2xml工具类，这里有很多String的处理，先copy了...
image.png
9.效果图
image.png
image.png
