雞湯:養成一個好習慣需要很久，打破這個習慣卻只需要一瞬間的念頭

接上一章的內容，如果還沒看過的朋友，
請到文章底部查看系列對應文章

數據解析，view渲染

先放一張效果圖。

從效果圖可以看出，首頁的數據模型有三種，
1.頂部的大圖
2.每一欄的標題
3.每一欄的正文內容

需要分別定義三個model
1.GankTopImageItem --表示頂部的大圖
2.GankHeaderItem --表示每一欄的標題
3.GankNormalItem --表示每一欄的正文內容

另外再定義一個父類GankItem，上述的三個model類都要繼承與GankItem類

GankItem類 寫個空方法就行了。

public interface GankItem {

}

為什么要特地多加這么一個父類呢？
因為加上這么一個父類，你在保存數據的時候，
就可以用這么一行代碼來聲明list，不管是GankTopImageItem類型的，還是GankHeaderItem類型的，或者是GankNormalItem類型的model都可以直接添加到gankList中。

List<GankItem> gankList = new ArrayList<>();

具體代碼如下

 private List<GankItem> getGankList(DayData dayData) {
    if (dayData == null || dayData.results == null) {
        return null;
    }
    List<GankItem> gankList = new ArrayList<>();
    if (null != dayData.results.welfareList && dayData.results.welfareList.size() > 0) {
        gankList.add(GankTopImageItem.newImageItem(dayData.results.welfareList.get(0)));
    }
    if (null != dayData.results.androidList && dayData.results.androidList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.ANDROID));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.androidList));
    }
    if (null != dayData.results.iosList && dayData.results.iosList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.IOS));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.iosList));
    }
    if (null != dayData.results.frontEndList && dayData.results.frontEndList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.FRONTEND));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.frontEndList));
    }
    if (null != dayData.results.extraList && dayData.results.extraList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.EXTRA));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.extraList));
    }
    if (null != dayData.results.casualList && dayData.results.casualList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.CASUAL));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.casualList));
    }
    if (null != dayData.results.appList && dayData.results.appList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.APP));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.appList));
    }
    if (null != dayData.results.videoList && dayData.results.videoList.size() > 0) {
        gankList.add(new GankHeaderItem(GankType.VIDEO));
        gankList.addAll(GankNormalItem.newGankList(dayData.results.videoList));
    }

    return gankList;
}

這樣寫在給相應的Adapter傳遞數據的時候，只要把這個list賦值過去就能達到傳遞多個不同類型數據的效果了。

當然還有別的方式，甚至可以只定義一個model，只不過這樣每個model要多些字段，難免有些浪費。

數據解析完成然后回調給view進行渲染就行了，
那么如何回調呢？當然是要采用接口了。

定義接口類

public interface OnDataChangeListener {
    void postChange(List<GankItem> gankItems);
}

view中設置接口實現類

  @Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    TodayGankActionCreator creator = new TodayGankActionCreator();
    //設置接口實現類
    creator.setDataChangeListener(this);
    //view從對應的Creator請求數據
    creator.getTodayGank();
}

//接收到參數，mAdapter設置參數，并刷新視圖
@Override
public void postChange(List<GankItem> gankItems) {
    mAdapter.refreshData(gankItems);
    mAdapter.notifyDataSetChanged();
}

TodayGankActionCreator類中

  public void setDataChangeListener(OnDataChangeListener dataChangeListener) {
    this.dataChangeListener = dataChangeListener;
  }

  @Override
 public void call(List<GankItem> gankItems) {
    //數據處理正常時調用
     dataChangeListener.postChange(gankItems);
  }

貼上完整代碼

TodayGankFragment類

public class TodayGankFragment extends Fragment implements OnDataChangeListener, SwipeRefreshLayout.OnRefreshListener, GankListAdapter.OnItemClickListener {

    public static final String TAG = TodayGankFragment.class.getSimpleName();

    public static TodayGankFragment newInstance() {
        return new TodayGankFragment();
    }


    @Bind(R.id.refresh_layout)
    SwipeRefreshLayout vRefreshLayout;
    @Bind(R.id.recycler_view)
    RecyclerView vWelfareRecycler;

