有勇气的牛排博客
☰

安卓 布局 页面常用组件

有勇气的牛排 1996 安卓 2021-10-21 00:10:08
知止自律打卡-微信小程序APP
一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。
了解产品详情 →
微信搜索「知止自律打卡」
知止自律打卡微信小程序

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>
×
×