Android: Xây dựng Ứng dụng đọc sách

1. Giới thiệu

• Hôm nay mình sẽ giới thiệu cho các bạn cách chia 1 đoạn text dài (1 chương sách hay cả cuốn sách) thành dạng trang phù hợp với màn hình điện thoại mà bạn đang sử dụng.
• Mình sẽ xây dựng 1 ứng dụng đọc sách đơn giản để ứng dụng kỹ thuật này. Sau khi hoàn thành phần hướng dẫn này, các bạn sẽ đạt đc kết quả như sau:

2. Triển khai:

• Chúng ta sẽ viết 1 customView để dùng cho tiện lợi
• Đầu tiên cần chia đoạn text truyền vào thành những phần khác nhau phù hợp với từng trang của màn hình điện thoại cho vào 1 List

public void splitTextIntoPages(String text) {

        // offset to spit text
        int offsetI = 0, offsetII;

        StaticLayout layout = new StaticLayout(text, mTextPaint, getWidth() - (leftPadding << 1),
                Layout.Alignment.ALIGN_NORMAL, 0.5f, 10f, false);
        int totalLines = layout.getLineCount();
        int linePerPage = layout.getLineForVertical(getHeight() - (topPadding << 1));

        int i = 0;
        do {
            //
            int line = Math.min(linePerPage * (i + 1), totalLines - 1);
            // position last character of page
            offsetII = layout.getOffsetForHorizontal(line, getWidth() - (leftPadding << 1));
            // get subString
            String sub = text.substring(offsetI, offsetII);

            offsetI = offsetII;
            // add to list
            mTextOfPages.add(sub);
            i++;
        } while (offsetII < text.length());
    }

• Để di chuyển giữa các page chúng ta sẽ làm khi touch vào nửa bên trái của màn hình thì trở về trang trước, touch vào phía bên phải thì trở về trang sau implement bằng cách overide method onTouchEvent ngay trong customView để tăng giảm page vẽ lại view:

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (event.getX() < getWidth() / 2) {
                if (page > 0) {
                    page--;
                }
            } else if (page < mTextOfPages.size() - 1) {
                page++;
            }
            invalidate();
        }
        return super.onTouchEvent(event);
    }

• Thế là ta đã custom xong View dành cho đọc từng trang sách: giờ chỉ việc implement vào file layout và sử dụng đơn giản như sau:

<vn.fstyle.staticlayout.ReadBookView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:bgColor="#ffFDF8A6"
        app:font="fonts/UVNDaLat_R.TTF"
        app:text="@string/text_content"
        app:textColor="#ffA7573E"
        app:textSize="40dp"
        />

3. Demo & source Code: GitHub