UI组件
1、线性布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="right|center_vertical"> <Button android:id="@+id/bn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bn1"/> <Button android:id="@+id/bn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bn2"/> <Button android:id="@+id/bn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bn3"/> <Button android:id="@+id/bn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bn4"/> <Button android:id="@+id/bn5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bn5"/> </LinearLayout>
结果截图
2、表格布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!--定义第一个表格布局，指定第2列允许收缩，第3列允许拉伸--> <TableLayout android:id="@+id/TableLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:shrinkColumns="1" android:stretchColumns="2"> <!--直接添加按钮，他会自己占一行--> <Button android:id="@+id/ok1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮"/> <!--添加一个表格行--> <TableRow> <!--为该表格行添加3个按钮--> <Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok3" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="收缩的按钮"/> <Button android:id="@+id/ok4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> </TableLayout> <!--定义第二个表格布局，指定第二列隐藏--> <TableLayout android:id="@+id/TableLayout02" android:layout_width="match_parent" android:layout_height="wrap_content" android:collapseColumns="1"> </TableLayout> <!--定义第三个表格布局，指定第2列和第3列可以被拉伸--> <TableLayout android:id="@+id/TableLayout03" android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="1,2"> <!--直接添加按钮，他会自己占一行--> <Button android:id="@+id/ok9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮"/> <!--添加一个表格行--> <TableRow> <!--为该表格行添加3个按钮--> <Button android:id="@+id/ok10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok11" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="拉伸的按钮"/> <Button android:id="@+id/ok12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> <TableRow> <!--为该表格行添加3个按钮--> <Button android:id="@+id/ok13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok14" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="拉伸的按钮"/> </TableRow> </TableLayout> </LinearLayout>
3、帧布局
实例：霓虹灯效果
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--依次定义6个TextView，先定义的TextView位于底层，后定义的TextView位于上层--> <TextView android:id="@+id/view1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="320pt" android:height="320pt" android:background="#f00" /> <TextView android:id="@+id/view2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="280pt" android:height="280pt" android:background="#0f0"/> <TextView android:id="@+id/view3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="240pt" android:height="240pt" android:background="#00f"/> <TextView android:id="@+id/view4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="200pt" android:height="200pt" android:background="#ff0"/> <TextView android:id="@+id/view5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="160pt" android:height="160pt" android:background="#f0f"/> <TextView android:id="@+id/view6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="120pt" android:height="120pt" android:background="#0ff"/> </FrameLayout>
package com.example.myapplication1; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.widget.TextView; import java.util.Timer; import java.util.TimerTask; public class MainActivity extends AppCompatActivity { private int currentColor=0; final int[] colors=new int[]{ R.color.color1, R.color.color2, R.color.color3, R.color.color4, R.color.color5, R.color.color6, }; final int[] names=new int[]{ R.id.view1, R.id.view2, R.id.view3, R.id.view4, R.id.view5, R.id.view6, }; TextView[] views=new TextView[names.length]; Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { //表明消息来自本程序发送的 if(msg.what==0x123) { for(int i=0;i<names.length;i++) { views[i].setBackgroundResource(colors[(i+currentColor)%names.length]); } currentColor++; } super.handleMessage(msg); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); for (int i = 0; i < names.length; i++) { views[i] = (TextView) findViewById(names[i]); } //定义一个线程周期性的改变currentColor变量值 new Timer().schedule(new TimerTask() { @Override public void run() { //发送一条空消息通知系统改变6个TextView组件的背景色 handler.sendEmptyMessage(0x123); } }, 0, 200); } }
结果截图
4、相对布局
实例：梅花布局效果
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--定义该组件位于父容器中间--> <TextView android:id="@+id/view1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/leaf" android:layout_centerInParent="true"/> <!--定义该组件位于view1的上方--> <TextView android:id="@+id/view2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/leaf" android:layout_above="@id/view1" android:layout_alignLeft="@id/view1"/> <!--定义该组件位于view1的下方--> <TextView android:id="@+id/view3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/leaf" android:layout_below="@id/view1" android:layout_alignLeft="@id/view1"/> <!--定义该组件位于view1的左方--> <TextView android:id="@+id/view4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/leaf" android:layout_toLeftOf="@id/view1" android:layout_alignTop="@id/view1"/> <!--定义该组件位于view1的右方--> <TextView android:id="@+id/view5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/leaf" android:layout_toRightOf="@id/view1" android:layout_alignTop="@id/view1"/> </RelativeLayout>
结果截图
5、网格布局
实例：计算机界面
<?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:rowCount="6" android:columnCount="4" android:id="@+id/root"> <!--定义一个横跨4列的文本框--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:textSize="50sp" android:layout_marginLeft="2pt" android:layout_marginRight="2pt" android:padding="3pt" android:layout_gravity="right" android:background="#eee" android:textColor="#000" android:text="0"/> <!--定义一个横跨四列的按钮--> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:text="清除"/> </GridLayout>
package com.example.myapplication3; import androidx.appcompat.app.AppCompatActivity; import android.graphics.drawable.GradientDrawable; import android.os.Bundle; import android.view.Gravity; import android.widget.Button; import android.widget.GridLayout; public class MainActivity extends AppCompatActivity { GridLayout gridLayout; //定义16个按钮的文本 String[] chars=new String[] { "7","8","9","/", "4","5","6","*", "1","2","3","-", ".","0","=","+" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridLayout=(GridLayout)findViewById(R.id.root); for(int i=0;i<chars.length;i++) { Button bn=new Button(this); bn.setText(chars[i]); //设置该按钮的字号大小 bn.setTextSize(40); //设置按钮四周的空白区域 bn.setPadding(5,35,5,35); //指定该组件所在的行 GridLayout.Spec rowSpec=GridLayout.spec(i/4+2); //指定该组件所在的列 GridLayout.Spec columnSpec=GridLayout.spec(i%4); GridLayout.LayoutParams params=new GridLayout.LayoutParams(rowSpec,columnSpec); //指定该组件占满父容器 params.setGravity(Gravity.FILL); gridLayout.addView(bn,params); } } }
结果截图
6、绝对布局
实例：用户登录界面