    private GankListAdapter mAdapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.frag_today, container, false);
        ButterKnife.bind(this, rootView);

        vRefreshLayout.setColorSchemeResources(R.color.colorPrimary, R.color.colorPrimaryDark, R.color.colorAccent);
        vRefreshLayout.setOnRefreshListener(this);
        vWelfareRecycler.setLayoutManager(new LinearLayoutManager(getActivity()));
        vWelfareRecycler.setHasFixedSize(true);
        mAdapter = new GankListAdapter(this);
        mAdapter.setOnItemClickListener(this);
        vWelfareRecycler.setAdapter(mAdapter);

        return rootView;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        TodayGankActionCreator creator = new TodayGankActionCreator();
        //設置接口實現類
        creator.setDataChangeListener(this);
        //view從對應的Creator請求數據
        creator.getTodayGank();
    }

    @Override
    public void postChange(List<GankItem> gankItems) {
        mAdapter.refreshData(gankItems);
        mAdapter.notifyDataSetChanged();
    }

    @Override
    public void onRefresh() {

    }

    @Override
    public void onClickNormalItem(View view, GankNormalItem normalItem) {

    }

    @Override
    public void onClickGirlItem(View view, GankTopImageItem girlItem) {

    }
}

GankListAdapter類

public class GankListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

    private static final int VIEW_TYPE_NORMAL = 1;
    private static final int VIEW_TYPE_HEADER = 2;
    private static final int VIEW_TYPE_GIRL_IMAGE = 3;

    private Fragment mFragment;
    private List<GankItem> mItems;

    private OnItemClickListener mItemClickListener;

    public interface OnItemClickListener {
        void onClickNormalItem(View view, GankNormalItem normalItem);
        void onClickGirlItem(View view, GankTopImageItem girlItem);
    }

    public GankListAdapter(Fragment fragment) {
        mFragment = fragment;
    }

    public void refreshData(List<GankItem> list) {
        mItems = list;
        notifyDataSetChanged();
    }

    public void setOnItemClickListener(OnItemClickListener clickListener) {
        mItemClickListener = clickListener;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case VIEW_TYPE_HEADER:
                return new CategoryHeaderViewHolder(parent);
            case VIEW_TYPE_NORMAL:
                return new NormalViewHolder(parent);
            case VIEW_TYPE_GIRL_IMAGE:
                return new GirlImageViewHolder(parent);
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if(holder instanceof CategoryHeaderViewHolder) {
            CategoryHeaderViewHolder headerHolder = (CategoryHeaderViewHolder) holder;
            headerHolder.title.setText(((GankHeaderItem)mItems.get(position)).name);
            return;
        }
        if(holder instanceof NormalViewHolder) {
            NormalViewHolder normalHolder = (NormalViewHolder) holder;
            final GankNormalItem normalItem = (GankNormalItem) mItems.get(position);
            normalHolder.title.setText(getGankTitleStr(normalItem.desc, normalItem.who));
            normalHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(null != mItemClickListener) {
                        mItemClickListener.onClickNormalItem(v, normalItem);
                    }
                }
            });
            return;
        }
        if(holder instanceof GirlImageViewHolder) {
            GirlImageViewHolder girlHolder = (GirlImageViewHolder) holder;
            final GankTopImageItem girlItem = (GankTopImageItem) mItems.get(position);
            Glide.with(mFragment)
                    .load(girlItem.imgUrl)
                    .placeholder(R.color.imageColorPlaceholder)
                    .centerCrop()
                    .into(girlHolder.girl_image);
            girlHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(null != mItemClickListener) {
                        mItemClickListener.onClickGirlItem(v, girlItem);
                    }
                }
            });
        }
    }

    @Override
    public int getItemViewType(int position) {
        GankItem gankItem = mItems.get(position);
        if(gankItem instanceof GankHeaderItem) {
            return VIEW_TYPE_HEADER;
        }
        if(gankItem instanceof GankTopImageItem) {
            return VIEW_TYPE_GIRL_IMAGE;
        }
        return VIEW_TYPE_NORMAL;
    }

    @Override
    public int getItemCount() {
        return null == mItems ? 0 : mItems.size();
    }

    private CharSequence getGankTitleStr(String desc, String who) {
        if(TextUtils.isEmpty(who)) {
            return desc;
        }
        SpannableStringBuilder builder = new SpannableStringBuilder(desc);
        SpannableString spannableString = new SpannableString(" (" + who + ")");
        spannableString.setSpan(new TextAppearanceSpan(AppUtil.getAppContext(), R.style.SummaryTextAppearance), 0, spannableString.length(), 0);
        builder.append(spannableString);
        return builder;
    }

    public static class CategoryHeaderViewHolder extends RecyclerView.ViewHolder {

        @Bind(R.id.category_title) TextView title;

        public CategoryHeaderViewHolder(ViewGroup parent) {
            super(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item_category_title, parent, false));
            ButterKnife.bind(this, itemView);
        }
    }

    public static class NormalViewHolder extends RecyclerView.ViewHolder {

        @Bind(R.id.title) TextView title;

        public NormalViewHolder(ViewGroup parent) {
            super(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item_gank, parent, false));
            ButterKnife.bind(this, itemView);
        }
    }

    public static class GirlImageViewHolder extends RecyclerView.ViewHolder {

        @Bind(R.id.girl_image)
        RatioImageView girl_image;

        public GirlImageViewHolder(ViewGroup parent) {
            super(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item_girl_imge, parent, false));
            ButterKnife.bind(this, itemView);
            girl_image.setRatio(1.618f);
        }
    }
}

