漫画软件开发：EasyComic

说明

本博文里所有的内容均为学习交流，切勿使用项目内容作为商用，不鼓励大家观看盗版。

软件开发的初衷

我是一个特别喜欢看漫画的人，不过我这个人又不大喜欢付费，所以经常在盗版网站上看漫画（这个行为不太好，我鼓励大家去支持正版），众所周知：盗版网站里充斥着各种不堪入目的广告，为了能够更加绿色清新的观看漫画，我在想能不能在我们日常使用的APP上去爬取这些网站的图片，然后在手机软件上看。有了这个想法我立马就开始了动手。

开发准备

我在这里列出我所使用的 IDEA 和 第三方类库：

1. Android Studio （IDEA ）；
2. Glide （第三方类库 ）；
3. Jsoup （第三方类库 ）；
4. http://bnmanhua.com/ （爬取的网站）；
5. https://www.iconfont.cn/ （图标素材网）；

第一步：准备好图片资源

名称	样式
开屏图片
软件图标
菜单突变
返回图标

第二步：确认爬取内容

我这边决定爬取这个网站的热门榜单的内容，漫画热门榜单地址，我们观察仔细发现有四处内容需要我们爬取，一共是漫画图片地址，漫画最新章节，漫画名称，最新更新时间。由此我确认了热门榜单页面的模型。

Comic.java

package top.ieasycloudy.easycomic;

public class Comic {

    private final String iconUrl;
    private final String title;
    private final String sub;
    private final String date;
    private final String href;

    public Comic(String iconUrl, String title, String sub, String date, String href) {
        this.iconUrl = iconUrl;
        this.title = title;
        this.sub = sub;
        this.date = date;
        this.href = href;
    }

    public String getIconUrl() {
        return iconUrl;
    }

    public String getTitle() {
        return title;
    }

    public String getSub() {
        return sub;
    }

    public String getDate() {
        return date;
    }

    public String getHref() {
        return href;
    }
}

这里面还有一个href的属性，是对应着这个漫画所对应的跳转页面，方便我们后续的内容爬取。这里爬取漫画热门榜单的代码我放在这里。

Document document = Jsoup.connect("http://bnmanhua.com/page/hot.html").get();
Element element = document.getElementById("list_img");
assert element != null;
Elements elements = element.getElementsByTag("li");
for(Element element1 : elements) {
    comics.add(new Comic(
            element1.getElementsByTag("img").attr("src"),
            element1.select("p").text(),
            element1.select("span").text(),
            element1.select("em").text(),
            element1.getElementsByTag("a").attr("href")));
}

内容爬取之后再把的数据放在RecycleView里面展示即可，如果大家想看具体的页面设计，可以在博文底部看见我的GitHub地址，这里就不赘述太多，好奇的可以直接去看。

第三步：漫画滚动实现

爬取到漫画对应章节的所有图片之后，如何让将他们拼接在一起？然后实现滚动观看呢？我在这里使用了scrollview作为根控件，然后将动态创建的ImageView至于LinearLayout布局中，最后将LinearLayout置于ScrollView里，代码如下：

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT);
LinearLayout.LayoutParams rootParams = new LinearLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT);
LinearLayout rootLayout = new LinearLayout(LookActivity.this);
rootLayout.setOrientation(LinearLayout.VERTICAL);
rootLayout.setLayoutParams(rootParams);
for(String str1 : list) {
    String picUrl = "https://img.hltongchen.com/" +
            str1.replace("\"", "")
                    .replace("\\", "");
    ImageView img = new ImageView(LookActivity.this);
    img.setLayoutParams(params);
    img.setAdjustViewBounds(true);
    Glide.with(LookActivity.this).load(picUrl).into(img);
    rootLayout.addView(img);
}
picList.addView(rootLayout);

图片里的内容我是通过Glide加载网络图片的方法。所以这样就实现了基本的漫画软件功能呢。

结尾

我希望大家都可以在日常生活中多把自己的想法付诸实现，这样可以磨练自己的技术，也可以获得成就，一举两得。最后放上我的GitHub地址，大家如果喜欢的话可以点点star和关注，我们下次再见。

附录

EasyComic项目地址