Android app开发布局以及简单控件总结

app的开发和web的开发有内在的一致性，逻辑上的相似性。具体体现

标签代表空间或者元素
可以直接在标签上写属性
可以用id标识标签，通过id选择该标签并被设置
从大逻辑上讲标签在做的都是展示、交互、反馈

所以我建议有条件的web开发前端，可以学习一下app开发。

app常见布局

线性布局 LinearLayout

线性布局好比是用一根线把它内部视图串起来，故而内部视图之间的排序是固定的，要么从左到右，要么从上到下排列。

在XML文件中，LinearLayout通过属性android:orienttation区分两种方向，其中从左到右排列叫做水平方向，属性值为horizontal；从上到下排列叫作垂直方向，属性值为vertical。

默认为水平方向排列。

除了方向之外，线性布局还有一个权重的概念。所谓权重，指的是线性布局的下级视图各自拥有的多大比例的宽和高。

一个简单的线性布局

xml 复制代码

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

</LinearLayout>

上面有一个垂直方向的线性布局，然后在这个线性布局中放置了两个文本视图（TextView）和一个按钮（Button）。这些视图元素会按照从上到下的顺序排列。如果想改变排列方向，可以将android:orientation属性的值改为"horizontal"，这样视图元素就会按照从左到右的顺序排列。

相对布局

相对布局（RelativeLayout）允许开发者在屏幕上定位视图（View）元素的位置，这些位置是相对于布局或者其他视图元素的。

相对布局的主要特点是，可以定义视图元素之间的相对位置关系，例如A在B的左边，C在D的下面等等。为复杂的布局设计提供了很大的灵活性。

一个简单的相对布局

xml 复制代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:text="Hello, World!"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_below="@id/textView1"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

上面有一个文本视图（TextView）和一个按钮（Button）。文本视图位于相对布局的中心，通过android:layout_centerInParent="true"实现的。按钮位于文本视图的下方，并且在水平方向上居中，这是通过android:layout_below="@id/textView1"和android:layout_centerHorizontal="true"实现的。

网格布局

网格布局（GridLayout）也是Android中的一种布局方式，它允许将界面分割成多个网格，然后在这些网格中放置视图（View）元素。每个视图元素可以占据一个或多个网格。

网格布局的主要特点是，可以定义视图元素在网格中的位置和占据的网格数。

一个简单的网格布局的示例

xml 复制代码

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4" />

</GridLayout>

上面网格布局，被分割成2行2列。然后在这个网格布局中放置了4个按钮，每个按钮占据一个网格。按钮的位置是按照从左到右，从上到下的顺序自动分配的。

滚动视图

滚动视图（ScrollView）允许用户通过滚动屏幕来查看超出屏幕范围的内容。ScrollView只能有一个直接的子视图，但这个子视图可以是一个包含多个子视图的布局。

ScrollView可以让用户滚动查看大量的内容，而不是限制在屏幕的大小内。

一个简单的ScrollView的示例

xml 复制代码

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 2" />

        <!-- More TextViews -->

    </LinearLayout>

</ScrollView>

上面的ScrollView，它的子视图是一个垂直方向的线性布局（LinearLayout）。然后在这个线性布局中放置了多个文本视图（TextView）。如果这些文本视图的总高度超过了屏幕的高度，用户就可以通过滚动屏幕来查看所有的文本视图。

app简单控件

文本显示

文本显示控件主要是TextView。TextView是一个用户界面元素，它允许在应用中显示文本。

一个简单的TextView的使用示例

xml 复制代码

<TextView
    android:id="@+id/my_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="20sp"
    android:textColor="#000000"
    android:gravity="center"/>

上面创建了一个TextView，设置了以下属性：

android:id：这是TextView的唯一标识符，可以使用这个ID在Java代码中引用这个TextView。
android:layout_width和android:layout_height：这两个属性定义了TextView的宽度和高度。wrap_content表示让TextView的大小刚好包裹住它的内容。
android:text：这个属性定义了TextView显示的文本。
android:textSize：这个属性定义了文本的大小，sp是一个单位，表示"scale-independent pixels"，它会根据用户的字体大小设置进行缩放。
android:textColor：这个属性定义了文本的颜色，#000000表示黑色。
android:gravity：这个属性定义了文本在TextView中的对齐方式，center表示居中对齐。

可以在Java代码中使用findViewById方法和TextView的ID来获取这个TextView的引用，然后使用setText方法来改变它的文本：

java 复制代码

TextView myTextView = (TextView) findViewById(R.id.my_textview);
myTextView.setText("New text");

按钮控件

按钮控件主要是Button。Button是一个用户界面元素，它允许用户通过点击它来触发一个动作。

一个简单的Button

xml 复制代码

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"/>

创建了一个Button，设置了以下属性：

android:id：这是Button的唯一标识符，可以使用这个ID在Java代码中引用这个Button。
android:layout_width和android:layout_height：这两个属性定义了Button的宽度和高度。wrap_content表示让Button的大小刚好包裹住它的内容。
android:text：这个属性定义了Button显示的文本。

可以在Java代码中使用findViewById方法和Button的ID来获取这个Button的引用，然后使用setOnClickListener方法来设置一个点击监听器，当用户点击这个Button时，监听器中的onClick方法就会被调用：

java 复制代码

Button myButton = (Button) findViewById(R.id.my_button);
myButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Do something when the button is clicked
    }
});

在onClick方法中，可以编写当用户点击这个Button时需要执行的代码。

图像显示

图像显示控件主要是ImageView。ImageView是一个用户界面元素，它允许在应用中显示图像。

一个简单的ImageView的使用

xml 复制代码

<ImageView
    android:id="@+id/my_imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"/>

在这个示例中，创建了一个ImageView，设置了以下属性：

android:id：这是ImageView的唯一标识符，可以使用这个ID在Java代码中引用这个ImageView。
android:layout_width和android:layout_height：这两个属性定义了ImageView的宽度和高度。wrap_content表示让ImageView的大小刚好包裹住它的内容。
android:src：这个属性定义了ImageView显示的图像。@drawable/my_image表示图像文件是在res/drawable目录下的my_image文件。

可以在Java代码中使用findViewById方法和ImageView的ID来获取这个ImageView的引用，然后使用setImageResource方法来改变它的图像：

java 复制代码

ImageView myImageView = (ImageView) findViewById(R.id.my_imageview);
myImageView.setImageResource(R.drawable.new_image);

在这段代码中，R.drawable.new_image表示新的图像文件是在res/drawable目录下的new_image文件。

总结

本文总结了android开发当中的常见布局：线性布局、相对布局、网格布局和滚动视图。

因为我是web前端开发出身，对比web开发和android开发，开发的布局是有相似性的：

从解决问题角度来说都是要合理的放置元素或者控件
web开发也有布局概念：flex布局、默认布局、浮动布局、网格布局、滚动视图

关于android控件，web前端开发和android开发其实是两个不同场景。但要解决的问题是有很多一致性。所以控件或组件或元素或标签的概念是相似的。内在逻辑也有很多相似性。慢慢总结这方面。

(本文完)