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是对齐,用于指定控件在布局中的对齐方式

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

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

可以指定:topcenter_verticalbottom等值

<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_belowlayout_torightof就是在button1右下的意思

3.帧布局FrameLayout

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

4.百分比布局

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

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

PercentFrameLayoutPercentRelativeLayout

<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);
posted @ 2021-02-25 18:50  house_cat  阅读(311)  评论(0编辑  收藏  举报