TodayGankActionCreator類

public class TodayGankActionCreator {

    private OnDataChangeListener dataChangeListener;


    public void setDataChangeListener(OnDataChangeListener dataChangeListener) {
        this.dataChangeListener = dataChangeListener;
    }

    //定義數據轉化模板
    private static SimpleDateFormat sDataFormat = new SimpleDateFormat("yyyy-MM-dd", Locale.CHINA);

    public void getTodayGank() {

        //RxJava處理數據
        HttpService.Factory.getGankService()
                .getDateHistory()
                .subscribeOn(Schedulers.io())
                .filter(new Func1<DateData, Boolean>() {
                    @Override
                    public Boolean call(DateData dateData) {
                        return (null != dateData && null != dateData.results && dateData.results.size() > 0);//接口請求成功，這邊返回true
                    }
                })
                .map(new Func1<DateData, Calendar>() {
                    @Override
                    public Calendar call(DateData dateData) {
                        Calendar calendar = Calendar.getInstance(Locale.CHINA);
                        try {
                            calendar.setTime(sDataFormat.parse(dateData.results.get(0)));  //設置時間為最新一天，一般是今天
                        } catch (ParseException e) {
                            e.printStackTrace();
                            calendar = null;
                        }
                        return calendar;
                    }
                })
                .flatMap(new Func1<Calendar, Observable<DayData>>() {
                    @Override
                    public Observable<DayData> call(Calendar calendar) {
                        return HttpService.Factory.getGankService()        //再次請求數據，獲取當天的數據
                                .getDayGank(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH) + 1, calendar.get(Calendar.DAY_OF_MONTH));
                    }
                })
                .map(new Func1<DayData, List<GankItem>>() {
                    @Override
                    public List<GankItem> call(DayData dayData) {
                        return getGankList(dayData);
                    }
                })
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<List<GankItem>>() {
                    @Override
                    public void call(List<GankItem> gankItems) {
                        //數據處理正常時調用
                        dataChangeListener.postChange(gankItems);
                    }
                }, new Action1<Throwable>() {
                    @Override
                    public void call(Throwable throwable) {
                        //數據處理過程中報錯時調用

                    }
                });

    }

    private List<GankItem> getGankList(DayData dayData) {
        if (dayData == null || dayData.results == null) {
            return null;
        }
        List<GankItem> gankList = new ArrayList<>();
        if (null != dayData.results.welfareList && dayData.results.welfareList.size() > 0) {
            gankList.add(GankTopImageItem.newImageItem(dayData.results.welfareList.get(0)));
        }
        if (null != dayData.results.androidList && dayData.results.androidList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.ANDROID));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.androidList));
        }
        if (null != dayData.results.iosList && dayData.results.iosList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.IOS));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.iosList));
        }
        if (null != dayData.results.frontEndList && dayData.results.frontEndList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.FRONTEND));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.frontEndList));
        }
        if (null != dayData.results.extraList && dayData.results.extraList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.EXTRA));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.extraList));
        }
        if (null != dayData.results.casualList && dayData.results.casualList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.CASUAL));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.casualList));
        }
        if (null != dayData.results.appList && dayData.results.appList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.APP));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.appList));
        }
        if (null != dayData.results.videoList && dayData.results.videoList.size() > 0) {
            gankList.add(new GankHeaderItem(GankType.VIDEO));
            gankList.addAll(GankNormalItem.newGankList(dayData.results.videoList));
        }

        return gankList;
    }

}

