CSDN简易客户端Demo（解析HTML）

依然是从鸿洋大神的博客学习到的内容（http://blog.csdn.net/lmj623565791/article/details/26676137），由于是原博主14年的内容，有些东西自己做了修改更新，整理如下。

主要的难点就是HTML的解析。

先看最终实现效果：

主界面ViewPager+Fragment（ListView） 点击后跳转到另一个Activity。

直接来看代码

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {

    ViewPager viewPager;
    List<FragmentForViewPager> fragmentList;
    MyFragmentAdapter myFragmentAdapter;
    List<TextView> tagList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.id_view_pager);
        fragmentList = new ArrayList<>();
        /*使用newInstance(i)方式新建Fragment*/
        for (int i = 0; i < 4; i++) {
            FragmentForViewPager fragment = FragmentForViewPager.newInstance(i);
            fragmentList.add(fragment);
        }
        myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(myFragmentAdapter);
        viewPager.addOnPageChangeListener(this);

        int[] tagId = new int[]{R.id.id_0, R.id.id_1, R.id.id_2, R.id.id_3};
        tagList = new ArrayList<>();
        for (int i = 0; i < tagId.length; i++) {
            TextView textView = (TextView) findViewById(tagId[i]);
            textView.setOnClickListener(this);
            textView.setTag(i);
            tagList.add(textView);
        }
        /*初始化一开始显示的ViewPager页对应的tag高亮*/
        tagList.get(viewPager.getCurrentItem()).setTextColor(Color.BLACK);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

        restoreText();
        tagList.get(position).setTextColor(Color.BLACK);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onClick(View v) {
        restoreText();
        int num = (Integer) v.getTag();
        tagList.get(num).setTextColor(Color.BLACK);
        viewPager.setCurrentItem(num);
    }

    private void restoreText() {
        for(TextView tag : tagList){
            tag.setTextColor(Color.WHITE);
        }
    }
}

MainActivity算是常规的，在我之前的文章里（http://blog.csdn.net/yin_zihao/article/details/50843346）有比较详细的讲解了，这里不再赘述。唯一值得注意的是我们用.newInstance(int newsType)的方式创建自定义的Fragment来作为每个Fragment的标记。原因是官方不推荐直接传入参数实例化Fragment，这么做的好处网上也已经有详细的讲解了。

这里主要的关键内容都在我们自定义的Fragment里:

public class FragmentForViewPager extends Fragment implements AbsListView.OnScrollListener {
    public static String typeKey = "newsType";
    private List<NewsItem> newsItemList;
    private List<NewsItem> downLoadItemList;
    private NewsItemAdapter newsItemAdapter;
    private NewsItemURl newsItemURL = new NewsItemURl();
    private int page = 1;
    private int newsType;
    private int currentNum = 0;
    
