1.singleLine0的知乎日报学习：功能实现

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 mStoryList;
    private Context mContext;
    private OnItemClickListner mOnItemClickListner;
    //传入参数：list和context
    public StoryAdapter(List 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 createApi(Class 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

10. UI方面的问题

1. ItemView 用CardView做父布局，控件的边距，做好看点

2. 上滑过程中标题栏和Banner也不会跟着滑动

3. 上滑加载过去的新闻也没做

4. 新闻标题栏的收藏评论分享功能

5. DrawerLayout布局做好看点