Android 界面布局-LinearLayout
發(fā)布時(shí)間:2021-05-14 13:51:34
Android 界面布局-LinearLayout
為了更好地管理Android應(yīng)用的用戶界面里的各組件,Android提供了布局管理器。通過使用布局管理器,Android應(yīng)用圖形用戶界面具有良好的平臺無關(guān)性。推薦使用布局管理器來管理組件的分布、大小,而不是直接設(shè)置組件的位置和大小。可以使用布局管理器嵌套布局管理器,即也可作為一個(gè)UI組件來使用。
LinearLayout可以控制組件橫向排列或者縱向排列,內(nèi)容不會換行,超出屏幕部分將不會顯示出來。
下面列出幾種之后可能會用到LinearLayout中的屬性,遺忘時(shí)查詢即可。
屬性名 | 意義 |
orientation | 布局方式,有horizontal(水平布局)和vertical(垂直布局)兩種方式 |
id | 組件名稱,方便之后調(diào)用 |
layout_width | 該組件的寬度 |
layout_height | 該組件的高度 |
layout_weight | 權(quán)重 |
layout_gravity | 該組件(在父容器)中的對齊方式 |
gravity | 該組件所含子組件在其內(nèi)部的對齊方式 |
background | 設(shè)置背景圖片或填充顏色 |
orientation屬性有horizontal和vertical兩個(gè)參數(shù)供選擇,參數(shù)的值決定了布局方式。
①水平布局(horizontal)
代碼如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第一個(gè)文本框"
android:background="#ffff00"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第二個(gè)文本框"
android:background="#ff0000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第三個(gè)文本框"
android:background="#008000"/>
</LinearLayout>
②垂直布局(vertical)
代碼如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="第一個(gè)文本框"
android:background="#ffff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="第二個(gè)文本框"
android:background="#ff0000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="第三個(gè)文本框"
android:background="#008000"/>
</LinearLayout>
在這之前先簡要說明下match_parent,fill_parent和wrap_content。
match_parent和fill_parent在效果上相同,都是使該組件的寬度或高度填滿父元素,也就是說令其寬度或高度與父元素的寬度或高度一致。
用wrap_content產(chǎn)生的效果由該組件本身的實(shí)際情況決定,例如一個(gè)TextView組件,它的寬度就是由文本實(shí)際的內(nèi)容多少決定的。
回到正題,weight,這里理解為權(quán)重,或是比例,需要注意的是:
水平布局時(shí),按比例分配父元素的寬度(width)
豎直布局時(shí),按比例分配父元素的高度(height)
先看一個(gè)例子(以水平布局舉例):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第一個(gè)文本框"
android:layout_weight="1"
android:background="#ffff00"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第二個(gè)文本框"
android:layout_weight="1"
android:background="#ff0000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="第三個(gè)文本框"
android:layout_weight="1"
android:background="#008000"/>
</LinearLayout>
還是之前水平布局的例子,只是我們給每個(gè)TextView添加了一句android:layout_weight="1"
貌似達(dá)到了我們的預(yù)期,三個(gè)TextView按1:1:1分完了總寬度。
但有時(shí)候可能無法達(dá)到預(yù)期的效果,請看下面的例子,將三個(gè)TextView的android:layout_weight依次設(shè)置為'1','2','3':
可以看出三個(gè)文本框的大小不一致了,但是明顯沒有達(dá)到我們預(yù)期的1:2:3的效果。這是因?yàn)槲覀冊O(shè)置的每個(gè)TextView的寬度為wrap_content,每個(gè)組件都有本身由text內(nèi)容決定的寬度,只是將剩余的在寬度上的空間按比例分好后再加在其本身的寬度上。
所以說,為達(dá)到真正的比例效果:
水平布局時(shí),將每個(gè)組件的寬度(width)設(shè)置為0dp
豎直布局時(shí),將每個(gè)組件的高度(height)設(shè)置為0dp
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="第一個(gè)文本框"
android:layout_weight="1"
android:background="#ffff00"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="第二個(gè)文本框"
android:layout_weight="2"
android:background="#ff0000"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="第三個(gè)文本框"
android:layout_weight="3"
android:background="#008000"/>
</LinearLayout>
在現(xiàn)實(shí)開發(fā)中有時(shí)經(jīng)常會動態(tài)創(chuàng)建布局,并且在布局中添加動態(tài)添加組建來達(dá)到展示目的。下面例子使用button來觸發(fā)單擊事件,然后在單擊事件中動態(tài)廠家一個(gè)水平的LinearLayout,并在此中添加文本組建和按鈕組件,最后添加到id為linearTable的垂直LinearLayout中,點(diǎn)擊delete刪除按鈕自動刪除所在行。
頁面代碼如下:
<?xmlversion="1.0"encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp">
<Button
android:id="@+id/addRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="add"
android:textAllCaps="false" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="180dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearTable"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Java代碼如下:
packagecom.example.a05_list;
importandroidx.appcompat.app.AppCompatActivity;
importandroid.annotation.SuppressLint;
importandroid.content.Context;
import android.os.Bundle;
importandroid.view.View;
import android.widget.ArrayAdapter;
importandroid.widget.Button;
importandroid.widget.LinearLayout;
importandroid.widget.Spinner;
import android.widget.TextView;
importstatic com.example.a05_list.R.drawable.*;
import staticandroid.widget.LinearLayout.HORIZONTAL;
public classMainActivity extends AppCompatActivity {
privateButton m_AddRow = null;
private LinearLayout m_Table =null;
private Context m_this = null;
private intm_Count = 0;
@Override
protected voidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_AddRow =findViewById(R.id.addRow);
m_Table =findViewById(R.id.linearTable);
m_this = this;
m_AddRow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
LinearLayout row = new LinearLayout(m_this);
row.setOrientation(HORIZONTAL);
TextView textID = new TextView(m_this);
textID.setText(Integer.toString(m_Count));
textID.setWidth(80);
m_Count++;
TextView text = new TextView(m_this);
text.setText("test");
text.setWidth(120);
Button buttonCmd = newButton(m_this);
buttonCmd.setText("delete");
buttonCmd.setOnClickListener(newView.OnClickListener() {
@Override
public void onClick(View v) {
LinearLayout tmp = (LinearLayout) v.getParent();
m_Table.removeView(tmp);
}
});
row.addView(textID);
row.addView(text);
row.addView(buttonCmd);
row.setBackgroundResource(under_line);
m_Table.addView(row);
}
});
}
}
- 上一篇:C++應(yīng)該怎么學(xué)
- 下一篇:基于OpenCV的條形碼檢測