    public static FragmentForViewPager newInstance(int newsType) {
        Bundle bundle = new Bundle();
        bundle.putInt(typeKey, newsType);
        FragmentForViewPager fragment = new FragmentForViewPager();
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_layout, null);
        newsType = getArguments().getInt(typeKey);
        newsItemList = new ArrayList<>();
        /*用来临时保存下载的NewsItem*/
        downLoadItemList = new ArrayList<>();
        ListView itemListView = (ListView) view.findViewById(R.id.id_item_list_view);
        newsItemAdapter = new NewsItemAdapter(getContext(), R.layout.news_item_layout, newsItemList);
        itemListView.setAdapter(newsItemAdapter);
        itemListView.setOnScrollListener(this);
        itemListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                NewsItem newsItem = newsItemList.get(position);
                Intent intent = new Intent(getContext(), NewsActivity.class);
                intent.putExtra("href", newsItem.getHref());
                startActivity(intent);
            }
        });
        /*开启线程加载ListView的内容*/
        new NewsItemTask().execute(newsType);
        return view;
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

        /*当滑动到当前列表底部时开启线程加载下一页。currentNum用来避免多次执行*/
        if ((firstVisibleItem + visibleItemCount == totalItemCount) && currentNum != totalItemCount) {
            page++;
            new NewsItemTask().execute(newsType);
            currentNum = totalItemCount;
        }
    }

    private class NewsItemTask extends AsyncTask<Integer, Void, Void> {

        @Override
        protected Void doInBackground(Integer... params) {
            int newsType = params[0];
            /*getNewsItemURL()方法会根据当前卡片的新闻类型和页数返回对应的网址*/
            String urlString = newsItemURL.getNewsItemURL(newsType, page);

            try {
                downLoadItem(urlString);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(Void aVoid) {

            newsItemList.addAll(downLoadItemList);
            newsItemAdapter.notifyDataSetChanged();
        }

        private void downLoadItem(String url) throws IOException {
            /*利用第三的Jsoup库解析HTML得到一个Document*/
            Document document = Jsoup.connect(url).get();
            Elements elements = document.getElementsByClass("unit");

            downLoadItemList = new ArrayList<>();

            for (Element element : elements) {
                NewsItem newsItem = new NewsItem();

                Element h1_Element = element.getElementsByTag("h1").first();
                Element h1_a_Element = h1_Element.getElementsByTag("a").first();

                Element dt_Element = element.getElementsByTag("dt").first();

                String title = h1_a_Element.text();
                newsItem.setTitle(title);
                /*对应的文章链接*/
                String href = h1_a_Element.attr("href");
                newsItem.setHref(href);

                try {
                    /*如果有图片*/
                    Element dt_a_Element = dt_Element.child(0);
                    Element imgElement = dt_a_Element.child(0);
                    String src = imgElement.attr("src");
                    newsItem.setImgUrl(src);
                } catch (IndexOutOfBoundsException ignored) {
                }

                Element h4_Element = element.getElementsByTag("h4").first();
                Element dateElement = h4_Element.getElementsByClass("ago").first();
                String date = dateElement.text();
                newsItem.setDate(date);

                Element dl_Element = element.getElementsByTag("dl").first();
                Element dd_Element = dl_Element.getElementsByTag("dd").first();
                String content = dd_Element.text();
                newsItem.setContent(content);

                downLoadItemList.add(newsItem);
            }
        }
    }
}

我们先用了一个自定义类中的方法返回我们需要的数据页网址，这个方法类如下：

public class NewsItemURl {
    public static final String NEWS_LIST_URL = "http://www.csdn.net/headlines.html/";
    public static final String NEWS_LIST_URL_YIDONG = "http://mobile.csdn.net/mobile/";
    public static final String NEWS_LIST_URL_YANFA = "http://sd.csdn.net/sd/";
    public static final String NEWS_LIST_URL_YUNJISUAN = "http://cloud.csdn.net/cloud/";
    public static final String NEWS_LIST_URL_YEJIE = "http://news.csdn.net/news/";

    public String getNewsItemURL(int newsType,int page){
        String urlString = null;

        switch (newsType){
            case NewsType.YEJIE:
                urlString = NEWS_LIST_URL_YEJIE;
                break;
            case NewsType.YIDONG:
                urlString = NEWS_LIST_URL_YIDONG;
                break;
            case NewsType.YANFA:
                urlString = NEWS_LIST_URL_YANFA;
                break;
            case NewsType.YUNJISUAN:
                urlString = NEWS_LIST_URL_YUNJISUAN;
                break;
            default:
                break;
        }
        urlString += page;

        return urlString;
    }
}

然后就根据具体的HTML解析我们想要得到的数据，观察网页的一下HTML源代码

可以看到每个名为“unit”的class包含了一个NewsItem的全部内容，我们遍历所有的unit用Jsoup给我们提供的API得到我们想要的所有内容存储到每个NewsItem中。每个NewsItem类代表一个新闻项，包含了标题，摘要，链接等信息。

下载完成后就把 newsItemList设置给Adapter进行列表显示。看一下Adapter：

public class NewsItemAdapter extends ArrayAdapter<NewsItem> {

    private List<NewsItem> newsItemList;
    private int resource;
    private ImageLoader imageLoader = ImageLoader.getInstance();
    private DisplayImageOptions options;

    public NewsItemAdapter(Context context, int resource, List<NewsItem> objects) {
        super(context, resource, objects);
        this.newsItemList = objects;
        this.resource = resource;

        imageLoader.init(ImageLoaderConfiguration.createDefault(getContext()));
        options = new DisplayImageOptions.Builder().showImageForEmptyUri(R.drawable.ic_launcher)
                .showImageOnFail(R.drawable.ic_launcher).build();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;
        ViewHolder viewHolder;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resource, null);
            viewHolder = new ViewHolder();
            viewHolder.title = (TextView) view.findViewById(R.id.id_item_title);
            viewHolder.content = (TextView) view.findViewById(R.id.id_item_content);
            viewHolder.date = (TextView) view.findViewById(R.id.id_item_date);
            viewHolder.image = (ImageView) view.findViewById(R.id.id_image);
            view.setTag(viewHolder);
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();
        }

        NewsItem newsItem = newsItemList.get(position);
        viewHolder.title.setText(newsItem.getTitle());
        viewHolder.content.setText(newsItem.getContent());
        viewHolder.date.setText(newsItem.getDate());
        if (newsItem.getImgUrl() != null) {
            viewHolder.image.setVisibility(View.VISIBLE);
            imageLoader.displayImage(newsItem.getImgUrl(), viewHolder.image, options);
        }else {
            viewHolder.image.setVisibility(View.GONE);
        }
        return view;
    }

    class ViewHolder {
        TextView title;
        TextView content;
        TextView date;
        ImageView image;
    }
}

