（一）Android基础界面设计

初级炼丹师Yiky--1229

已于 2022-07-21 21:25:59 修改

阅读量4.7k

点赞数 2

分类专栏： Android 文章标签： android ui xml

于 2022-03-14 15:37:09 首次发布

本文链接：https://blog.csdn.net/weixin_44524687/article/details/123477517

版权

文章目录

## 第一章界面设计

1.1控制UI界面

1.1.1 使用XML布局控制UI界面

1.在res/layout目录下编写main.xml布局文件

2.在mainActivity.java文件中使用

setContentView(R.layout.activity_main);

显示布局效果

main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!--文字提示-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        style="@style/text"
        />
    <!--按钮-->
    <Button
        android:id="@+id/startButton"
        android:layout_gravity="center_vertical|center_horizontal"
        android:text="@string/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/text"
    />

</androidx.constraintlayout.widget.ConstraintLayout>

res/values/strings.xml 用于定义应用中字符串常量

<resources>
    <string name="title">使用XML布局文件控制UI界面</string>
    <string name="start">单击进入Android...</string>
</resources>

res/values/styles.xml 用于定义组件的样式

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="text">
        <item name="android:textSize">24px</item>
        <item name="android:textColor">#111111</item>
    </style>
</resources>

1.1.2 在代码中控制UI界面（不建议耦合性太高）

1.创建布局管理器

2.创建具体的组件

3.将创建的集体组件添加到布局管理器中

public class MainActivity extends AppCompatActivity {
   

    public TextView text2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        //创建布局管理器
        FrameLayout frameLayout=new FrameLayout(this);
        //设置背景
        frameLayout.setBackgroundDrawable(this.getResources().getDrawable(R.drawable.ic_launcher_background));
        //设置在Activity中显示framelayout
        setContentView(frameLayout);

        TextView text1=new TextView(this);
        text1.setText("在代码中控制UI界面");//文字
        text1.setTextSize(TypedValue.COMPLEX_UNIT_PX,24);//文字大小单位像素
        text1.setTextColor(Color.rgb(1,1,1));//文字颜色
        frameLayout.addView(text1);//添加到布局管理中

        text2=new TextView(this);
        text2.setText("单击进入Android...");//文字
        text2.setTextSize(TypedValue.COMPLEX_UNIT_PX,24);//文字大小单位像素
        text2.setTextColor(Color.rgb(1,1,1));//文字颜色
        FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT//创建保存布局参数的对象
        );
        params.gravity= Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL;//居中显示
        text2.setLayoutParams(params);//设置布局参数
        //按钮的事件监听器
        text2.setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                //对话框标题
                new AlertDialog.Builder(MainActivity.this).setTitle("系统提示")
                .setMessage("确定进入吗？")//对话框显示内容
                .setPositiveButton("确定",//确定按钮对应的事件
                        new DialogInterface.OnClickListener(){
   
                        public void onClick(DialogInterface dialog,int which){
   
                        Log.i("Android","进入");//输出消息日志
                    }
                }).setNegativeButton("退出",//退出按钮对应的事件
                        new DialogInterface.OnClickListener(){
   
                    public void onClick(DialogInterface dialog,int which){
   
                        Log.i("Android","退出");//输出消息日志
                        finish();
                    }
                }).show();
            }
        });

        frameLayout.addView(text2);//text2添加到布局管理器中
    }
}

1.1.3 使用XML和Java代码混合控制UI界面

原则把变化小、行为比较固定的组件放在XML布局文件中，把变化比较多香味控制比较复杂的组件交给Java代码来管理。

layout/activity_main.xml

<?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="horizontal"
    android:id="@+id/layout"
   />

MainActivity.java

public class MainActivity extends AppCompatActivity {
   

