Cách đặt đúng chiều cao dòng cho Android?

Question

Tôi là một kiến ​​trúc sư UX làm việc với một nhóm các nhà phát triển Android chủ yếu là cơ sở. Chúng tôi đang gặp sự cố khi đặt chiều cao dòng trong Android.

Chúng tôi đang sử dụng thông số thiết kế Material Design làm hướng dẫn cho ứng dụng của chúng tôi. Đặc biệt, bạn có thể xem thông số chiều cao dòng ở đây:

https://material.google.com/style/typography.html#typography-line-height

Hãy sử dụng Body 2 như ví dụ của chúng tôi. Spec cho biết loại là 13sp hoặc 14sp, và hàng đầu (chiều cao dòng - cùng một điều) nên được 24dp.

Đây là vấn đề: các nhà phát triển này nói với tôi rằng không có cách nào để đặt chiều cao dòng giống như trong mã. Thay vào đó, họ đang nói với tôi để đo khoảng cách giữa hai dòng văn bản và cung cấp cho họ thước đo đó - giả sử là 4dp. Họ muốn điều này cho mỗi kiểu văn bản mà chúng tôi đang sử dụng.

Chúng tôi đang sử dụng luồng Sketch> Zepelin cho thông số kỹ thuật. Có vẻ lạ khi tôi có thể tạo kiểu phông chữ (có thể dễ dàng là lớp/kiểu trong mã) là 13sp với 24dp hàng đầu và không thể đặt hàng đầu, nhưng thay vào đó phải thêm một biện pháp thứ 3 để trộn. Không có chỗ nào trong Sketch hoặc Zepelin cho một thước đo như vậy "giữa các dòng".

Đây có phải là cách thực hiện, hoặc có cách thích hợp để đặt chiều cao dòng không?

Answer 1

Có, bạn có thể dễ dàng thực hiện trong Android. Tôi là một nhà phát triển Android có kinh nghiệm và cũng là một nhà thiết kế. Tôi có thể hiểu được vấn đề của bạn.

Giải pháp rất đơn giản. Chỉ cần sử dụng hai thuộc tính này trong TextView, lineSpacingExtra và lineSpacingMultiplier của bạn.

Ví dụ,

<TextView 
     android:layout_width="match_parent" 
     android:layout_height="80dp" 
     android:lineSpacingMultiplier="2.5" 
     android:lineSpacingExtra="6dp"/> 

EDIT

Đây là những chỉ dành cho việc kiểm soát khoảng cách giữa các dòng và không ký tự (aka Kerning). Để kiểm soát khoảng cách ký tự, bạn có thể sử dụng thư viện này mà tôi đã tạo, KerningViews.

EDIT 2

Các android:lineSpacingExtra thêm không gian thêm thực tế giữa các dòng. Bạn nên sử dụng điều này. Chỉ để cung cấp cho bạn thêm thông tin, tôi đã cung cấp cho bạn thuộc tính android:lineSpacingMultiplier hoạt động như một yếu tố tỷ lệ với chiều cao của TextView.

Nếu bạn muốn 15dp khoảng cách giữa các dòng, hãy sử dụng android:lineSpacingExtra="15dp" và bạn tốt để sử dụng.

Answer 2

Đây là một cách để làm điều đó theo chương trình.

public static void setLineHeight(TextView textView, int lineHeight) { 
    int fontHeight = textView.getPaint().getFontMetricsInt(null); 
    textView.setLineSpacing(dpToPixel(lineHeight) - fontHeight, 1); 
} 

public static int dpToPixel(float dp) { 
    DisplayMetrics metrics = getResources().getDisplayMetrics(); 
    float px = dp * (metrics.densityDpi/160f); 
    return (int) px; 
} 

Answer 3

Dưới đây là Phản ứng giải pháp Native của: thêm một khoảng thời gian mà điều chỉnh chiều cao dòng https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

đồng nghiệp thiết kế của tôi sử dụng chiều cao dòng quá mức và một nỗi đau của nó mà nó không bao giờ trông ngay sau khi xé trong ứng dụng.

Tôi sẽ lên kế hoạch tạo một lớp TextView tùy chỉnh lấy một arg bằng XML và sẽ đăng nó ở đây sau.