QMUI Android源码分析之QMUIGroupListSectionHeaderFooterView的属性样式

上篇文章分析了QMUIGroupListSectionHeaderFooterView的类结构(点击打开链接),那么这个自定义的控件,用到了哪些样式属性呢?如果了解清楚了,那么在我们自己就可以配相应的样式了。

通过构造函数进入到R.attr.QMUIGroupListSectionViewStyle里面去看看。只是一个引用,如下图,看来在其他地方定义了。

《QMUI Android源码分析之QMUIGroupListSectionHeaderFooterView的属性样式》

搜索一下QMUIGroupListSectionViewStyle。在qmui_themes.xml和qmui_themes_compat.xml文件中都有定义。随便选择一个进去看看,原来是样式QMUI.GroupListSectionView。

《QMUI Android源码分析之QMUIGroupListSectionHeaderFooterView的属性样式》

点击QMUI.GroupListSectionView进去看看。看到这里定义了具体样式,设置上下左右各个内边距。

    <style name="QMUI.GroupListSectionView">
        <item name="android:paddingLeft">?attr/qmui_content_padding_horizontal</item>
        <item name="android:paddingRight">?attr/qmui_content_padding_horizontal</item>
        <item name="android:paddingTop">
            @dimen/qmui_group_list_section_header_footer_padding_vertical
        </item>
        <item name="android:paddingBottom">
            @dimen/qmui_group_list_section_header_footer_padding_vertical
        </item>
    </style>

那么这些内边距的值又是多少呢?我们点击第一个?attr/qmui_content_padding_horizontal进去看看(用?attr表示启用的是主题样式属性,可以随着主题变化而变化)。来到了qmui_attrs_base.xml文件,在第一行就看到了。这个格式定义成了dimesion。

<resources>
    <attr name="qmui_content_padding_horizontal" format="dimension"/> <!-- 已废弃 -->
    <attr name="qmui_content_spacing_horizontal" format="dimension"/> <!-- margin 和 padding 等使用的内容通用水平间距 -->

那我们到dimesion的定义去看看,搜索qmui_content_padding_horizontal找到了qmui_dimens.xml文件,里面有qmui_content_padding_horizontal的定义。又指向了qmui_content_spacing_horizontal,而qmui_content_spacing_horizontal被定义为16dp。

    <!-- 全局统一的界面左右间距,例如列表分隔线inset -->
    <dimen name="qmui_content_padding_horizontal">@dimen/qmui_content_spacing_horizontal</dimen> <!-- 已废弃 -->
    <dimen name="qmui_content_spacing_horizontal">16dp</dimen> <!-- margin 和 padding 等使用的内容通用水平间距 -->
    

看来这个值被定义为了16dp。不过我们在使用时,最好不要直接写死为16dp,因为不同的系统版本,不同的分辨率,不同的主题,可能这个值都要不一样,这也是为什么值的引用要绕来绕去了。比如qmui_themes.xml和qmui_themes_compat.xml就是两种主题。

同样的方式,我们可以找到其他边距的具体值。

最后,再看看qmui_group_list_section_layout.xml布局文件和group_list_section_header_textView控件,看他们自身用了哪些属性。通过代码可见,只是设置了字体颜色、字体大小和gravity。

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/group_list_section_header_textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="@dimen/qmui_group_list_section_header_footer_text_size"
        android:textColor="?attr/qmui_config_color_gray_3"
        android:gravity="left" />
</merge>

总结一下QMUIGroupListSectionHeaderFooterView的样式都用了哪些。

  1. 首先外层是一个LinearLayout,设置了4个padding值。
  2. 在LinearLayout有一个TextView,设置了字体颜色、字体大小、gravity属性。

具体的值如下。如果我们要做出一样的效果,只需要设置同样的属性即可。

控件属性属性值
LinearLayoutpaddingLeft

?attr/qmui_content_padding_horizontal

说明:值是16dp

 paddingRight

?attr/qmui_content_padding_horizontal

说明:跟左边距相同。

 paddingTop

@dimen/qmui_group_list_section_header_footer_padding_vertical

说明:值为8dp

 paddingBottom

@dimen/qmui_group_list_section_header_footer_padding_vertical

说明:跟上边距相同。

TextViewtextSize

@dimen/qmui_group_list_section_header_footer_text_size

说明:值是13sp

 textColor?attr/qmui_config_color_gray_3
 gravityleft
    原文作者:Android源码分析
    原文地址: https://blog.csdn.net/weixin_42127613/article/details/80585447
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