    private ImageView[] img=new ImageView[12];//声明一个保存ImageView组件
    private int[] imagePath=new int[]{
   
            R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout layout=(LinearLayout) findViewById(R.id.layout);//获取XML文件中定义的线性布局
        for (int i=0;i<imagePath.length;i++){
   
            img[i]=new ImageView(this);//创建ImageView组件
            img[i].setImageResource(imagePath[i]);//为组件指定图片
            img[i].setPadding(5,5,5,5);//组件的内边距
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(253,148);//设置图片的宽度和高度
            img[i].setLayoutParams(params);//设置组建的布局参数
            layout.addView(img[i]);//把ImageView组件添加到布局管理器中
        }
    }
}

1.1.4 开发自定义的View

Android中所有的UI界面都是由View类和ViewGroup类及其子类组合而成。View类是所有UI类的基类

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhNgPzaP-1647238680230)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646879573783.png)]$

Android里的图形界面都是由View和ViewGroup以及他们的子类构成的： View：所有可视化控件的父类,提供组件描绘和时间处理方法 ViewGroup： View类的子类，可以拥有子控件,可以看作是容器 Android UI中的控件都是按照这种层次树的结构堆叠得，而创建UI布局的方式有两种，自己在Java里写代码或者通过XML定义布局，后者显得更加方便和容易理解！也是我们最常用的手段！

一般情况下，开发Android应用程序的UI界面都不直接使用View和ViewGroup类，而是使用这两个类的子类。开发者可以根据需要，通过继承View类来开发自己的组件。

自定义View组件

1.创建一个继承android.view.View类的View类，并重写构造方法

2.根据需要重写相应的方法。

3.在项目的活动中，创建并实例化自定义View类，并将其添加到布局管理器中

layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/mylayout"
    />

KiteView.java

public class KiteView extends View {
   
    public float bitmapX;//风筝的X轴坐标
    public float bitmapY;//风筝的Y轴坐标


    public KiteView(Context context){
   
        super(context);
        bitmapX=750;//默认显示的X轴坐标
        bitmapY=500;//默认显示的Y轴坐标

    }
    @Override
    protected  void onDraw(Canvas canvas){
   
        super.onDraw(canvas);
        Paint paint=new Paint();//创建并实例化paint对象
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.kite);//根据图片生成位图
        canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint);//生成风筝
        if (bitmap.isRecycled()){
   //判断是否被强制回收
            bitmap.recycle();//强制回收
        }


    }

}

MainActivity.java

public class MainActivity extends AppCompatActivity {
   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        FrameLayout frameLayout = (FrameLayout) findViewById(R.id.mylayout);//获取帧布局管理器
        final KiteView kite = new KiteView(MainActivity.this);//创建并实例化kite类
        //添加事件监听器
        kite.setOnTouchListener(new View.OnTouchListener() {
   
            @Override
            public boolean onTouch(View v, MotionEvent event) {
   
                kite.bitmapX=event.getX();//设置X坐标
                kite.bitmapY=event.getY();//设置Y坐标
                kite.invalidate();//重新绘制图形
                return true;
            }
        });
        frameLayout.addView(kite);//添加到布局管理器中
    }
}

1.2 布局管理器

1.2.1线性布局

在线性布局中，每一行（针对垂直排列）或每一列（针对水平排列）中只能放一个组件，Android的线性布局不会换行，当组件排列到窗体边缘后，后面的组件不会被显示出来。

排列方式由android:orientation控制

对齐方式由android:gravity控制

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-urWPC08G-1647238547036)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646899935270.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rl435TWo-1647238547037)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646900112099.png)]$

线性布局实现4个按钮

layout/main.xml

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/layout"
    tools:context=".MainActivity"
   >
    <Button
        android:text="按钮1"
        android:id="@+id/bt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:text="按钮2"
        android:id="@+id/bt2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:text="按钮3"
        android:id="@+id/bt3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:text="按钮4"
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    
    
</LinearLayout>

1.2.2表格布局

表格布局以行、列的形式来管理放入其中的UI组件。表格布局使用使用标记定义，在表格布局中，可以添加多个标记，每个标记占用一行。由于标记也是容器，所以还可在该标记中添加其他组件，每添加一个组件，表格就会增加一列。在表格布局中，列可以被隐藏，也可以被设置为伸展的，从而填充可利用的屏幕空间，还可以设置为强制收缩，直到表格匹配屏幕大小。

