2. 程式人生 > >高仿知乎日報(一)

高仿知乎日報(一)

阿新 • • 發佈：2019-02-16

之前寫的高仿知乎日報的程式碼是用eclipse寫的，匯入AndroidStudio之後雖然改改也能跑起來，但是格式很怪異，而且由於時間長了，很多東西都忘了，所以準備用AndroidStudio重寫一遍，順便記錄下過程並將很多需要優化的地方都完成。
首先是介面的獲取，不需要自己去抓包分析，因為已經有人分析過了：
知乎日報介面
既然介面都有了，那就裝上知乎日報app照著搞唄。
1.首先編寫Application，由於使用到了UIL框架，所以在Application中初始化它。

package krelve.app.kuaihu;

import android.app.Application;
import
 
 android.content.Context;

import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiskCache;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;
import com.nostra13.universalimageloader.core.ImageLoader;
import
 
 com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;
import com.nostra13.universalimageloader.utils.StorageUtils;

import java.io.File;

/**
 * Created by wwjun.wang on 2015/8/11.
 */
public class Kpplication extends Application
 
 {

    @Override
    public void onCreate() {
        super.onCreate();
        initImageLoader(getApplicationContext());
    }

    private void initImageLoader(Context context) {
        File cacheDir = StorageUtils.getCacheDirectory(context);
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                context).threadPoolSize(3)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .memoryCache(new LruMemoryCache(2 * 1024 * 1024))
                .denyCacheImageMultipleSizesInMemory()
                .diskCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                .diskCache(new UnlimitedDiskCache(cacheDir)).writeDebugLogs()
                .build();
        ImageLoader.getInstance().init(config);

    }
}

2.開啟知乎日報，發現會有一個啟動頁，包含一個放大圖片的動畫，實現起來很簡單：
簡單的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical">

    <ImageView
        android:id="@+id/iv_start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />

</RelativeLayout>

介面程式碼

package krelve.app.kuaihu.activity;

import android.app.Activity;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

import com.loopj.android.http.AsyncHttpResponseHandler;
import com.loopj.android.http.BinaryHttpResponseHandler;

import org.apache.http.Header;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import krelve.app.kuaihu.R;
import krelve.app.kuaihu.util.Constant;
import krelve.app.kuaihu.util.HttpUtils;

/**
 * Created by wwjun.wang on 2015/8/11.
 */
