Android开发 - 基本UI设计

Android开发 - 基本UI设计

• 本博客记录本人在安卓开发时候遇到的一些UI设计的问题以及解决方法
• 记录来自Project-FoodList

1. 页面部分占用1/N的情况

• 示例：
  • 完整界面
    
  • 界面顶部
    
  • 要求顶部界面只占1/3
  • 解决方案
    • 使用线性布局，其属性android:orientation="vertical"，android:weightSum="3"
    • 线性布局里面有两个相对布局，分别设置两个相对布局的layout_weight
    • 关于其中的权重比为2：1，参阅Android布局中的layout_weight和weightSum属性的详解及使用

      <LinearLayout 
          android:orientation="vertical"
          ...
          android:weightSum="3">
          <!-- 上部  -->
          <RelativeLayout
              android:layout_weight="2"
              android:id="@+id/top"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/colorPrimaryDark">
      
              ...
      
          </RelativeLayout>
      
          <!-- 中部和底部  -->
          <RelativeLayout
              android:id="@+id/middle"
              android:layout_weight="1"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
      
              ...
      
          </RelativeLayout>
      </LinearLayout>
      

2. 分割线的实现

• 分割线的实现，方法比较粗暴，直接使用ImageView组件实现
• 给其src设置为一个颜色，然后修改其weight(对应分割线的宽度)以及height(对应分割线的高度)属性以及位置设置

   <ImageView
         android:id="@+id/horLine2"
         android:layout_width="match_parent"
         android:layout_height="15dp"
         android:layout_below="@+id/info"
         android:layout_marginTop="15dp"
         android:src="#1E000000"/>
  

3. 多个组件高度一致，顶对齐，并且水平均匀分布

• 例子：需要实现下图的情况，需要三个button高度一致，顶对齐并且水平均匀分布
  
• 首先需要了解一下约束布局以其使用
  • 约束布局（ConstraintLayout），布局内组件按各种约束排列。每个组件受到三类约束，即其他组件，父容器(parent)，基准线(GuideLine)。 约束布局代码可归纳为以下形式：app:layout_constraint[组件本身的位置]_to[目标位置]Of="[目标id]"。因此若想要组件水平居中，只需设置组件的左右边界与父容器的左右边界分别对齐。同理，组件的垂直居中也可以这么设置。
• 再思考本问题，是否也能使用约束布局来完成呢？使用约束布局，将三个按钮放在一个约束布局里面，每个按钮视图的左侧或者右侧与需要的对齐按钮的相应侧对齐即可，则组件之间就可以处于均匀分布了。

   <android.support.constraint.ConstraintLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
       <Button
           app:layout_constraintRight_toLeftOf="@+id/loadBtn"
           app:layout_constraintLeft_toLeftOf="parent"
           android:id="@+id/saveBtn"
           android:text="SAVE"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
  
       <Button
           android:id="@+id/loadBtn"
           android:text="LOAD"
           app:layout_constraintLeft_toRightOf="@+id/saveBtn"
           app:layout_constraintRight_toLeftOf="@+id/clearBtn"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
  
       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_constraintLeft_toRightOf="@+id/loadBtn"
           app:layout_constraintRight_toRightOf="parent"
           android:id="@+id/clearBtn"
           android:text="CLEAR"/>
  
   </android.support.constraint.ConstraintLayout>