UI编写经验小结--文案布局等小技巧

控件、图组合

        若是图面积  》控件，

•                 RelativeLayout ，图单独放
•                LinearLayout，图作为LinearLayout的背景background

•    <RelativeLayout
       android:id="@+id/rl_audio_tips"
       android:layout_width="@dimen/dp_218"
       android:layout_height="@dimen/dp_152">
            <LinearLayout
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:orientation="vertical">
  
               <View
                  android:layout_width="wrap_content"
                  android:layout_height="@dimen/dp_30"/>
  
               <ImageView
                  android:layout_width="@dimen/dp_218"
                  android:layout_height="@dimen/dp_117"
                  android:src="@mipmap/home_audio_tips"/>
             </LinearLayout>
  
            <TextView
                   android:layout_width="@dimen/dp_178"
                   android:layout_height="@dimen/dp_68"
                   android:paddingLeft="@dimen/dp_13"
                   android:gravity="center_vertical"
                   android:layout_centerInParent="true"
                   android:text="@string/key_no_audio_tips"
                   android:lineSpacingExtra="@dimen/dp_2"
                   android:textColor="@color/textNewBg"
                  android:textSize="@dimen/sp_14"
                                          />
     </RelativeLayout>
  

       若图面积 = 控件

•                 RelativeLayout ，图单独作为ImageView,大小一致
•                 控件中，图作为背景background

       

<TextView
                android:id="@+id/tv_start"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/home_code_connect_unable"
                android:gravity="center"
                android:textStyle="bold" />

         若图面积 《 控件

                RelativeLayout ，图单独作为ImageView,设置图片尺寸大小

图套图组合

•         RelativeLayout，大图作为RelativeLayout的背景background，小图作为其中的ImageView
•         RelativeLayout，2个ImageView去组合

<RelativeLayout
            android:layout_width="@dimen/dp_236"
            android:layout_height="@dimen/dp_236"
            android:layout_centerInParent="true"
            android:background="@mipmap/home_scan_bg"
            >

            <ImageView
                android:id="@+id/iv_line"
                android:layout_width="@dimen/dp_236"
                android:layout_height="@dimen/dp_113"
                android:src="@mipmap/scan_light"
                tools:ignore="UseAppTint" />
        </RelativeLayout>

不规则图，需要在图上放控件，和其他控件组合：

•         需要和不规则图组合对齐时，使用View 去填补需要组合的控件，使其长宽一致
•         不规则图上有控件且居中，计算图边距到控件的位置，填补view，让控件处于填补后的布局中间点
•         设置一个view，处于中心点，控件距离这个view去相对布局

 

编辑框文案超出：

•         精简文案
•         设置最大边距，让其在超出默认宽度，就扩大
•         在代码中计算文案大小，超出就扩大控件宽度

只有文案：

        设置padding距离，让其在比较长的文案显示，左右也能留有空白

控件状态变化：

•         控件的background，设置点击、按下等不同状态的样式，在代码中去处理何时可点击
•         直接在代码中，改变控件的背景状态

                

居中设置：

        水平居中

        对于 RelativeLayout 布局，

                 `android:layout_centerHorizontal="true"` 
        对于 LinearLayout 布局，

                 `android:layout_gravity="center_horizontal"` 

        

        垂直居中

        对于 RelativeLayout 布局，

               android:layout_centerVertical="true"
        对于 LinearLayout 布局，

            android:layout_gravity="center_vertical"

          水平垂直居中

        对于 RelativeLayout 布局，

              android:layout_centerInParent="true"
        对于 LinearLayout 布局，

           android:layout_gravity="center"

        文字居中

       `android:gravity="center"