Android 学习之《第一行代码》第二版 笔记(四)UI开发的点点滴滴(一)

一、常用控件使用方法(部分属性)

1. TextView:用于显示文本信息

A. 效果图

TextView效果图

B. 代码

<TextView
	android:id="@+id/text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="24sp"
    android:textColor="#00ff00"
    android:text="Hello World!" />

C. 注解

1.) android:id 指定唯一标识符。
2.) android:layout_width && android:layout_height 指定控件宽度和高度。
可选值:match_parentfill_parentwrap_content;match和fill意义相同,官方更推荐使用match_parentmatch_parent表示当前控件的大小和父布局大小一样;wrap_content表示控件内容决定当前控件大小。也可以为宽度和高度指定一个固定大小。
3.) android:textSize 指定文字大小,单位为sp。
4.) android:textColor 指定文字颜色,格式为:#6个十六进制数。
5.) android:text 指定显示的文本内容。
6.) android:gravity 指定文字对齐方式。
可选值:topbottomleftrightcenter等,可以用“|”来同时指定多个值;
center 效果上等于 center_vertical|center_horizontal 表示文字在垂直和水平方向上都居中对齐。

2. Button:按钮

A. 效果图

Button效果图

B. 代码

<Button
	android:id="@+id/first_button"
	android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:text="This is the first Button"
    android:textColor="#ff0000"
    android:background="#00ff00"
    />
<Button
	android:id="@+id/second_button"
    android:layout_margin="30dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="This is the second Button"
    android:textAllCaps="false"
    android:textColor="#ffffff"
    android:background="#0000ff"
    />

C. 注解

1.) android:background 用于指定按钮背景颜色。
2.) android:layout_margin 用于指定按钮外边距。
3.) android:textAllCaps 用于是否禁止系统自动将Button中所有英文字母进行大写转换。

3. EditText:文本输入框

A. 效果图

EditText效果图

B. 代码

<EditText
	android:id="@+id/edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Type something here"
    android:maxLines="2"
    />
<EditText
	android:id="@+id/edit_text2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Type something here"
    android:maxLines="2"
    />

C. 注解

1.) android:hint 指定一段带有提示性的文本,输入内容时自动消失。
2.) android:maxLines 指定EditText的最大行数,当输入的内容超过最大行数时,文本会向上滚动,而EditText不会继续拉伸。

4. ImageView:用于展示图片

A. 效果图

ImageView效果图

B. 代码

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

C. 注解

android:src 指定一张图片,引用drawable图片资源。

5. ProgressBar:用于在界面上显示一个进度条

A. 效果图

ProgressBar效果图

B. 代码

<ProgressBar
	android:id="@+id/progress_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
<ProgressBar
    android:id="@+id/progress_bar2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="50"
    />
<ProgressBar
    android:id="@+id/progress_bar3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleLarge"
    />
<ProgressBar
    android:id="@+id/progress_bar4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleSmallTitle"
    />

C. 注解

1.) style="?android:attr/progressBarStyleHorizontal" 给ProgressBar指定不同的样式。progressBarStyleHorizontal 表示这是一个水平进度条。
2.)android:visibility Android控件的可见属性,所有Android控件都具有这个属性。
可选值:visible(默认)、invisiblegonevisible 表示控件是可见的;invisible 表示控件是不可见的,但仍占据着原来的位置和大小;gone 表示控件不仅不可见,而且不占用任何屏幕空间。

6. AlertDialog:用于在当前界面上弹出一个对话框

A. 效果图

AlertDialog效果图

B. 代码

activity_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"
    tools:context="com.example.thinkpad.uitest.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="点击弹出AlertDialog"
        />
</LinearLayout>

MainActivity.java

package com.example.thinkpad.uitest;

import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
        //为按钮设置监听事件
            @Override
            public void onClick(View view) {
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                //通过AlertDialog.Builder创建一个AlertDialog的实例
                dialog.setTitle("This is a Dialog");
                dialog.setMessage("Something important.");
                dialog.setCancelable(false);
                //为这个对话框设置标题,内容,可否取消属性
                dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                });
                //调用setPositiveButton()方法为对话框设置确定按钮的点击事件
                dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                });
                //调用setNegativeButton()方法为对话框设置取消按钮的点击事件
                dialog.show();
                //将对话框显示出来
            }
        });
    }
}