如果在表格布局中，直接向中添加 UI组件，那么该组件将独占一行。

TableLayout继承了LinerLayout，所以它支持后者的全部XML属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wILHzTfQ-1647238547038)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646902135057.png)]$

main.xml

<?xml version="1.0" encoding="utf-8" ?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tablelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:stretchColumns="0,3"
    >
    <TableRow
        android:id="@+id/tableRow01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView/>
            <TextView
                android:text="用户名"
                android:id="@+id/textView1"
                android:textSize="24px"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                />
            <EditText
                android:id="@+id/editText1"
                android:textSize="24px"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:minWidth="200px"
                />
        <TextView/>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView/>
            <TextView
                android:text="密码"
                android:id="@+id/textView2"
                android:textSize="24px"
                android:layout_height="wrap_content"
                />
            <EditText
                android:id="@+id/editText2"
                android:textSize="24px"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:inputType="textPassword"
                />
        <TextView/>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView/>
            <Button
                android:text="登录"
                android:id="@+id/btn02"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                />
            <Button
                android:text="退出"
                android:id="@+id/btn01"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                />
        <TextView/>
    </TableRow>

</TableLayout>

1.2.3 帧布局

在帧布局管理器中，每加入一个组件，都将创建一个空白的去与，通常称为一帧，这些帧都会根据gravity属性执行自动对齐。默认情况下，帧布局从屏幕的左上角坐标点开始布局，多个人组件层叠排序，后面的组件覆盖前面的组件。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8RcG8g1-1647238547039)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646905096094.png)]$

main.xml

<?xml version="1.0" encoding="utf-8" ?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foregroundGravity="bottom|right"
    >
    <TextView
        android:text="红色背景的TextView"
        android:id="@+id/textView01"
        android:background="#FFF00000"
        android:layout_gravity="center"
        android:layout_width="400px"
        android:layout_height="400px"/>

    <TextView
        android:text="橙色背景的TextView"
        android:id="@+id/textView02"
        android:background="#FFFF6600"
        android:layout_gravity="center"
        android:layout_width="300px"
        android:layout_height="300px"/>

    <TextView
        android:text="黄色背景的TextView"
        android:id="@+id/textView03"
        android:background="#FFFFEE00"
        android:layout_gravity="center"
        android:layout_width="200px"
        android:layout_height="200px"/>
</FrameLayout>

1.2.4 相对布局

相对布局是指按照组件之间的相对位置来进行布局，如某个组件在另一个组件的左边、右边、上方或下方等。在Android中，可以在XML布局文件中定义相对布局管理器，也可以使用Java代码来创建。推荐使用前者。在XML布局文件中定义相对布局管理器可以使用标记

在这里插入图片描述

在相对布局管理器中，只有上面介绍的两个属性是不够的，为了更好地控制该布局管理器中各子组件的布局分布，RelativeLayout提供了一个内部类RelativeLayout.LayoutParams,通过该类提供的大量XML属性，可以很好地控制相对布局管理器中各组件的分布方式。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oqHRfzzR-1647238547042)(C:\Users\机械师\AppData\Roaming\Typora\typora-user-images\1646906559924.png)]$

在这里插入图片描述

<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foregroundGravity="bottom|right"
    >
    <!--一个居中显示的文本视图textView1-->
    <TextView
        android:text="发现新版本，您想现在就进行安装吗？"
        android:id="@+id/textView01"
        android:textSize="24px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent=

最低0.47元/天解锁文章

初级炼丹师Yiky--1229

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
（一）Android基础界面设计

第一章界面设计1.1控制UI界面1.1.1 使用XML布局控制UI界面1.在res/layout目录下编写main.xml布局文件2.在mainActivity.java文件中使用setContentView(R.layout.activity_main);显示布局效果main.xml<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xm
复制链接

扫一扫

专栏目录