數據能正常請求了，view也能正常渲染了。這就完了嗎？
不，這才剛開始。

再看看Flux架構的流向圖，view向ActionCreator請求數據之后，應該發出一個Action，讓Dispatcher去更新對應的store，之后再渲染視圖。

代碼改造

ActionCreator ->Action
首先要定義一個特有的Action，用來攜帶傳遞的數據以及證明自己是什么類型的action

RxAction 類

public class RxAction {
    private final String type;     
    private final ArrayMap<String, Object> data;

    RxAction(String type, ArrayMap<String, Object> data) {
        this.type = type;
        this.data = data;
    }

    public static Builder type(String type) {
        return new Builder().with(type);
    }

    public String getType() {
        return type;
    }

    public ArrayMap<String, Object> getData() {
        return data;
    }

    @SuppressWarnings("unchecked")
    public <T> T get(String tag) {
        return (T) data.get(tag);
    }


    //使用靜態內部類的方式來構造對象
    public static class Builder {

        private String type;
        private ArrayMap<String, Object> data;

        Builder with(String type) {
            if (type == null) {
                throw new IllegalArgumentException("Type may not be null.");
            }
            this.type = type;
            this.data = new ArrayMap<>();
            return this;
        }


        public RxAction build() {
            if (type == null || type.isEmpty()) {
                throw new IllegalArgumentException("At least one key is required.");
            }
            return new RxAction(type, data);
        }
    }
}

使用方式很簡單

//聲明Action的類型為Type
RxAction rxAction=RxAction.type(Type).build();
//將需要傳遞的數據，以map形式存入，由于Value的類型是Object的，所以任何類型的數據都可以存入
rxAction.getData().put(Key,Value);

Aciton->Dispatch
Action定義好了，需要一個Dispatch派發器來將這個Action傳入的相對于的store，這里的store相當于是一個數據倉庫，也是view最終渲染的數據來源。

定義Dispatcher類
public class Dispatcher {

  private static Dispatcher instance;
  private final RxBus bus;
  private ArrayMap<String, Subscription> rxActionMap;
  private ArrayMap<String, Subscription> rxStoreMap;

  private Dispatcher(RxBus bus) {
    this.bus = bus;
    this.rxActionMap = new ArrayMap<>();
    this.rxStoreMap = new ArrayMap<>();
  }

  public static synchronized Dispatcher getInstance(RxBus rxBus) {
    if (instance == null) instance = new Dispatcher(rxBus);
    return instance;
  }

  public <T extends RxActionDispatch> void subscribeRxStore(final T object) {
    final String tag = object.getClass().getSimpleName();
    Subscription subscription = rxActionMap.get(tag);
    if (subscription == null || subscription.isUnsubscribed()) {
      rxActionMap.put(tag, bus.get().filter(new Func1<Object, Boolean>() {
        @Override public Boolean call(Object o) {
          return o instanceof RxAction;
        }
      }).subscribe(new Action1<Object>() {
        @Override public void call(Object o) {
          object.onRxAction((RxAction) o);
        }
      }));
    }
  }

  
  public <T extends RxViewDispatch> void subscribeRxView(final T object) {
    final String tag = object.getClass().getSimpleName();
    Subscription subscription = rxStoreMap.get(tag);
    if (subscription == null || subscription.isUnsubscribed()) {
      rxStoreMap.put(tag, bus.get().filter(new Func1<Object, Boolean>() {
        @Override public Boolean call(Object o) {
          return o instanceof RxStoreChange;
        }
      }).subscribe(new Action1<Object>() {
        @Override public void call(Object o) {
          object.onRxStoreChanged((RxStoreChange) o);
        }
      }));
    }

  }
    
  public void postRxAction(final RxAction action) {
    bus.send(action);
  }

  public void postRxStoreChange(final RxStoreChange storeChange) {
    bus.send(storeChange);
  }
}

Dispatcher類中有兩個方法
subscribeRxStore();
subscribeRxView();

這兩個方法都是起注冊作用的，跟Android原生的廣播有點類似。
比如程序執行發送了一個Action，那么這個Action發送給誰呢。你不事先聲明別人肯定不知道，那最后就只能丟棄了。
所以在Action發送之前，你就要先做好映射，

A -ActionA,
B -ActionB.

