TextView và ScrollView

TextView và ScrollView

Chương này mô tả một trong những lớp con View thường được sử dụng nhất trong các ứng dụng: TextView, hiển thị nội dung dạng văn bản trên màn hình. TextView có thể được sử dụng để hiển thị thông báo, phản hồi từ cơ sở dữ liệu hoặc thậm chí toàn bộ các bài báo kiểu tạp chí mà người dùng có thể scroll. Chương này cũng chỉ ra cách bạn có thể tạo chế độ scrolling view của văn bản và các phần tử khác.

Các bài viết liên quan:

TextView

Lớp con View mà bạn có thể sử dụng thường xuyên là lớp TextView, lớp này hiển thị văn bản trên màn hình. Bạn có thể sử dụng TextView cho Chế độ xem ở bất kỳ kích thước nào, từ một ký tự hoặc từ đơn lẻ đến toàn màn hình văn bản. Bạn có thể thêm id tài nguyên vào TextView trong layout và kiểm soát cách văn bản xuất hiện bằng cách sử dụng các thuộc tính trong tệp layout.

Bạn có thể tham chiếu đến TextView trong mã Java của mình bằng cách sử dụng id tài nguyên của nó để cập nhật văn bản hoặc các thuộc tính của nó từ mã của bạn. Nếu bạn muốn cho phép người dùng chỉnh sửa văn bản, hãy sử dụng EditText, một lớp con của TextView cho phép nhập và chỉnh sửa văn bản. Bạn tìm hiểu tất cả về EditText trong một bài học khác.

Thuộc tính TextView

Bạn có thể sử dụng các thuộc tính XML cho TextView để kiểm soát:

Nơi TextView được đặt trong một layout (giống như bất kỳ chế độ xem nào khác)

Cách TextView xuất hiện, chẳng hạn như với màu nền.

Văn bản trông như thế nào trong TextView, chẳng hạn như văn bản ban đầu và kiểu dáng, kích thước và màu sắc của nó.

Ví dụ: để đặt chiều rộng, chiều cao và giá trị văn bản ban đầu của chế độ xem:

<TextView

   android:layout_width=”wrap_content”

   android:layout_height=”wrap_content”

   android:text=”Hello World!”

   <!– more attributes –>

/>

Bạn có thể trích xuất chuỗi văn bản thành một tài nguyên chuỗi (có thể được gọi là hello_world) dễ bảo trì hơn cho các phiên bản ứng dụng nhiều ngôn ngữ hoặc nếu bạn cần thay đổi chuỗi trong tương lai. Sau khi giải nén chuỗi, hãy sử dụng tên tài nguyên chuỗi với @ string / name:

<TextView

   android:layout_width=”wrap_content”

   android:layout_height=”wrap_content”

   android:text=”@string/hello_world”

   <!– more attributes –>

/>

Ngoài android: layout_width và android: layout_height (bắt buộc đối với TextView), các thuộc tính thường được sử dụng nhất với TextView là:

  1. android: text: Đặt văn bản để hiển thị.
  2. android: textColor: Đặt màu của văn bản. Bạn có thể đặt thuộc tính thành giá trị màu, tài nguyên được xác định trước hoặc chủ đề. Các tài nguyên và chủ đề màu sắc được mô tả trong các chương khác.
  3. android: textAppearance: Hình thức của văn bản, bao gồm màu sắc, kiểu chữ, kiểu và kích thước của nó. Bạn đặt thuộc tính này thành tài nguyên hoặc chủ đề kiểu được xác định trước đã xác định các giá trị này.
  4. android: textSize: Đặt kích thước văn bản (nếu android: textAppearance chưa được đặt). Sử dụng kích thước sp (pixel được chia tỷ lệ) chẳng hạn như 20sp hoặc 14,5sp hoặc đặt thuộc tính thành tài nguyên hoặc chủ đề được xác định trước.
  5. android: textStyle: Đặt kiểu văn bản (nếu android: textAppearance chưa được đặt). Sử dụng chữ thường, đậm, nghiêng hoặc đậm | nghiêng.
  6. android: typeface: Đặt kiểu chữ văn bản (nếu android: textAppearance chưa được đặt). Sử dụng bình thường, sans, serif hoặc monospace.
  7. android: lineSpacingExtra: Đặt thêm khoảng cách giữa các dòng văn bản. Sử dụng kích thước sp (pixel theo tỷ lệ) hoặc dp (pixel độc lập với thiết bị) hoặc đặt thuộc tính thành tài nguyên hoặc chủ đề được xác định trước.
  8. android: autoLink: Kiểm soát xem các liên kết như URL và địa chỉ email có được tự động tìm thấy và chuyển đổi thành các liên kết có thể nhấp (có thể chạm) hay không.

