安卓布局页面常用组件

有勇气的牛排 1180 安卓 2021-10-21 00:10:08

1. TextView 显示文本信息

< TextView
	android:id="@+id/textOne"
	android:layout_width="200dp"
	android:layout_height="200dp"
	android:gravity="center"
	android:text="TextView(显示框)"
	android:textColor="#EA5246"
	android:textStyle="bold|italic"
	android:background="#000000"
	android:textSize="18sp" />

id：为TextView设置一个组件id，根据id，我们可以在Java代码中通过findViewById()的方法获取到该对象，然后进行相关属性的设置，又或者使用RelativeLayout时，参考组件用的也是id！
layout_width：组件的宽度，一般写：**wrap_content**或者**match_parent(fill_parent)**，前者是控件显示的内容多大，控件就多大，而后者会填满该控件所在的父容器；当然也可以设置成特定的大小，比如我这里为了显示效果，设置成了200dp。
layout_height：组件的高度，内容同上。
gravity：设置控件中内容的对齐方向，TextView中是文字，ImageView中是图片等等。
text：设置显示的文本内容，一般我们是把字符串写到string.xml文件中，然后通过@String/xxx取得对应的字符串内容的，这里为了方便我直接就写到""里，不建议这样写！！！
textColor：设置字体颜色，同上，通过colors.xml资源来引用，别直接这样写！
textStyle：设置字体风格，三个可选值：**normal**(无效果)，**bold**(加粗)，**italic**(斜体)
textSize：字体大小，单位一般是用sp！
background：控件的背景颜色，可以理解为填充整个控件的颜色，可以是图片哦！

2. EditText 文本编辑

< EditText 
	android:id="@+id/editOne"
    android:layout_width="match_parent"   
    android:layout_height="wrap_content"   
    android:text="TypeHere"
    android:textColor="#EA5246"
    android:textStyle="bold|italic"
    android:textSize="18sp" 
    android:hint="Type"
    android:gravity="center" > 
    <requestFocus />
< /EditText>

android:hint="默认提示文本"
android:textColorHint="#95A1AA"
<requestFocus /> 	//获取焦点
android:minLines="3"  //设置最小行的行数
android:maxLines="3"  //设置最大行的行数

android:singleLine="true"	//实现单行输入不换行

android:textScaleX="1.5"    //设置字与字的水平间隔
android:textScaleY="1.5"    //设置字与字的垂直间隔
    
android:paddingTop = "5dp"	//组件内文字和组件边框的距离

3. Button 普通按钮

< Button
	android:id="@+id/btnOne"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@drawable/ic_launcher"
	android:text="按钮"/>

4. ImageButton 图片按钮

< ImageButton
	android:id="@+id/imageButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/ic_launcher"
	/>

5. ToggleButton 开关按钮

< ToggleButton
	android:id="@+id/toggleButton"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:checked="true"	//将按钮设置为ON状态
	android:textOff="关闭声音"
	android:textOn="打开声音" />

6. RadioButton 单旋钮，选中之后不能取消

< RadioButton
	android:id="@+id/btnMan"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="男"
	android:checked="true"/>

7. RadioGroup 单选按钮组

< RadioGroup
	android:id="@+id/radioGroup"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	
	<RadioButton
		android:id="@+id/btnMan"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="男"
		android:checked="true"/>
	
	<RadioButton
		android:id="@+id/btnWoman"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="女"/>
< /RadioGroup>

8. CheckBox 复选框，选中后可以取消

< CheckBox
	android:id="@+id/checkBox0"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:checked="true"
	android:text="唱歌" />

9. Spinner 下拉列表

< Spinner
	android:id="@+id/spin_one"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:entries="@array/data"
	android:prompt="@string/spin_title"
	android:spinnerMode="dropdown" />

//在res/values下编写一个：myarrays.xml的文件
<string-array name="data">
	<item>帅哥</item>
	<item>美女</item>
	<item>大神</item>
</string-array>

10. ListView 显示列表，可以垂直滚动

< ListView
	android:id="@+id/list_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:entries="@array/data" >
< /ListView>

11. ImageView 显示图像

< ImageView
	android:id="@+id/imageView1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/ic_launcher" />

< ImageView
	android:id="@+id/imageView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/map" />

12. ScrollView 垂直滚动布局

< ScrollView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:scrollbars="horizontal" >
	
	< LinearLayout
		android:layout_width="500sp"
		android:layout_height="match_parent"
		android:orientation="vertical" >
	
	< ImageView
		android:layout_width="500sp"
		android:layout_height="wrap_content"
		android:src="@drawable/map" />
	
	< ImageView
		android:layout_width="500sp"
		android:layout_height="wrap_content"
		android:src="@drawable/map" />
	
	< ImageView
		android:layout_width="500sp"
		android:layout_height="wrap_content"
		android:src="@drawable/map" />
	
	< ImageView
		android:layout_width="500sp"
		android:layout_height="wrap_content"
		android:src="@drawable/map" />
	< /LinearLayout>
