高仿知乎日报(五)

原文出处——krelve.com
现在已经实现了高仿知乎日报的基本阅读功能，如果只是想阅读的话，这些已经够了，但既然是高仿，那就尽量多做几个功能吧。
依然是先上图：

今天主要是做夜间模式功能，其实就是个换肤功能，由于只有白天和夜间两种模式，所以做起来也不需要网上流传的那些皮肤方案，直接更新一下背景色和字体颜色就行。
先将所有用到的颜色抽取到colors.xml文件中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="gray">#BEBEBE</color>
    <color name="light_toolbar">@android:color/holo_blue_dark</color>
    <color name="dark_toolbar">@android:color/black</color>
    <color name="light_news_item">#FFF0F0F0</color>
    <color name="dark_news_item">#DD000000</color>
    <color name="light_news_topic">#ff666666</color>
    <color name="dark_news_topic">#CCFFFFFF</color>
    <color name="dark_selector_drawable">#FF333333</color>
    <color name="light_menu_header">@android:color/holo_blue_dark</color>
    <color name="dark_menu_header">@android:color/black</color>
    <color name="light_menu_header_tv">@android:color/white</color>
    <color name="dark_menu_header_tv">#CCFFFFFF</color>
    <color name="light_menu_index_background">#FFF0F0F0</color>
    <color name="dark_menu_index_background">#FF111111</color>
    <color name="light_menu_listview_background">@android:color/white</color>
    <color name="dark_menu_listview_background">#FF222222</color>
    <color name="light_menu_listview_textcolor">#FF000000</color>
    <color name="dark_menu_listview_textcolor">@android:color/darker_gray</color>
</resources>

设置menu的点击事件：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_mode) {
            isLight = !isLight;
            toolbar.setBackgroundColor(getResources().getColor(isLight ? R.color.light_toolbar : R.color.dark_toolbar));
            if (curId.equals("latest")) {
                ((MainFragment) getSupportFragmentManager().findFragmentByTag("latest")).updateTheme();
            } else {
                ((NewsFragment) getSupportFragmentManager().findFragmentByTag("news")).updateTheme();
            }
            ((MenuFragment) getSupportFragmentManager().findFragmentById(R.id.menu_fragment)).updateTheme();
            sp.edit().putBoolean("isLight", isLight).commit();
        }

        return super.onOptionsItemSelected(item);
    }

可以看到，这里每一个需要更换样式的界面都提供updateTheme这样一个方法，就拿MainFragment来举例：

    public void updateTheme() {
        mAdapter.updateTheme();
    }

在内部调用了adapter的updateTheme方法。

    public void updateTheme() {
        isLight = ((MainActivity) context).isLight();
        notifyDataSetChanged();
    }

而adapter中的updateTheme方法只有两句话，那关键的地方在哪儿呢？既然看到了notifyDataSetChanged，那更换样式肯定实在getView中进行喽。

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null) {
            viewHolder = new ViewHolder();
            convertView = LayoutInflater.from(context).inflate(R.layout.main_news_item, parent, false);
            viewHolder.tv_topic = (TextView) convertView.findViewById(R.id.tv_topic);
            viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
            viewHolder.iv_title = (ImageView) convertView.findViewById(R.id.iv_title);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        ((LinearLayout) viewHolder.iv_title.getParent().getParent().getParent()).setBackgroundColor(context.getResources().getColor(isLight ? R.color.light_news_item : R.color.dark_news_item));
        viewHolder.tv_topic.setTextColor(context.getResources().getColor(isLight ? R.color.light_news_topic : R.color.dark_news_topic));
        viewHolder.tv_title.setTextColor(context.getResources().getColor(isLight ? android.R.color.black : android.R.color.white));
        StoriesEntity entity = entities.get(position);
        if (entity.getType() == Constant.TOPIC) {
            ((FrameLayout) viewHolder.tv_topic.getParent()).setBackgroundColor(Color.TRANSPARENT);
            viewHolder.tv_title.setVisibility(View.GONE);
            viewHolder.iv_title.setVisibility(View.GONE);
            viewHolder.tv_topic.setVisibility(View.VISIBLE);
            viewHolder.tv_topic.setText(entity.getTitle());
        } else {
            ((FrameLayout) viewHolder.tv_topic.getParent()).setBackgroundResource(isLight ? R.drawable.item_background_selector_light : R.drawable.item_background_selector_dark);
            viewHolder.tv_topic.setVisibility(View.GONE);
            viewHolder.tv_title.setVisibility(View.VISIBLE);
            viewHolder.iv_title.setVisibility(View.VISIBLE);
            viewHolder.tv_title.setText(entity.getTitle());
            mImageloader.displayImage(entity.getImages().get(0), viewHolder.iv_title);
        }
        return convertView;
    }

可以看到，其实是从MainActivity获得isLight的值，然后在代码中判断是否是夜间模式，来动态改变背景色与文字颜色。
原理就是这样，其它的就不赘述了。
依然在最后贴上项目地址：
高仿知乎日报