Android 基础（三）基本控件与基本布局

Android的基本控件与基本布局

常用控件的使用方法

TextView

<TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top|right"
        android:textSize="24sp"
        android:textColor="#00ff00"
        android:text="this is TextView"/>

android:layout_width指定控件的宽度

android:layout_height指定控件的高度

可选值：

• match_parent：当前控件的大小和父布局的大小一样

• wrap_content：当前控件的大小刚好可以包含住里面的内容

除了使用上述值，也可以对控件的宽和高指定一个固定的大小，但这样做有时会在不同手机屏幕的适配方面出现问题

gravity：指定文字的对齐方式

可以选top、bottom、left、right、center等，可以用“|”来指定多个值

Button

系统会对Button里的所有文字自动进行大小写转换，禁用可以用android:textAllCpas="false"

 		Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ThirdActivity.actionStart(SecondActivity.this,1,"name");
            }
        });

EditText

让用户输入和编辑内容的控件

Button+EditText的实例：

		editText = (EditText) findViewById(R.id.edit_query);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String inputText = editText.getText().toString();
                Toast.makeText(ThirdActivity.this,inputText,Toast.LENGTH_SHORT).show();
            }
        });

ImageView

用于在界面上展示图片的一个控件

 <ImageView
        android:id="@+id/image_view"
        ....
        android:src="@drawable/img_1"/>

也可以通过代码控制数据来源

imageView.setImageResource(R.drawable.img_2);

progressBar

这是一个圆形进度条，旋转的进度条表示我们的程序正在加载数据

通过Android的可见属性：android:visibility进行

AlertDialog

这是一个对话框，置顶于所有界面元素之上

	private void showAlert() {
        AlertDialog.Builder dialog = new AlertDialog.Builder (ThirdActivity.this);
        dialog.setTitle("title");
        dialog.setMessage("hello");
        dialog.setCancelable(false);
        dialog.setPositiveButton("ok", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

            }
        });
        dialog.setNegativeButton("cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

            }
        });
        dialog.show();
    }

progressDialog

与AlertDialog类似，不同的是会在对话框中显示一个进度条。

基本布局

1.线性布局:LinearLayout

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button3"/>
    </LinearLayout>

horizontal是水平上，vertical则是垂直

android:layout_gravity是对齐，用于指定控件在布局中的对齐方式

如果布局方式选择的是水平，那么对齐也只能选择在垂直方向上的才会生效。

因为这时水平方向上的长度是不固定的，如果又多一个控件，水平方向上的长度都会改变。所以不能指定在该方向上的布局。

可以指定：top、center_vertical、bottom等值

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:hint="Type something"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:hint="Send"/>
        
    </LinearLayout>

使用了layout_weight则允许使用百分比的方式指定控件大小，在手机屏幕适配性等方面可以起到非常重要的作用

3表示3/5，2表示2/5

使用的时候并不是布局里每个控件都要设置这个属性，也可以部分设置

 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type something"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Send"/>

    </LinearLayout>

这里指定了EditText的weight属性，表示Button仍然按照wrap_content计算，而EditText会占满屏幕所有的剩余空间。

2.相对布局RelativeLayout

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

虽然属性多，但是有规律可循，容易理解

<RelativeLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:text="button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="button3"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:text="button3"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:text="button3"/>
    </RelativeLayout>

这英文其实非常好理解

除了相对于父布局，还可以相对于控件

<Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="button1"/>
        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button_1"
            android:layout_toRightOf="@id/button_1"
            android:text="button2"/>

其中layout_below和layout_torightof就是在button1右下的意思

3.帧布局FrameLayout

所有的控件都会默认摆放在布局的左上角

4.百分比布局

前面只有线性布局可以用比例划分，因此引入了百分比布局。

百分比布局对前面的相对布局和帧布局进行了拓展

有PercentFrameLayout和PercentRelativeLayout

<androidx.percentlayout.widget.PercentFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <Button
            android:id="@+id/button1"
            android:text="Button 1"
            android:layout_gravity="left|top"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"
            />
        <Button
            android:id="@+id/button2"
            android:text="Button 2"
            android:layout_gravity="right|top"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"
            />
        <Button
            android:id="@+id/button3"
            android:text="Button 3"
            android:layout_gravity="left|bottom"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"
            />
        <Button
            android:id="@+id/button4"
            android:text="Button 4"
            android:layout_gravity="right|bottom"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"
            />
    </androidx.percentlayout.widget.PercentFrameLayout>

自定义View

常用控件和布局的继承关系

标题栏Demo

程序中可能有多个活动需要用到标题栏，为了避免代码重复，可以抽出标题栏布局的相关代码，使用引入标题栏布局的方法。

新建布局：

<?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:background="@drawable/title_bg">

    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/back_bg"
        android:text="Back"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title Test"
        android:textColor="#fff"
        android:textSize="24sp" />

    <Button
        android:id="@+id/title_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/edit_bg"
        android:text="Edit"
        android:textColor="#fff" />
</LinearLayout>

如何引入？只需要如下

<include layout="@layout/title">

如果说布局只有视图，可以直接这样写。但如果涉及到交互等一些逻辑代码，就需要创建一个自定义的view

这里是继承自LinearLayout，还有很多种自定义view，需要后面更多时间的学习

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, AttributeSet attrs) {
        super(context,attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);

        Button titleBack = (Button) findViewById(R.id.title_back);
        Button titleEdit = (Button) findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity) getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "You clicked Edit button",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

在构造函数中需要对标题栏布局进行动态修改，需要借助LayoutInflater

在实际开发中LayoutInflater这个类还是非常有用的，它的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件，并且实例化；而findViewById()是找xml布局文件下的具体widget控件(如Button、TextView等)。

具体作用：

1、对于一个没有被载入或者想要动态载入的界面，都需要使用LayoutInflater.inflate()来载入；

2、对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。

LayoutInflater 是一个抽象类，在文档中如下声明：

public abstract class LayoutInflater extends Object

获得 LayoutInflater 实例的三种方法
LayoutInflater inflater = getLayoutInflater();//调用Activity的getLayoutInflater()

LayoutInflater inflater = LayoutInflater.from(context);

LayoutInflater inflater = (LayoutInflater)context.getSystemService
    
    
LayoutInflater.from(context).inflate(R.layout.title,this);
通过from创建这个对象，在通过inflate方法，这个方法的第一个参数是要加载布局文件的id，第二个参数是给加载好的布局添加一个父布局，这就是在父布局this上加载这个title的布局，这样才可以直接通过findViewById找到title布局里的控件

在xml中引用这个title控件

需要指定包名

<com.example.demoapplication.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

关于findViewById

在android中，findViewById(int)是获取当前上下文中的组件，即在这句话的完整句子是：layout.findViewById(int)，前面省略的layout，是默认在oncreate方法中setContentView(int layoutid)中设置的layout。
这时候，如果我们需要访问的view并不在当前activity所在的layout中，我们就需要先加载该view所在的layout，然后通过layout来访问该view，如：

    LayoutInflator layoutInflator=getLayoutInflator();
    LinearLayout ll=(LinearLayout)layoutInflator.inflator(R.layout.XXX,null);
    TextView tv=(TextView)ll.findViewById(R.id.XX);