文章目錄

• Android開發 - 基本UI設計
• 1. 頁面部分佔用1/N的情況
• 2. 分割線的實現

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"/>