Android开发 | 布局与控件（一）

Albresky 收录于 Android 布局

2022-07-29 2024-09-15 - 次阅读 - 条评论

几种常见布局与控件的应用

一、常见的几种控件

TextView
EditView
Button
ImageView
ProcessBar
AlertDialog
ProgressDialog

/androiddev-charpter3-ui-1/ViewRelationShip.webp — 基本View控件的继承关系

几种TextView控件的布局中，比较容易混淆的是android:layout_gravity与android:gravity属性。前者是相对于父控件而言，修饰的控件本身；而后者是相对于自身而言，修饰的是控件内的元素。比如“代码之火”的gravity属性为center_horizontal，“点赞”、“关注”、“在看”设置其layout_gravity属性值分别为left、center_horizontal、right，“CodeFire”的gravity属性为left时，效果如下：

/androiddev-charpter3-ui-1/gravity_sample.webp — Gravity属性样例

ProgressBar的可见属性andorid:visibility共有三种，分别为visible、invisible和gone，表示可见、不可见和不加载（不仅不可见，亦不占用布局控件。类似于html标签中style属性为“display:none”）。在代码中可通过以下代码修改进度条可见性和进度：

1
2
3
4
5
6
7
8


// 可见性
myProgressBar.setVisibility(View.VISIBLE);
myProgressBar.setVisibility(View.INVISIBLE);
myProgressBar.setVisibility(View.GONE);

// 进度
int prog = 20;
myProgressBar.setProgress(prog);

AlertDialog的事件触发，《第一行代码》中是通过接口实现的，且必须重写onClick()方法。

笔者在学习过程中欲将其和之前学习的菜单Menu的selected结合使用，故不能将触发写在onClick()方法内，所以onClick()方法在重写时，空函数体即可。

AlertDialog内置方法setPositiveButton()和setNegativeButton()分别能够对弹窗的“确认”和“取消”之意对应，具体的响应可在这两个方法的第二参数中重写点击事件监听器：

1
2
3
4
5
6
7


myAlertDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener(){
  @Override
  public void onClic(DialogInterface dialog, int which){
      Toast.makeText(myAlertDialog.this, "I already understand", Toast.LENGTH_SHORT).show();
      dialog.dismiss();
  }
 });

另外，当ProgressDialog的setCancelable()方法传入false时，使用返回键无法关闭弹窗。

二、几种常见内置布局

线性布局
相对布局
帧布局
百分比布局

布局能够嵌套，比如在线性布局中嵌套相对布局，在垂直分布的线性布局中嵌套水平分布的线性布局。布局LinearLayout与RelativeLayout暂时没什么好讲的；帧布局FrameLayout所用之处极少，暂时也不介绍；百分比布局又分为百分比帧布局PercentFrameLayout、百分比相对布局PercentRelativeLayout，百分比布局相当于分别继承了帧布局和相对布局，扩充了使用百分比进行定位的特性，增强了这两个布局的定位能力，使用方法几乎没有改变。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


<!-- 布局嵌套的一个例子 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_marginTop="50dp"
        android:src="@mipmap/android_robot" />

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"

        android:layout_marginTop="80dp"
        android:layout_marginRight="50dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="Account"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/account"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Input your account"
            android:maxLength="15" />
    </LinearLayout>
    
    <Button
        android:id="@+id/btn_login"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Login" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_marginTop="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"/>

</LinearLayout>

三、自定义控件

对于一套复用的布局，可以将其通过include的方式，引入其他布局文件，如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <include layout="@layout/mytitle" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="600dp" />
</LinearLayout>

对于自定义控件，除定义布局外，还需要重写相关的类。比如此时我们需要自定义一个标题栏，而不使用系统内置的标题栏，我们可以使自定义的标题栏类（假如布局是线性布局）继承于LinearLayout，然后重载构造函数。

例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


public class TitleBar extends LinearLayout {
    public TitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.mytitle, this);

        Button btn_home = findViewById(R.id.btn_titleBar_home);
        Button btn_logout = findViewById(R.id.btn_titleBar_logout);
        btn_home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent((Activity) getContext(), ImageView.class);
                ((Activity) getContext()).startActivity(intent);
                ((Activity) getContext()).finish();
            }
        });
        btn_logout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent((Activity) getContext(), Login.class);
                getContext().startActivity(intent);
                ((Activity) getContext()).finish();
            }
        });
    }
}

四、demo效果（上文与本文）

给作者倒杯卡布奇诺 ~

赞赏

支付宝

微信