这里我们导入了开源的ImageLoader加载图片，如果当前NewsItem在之前解析的时候存在src（即图片对应链接）则get出来，加载显示图片。布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/id_item_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:paddingTop="6dp"
        android:paddingLeft="6dp"
        android:text="title"/>

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

        <ImageView
            android:id="@+id/id_image"
            android:padding="6dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            android:visibility="visible"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingRight="10dp"
            android:paddingEnd="10dp"
            android:paddingLeft="6dp"
            android:paddingStart="6dp"
            android:paddingTop="6dp">

            <TextView
                android:id="@+id/id_item_content"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:maxLines="2"
                android:text="3D打印机一直以来只能进行单向操作，任务一旦开始便无法反悔。不过最近一批研究生研发了一种新型打印机，让你在打印的同时，可以修改重塑之前的设计。让我们一起来看看这个神奇的设备究竟是怎样的吧。"/>
            
            <TextView
                android:id="@+id/id_item_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:paddingRight="16dp"
                android:paddingBottom="6dp"
                android:text="date"/>
            
        </LinearLayout>
    </LinearLayout>
    
</LinearLayout>

至此ListView基本完成能显示了。

然后是对应每个NewsItem的点击跳转，我们之前已经给NewsItem设置了OnItemClickListener，并且把每个NewsItem对应的链接也用intent.putExtra("href", newsItem.getHref()) 的方法传递过去了。那么再启动对应Activity的时候相应的加载应该就可以了。我们来看一下具体的代码：

public class NewsActivity extends AppCompatActivity {

    private TextView titleTextView;
    private TextView contentTextView;
    private NewsDetail newsDetail;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_detail_layout);

        Bundle extra = getIntent().getExtras();
        String href = extra.getString("href");
        titleTextView = (TextView) findViewById(R.id.id_news_title);
        contentTextView = (TextView) findViewById(R.id.id_news_content);
        new NewsDetailTask().execute(href);
    }

    class NewsDetailTask extends AsyncTask<String, Void, Void> {

        @Override
        protected Void doInBackground(String... params) {
            String url = params[0];

            try {
                Document document;
                document = Jsoup.connect(url).get();
                newsDetail = new NewsDetail();
                Element h1_Element = document.getElementsByTag("h1").first();
//                Element parent = h1_Element.parent();
//                Log.d("yzh", "parent = " + parent);
                String title = h1_Element.text() + "\n";
                newsDetail.setTitle(title);

                Elements contentElements = document.getElementsByTag("p");
                for (Element contentElement : contentElements) {
                    /*每段文字开头空两格*/
                    String content = "\u3000\u3000" + contentElement.text() + "\n\n";
                    newsDetail.setContent(content);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(Void aVoid) {
            titleTextView.setText(newsDetail.getTitle());
            contentTextView.setText(newsDetail.getContent());
        }
    }

    class NewsDetail {
        private String title = "default title";
        private String content = "";

        public String getTitle() {
            return title;
        }

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

        public String getContent() {
            return content;
        }

        public void setContent(String content) {
            this.content += content;
        }
    }

}

做法和之前加载列表类似，开启线程解析HTML，加载内容。

在尝试解析的时候出了一些问题：尝试还是根据网页源码去用getElementsByClass()的方法传入源代码中的class（见图片）得到Element，结果得到的总是空。

后来先用getElementsByTag()得到Elemens再用.parent()得到它的父级Element，打印出的Log（见下图）发现实际只存在两个class，并且与网页上的并不一致。这样我们去通过class解析当然什么都得不到。至于为什么会这样，希望有了解HTML的朋友留言解答。

另外还有一个缺陷就是这里我只用了ScrollView中设置两个TextView来显示标题和具体新闻内容，并没有显示图片。因为图片要加载到文字中间，并且不同文章图片的位置也不确定，就不能确定ImageView怎么放置，可能需要用到动态加载的方式来实现……鸿洋大神用的是ListView，每个子项根据内容来决定布局的方法。总之比较麻烦，这里我先偷懒了。有时间再来完善。