public class SplashActivity extends Activity {
    private ImageView iv_start;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.splash);
        iv_start = (ImageView) findViewById(R.id.iv_start);
        initImage();

    }

    private void initImage() {
        File dir = getFilesDir();
        final File imgFile = new File(dir, "start.jpg");
        if (imgFile.exists()) {
            iv_start.setImageBitmap(BitmapFactory.decodeFile(imgFile.getAbsolutePath()));
        } else {
            iv_start.setImageResource(R.mipmap.start);
        }

        final ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 1.2f, 1.0f, 1.2f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        scaleAnim.setFillAfter(true);
        scaleAnim.setDuration(3000);
        scaleAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                HttpUtils.get(Constant.START, new AsyncHttpResponseHandler() {
                    @Override
                    public void onSuccess(int i, Header[] headers, byte[] bytes) {
                        try {
                            JSONObject jsonObject = new JSONObject(new String(bytes));
                            String url = jsonObject.getString("img");
                            HttpUtils.get(url, new BinaryHttpResponseHandler() {
                                @Override
                                public void onSuccess(int i, Header[] headers, byte[] bytes) {
                                    saveImage(imgFile, bytes);
                                    startActivity();
                                }

                                @Override
                                public void onFailure(int i, Header[] headers, byte[] bytes, Throwable throwable) {
                                    startActivity();
                                }
                            });

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }

                    @Override
                    public void onFailure(int i, Header[] headers, byte[] bytes, Throwable throwable) {
                        startActivity();
                    }
                });
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        iv_start.startAnimation(scaleAnim);

    }

    private void startActivity() {
        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
        startActivity(intent);
        overridePendingTransition(android.R.anim.fade_in,
                android.R.anim.fade_out);
        finish();
    }

    public void saveImage(File file, byte[] bytes) {
        try {
            file.delete();
            FileOutputStream fos = new FileOutputStream(file);
            fos.write(bytes);
            fos.flush();
            fos.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

在知乎日報的介面中，我們會看到這樣一個介面：
http://news-at.zhihu.com/api/4/start-image/1080*1776
用來獲取啟動介面的影象，所以在啟動時，要去獲取最新的啟動影象。
這裡用到了android-http-async框架和UIM框架，在Module的build.gradle檔案中新增：

    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
    compile 'com.loopj.android:android-async-http:1.4.8'

還要記得在manifest檔案中加許可權：

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
    <uses-permission android:name="android.permission.write_external_storage"></uses-permission>

這樣基本就完成了一個啟動頁面，很簡單。
3.主介面佈局：
先來一個效果圖：

可以看到，用到了Toolbar和DrawerLayout還有SwipeRefreshLayout。
佈局檔案

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/sr"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimaryDark"
                android:theme="@style/MyActionBar" />


            <FrameLayout
                android:id="@+id/fl_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></FrameLayout>
        </LinearLayout>
    </android.support.v4.widget.SwipeRefreshLayout>

    <fragment
        android:name="krelve.app.kuaihu.fragment.MenuFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left" />

</android.support.v4.widget.DrawerLayout>

可以看到Toolbar的位置在DrawerLayout的裡面，如果想要側滑的時候側滑選單顯示在Toolbar的下面，只需讓Toolbar的位置在DrawerLayout外面就行。
這裡需要注意的是Toolbar的樣式，如果仔細看了知乎日報的Toolbar就會發現它用的應該是Dark型別的主題，因為這個Toolbar除了背景其它地方都是白色的，那好，我們直接給Toolbar設定android:theme=ThemeOverlay.AppCompat.ActionBar
然後問題就來了，再點開右側overflow，會發現彈出的選單背景是黑色的。
這可不行，清新的風格瞬間被毀，於是在style.xml中定義自己的style：

    <style name="MyActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
        <!--<item name="android:actionOverflowButtonStyle">@style/MyOverflowButton</item>-->
        <item name="android:textColor">@android:color/black</item>
    </style>

給我們的Toolbar引用這個style就達到了目的。
那就剩下側滑選單的編寫了，本來是想用NavigationView來實現的，但是效果不怎麼理想，還是自己寫吧。
佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="360dp"
    android:layout_height="match_parent"
    android:clickable="true"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:orientation="vertical"
        android:paddingBottom="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="@drawable/ic_account_circle_white_24dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="36dp"
                android:layout_marginLeft="10dp"
                android:gravity="center_vertical"
                android:text="請登入"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_star_white_24dp"
                android:gravity="center"
                android:text="我的收藏"
                android:textColor="@android:color/white"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/tv_download"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_file_download_white_24dp"
                android:gravity="center"
                android:text="離線下載"
                android:textColor="@android:color/white"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/tv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFF0F0F0"
        android:paddingBottom="10dp"
        android:paddingLeft="80dp"
        android:paddingTop="10dp"
        android:text="首頁"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp" />

    <ListView
        android:id="@+id/lv_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:divider="@android:color/transparent"
        android:scrollbars="none"></ListView>

</LinearLayout>

關鍵點是ListView，這裡要顯示的資料我們要通過介面http://news-at.zhihu.com/api/4/themes來獲取，為了簡化網路操作，對android-http-async進行了及其簡單的封裝：

package krelve.app.kuaihu.util;

import com.loopj.android.http.AsyncHttpClient;
import com.loopj.android.http.ResponseHandlerInterface;

/**
 * Created by wwjun.wang on 2015/8/11.
 */
public class HttpUtils {
    private static AsyncHttpClient client = new AsyncHttpClient();

    public static void get(String url, ResponseHandlerInterface responseHandler) {
        client.get(Constant.BASEURL + url, responseHandler);
    }

}

獲取到的都是Json格式的字串，由於現在遇到的json格式比較簡單，所以直接用android中自帶的json解析庫來解析，在後面會用到Gson直接向bean中對映。
貼上整個Fragment的程式碼：

package krelve.app.kuaihu.fragment;

import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;

import com.loopj.android.http.JsonHttpResponseHandler;

import org.apache.http.Header;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.List;

import krelve.app.kuaihu.R;
import krelve.app.kuaihu.model.NewsListItem;
import krelve.app.kuaihu.util.Constant;
import krelve.app.kuaihu.util.HttpUtils;

public class MenuFragment extends Fragment implements OnClickListener {
    private ListView lv_item;
    private TextView tv_download, tv_main;
    // private static String[] ITEMS = { "日常心理學", "使用者推薦日報", "電影日報", "不許無聊",
    // "設計日報", "大公司日報", "財經日報", "網際網路安全", "開始遊戲", "音樂日報", "動漫日報", "體育日報" };
    private List<NewsListItem> items;
    private Handler handler = new Handler();


    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.menu, container, false);
        tv_download = (TextView) view.findViewById(R.id.tv_download);
        tv_download.setOnClickListener(this);
        tv_main = (TextView) view.findViewById(R.id.tv_main);
        tv_main.setOnClickListener(this);
        lv_item = (ListView) view.findViewById(R.id.lv_item);
        getItems();
        return view;
    }

    private void getItems() {
        items = new ArrayList<NewsListItem>();
        HttpUtils.get(Constant.THEMES, new JsonHttpResponseHandler() {
            @Override
            public void onSuccess(int statusCode, Header[] headers, JSONObject response) {
                super.onSuccess(statusCode, headers, response);
                try {
                    JSONArray itemsArray = response.getJSONArray("others");
                    for (int i = 0; i < itemsArray.length(); i++) {
                        NewsListItem newsListItem = new NewsListItem();
                        JSONObject itemObject = itemsArray.getJSONObject(i);
                        newsListItem.setTitle(itemObject.getString("name"));
                        newsListItem.setId(itemObject.getString("id"));
                        items.add(newsListItem);
                    }
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            lv_item.setAdapter(new NewsTypeAdapter());
                        }
                    });
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });


    }

    public class NewsTypeAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = LayoutInflater.from(getActivity()).inflate(
                        R.layout.menu_item, parent, false);
            }
            TextView tv_item = (TextView) convertView
                    .findViewById(R.id.tv_item);
            tv_item.setText(items.get(position).getTitle());
            return convertView;
        }
    }

    @Override
    public void onClick(View v) {
    }
    }
}