Sử dụng một trong những cách sau với android: autoLink:

  1. none: Không khớp với mẫu nào (mặc định).
  2. web: Khớp các URL của trang web.
  3. email: Khớp các địa chỉ email.
  4. phone: Khớp số điện thoại.
  5. map: Khớp các địa chỉ bản đồ.
  6. all: Phù hợp với tất cả các mẫu (tương đương với web | email | điện thoại | bản đồ).

Ví dụ: để đặt thuộc tính khớp với URL web, hãy sử dụng android: autoLink = “web”.

Sử dụng các Tags được nhúng trong văn bản

Trong một ứng dụng truy cập các bài báo hoặc tạp chí, các bài báo xuất hiện có thể đến từ một nguồn trực tuyến hoặc có thể được lưu trước trong cơ sở dữ liệu trên thiết bị. Bạn cũng có thể tạo văn bản dưới dạng một chuỗi dài trong tài nguyên string.xml.

Trong cả hai trường hợp, văn bản có thể chứa các thẻ HTML được nhúng hoặc các mã định dạng văn bản khác. Để hiển thị chính xác trong chế độ xem văn bản, văn bản phải được định dạng theo các quy tắc sau:

  • Nhập \ n để biểu thị phần cuối của một dòng và một \ n khác để biểu thị một dòng trống. Bạn cần thêm các ký tự cuối dòng để giữ cho các đoạn văn không chạy vào nhau.
  • Nếu bạn có dấu nháy đơn (‘) trong văn bản của mình, bạn phải loại bỏ nó bằng cách đặt trước nó bằng dấu gạch chéo ngược (\’). Nếu bạn có một dấu ngoặc kép trong văn bản của mình, bạn cũng phải thoát khỏi nó (\ “). Bạn cũng phải thoát khỏi bất kỳ ký tự không phải ASCII nào khác. 
  • Nhập các thẻ HTML và </b> xung quanh các từ được in đậm.
  • Nhập các thẻ HTML và </i> xung quanh các từ được in nghiêng. Tuy nhiên, lưu ý rằng nếu bạn sử dụng dấu nháy đơn cong trong một cụm từ in nghiêng, bạn nên thay thế chúng bằng dấu nháy đơn thẳng..
  • Bạn có thể kết hợp in đậm và in nghiêng bằng cách kết hợp các thẻ, như trong … từ … </i> </b>. Các thẻ HTML khác bị bỏ qua.
  • Để tạo ra một chuỗi văn bản trong tệp string.xml, bao gồm toàn bộ văn bản trong <string name = “your_string_name”> </string> (your_string_name là tên bạn cung cấp tài nguyên chuỗi, chẳng hạn như article_text).
  • Khi bạn nhập hoặc dán văn bản vào tệp string.xml, các dòng văn bản không quấn quanh dòng tiếp theo — chúng kéo dài ra ngoài lề phải. Đây là hành vi đúng — mỗi dòng văn bản mới bắt đầu từ lề trái đại diện cho toàn bộ đoạn văn.

Mẹo: Nếu bạn muốn xem văn bản được bao bọc trong string.xml, bạn có thể nhấn Quay lại để nhập phần cuối dòng cứng hoặc định dạng văn bản trước trong trình soạn thảo văn bản có phần cuối dòng cứng. Kết thúc sẽ không được hiển thị trên màn hình.

Tham chiếu đến TextView trong Code

Để tham chiếu đến TextView trong mã Java của bạn, hãy sử dụng id tài nguyên của nó. Ví dụ: để cập nhật TextView bằng văn bản mới, bạn sẽ:

Tìm TextView và gán nó cho một biến. Bạn sử dụng phương thức findViewById () của lớp View và tham chiếu đến dạng xem bạn muốn tìm bằng cách sử dụng định dạng này:

R.id.view_id

Trong đó view_id là định danh tài nguyên cho chế độ xem (chẳng hạn như show_count):

mShowCount = (TextView) findViewById (R.id.show_count);

Sau khi truy xuất Chế độ xem dưới dạng biến thành viên TextView, bạn có thể đặt văn bản thành văn bản mới (trong trường hợp này là mCount_text) bằng cách sử dụng phương thức setText () của lớp TextView:

mShowCount.setText (mCount_text);

Scrolling views

Nếu thông tin bạn muốn hiển thị trong ứng dụng của mình lớn hơn màn hình của thiết bị, bạn có thể tạo chế độ scrolling view mà người dùng có thể scroll theo chiều dọc bằng cách vuốt lên hoặc xuống hoặc theo chiều ngang bằng cách vuốt sang phải hoặc sang trái.