二、基本布局

布局是一种可用于放置很多控件或布局的容器,它可以按照一定的规律调整内部控件的位置,从而编写出精美的界面。
布局与控件的关系

1. 线性布局LinearLayout

该布局会将它所包含的控件在线性方向上依次排列,通过android:orientation 属性指定排列方向。取值:horizontal 水平方向(默认);vertical 垂直

A. 水平效果图

LinearLayout水平效果图

B. 水平代码

<?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"
    tools:context="com.example.thinkpad.layouttest.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="Button1"
        android:background="#1e90ff"
        />
        
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="Button2"
        android:background="#cd2626"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="Button3"
        android:background="#ffff00"
        />
		<!--android:layout_marginLeft 设置了按钮的左外边距为5dp-->
</LinearLayout>

C. 垂直效果图

LinearLayout垂直效果图

D.垂直代码

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.thinkpad.layouttest.MainActivity">
	<!--添加了android:orientation="vertical" 属性及属性值,使得布局呈垂直排列-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Button1"
        android:background="#1e90ff"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Button2"
        android:background="#cd2626"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Button3"
        android:background="#ffff00"
        />
		<!--android:layout_marginTop设置了按钮的上外边距为5dp-->
</LinearLayout>

E. 注意点

1.) 若LinearLayout布局的排列方向为horizontal,则其内部的控件宽度最好不要指定为match_parent,因为这样会使得单独一个控件就将整个水平方向占满;vertical同理。
2.) 注意区别 android:layout_gravity && android:gravity
android:layout_gravity → 指定控件在布局中的对齐方式
android:gravity → 指定文字在控件中的对齐方式
3.) LinearLayout布局的排列方向为horizontal时,只有垂直方向上的对齐方式才会生效;同理排列方向为vertical时,只有水平方向上的对齐方式会生效。

F. android:layout_weight 属性

用于指定剩余空闲空间的分割比例
1.) 效果图
layout_weight属性效果图
2.) 代码

<?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"
    tools:context="com.example.thinkpad.layouttest.MainActivity">

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:hint="Type something"
        />
	<!--这里指定weight时,将width指定为0dp是一种较为规范的做法,减少系统计算,提高布局性能-->
    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Send"
        />
</LinearLayout>

2. 相对布局RelativeLayout

可以通过相对定位的方式让控件出现在布局的任何位置,可相对父布局也可相对控件

A. 效果图

相对布局效果图

B. 代码

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="BUTTON 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="BUTTON 2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="BUTTON 3"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="BUTTON 4"/>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="BUTTON 5"/>
	<!--android:layout_alignParentXXXX="true" 指定控件相对父布局的XXXX侧对齐
	android:layout_centerInParent="true" 指定控件相对父布局居中显示-->
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button5"
        android:layout_toLeftOf="@id/button5"
        android:text="BUTTON 6"/>

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button5"
        android:layout_toRightOf="@id/button5"
        android:text="BUTTON 7"/>

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_toLeftOf="@id/button5"
        android:text="BUTTON 8"/>

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_toRightOf="@id/button5"
        android:text="BUTTON 9"/>
   <!--android:layout_below="@id/button5" 指定控件处于id控件的下面
	android:layout_toRightOf="@id/button5" 指定控件处于id控件的右侧-->
</RelativeLayout>

3. 帧布局FrameLayout

布局简单,应用场景少,没有方便的定位方式,所有控件默认摆放在布局左上角

A. 效果图

帧布局效果图

B. 代码

<?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">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />
</FrameLayout>

4. 百分比布局(PercentFrameLayout && PecentRelativeLayout)

上面三个布局中只有 LinearLayout 支持使用 layout_weight 属性来实现按照比例大小指定控件大小的功能。因此百分比布局为 FrameLayout 和 RelativeLayout 进行了功能扩展。提供 PercentFrameLayout 和 PecentRelativeLayout 两个布局。

现在推荐使用

Android官方增强版百分比布局:android.support.percent.PercentLinearLayout


整理学习自郭霖大佬的《第一行代码》
目前小白一名,持续学习Android中,如有错误请批评指正!

猜你喜欢

转载自blog.csdn.net/Nicholas1hzf/article/details/82702786