NewsListItem.java:

package krelve.app.kuaihu.model;

public class NewsListItem {
    private String title;
    private String id;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

}

menu_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="15dp"
    android:paddingTop="10dp"
    android:text="新聞條目"
    android:textColor="#FF000000"
    android:textSize="16dp" />

這樣大概就完成了整個主介面的編寫，如果有疏漏的地方，可以到github上看完整程式碼，我會根據進度實時上傳。
github地址
最後歡迎大家到我的個人部落格訪問與評論。

相關推薦

高仿知乎日報(一)

之前寫的高仿知乎日報的程式碼是用eclipse寫的，匯入AndroidStudio之後雖然改改也能跑起來，但是格式很怪異，而且由於時間長了，很多東西都忘了，所以準備用AndroidStudio重寫一遍，順便記錄下過程並將很多需要優化的地方都完成。 首先是介面的

【專案原始碼】- 【模仿知乎日報二】吐血高仿知乎日報

對之前的模仿做品進行了改善改善。。。再改善。。。（僅供學習） 多說無益。。。。上圖才是王道： 這個東西越模仿發現他的東西就越多，離上次的模仿時間已經過去好久了，這一版本的介面看似好很多，但還是

微信小程式日記——高仿知乎日報（上）

該小程式的作者是Oopsguy，我也參與小功能的開發和完善，希望大家能支援一下 本人對知乎日報是情有獨鍾，看我的部落格和github就知道了，寫了幾個不同技術型別的知乎日報APP 要做微信小程式首先要對html，css，js有一定的基礎，還有對微信小

Android 高仿知乎日報（1）

個人蠻喜歡沒事看看知乎的，前陣子湊巧也在網上搜到了知乎日報的API，詳情見某位開發者在Github上的分享：知乎日報 API 分析 靠著這個，我就做了一個高仿知乎日報的小應用 動態圖看起來不怎麼流暢，其實真機執行的話還是很流程的，畢竟這只是一個純

仿知乎日報(3)_MainActivity分析

MainActivity分析 1、結構 2、介面分析 首先第一張圖片是主頁面，是一個Fragment。第二張圖片是左側滑選單，是一個ListView。整體介面是使用MaterialUI中的DrawableLayout佈局。關於Drawa

【iOS】仿知乎日報，RxSwift-Part2-詳情頁的搭建