Thông thường, bạn sẽ sử dụng chế độ scrolling view cho các tin bài, bài báo hoặc bất kỳ văn bản dài nào không hoàn toàn phù hợp trên màn hình. Bạn cũng có thể sử dụng chế độ scrolling view để kết hợp các chế độ xem (chẳng hạn như TextView và Button) trong một chế độ scrolling view.

Tạo layout với ScrollView

Lớp ScrollView cung cấp layout cho dạng scrolling view dọc. (Để scroll theo chiều ngang, bạn sẽ sử dụng HorizontalScrollView.) ScrollView là một lớp con của FrameLayout, có nghĩa là bạn chỉ có thể đặt một View dưới dạng con trong đó; con đó chứa toàn bộ nội dung để scroll. 

TextView và ScrollView

Mặc dù bạn chỉ có thể đặt một View con bên trong ScrollView, View con có thể là một ViewGroup với hệ thống phân cấp các phần tử View con, chẳng hạn như LinearLayout. Một lựa chọn tốt cho Chế độ xem trong ScrollView là LinearLayout được sắp xếp theo hướng dọc. Một ScrollView với một LinearLayout

TextView và ScrollView

ScrollView và hiệu suất

Tất cả nội dung của ScrollView (chẳng hạn như ViewGroup với các phần tử View) chiếm bộ nhớ và phân cấp chế độ xem ngay cả khi các phần không được hiển thị trên màn hình. Điều này làm cho ScrollView hữu ích để scroll trơn tru các trang văn bản dạng tự do, vì văn bản đã có trong bộ nhớ. Tuy nhiên, ScrollView với ViewGroup với các phần tử View có thể sử dụng nhiều bộ nhớ, điều này có thể ảnh hưởng đến hiệu suất của phần còn lại của ứng dụng của bạn.

Việc sử dụng các phiên bản LinearLayout lồng nhau cũng có thể dẫn đến phân cấp chế độ xem quá sâu, có thể làm chậm hiệu suất. Việc lồng một số phiên bản của LinearLayout sử dụng thuộc tính android: layout_weight có thể đặc biệt tốn kém vì mỗi Chế độ View con cần được đo hai lần. Cân nhắc sử dụng các layout phẳng hơn như RelativeLayout hoặc GridLayout để cải thiện hiệu suất.

Các layout phức tạp với ScrollView có thể gặp vấn đề về hiệu suất, đặc biệt là với hình ảnh. Chúng tôi khuyên bạn không nên sử dụng hình ảnh trong ScrollView. Để hiển thị danh sách dài các mục hoặc hình ảnh, hãy xem xét sử dụng RecyclerView, được đề cập trong một bài học khác.

ScrollView với TextView

Để hiển thị một bài báo tạp chí có thể scroll trên màn hình, bạn có thể sử dụng một RelativeLayout bao gồm một TextView riêng biệt cho tiêu đề bài báo, một TextView khác cho tiêu đề phụ của bài báo và một TextView thứ ba cho văn bản bài báo scroll (xem hình bên dưới), được đặt trong một ScrollView. Phần duy nhất của màn hình sẽ scroll sẽ là ScrollView với nội dung bài viết.

TextView và ScrollView

ScrollView với LinearLayout

Một ScrollView chỉ có thể chứa một View con; tuy nhiên, View đó có thể là một ViewGroup chứa một số phần tử View, chẳng hạn như LinearLayout. Bạn có thể lồng một ViewGroup chẳng hạn như LinearLayout trong ScrollView, do đó scroll mọi thứ bên trong LinearLayout.

Ví dụ: nếu bạn muốn tiêu đề phụ của một bài báo scroll cùng với bài viết ngay cả khi chúng là các phần tử TextView riêng biệt, hãy thêm LinearLayout vào ScrollView dưới dạng một Chế độ xem con như thể hiện trong hình bên dưới, sau đó di chuyển tiêu đề phụ TextView và phần tử bài viết vào LinearLayout. Người dùng scroll toàn bộ LinearLayout bao gồm tiêu đề phụ và bài viết.

TextView và ScrollView

Khi thêm một LinearLayout bên trong ScrollView, hãy sử dụng match_parent cho thuộc tính LinearLayout android: layout_width để khớp với chiều rộng của ScrollView chính và sử dụng wrap_content cho thuộc tính LinearLayout android: layout_height để làm cho nó vừa đủ để bao gồm nội dung của nó.

Vì ScrollView chỉ hỗ trợ scroll theo chiều dọc, bạn phải đặt thuộc tính định hướng LinearLayout thành chiều dọc (android: orient = “vertical”), để toàn bộ LinearLayout sẽ scroll theo chiều dọc. 

Ví dụ: layout XML sau sẽ scroll TextView bài viết cùng với TextView article_subheading:

TextView và ScrollView

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply