Giter Club home page Giter Club logo

justifytextview's Introduction

JustifyTextView

左右对齐的TextView,适配各种分辨率,完美实现UI需求

一、前言

我们在开发中经常会碰到设计师给出的ui图,上下两个字数不一样的文本框一样长,中间用空格填充了。

设计师是为了整张设计图的美观使用空格填充了文本框使之左右对齐,但是对于开发来说需要考虑到文本框的内容可能会有所变动,字母和汉字占位不一样,还有分辨率不同的情况,所以使用空格填充的方案显然不是非常完美

二、效果图

效果图

三、实现原理

如果是纯汉字的话,实现两端对齐确实可以使用空格就可以

但是除了汉字如果有其他字符如英文不同的字母宽度不一样

便会导致使用固定空格填充会出现宽度对不上的情况

不同字母宽度

于是我们要使用需要字符宽度减去已有所有字符宽度

然后再分配到每两个字符中间

        char[] chars = str.trim().toCharArray();
        /** 需要达到的总长度*/
        float needTextSize = numberWord * textView.getTextSize();
        /** 已有的长度*/
        float realTextSize = 0;
        for (int i = 0; i < chars.length; i++) {
            realTextSize += textView.getPaint().measureText(String.valueOf(chars[i]));
        }
        int l = chars.length;
        /** 计算字符间隔的长度*/
        float scale = (needTextSize - realTextSize) / (float) (l - 1);

四、如何使用

(一)添加库

maven { url "https://jitpack.io" }

implementation 'com.github.Giftedcat:JustifyTextView:1.0.0'

(二)在xml中使用 numberWord:需要达到的汉字字数 extraWords:额外不需要对齐的字符串 *注意 如果添加了ExtraWords,请使用getRealText函数来获取文本框的内容

    <com.giftedcat.justifylib.view.JustifyTextView
        android:id="@+id/tv_titl5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello世界"
        android:textSize="20sp"
        app:extraWords=":"
        app:numberWord="11" />

    <com.giftedcat.justifylib.view.JustifyTextView
        android:id="@+id/tv_titl6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你好World"
        android:textSize="20sp"
        app:extraWords=":"
        app:numberWord="11" />

(三)在代码中使用

        tvTitle1.setText("你好");
        tvTitle1.setExtraWords(":");
        tvTitle1.setNumberWord(11);

justifytextview's People

Contributors

giftedcat avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.