設(shè)計(jì)公司企業(yè)定位桔子seo網(wǎng)
目錄
- 一、文本顯示
- 1.1 設(shè)置文本內(nèi)容
- 1.2 設(shè)置文本大小
- 1.3 設(shè)置文本顏色
- 二、視圖基礎(chǔ)
- 2.1 設(shè)置視圖寬高
- 2.2 設(shè)置視圖間距
- 2.3 設(shè)置視圖對(duì)齊方式
- 三、常用布局
- 3.1 線性布局LinearLayout
- 3.2 相對(duì)布局RelativeLayout
- 3.3 網(wǎng)格布局GridLayout
- 3.4 滾動(dòng)視圖ScrollView
- 四、按鈕觸控
- 4.1 按鈕控件
- 4.2 點(diǎn)擊和長按事件
- 4.3 禁用與恢復(fù)按鈕
- 五、圖像顯示
- 5.1 圖像視圖ImageView
- 5.2 圖像按鈕ImageButton
- 5.3 同時(shí)展示文本與圖像
一、文本顯示
1.1 設(shè)置文本內(nèi)容
android:text
屬性
<?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"><TextViewandroid:id="@+id/tv_hello"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello"/>
</LinearLayout>
1.2 設(shè)置文本大小
字體大小用sp單位
android:textSize
屬性
<?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:orientation="vertical"><TextViewandroid:id="@+id/tv_dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello"android:textSize="30sp"/>
</LinearLayout>
1.3 設(shè)置文本顏色
android:textColor
屬性
<?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:orientation="vertical"><TextViewandroid:id="@+id/tv_code_system"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="代碼設(shè)置系統(tǒng)自動(dòng)的顏色代碼"android:textSize="17sp"/><TextViewandroid:id="@+id/tv_code_eight"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="代碼設(shè)置8位顏色"android:textSize="17sp"/><TextViewandroid:id="@+id/tv_code_six"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="代碼設(shè)置6位顏色"android:textSize="17sp"/><TextViewandroid:id="@+id/tv_xml"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="xml設(shè)置6位顏色"android:textSize="17sp"android:textColor="#ff00ff"/><TextViewandroid:id="@+id/tv_values"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="xml設(shè)置6位顏色"android:textSize="17sp"android:textColor="@color/teal_200"/><TextViewandroid:id="@+id/tv_code_background"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="背景設(shè)置綠色"android:textSize="17sp"/><!-- android:background="@color/teal_200" -->
</LinearLayout>
二、視圖基礎(chǔ)
2.1 設(shè)置視圖寬高
視圖寬高和間距用dp單位
android:layout_width
設(shè)置寬度
android:layout_height
設(shè)置高度
wrap_content 由內(nèi)容撐開,match_parent 匹配父容器
<?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:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/teal_200"android:layout_marginTop="5dp"android:background="@color/black"android:textSize="17sp"/></LinearLayout>
2.2 設(shè)置視圖間距
間距用dp單位
這里和前端的css屬性非常類似,比如左邊距margin-lfet,在安卓中就是layout_marginLeft
android:padding
設(shè)置內(nèi)邊距
android:layout_margin
設(shè)置外邊距
<?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="300dp"android:orientation="vertical"android:background="#00aaff"android:padding="30dp"><!--中間層布局顏色為黃色--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="20dp"android:background="#ffff99"android:padding="60dp"><!--內(nèi)層視圖顏色為紅色--><Viewandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#00ff00" /></LinearLayout></LinearLayout>
2.3 設(shè)置視圖對(duì)齊方式
android:layout_gravity 設(shè)置父容器的對(duì)齊方式
android:gravity 設(shè)置子組件在父容器的對(duì)齊方式
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_height="300dp"android:layout_width="match_parent"android:background="#ffff99"android:orientation="horizontal"><!-- 第一個(gè)子布局背景為紅色,它在上級(jí)視圖中朝下對(duì)齊,它的下級(jí)視圖則靠左對(duì)齊 --><LinearLayoutandroid:layout_width="0dp"android:layout_height="200dp"android:layout_weight="1"android:layout_margin="10dp"android:padding="10dp"android:background="#ff0000"android:layout_gravity="bottom"android:gravity="center"><!--內(nèi)部視圖的寬度和高度都是100dp,且背景色為青色--><Viewandroid:layout_width="100dp"android:layout_height="100dp"android:background="@color/teal_200"/></LinearLayout><!--第二個(gè)子布局背景為紅色,它在上級(jí)視圖中朝上對(duì)齊,它的下級(jí)視圖則靠右對(duì)齊--><LinearLayoutandroid:layout_width="0dp"android:layout_height="200dp"android:layout_weight="1"android:layout_margin="10dp"android:padding="10dp"android:background="#ff0000"android:gravity="right"><!--內(nèi)部視圖的寬度和高度都是100dp,且背景色為青色--><Viewandroid:layout_width="100dp"android:layout_height="100dp"android:background="@color/teal_200"/></LinearLayout></LinearLayout>
三、常用布局
3.1 線性布局LinearLayout
LinearLayout 為線性布局,它可以通過android:orientation 來設(shè)置頁面的排列方向,vertical是垂直方向,horizontal是水平方向排列
代碼示例:
<!--水平排列--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="橫排第一個(gè)"android:textSize="17sp"android:textColor="#000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="橫排第二個(gè)"android:layout_marginLeft="10dp"android:textSize="17sp"android:textColor="#000000"/></LinearLayout>
3.2 相對(duì)布局RelativeLayout
相對(duì)布局可以相對(duì)某一個(gè)組件設(shè)置對(duì)齊方式,比如要讓A組件在B組件的下面,就可以使用android:layout_below="@id/B"
常用屬性如下:
android:layout_centerInParent="true"
在父容器中間對(duì)齊android:layout_centerHorizontal="true"
在父容器水平居中android:layout_centerVertical="true"
在父容器垂直居中android:layout_alignParentLeft="true"
在父容器左邊對(duì)齊android:layout_alignParentRight="true"
在父容器右邊對(duì)齊android:layout_alignParentTop="true"
在父容器頂部對(duì)齊android:layout_alignParentBottom="true"
在父容器底部對(duì)齊android:layout_toLeftOf="@id/tv_center"
在tv_center組件的左邊android:layout_toRightOf="@id/tv_center"
在tv_center組件的右邊android:layout_above="@id/tv_center"
在tv_center組件的上邊android:layout_below="@id/tv_center"
在tv_center組件的下方android:layout_alignTop="@id/tv_center"
與tv_center組件頂部對(duì)齊android:layout_alignBottom="@id/tv_center"
與tv_center組件底部對(duì)齊android:layout_alignLeft="@id/tv_center"
與tv_center組件左邊對(duì)齊android:layout_alignRight="@id/tv_center"
與tv_center組件右邊對(duì)齊
3.3 網(wǎng)格布局GridLayout
網(wǎng)格布局就是類似表格一樣的布局,用起來還是很方便的
常用屬性:
屬性 | 作用 |
---|---|
android:columnCount | 設(shè)置列數(shù) |
android:rowCount | 設(shè)置行數(shù) |
android:layout_columnWeight | 設(shè)置列寬的權(quán)重 |
android:layout_rowWeight | 縱向乘剩余空間分配方式 |
android:layout_rowSpan | 橫向跨幾行 |
android:layout_columnSpan | 橫向跨幾列 |
代碼示例:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:columnCount="2"android:rowCount="2"><TextViewandroid:layout_height="60dp"android:layout_width="0dp"android:layout_columnWeight="1"android:text="淺紅色"android:background="#ffcccc"android:textColor="#000000"android:textSize="17sp"android:gravity="center"/><TextViewandroid:layout_height="60dp"android:layout_width="0dp"android:layout_columnWeight="1"android:text="橙色"android:background="#ffaa00"android:textColor="#000000"android:textSize="17sp"android:gravity="center"/><TextViewandroid:layout_height="60dp"android:layout_width="0dp"android:layout_columnWeight="1"android:text="綠色"android:background="#00ff00"android:textColor="#000000"android:textSize="17sp"android:gravity="center"/><TextViewandroid:layout_height="60dp"android:layout_width="0dp"android:layout_columnWeight="1"android:text="紫色"android:background="#660066"android:textColor="#000000"android:textSize="17sp"android:gravity="center"/>
</GridLayout>
3.4 滾動(dòng)視圖ScrollView
滾動(dòng)視圖分為垂直滾動(dòng)和水平滾動(dòng)
1.水平滾動(dòng)HorizontalScrollView
<?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:orientation="vertical"><!--水平滾動(dòng)--><HorizontalScrollViewandroid:layout_width="wrap_content"android:layout_height="200dp"><!-- 水平方向的線性布局,兩個(gè)于視圖的顏色分別為青色和黃色--><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal"><Viewandroid:layout_width="300dp"android:layout_height="match_parent"android:background="#aaffff" /><Viewandroid:layout_width="300dp"android:layout_height="match_parent"android:background="#aaff00"/></LinearLayout></HorizontalScrollView></LinearLayout>
2. 垂直滾動(dòng)ScrollView
<?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:orientation="vertical"><!--垂直滾動(dòng)--><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="vertical"><Viewandroid:layout_width="match_parent"android:layout_height="400dp"android:background="#00ff00" /><Viewandroid:layout_width="match_parent"android:layout_height="400dp"android:background="#ffffaa"/></LinearLayout></ScrollView>
</LinearLayout>
四、按鈕觸控
可以通過findViewById找到在xml中定義的組件,只要在xml中定義組件時(shí)指定id即可
4.1 按鈕控件
按鈕控件用Button
標(biāo)簽,按鈕控件自帶樣式,如果想要自定義樣式要先修改res->values->themes.xml中的parent
屬性值為"Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"
代碼示例:
<Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Hello world"android:textColor="@color/black"android:textSize="17sp"/>
4.2 點(diǎn)擊和長按事件
1.點(diǎn)擊事件
定義兩個(gè)按鈕,演示不同的綁定事件的方法
<Buttonandroid:id="@+id/btn_click_single"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="指定點(diǎn)擊事件監(jiān)聽"android:textColor="#000000"android:textSize="17sp"/><Buttonandroid:id="@+id/btn_click_public"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="指定公點(diǎn)擊事件監(jiān)聽"android:textColor="#000000"android:textSize="17sp"/>
在ButtonClickActivity中綁定監(jiān)聽事件。綁定監(jiān)聽事件有兩種方式,第一種讓本類實(shí)現(xiàn)View.OnClickListener接口,重寫onClick方法,第二種是自定義一個(gè)類實(shí)現(xiàn)View.OnClickListener接口,重寫onClick方法
public class ButtonClickActivity extends AppCompatActivity implements View.OnClickListener{private TextView tv_result;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_button_click);tv_result = findViewById(R.id.tv_result);Button btn_click_single = findViewById(R.id.btn_click_single);Button btn_click_public = findViewById(R.id.btn_click_public);btn_click_single.setOnClickListener(new MyOnClickListener(tv_result));btn_click_public.setOnClickListener(this);}//第二種方式@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_click_public){String s = String.format("%s 你點(diǎn)擊了按鈕: %s", DateUtil.getNowTime(), ((Button) v).getText());tv_result.setText(s);}}//第一種方式static class MyOnClickListener implements View.OnClickListener{private final TextView tv_result;public MyOnClickListener(TextView tv_result) {this.tv_result = tv_result;}@Overridepublic void onClick(View v) {String s = String.format("%s 你點(diǎn)擊了按鈕: %s", DateUtil.getNowTime(), ((Button) v).getText());tv_result.setText(s);}}
}
4.3 禁用與恢復(fù)按鈕
按鈕的禁用和啟動(dòng)主要通過enabled屬性來控制,false禁用,true啟用
可以通過xml配置,也可通過java代碼設(shè)置。
1.xml設(shè)置
<Buttonandroid:id="@+id/btn_test"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="測試按鈕"android:enabled="false"android:textColor="#888888"android:textSize="17sp"/>
2.java代碼設(shè)置
public class ButtonEnableActivity extends AppCompatActivity implements View.OnClickListener{private Button btn_test;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_button_enable);btn_test = findViewById(R.id.btn_test);//啟用true|禁用falsebtn_test.setEnabled(true);}
}
五、圖像顯示
標(biāo)簽ImageView
1.android:adjustViewBounds
:設(shè)置ImageView是否調(diào)整自己的邊界來保持所顯示圖片的長寬比。
2.android:maxHeight
:設(shè)置ImageView的最大高度。
3.android:maxWidth
:設(shè)置ImageView的最大寬度。
5.android:src
:設(shè)置ImageView所顯示的Drawable對(duì)象的ID。
6.android:scaleType
圖像在ImageView中的顯示效果,下面是一些常用屬性
- fitXY :橫向、縱向獨(dú)立縮放,以適應(yīng)該ImageView。
- fitStart:保持縱橫比縮放圖片,并且將圖片放在ImageView的左上角。
- fitCenter:保持縱橫比縮放圖片,縮放完成后將圖片放在ImageView的中央。
- fitEnd:保持縱橫比縮放圖片,縮放完成后將圖片放在ImageView的右下角。
- center:把圖片放在ImageView的中央,但是不進(jìn)行任何縮放。
- centerCrop:保持縱橫比縮放圖片,以使圖片能完全覆蓋ImageView。
- centerInside:保持縱橫比縮放圖片,以使得ImageView能完全顯示該圖片。
圖片資源放在下圖中,注意不能用數(shù)字命名開頭
5.1 圖像視圖ImageView
代碼示例:
<?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:orientation="vertical"><ImageViewandroid:id="@+id/iv_scale"android:layout_width="match_parent"android:layout_height="220dp"android:layout_marginTop="5dp"android:scaleType="centerInside"android:src="@drawable/test"/><!--android:src="@drawable/ic_launcher_background"-->
</LinearLayout>
5.2 圖像按鈕ImageButton
標(biāo)簽是ImageButton,它繼承于Button類
代碼示例:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageButtonandroid:layout_width="match_parent"android:layout_height="80dp"android:scaleType="centerCrop"android:src="@drawable/test" />
</LinearLayout>
5.3 同時(shí)展示文本與圖像
常用屬性值:
android:drawableBottom
底部添加圖片android:drawableEnd
在末尾添加圖片android:drawableLeft
在左邊添加圖片android:drawableRight
在右邊添加圖片android:drawabLeStart
在開始位置添加圖片android:drawableTop
在頂部添加圖片
給Button添加圖片和文字
代碼示例:
<?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:orientation="vertical"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="圖標(biāo)在左"android:drawableLeft="@drawable/btn"android:background="#ffffff"android:drawablePadding="5dp"/>
</LinearLayout>