</ ScrollView>

13. WebView 显示网页

//添加网络权限
< uses-permission android:name="android.permission.INTERNET" />
    
< WebView
	android:id="@+id/webview"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />



//在activity
public class MainActivity extends Activity {
	WebView webView;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        webView = (WebView) findViewById(R.id.webview);
        //加载网页链接
        webView.loadUrl("https://www.baidu.com");
    }
}

二、视图组

1. 线性布局

< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="horizontal" >
	
	< TextView
		android:id="@+id/textOne"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent"
		android:layout_weight="0"
		android:background="#000000"
		android:text="Text1"
		android:textColor="#EA5246"
		android:textSize="18sp"
		android:textStyle="bold|italic" />
	
	< TextView
		android:id="@+id/textTwo"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent"
		android:layout_weight="1"
		android:background="#00aa00"
		android:text="Text2"
		android:textColor="#EA5246"
		android:textSize="18sp"
		android:textStyle="bold|italic" />
	
	< TextView
		android:id="@+id/text3"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent"
		android:layout_weight="2"
		android:background="#000000"
		android:text="Text3"
		android:textColor="#EA5246"
		android:textSize="18sp"
		android:textStyle="bold|italic" />
	
	< TextView
		android:id="@+id/text4"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent"
		android:layout_weight="3"
		android:background="#00aa00"
		android:text="Text4"
		android:textColor="#EA5246"
		android:textSize="18sp"
		android:textStyle="bold|italic" />

< /LinearLayout>

2.表格布局

< TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/TableLayout1"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:stretchColumns="0" >
	
	< TableRow>
	
		< TextView
			android:id="@+id/row1_text0"
			android:padding="3dip"
			android:text="row1-text0" />
		
		< TextView
			android:id="@+id/row1_text1"
			android:padding="3dip"
			android:text="row1-text1" />
		< /TableRow>
	
	
	< TableRow>
	
	< TextView
		android:id="@+id/row2_text0"
		android:padding="3dip"
		android:text="row2-text0" />
	
	< TextView
		android:id="@+id/row2_text1"
		android:padding="3dip"
		android:text="row2-text1" />
	
	< TextView
		android:id="@+id/row2_text3"
		android:padding="3dip"
		android:text="row2-text3" />
	</ TableRow>
	
	< View
		android:layout_height="2dip"
		android:background="#FF909090" />
	
	< TableRow>
	
	< TextView
		android:id="@+id/row3_text0"
		android:padding="3dip"
		android:text="row3-text0" />
	
	< TextView
		android:id="@+id/row3_text1"
		android:padding="3dip"
		android:text="row3-text1" />
	</ TableRow>

< /TableLayout>

android:stretchColumns="0"	//设置第一列为可拉伸列,让该列填满这一行所有的剩余空间
android:collapseColumns="0,2"	//隐藏第一与第三列
android:shrinkColumns="1"	//设置第二个列为可收缩列

3.框架布局

< FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:foreground="@drawable/ic_launcher" >

    < TextView
        android:id="@+id/text1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143" />

   < TextView
        android:id="@+id/text2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="bottom"
        android:background="#7BFE00" />

    < TextView
        android:id="@+id/text3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00" />

</ FrameLayout>

4.相对布局

< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    < TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Enter your name :"
        android:textSize="20dip" />

    < EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="16dp"
        android:ems="10" >

        < requestFocus />
    < /EditText>

    < Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_toLeftOf="@+id/button2"
        android:text="Cancel" />

    < Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:text="Save" />

</ RelativeLayout>

5.绝对布局

< AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    < Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="0px"
        android:layout_y="0px"
        android:text="按钮1" />

    < Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="200dp"
        android:layout_y="6dp"
        android:text="按钮3" />

    < Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="1dp"
        android:layout_y="142dp"
        android:text="按钮2" />

    < Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="199dp"
        android:layout_y="142dp"
        android:text="按钮4" />

</ AbsoluteLayout>

安卓 布局 页面常用组件

1. TextView 显示文本信息

2. EditText 文本编辑

3. Button 普通按钮

4. ImageButton 图片按钮

5. ToggleButton 开关按钮

6. RadioButton 单旋钮，选中之后不能取消

7. RadioGroup 单选按钮组

8. CheckBox 复选框，选中后可以取消

9. Spinner 下拉列表

10. ListView 显示列表，可以垂直滚动

11. ImageView 显示图像

12. ScrollView 垂直滚动布局

13. WebView 显示网页

二、视图组

1. 线性布局

2.表格布局

3.框架布局

4.相对布局

5.绝对布局

留言

安卓布局页面常用组件