欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

常见TextView条目的绘制优化

程序员文章站 2022-05-30 13:30:23
...

常见TextView条目的绘制优化
常见TextView条目的绘制优化

  • 这样一个item布局的绘制,需要几个控件?
  • 答:一个。仔细瞅瞅,有爱心图片 + 文字 + 方向键 + 下划线 + 背景
  • 以前是这样绘制的,<Linearlayout 横向布局包裹 <ImageView + TextView + ImageView> + 自带背景的分割线View>
  • 现在,通过drawableLeft + text + drawableRight + background 完成!

那么,接下来开始制作。

  • 详细分析:drawable都好理解,重点关注带有长度较短的下划线的背景制作
  <TextView
        android:id="@+id/profile_fav_tv"
        style="@style/Default_TextSize_Middle"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_100px_in720p"
        android:layout_marginTop="@dimen/_426px_in720p"
        android:background="@drawable/profile_tv_bg"
        android:drawableLeft="@mipmap/profile_fav"
        android:drawableRight="@mipmap/into"
        android:gravity="center_vertical"
        android:text="@string/profile_favorite"
        app:layout_constraintTop_toTopOf="parent"/>

profile_tv_bg.xml 带有长度较短的下划线的背景

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        >
        <shape>
            <solid android:color="#FF313131"/>
        </shape>
    </item>
    <item android:bottom="@dimen/_2px_in720p"
        >
        <shape>
            <solid android:color="#FF232323"/>
        </shape>
    </item>


     <item android:right="@dimen/_680px_in720p">
         <shape android:shape="rectangle">
             <solid android:color="#FF232323"/>
         </shape>
     </item>
</layer-list>

  • 下划线的颜色:#FF313131
  • 背景颜色:#FF232323
  • 原理:遮盖,画一个下划线颜色的背景,用textView的背景覆盖,并留出bottom 2dp的缝隙,完成下划线,但长度与textView的宽度一样,再画一个在左面的textView背景颜色的举行遮盖,则完成一个带有长度不与textView齐平的下划线的textview背景。
    可参考如下绘制过程:
    常见TextView条目的绘制优化