Android應用開發(fā)學習筆記——目錄索引
本章介紹視圖（View）的基本概念及其用法，包括：如何設置視圖的寬度和高度，如何設置視圖的外部間距和內部間距，如何設置視圖的外部對齊方式和內部對齊方式等。
在Android中，什么是視圖（View）？View是Android中所有控件的基類，不管是簡單的TextView，Button還是復雜的LinearLayout和ListView，它們的共同基類都是View；
View是一種界面層的控件的一種抽象，它代表了一個控件，除了View還有ViewGroup，從名字來看ViewGroup可以翻譯為控件組，即一組View；
在Android中，ViewGroup也繼承了View，這就意味著View可以是單個控件，也可以是由多個控件組成的一組控件；
View坐標對應圖
一、設置視圖的寬和高
Layout XML中的控件屬性：android:layout_width 和 android:layout_height
| 控件屬性 |
取值 |
說明 |
| android:layout_width |
match_parent |
與上級視圖保持一致 |
| wrap_content |
與內容自適應 |
|
| dp具體尺寸 |
以dp為單位的具體具體尺寸，如200dp |
|
| android:layout_height |
match_parent |
與上級視圖保持一致 |
| wrap_content |
與內容自適應 |
|
| dp具體尺寸 |
已dp為單位的具體具體尺寸，如200dp |
在Java代碼中設置視圖寬、高：
-
XML中寬、高屬性需要取值wrap_content
-
調用控件對象的getLayoutParams()獲取布局參數，如TextView：
TextView textView = (TextView)findViewById(R.id.textView);
ViewGroup.LayoutParams layoutParams = textView.getLayoutParams();-
修改布局參數width、height（單位為pixel）
layoutParams.width = dp2px(this, 200);
layoutParams.height = dp2px(this, 50);
int dp2px(Context context, float dp) {
float density = context.getResources().getDisplayMetrics().density;
return (int) (density * dp + 0.5f);
}-
調用控件對象setLayoutParams(LayoutParams params)方法設置
textView.setLayoutParams(layoutParams);二、設置視圖的間距
-
layout_margin：當前視圖與外部視圖（包括上級視圖和平級視圖）之間的距離屬性。
-
padding：當前視圖與內部視圖（包括下級視圖和內部文本）之間的距離屬性。
layout_margin
| 控件屬性 |
說明 |
| android:layout_margin |
一次性指定此視圖與外部視圖四周邊距，適用于所有視圖 |
| android:layout_marginLeft |
指定此視圖與外部視圖左邊距 |
| android:layout_marginTop |
指定此視圖與外部視圖上邊距 |
| android:layout_marginRight |
指定此視圖與外部視圖右邊距 |
| android:layout_marginBottom |
指定此視圖與外部視圖下邊距 |
| android:layout_marginHorizontal |
指定此視圖與外部視圖左側和右側的邊距 |
| android:layout_marginVertical |
指定此視圖與外部視圖上側和下側的邊距 |
| android:layout_marginStart |
效果同android:layout_marginLeft |
| android:layout_marginEnd |
效果同android:layout_marginRight |
padding：
| 控件屬性 |
說明 |
| android:padding |
一次性指定此視圖四周邊距，適用于所有視圖 |
| android:paddingLeft |
指定此視圖左邊距 |
| android:paddingTop |
指定此視圖上邊距 |
| android:paddingRight |
指定此視圖右邊距 |
| android:paddingBottom |
指定此視圖下邊距 |
| android:paddingHorizontal |
指定此視圖左側和右側的邊距 |
| android:paddingVertical |
指定此視圖上側和下側的邊距 |
| android:paddingStart |
指定此視圖左邊距，效果同android:paddingLeft |
| android:paddingEnd |
指定此視圖右邊距，效果同android:paddingRight |
不管是布局還是控件，都是有視圖基類View派生而來，layout_margin和padding是View的一個通用屬性。
<LinearLayout
android:layout_width="300dp"
android:layout_height="150dp"
android:layout_marginTop="32dp"
android:orientation="vertical"
android:background="@color/gray">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="32dp"
android:padding="32dp"
android:background="@color/red"
android:orientation="horizontal">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue" />
</LinearLayout>
</LinearLayout>顯示如下圖：
三、設置視圖的對齊方式
參考：Android界面布局屬性layout_gravity和gravity的區(qū)別_Hard Coder的博客-CSDN博客
-
android:layout_gravity：當前視圖與上級視圖（父容器）的對齊方式。
-
android:gravity：設置子元素在該容器內的對齊方式。
android默認是左上對齊。
layout_gravity和gravity可以設置的值：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical。（一個屬性可以包含多個值，需用 “|” 分開），其具體作用如下：
| 控件屬性 |
取值 |
說明 |
| android:layout_gravity |
top |
朝上對齊，將對象放在其容器的頂部，不改變其大小 |
| bottom |
朝下對齊，將對象放在其容器的底部，不改變其大小 |
|
| left |
靠左對齊，將對象放在其容器的左側，不改變其大小 |
|
| right |
靠右對齊，將對象放在其容器的右側，不改變其大小 |
|
| center |
將對象居中，不改變其大小 |
|
| center_horizontal |
將對象橫向居中，不改變其大小 水平對齊方式，水平方向居中對齊 |
|
| center_vertical |
將對象縱向居中，不改變其大小 垂直對齊方式，垂直方向居中對齊 |
|
| fill |
必要的時候增加對象的橫縱向大小，以完全充滿容器 |
|
| fill_horizontal |
必要的時候增加對象的橫向大小，以完全充滿容器 水平方向填充 |
|
| fill_vertical |
必要的時候增加對象的縱向大小，以完全充滿容器 垂直方向填充 |
|
| clip_horizontal |
附加選項 用于按照容器的邊來剪切對象的左側和/或右側的內容，剪切基于其橫向對齊設置； 左側對齊時，剪切右側；右側對齊時，剪切左側，除此之外剪切左側和右側； 水平方向裁剪 |
|
| clip_vertical |
附加選項 用于按照容器的邊來剪切對象的頂部和/或底部的內容，剪切基于其縱向對齊設置； 頂部對齊時，剪切底部；底部對齊時，剪切頂部，除此之外剪切頂部和底部； 垂直方向裁剪 |
<?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="450dp"
android:background="@color/gray"
android:padding="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:background="@color/white"
android:layout_gravity="bottom"
android:gravity="left"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/red"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:layout_gravity="top"
android:gravity="right"
android:background="@color/white"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/red"/>
</LinearLayout>
</LinearLayout>顯示如下圖：
四、常見控件的基本屬性總結
TextView:
向用戶顯示文本的用戶界面元素
public class TextView?extends?View?implements?ViewTreeObserver.OnPreDrawListener
| XML中屬性 | 描述 |
| android:id | 組件id |
| android:layout_width | 組件寬度 |
| android:lauout_height | 組件高度 |
| android:text | 文本內容 |
| android:textSize | 文本大小 |
| android:textColor | 文本顏色 |
| android:background | 組件背景 |
| android:ellipsize | 當文字長度超過textview寬度時的省略顯示方式 "start"省略號顯示在開頭 "end"省略號顯示在結尾 "middle"省略號顯示在中間 "marquee"以橫向滾動方向顯示(需要獲取當前焦點) |
| android:layout_weight | 權重占比 |
| 設置間距 | |
| android:layout_margin |
一次性指定此視圖與外部視圖四周邊距，適用于所有視圖 |
| android:layout_marginLeft |
指定此視圖與外部視圖左邊距 |
| android:layout_marginTop |
指定此視圖與外部視圖上邊距 |
| android:layout_marginRight |
指定此視圖與外部視圖右邊距 |
| android:layout_marginBottom |
指定此視圖與外部視圖下邊距 |
| android:layout_marginHorizontal |
指定此視圖與外部視圖左側和右側的邊距 |
| android:layout_marginVertical |
指定此視圖與外部視圖上側和下側的邊距 |
| android:layout_marginStart |
效果同android:layout_marginLeft |
| android:layout_marginEnd |
效果同android:layout_marginRight |
| android:padding |
一次性指定此視圖四周邊距，適用于所有視圖 |
| android:paddingLeft |
指定此視圖左邊距 |
| android:paddingTop |
指定此視圖上邊距 |
| android:paddingRight |
指定此視圖右邊距 |
| android:paddingBottom |
指定此視圖下邊距 |
| android:paddingHorizontal |
指定此視圖左側和右側的邊距 |
| android:paddingVertical |
指定此視圖上側和下側的邊距 |
| android:paddingStart |
指定此視圖左邊距，效果同android:paddingLeft |
| android:paddingEnd |
指定此視圖右邊距，效果同android:paddingRight |
| 對齊方式 | |
| android:layout_gravity | 當前視圖與上級視圖（父容器）的對齊方式 |
| android:gravity | 設置子元素在該容器內的對齊方式 |
| android:textStyle | 文本的樣式（正常、粗體、斜體、粗體|斜體） |
| android:layout_gravity | 當前視圖與上級視圖（父容器）的對齊方式 |
| android:gravity | 設置子元素在該容器內的對齊方式 |
| android:textStyle | 文本的樣式（正常、粗體、斜體、粗體|斜體） |
| android:typeface | 文本行之間的顯式高度 |
| ... | ... |
ImageView:
public class ImageView?extends?View
| XML中屬性 | 描述 |
| android:adjustViewBounds |
如果您希望 ImageView 調整其邊界以保持其可繪制對象的縱橫比，請將此設置為 true。 |
| android:baseline |
此視圖中基線的偏移量。 |
| android:baselineAlignBottom |
如果為真，則圖像視圖將基于其底部邊緣進行基線對齊。 |
| android:cropToPadding |
如果為真，圖像將被裁剪以適合其填充。 |
| android:maxHeight |
一個可選參數，用于為此視圖提供最大高度。 |
| android:maxWidth |
一個可選參數，用于為此視圖提供最大寬度。 |
| android:scaleType |
控制應如何調整圖像大小或移動圖像以匹配此 ImageView 的大小。 |
| android:src |
將可繪制對象設置為此 ImageView 的內容。 |
| android:tint |
圖像的著色顏色。 |
| android:tintMode |
用于應用圖像色調的混合模式。 |
EditText:
public class EditText?extends?TextView
| XML中屬性 | 描述 |
| android:textCursorDrawable | 設置光標顏色 |
| android:textColorHint | 輸入框提示字體顏色 |
| android:inputType | 輸入內容類型 |
| android:text | 文本內容 |
| android:enableTextStylingShortcuts | 啟用樣式快捷方式 |
五、測試程序
java：
MainActivity.java
package com.example.viewattributestest;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.os.TestLooperManager;
import android.util.Log;
import android.view.ViewGroup;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private final static String TAG = "lzl-test-ViewAttributes";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textView = (TextView) findViewById(R.id.textView);
ViewGroup.LayoutParams layoutParams = textView.getLayoutParams();
Log.i(TAG, "onCreate: layoutParams.width:" + layoutParams.width + ", layoutParams.height:" + layoutParams.height);
textView.setBackgroundColor(Color.GREEN);
textView.setText("setLayoutParams測試");
layoutParams.width = dp2px(this, 200);
layoutParams.height = dp2px(this, 50);
textView.setLayoutParams(layoutParams);
textView.setText("setLayoutParams:width:" + 200 + ", height:" + 50 + "(dp)");
}
private int dp2px(Context context, float dp) {
float density = context.getResources().getDisplayMetrics().density;
return (int) (density * dp + 0.5f);
}
}xml：
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="300dp"
android:layout_height="150dp"
android:background="@color/gray"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="32dp"
android:background="@color/red"
android:orientation="horizontal"
android:padding="32dp">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="450dp"
android:layout_marginTop="10dp"
android:background="@color/gray"
android:padding="10dp"
app:layout_constraintTop_toBottomOf="@+id/linearLayout"
tools:layout_editor_absoluteX="-16dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@color/white"
android:gravity="left"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/red" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_gravity="top"
android:layout_weight="1"
android:background="@color/white"
android:gravity="right"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/red" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>res/values/colors.xml中添加
<color name="white">#FFFFFFFF</color>
<color name="red">#FFFF0000</color>
<color name="green">#FF00FF00</color>
<color name="blue">#FF0000FF</color>
<color name="gray">#FF888888</color>模擬器上運行
?
源碼及測試apk
百度網盤鏈接:百度網盤 請輸入提取碼 提取碼:test
github下載地址：
GitHub - liuzhengliang1102/AndroidStudio-LearnAppDevelopment文章來源：http://www.zghlxwxcb.cn/news/detail-768333.html
android:enableTextStylingShortcuts文章來源地址http://www.zghlxwxcb.cn/news/detail-768333.html
到了這里，關于Android應用開發(fā)（4）視圖布局基本屬性的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