這樣當ActionA發出之后，才會知道自己要到A哪里去。

Dispatcher類中還有一個RxBus，這個RxBus相當于一個簡單的事件總線，類似于EventBus，

RxBus類

public class RxBus {

  private static RxBus instance;

  private final Subject<Object, Object> bus = new SerializedSubject<>(PublishSubject.create());

  private RxBus() {
  }

  public synchronized static RxBus getInstance() {
    if (instance == null) {
      instance = new RxBus();
    }
    return instance;
  }
  //發送事件
  public void send(Object o) {
    bus.onNext(o);
  }

  public Observable<Object> get() {
    return bus;
  }
  
}

總結一點，RxBus中的Subject 繼承了Observable類，同時又實現了Observer接口，所以Subject可以同時充當事件的發送者和接受者。

所以RxBus.send(Object)發送事件,RxBus.filter()...可以處理事件

再回過頭來看Dispatcher
把subscribeRxStore()方法，和postRxAction()方法抽取出來

//在view 一般是activity或者fragment 調用subscribeRxStore方法之后，代碼在執行到bus.get().filter() 時就不會接著往下執行了。
//等到postRxAction()把事件發送出去之后，bus.get()收到事件才會接著執行
public <T extends RxActionDispatch> void subscribeRxStore(final T object) {
    final String tag = object.getClass().getSimpleName();
    Subscription subscription = rxActionMap.get(tag);
    if (subscription == null || subscription.isUnsubscribed()) {
      rxActionMap.put(tag, bus.get().filter(new Func1<Object, Boolean>() {
        @Override public Boolean call(Object o) {
          return o instanceof RxAction;
        }
      }).subscribe(new Action1<Object>() {
        @Override public void call(Object o) {
          object.onRxAction((RxAction) o);
        }
      }));
    }
  }

public void postRxAction(final RxAction action) {
        bus.send(action);
 }

同樣的道理subscribeRxView()和對應的postActionChange()也是差不多的作用

我知道這么說可能有很多人看不懂，貼一份流程圖來解釋一下。

1.Fragment注冊subscribeRxStore 和subscribeRxView
2.Fragment調用對應的creator 獲取數據
3.數據解析成功之后會發送Action 即postAction()
4.subscribeRxStore 會通知對應的store 作出修改
5.數據修改之后 發出通知 postActionChange
6.subscribeRxView 收到Action之后 refreshView

這樣一解釋，我相信大部分人都能懂了。

下面貼上對應的store的代碼

public class TodayGankStore extends RxStore {

    //設置ID，分類用
    public static final String ID = "TodayGankStore";

    //保存數據用
    private List<GankItem> mItems;

    public TodayGankStore(Dispatcher dispatcher) {
        super(dispatcher);
    }

    @Override
    public void onRxAction(RxAction action) {
        switch (action.getType()) {
            case ActionType.GET_TODAY_GANK:
                mItems = action.get(Key.DAY_GANK);
                break;
            default:
                return;
        }
        //數據變更，發出對應的Action，通知view刷新
        postChange(new RxStoreChange(ID, action));
        }

    public List<GankItem> getItems() {
        return mItems;
    }
}

對應的fragment

//在store發出Action之后，最后會調用fragment中的onRxStoreChanged方法來重新渲染視圖，到這里整個流程就結束了。
@Override
public void onRxStoreChanged(@NonNull RxStoreChange change) {
    switch (change.getStoreId()) {
        case TodayGankStore.ID:
            vRefreshLayout.setRefreshing(false);
            mAdapter.refreshData(store.getItems());
            mAdapter.notifyDataSetChanged();
            break;
    }
}

最后給上一張分包結構圖，

分包結構圖

action ：發送各類的action
data : 數據模型
dispatcher ：action的派發者
http : 網絡請求
store : 數據倉庫
ui :各類view
utils :幫助類

本章先到這里，還剩下一部分內容，包括基類的封裝以及Dagger的引入，留到下次再講。
相應的代碼我會傳到github上。

從零開始系列第0章
從零開始系列第1章
從零開始系列第2章
從零開始系列完結章

本人也只是Android開發路上一只稍大一點的菜鳥，如果各位讀者中發現文章中有誤之處，請幫忙指出，你的批評和鼓勵都是我前進的動力。

寫在文末：如果讀者朋友有什么問題或者意見可以在評論里指出.
代碼地址為https://github.com/niknowzcd/FluxDemo1