android2 | 易学教程

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、绝对布局

实例：用户登录界面

来源：https://www.cnblogs.com/songxinai/p/12469991.html

标签

background

match