前言 在上一篇，我們搭建了首頁。而這篇，我們將開始搭建話題詳情頁。 分析 還是先來看下演示gif { "body": "<div class=\"main-wrap content-wrap\">\n<div cla

仿知乎日報(1)_緒論

匯入庫與專案結構分析 1、匯入庫 開源的迷人之處正在於“不用重複的造輪子”，使用開源庫能夠一定程度上加快我們開發的速度，推進軟體開發更快的發展。 在筆者的專案中使用了以下幾個開源庫 compile 'com.android.support:desig

vue低仿知乎日報

概述 一個基於vue的仿知乎日報的前端專案。 關於知乎日報： 知乎日報是一款擁有千萬使用者的資訊類客戶端，每日提供來自知乎社群的精選問答，還有國內一流媒體的專欄特稿。 主要功能 每天更新好文章，包括權威的時事解讀、有趣的生活建議 　　更符合使

手把手教你仿一個知乎日報Android客戶端（一）多圖

本文為作者原創，轉載請註明出處@大蘑菇的部落格 圖片託管服務由貼相簿提供 作為一隻網蟲，肯定是經常泡在網路的海洋裡，有一天偶然看到了知乎日報的API，各方面介面都還挺全面，於是本著“不用白不用”的真理，我決定仿一個知乎日報Adnroid客戶端。

react native之知乎日報原始碼分析一

一、說明 react native出現有一段時間了，最近國內學習react native的人也越來越多。react native開發的資料也很多，具體可以參考：https://github.com/ele828/react-native-guide。 大家可

手把手教你仿一個知乎日報Android客戶端（三）主頁面設計

各位朋友，從本篇文章和開始，手把手教你仿一個Android客戶端就要正式開始探究怎樣實現我們前面的那些需求了。在此開發我們將會使用git作為版本控制工具，並且將程式碼託管到github，好啦，廢話少說，咱們開工。 一、建立專案 怎麼建立專案大家應該都知道

知乎日報 API 分析

.com ava leg 3.6 mar 數量 總數 multi name 聲明 下面全部 API 均由 知乎（Zhihu.Inc） 提供，本人採取非正常手段獲取。獲取與共享之行為或有侵犯知乎權益的嫌疑。若被告知需停止共享與使用。本人會及時刪除此頁面與整個

JAVA開源仿知乎問答原始碼

專案說明 FlyCms 是一個類似知乎以問答為基礎的完全開源的JAVA語言開發的社交網路建站程式，基於 Spring Boot+Bootstrap3+MyBatis+MYSQL+Solr 應用架構，專注於社群內容的整理、歸類和檢索，它集合了問答，digg，wiki 等多個程式的優點，幫助

iOS 知乎日報評論分組展開效果實現

參考部落格 CGAffineTransformMakeTranslation和CGAffineTransformTranslate tableView.contentOffset.y UITableView 移動到指定的區頭位置 在仿寫知乎日報評論介面時遇到

Kotlin實現仿知乎底部導航欄顯示隱藏效果Behavior

        最開始遇見這個問題我的第一想法是給recyclerview新增滑動監聽，然後再給底部導航新增顯示隱藏動畫，可是這麼做很不優雅，一旦recyclerview不止一個就需要給每個都新增一遍監聽（雖然同樣的程式碼cv就行了），這絕不是一個優秀程式設計師的追求。所以就

微信小程式之知乎日報

上一次的《微信小程式之小豆瓣圖書》製作了一個圖書的查詢功能，只是簡單地應用到了網路請求，其他大多數小程式應有的知識。而本次的示例是知乎日報，功能點比較多，頁面也比上次複雜了許多。在我編寫這個DEMO之前，網上已經有很多網友弄出了相同的DEMO，也是非常不錯的，畢竟這個案例很經

知乎上一位朋友總結的特別好的spark的文章，很不錯以轉載！

private def addPendingTask(index: Int, readding: Boolean = false) { // Utility method that adds `index` to a list only if readding=false or it's not alr

【專案原始碼】- 【模仿知乎日報】模仿知乎日報

這個本人目前做的最好的一個模仿品，僅供學習使用，當然裡面也是有很多問題，做的時間不多，將近一個禮拜。（Eclipse製作） 先貼上效果圖： 效果圖上完了，說下涉及的知識點吧： 1、先是進入時的歡迎介面的動畫Animation、網路的判斷 2、viewpager自動動畫

掃描二維碼研究總結（高仿微信掃一掃，輕鬆實現定製掃描介面）

在正文之前說點題外話，加上這篇我已經寫了3篇部落格了，其實我寫部落格的初衷不是想證明自己有多牛，並且我也只是從事安卓開發只有半年時間的小渣，但是不想成為大牛的渣不是好渣，所以我想通過部落格把工作學習中遇到的問題進行研究總結，從而提高自己，與此同時如果能給廣大從事

VUE實戰第一天-知乎日報專案開發

第一步配置webpack：      開啟命令列，在指定資料夾下執行npm init,直接回車     npm install --save-dev webpack      npm install --save-dev -webpack-dev-server 在pa