常见TextView条目的绘制优化

常见TextView条目的绘制优化_第1张图片
常见TextView条目的绘制优化_第2张图片

  • 这样一个item布局的绘制,需要几个控件?
  • 答:一个。仔细瞅瞅,有爱心图片 + 文字 + 方向键 + 下划线 + 背景
  • 以前是这样绘制的, + 自带背景的分割线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条目的绘制优化_第3张图片

你可能感兴趣的:(Android,Widget)