Android常見界面布局

Android常見界面布局

布局是指對界面結構的全面規划與安排，通過api中提供的各種布局能夠快速的完成對界面的設計

1.常用布局

• 線性布局(LinearLayout)

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="20dp"
      android:orientation="horizontal"
      android:padding="0dp">
      <!--vertical:垂直的 horizontal:水平的-->
      <!--layout_weight:權重-->
      <!--
          android:layout_margin="20dp"
      android:padding="0dp"
       -->
      <!--調節位置空間及比例，最后分配android:layout_weight="1"-->
      <TextView
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="#ff0000"
          android:text="沖沖沖沖沖沖沖沖沖沖沖沖沖沖沖"
          android:layout_weight="1"
          android:textSize="28sp"
          android:layout_gravity="bottom"/>
  
      <TextView
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="#00ff00"
          android:text="沖沖沖"
          android:layout_weight="1"
          android:textSize="28sp"
          android:layout_gravity="center"/>
  
      <TextView
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="#0000ff"
          android:text="沖沖沖"
          android:layout_weight="1"
          android:textSize="28sp" />
  </LinearLayout>
  

• 相對布局(RelativeLayout)

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent" android:layout_height="match_parent">
  
  
      <!--android:layout_centerInParent 在父容器居中
      android:layout_centerVertical="true" 水平居中
      1. 在參照物的某邊
       android:layout_toLeftOf 在組件左邊
      2.  與參照物某邊對齊
      android:layout_alignLeft
      -->
      <TextView
          android:id="@+id/center"
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:textSize="30sp"
          android:text="屏幕正中"
          android:textColor="#ff0000"
          android:layout_centerInParent="true"  />
      <TextView
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:textSize="30sp"
          android:text="中偏左上"
          android:textColor="#00ff00"
          android:layout_toLeftOf="@id/center"
          android:layout_above="@+id/center"/>
      <TextView
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:textSize="30sp"
          android:text="中偏右上"
          android:textColor="#00ff00"
          android:layout_toRightOf="@id/center"
          android:layout_above="@+id/center"/>
      <TextView
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:textSize="30sp"
          android:text="中偏左下"
          android:textColor="#00ff00"
          android:layout_toLeftOf="@id/center"
          android:layout_below="@+id/center"/>
      <TextView
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:textSize="30sp"
          android:text="中偏右下"
          android:textColor="#00ff00"
          android:layout_toRightOf="@id/center"
          android:layout_below="@+id/center"/>
  
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="邊線對"
          android:textSize="30sp"
          android:background="#0000ff"
          android:layout_alignLeft="@id/center"/>
  </RelativeLayout>
  

• 幀布局(FrameLayout)

• 表格布局(TableLayout)

• 網格布局(GridLayout)

• 約束布局(ConstraintLayout)

2.添加布局

• 利用xml文件設計

• 使用java代碼添加

  package com.example.testmodule;
  
  import android.graphics.Color;
  import android.os.Bundle;
  import android.support.v7.app.AppCompatActivity;
  import android.view.ViewGroup;
  import android.widget.LinearLayout;
  
  public class CodeForLayout extends AppCompatActivity {
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          //setContentView(R. layout . activity_ main);
          //1.設置布局為線性布局
          LinearLayout ll = new LinearLayout(this);
          //2.設置寬高
          ll.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                  ViewGroup.LayoutParams.MATCH_PARENT));
          //3.背景設為紅色
          ll.setBackgroundColor(Color.RED);
          //4.指定此Activity的內容視圖為該線性布局
          setContentView(ll);
      }
  }
  
  

3.布局重要屬性

android:layout_width 寬度

android:layout_height 高度

android:layout_margin 外邊距

android:layout_padding 內邊距

============================

線性布局重要屬性

android:orientation 方向

android:layout_weight 權重

android:layout_gravity

============================

相對布局重要屬性

android:layout_centerInParent 在父容器居中
android:layout_centerVertical="true" 水平居中

   1. **在參照物的某邊**
      **android:layout_toLeftOf 在組件左邊**
             2.  **與參照物某邊對齊**
                     **android:layout_alignLeft**