Android常用组件

时间：2024-10-15 07:11:28

目录

1. TextView 控件

常用属性:

1）android:text:

2）android:gravity:

3）android:textSize:

4）android:textColor:

5）android:background:

6）android:padding:

7）android:layout_width 和 android:layout_height:

8）android:maxLines:

9）android:ellipsize:

案例:TextView的简单使用

1.代码

​编辑

2.效果

2. EditText 控件

常用属性:

1）android:hint:

2）android:inputType:

3）android:maxLength:

4）android:password:

5）android:lines 和 android:minLines:

6）android:drawableLeft, ...Right, ...Top, ...Bottom:

案例:EditText控件的使用

1.代码

2.效果

3. Button 控件

常用属性:

1）android:text:

2）android:onClick:

3）android:background:

4）android:enabled:

5）android:visibility:

6）android:padding:

7）android:drawableLeft, ...Right, ...Top, ...Bottom:

案例:按钮控件的简单使用

1.代码

1布局文件代码

2.java代码

2.效果

4. ImageView 控件

常用属性:

1）android:src:

2）android:scaleType:

3）android:adjustViewBounds:

4）android:contentDescription:

案例:图片切换

1.代码

布局文件代码

2-java代码

2.效果

5. RadioButton 控件

常用属性:

1）android:checked:

2）android:text:

3）android:button:

4）android:gravity:

案例:RadioButton控件的简单使用

1.代码

1-java

2-xml

2.效果

6. CheckBox 控件

常用属性:

1）android:checked:

2）android:text:

3）android:button:

4）android:gravity:

案例:CheckBox的简单使用

1.代码

1-java

2-xml

2.效果

7.Toash类

创建方法

1）context

2）text

3）duration

附录:

素材下载

1. TextView 控件

TextView 用于显示文本信息。

常用属性:

1）android:text:

        设置要显示的文本内容。

2）android:gravity:

        文本在 TextView 中的对齐方式（如居中、靠左等）。

3）android:textSize:

        文本大小，单位可以是 sp 或 dp。

4）android:textColor:

         文本颜色。

5）android:background:

设置背景颜色或图片。

6）android:padding:

        内边距。

7）android:layout_width 和 android:layout_height:

        宽度和高度设置。

8）android:maxLines:

        最大行数限制。

9）android:ellipsize:

        当文本超出 TextView 的宽度时，如何处理溢出文本（如使用省略号）。

案例:TextView的简单使用

1.代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <!--定义一个TextView-->

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello World!"

        android:textSize="40sp"

        android:padding="30dp"


        android:background="#456789"

        android:textColor="#892777"


        android:gravity="center"

        android:textStyle="italic"
        
        app:layout_constraintBottom_toBottomOf="parent"


        app:layout_constraintLeft_toLeftOf="parent"


        app:layout_constraintRight_toRightOf="parent"


        app:layout_constraintTop_toTopOf="parent"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

2.效果

2. EditText 控件

EditText 是一种可编辑的文本框，继承自 TextView。

常用属性:

1）android:hint:

提示信息，当 EditText 为空时显示。

2）android:inputType:

输入类型（如文本、数字、密码等）。

3）android:maxLength:

允许的最大字符数。

4）android:password:

是否显示为密码形式（星号或其他符号代替实际输入）。

5）android:lines 和 android:minLines:

显示的行数。

6）android:drawableLeft, ...Right, ...Top, ...Bottom:

在文本框内添加图标。

案例:EditText控件的使用

1.代码

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

    <!--hint属性-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#15C1F6"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hint属性: "
            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="输入控件内没有输入东西时显示"

            tools:ignore="MissingConstraints" />

    </LinearLayout>

    <!--inputType属性-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#965DD7"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="inputType属性: "
            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="密码框"

            android:inputType="textPassword"

            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="电话号码"

            android:inputType="phone"

            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input_four"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="网址"

            android:inputType="textUri"

            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input_five"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="日期"

            android:inputType="date"

            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_input_six"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:hint="时间"

            android:inputType="time"

            tools:ignore="MissingConstraints" />

    </LinearLayout>

    <!--设置最大长度-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#EBC3D6"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="password属性: "
            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_inputa"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:inputType="textPassword"
            android:password="true"
            android:hint="maxLength属性为10"
            android:maxLength="10"

            tools:ignore="MissingConstraints" />

    </LinearLayout>


    <!--添加图标-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#03A06F"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="password属性: "
            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_inputb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:drawableStart="@drawable/ic_launcher_foreground"
            android:hint="添加图标"
            android:maxLength="10"

            tools:ignore="MissingConstraints" />

    </LinearLayout>

    <!--显示行数-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#15C1F6"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="password属性: "
            tools:ignore="MissingConstraints" />
        <EditText
            android:id="@+id/et_inputd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:textSize="20dp"

            android:minLines="2"
            android:hint="显示行数"
            android:maxLength="10"

            tools:ignore="MissingConstraints" />

    </LinearLayout>

</LinearLayout>

2.效果

3. Button 控件

Button 用于触发事件。

常用属性:

1）android:text:

        按钮上显示的文字。

2）android:onClick:

        绑定到按钮点击事件的方法名。

3）android:background:

        背景样式。

4）android:enabled:

        按钮是否可用。

        

5）android:visibility:

        按钮的可见性。

6）android:padding:

        内边距。

7）android:drawableLeft, ...Right, ...Top, ...Bottom:

        在按钮旁边添加图标。

案例:按钮控件的简单使用

随意找两种图片放在res == > drawable ==> 放置图片(图片命名英文开头，图片命名英文开头，图片命名英文开头)

1.代码

1布局文件代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/boy"
    tools:context=".MainActivity">

    <!--按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击"
        android:id="@+id/btn"
        />

    <!--为按钮设置背景图片-->
    <Button
        android:layout_width="256dp"
        android:layout_height="256dp"
        android:text="带背景图片的按钮"
        android:textColor="#6BF60B"
        android:id="@+id/btnImg"
        android:background="@drawable/girl"
        />

    <!--被禁用的按钮-->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被禁用的按钮"
        android:enabled="false"
        android:background="#20DAF4"
    android:textColor="#5B20DB"
        />

    <!--带内边距的按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="带内边距的按钮"
        android:padding="20dp"
        android:background="#DAA4E0"
        android:textColor="#7140DB"
        android:id="@+id/btnPadding"
        />



</LinearLayout>

 

2.java代码
package com.xiji.mycontain;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.util.Consumer;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        //获取显示类
        Toast toast = Toast.makeText(this, "Hello World!", Toast.LENGTH_SHORT);


        /*获取控件*/
        /**
         * 获取第一个控件
         * */
        View viewById = findViewById(R.id.btn);
        Button myButton = (Button) viewById;

        /**
         * 获取第二个控件
         */
        @SuppressLint({"MissingInflatedId", "LocalSuppress"}) Button myImgButton = findViewById(R.id.btnImg);

        /**
         * 获取第三个控件
         */
        @SuppressLint({"MissingInflatedId", "LocalSuppress"}) Button myTextButton = findViewById(R.id.btnPadding);

        //事件绑定
        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //点击时触发
                toast.setText("普通按钮被点击了");
                toast.show();

            }
        });

        myImgButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //点击时触发
                toast.setText("图片按钮被点击了");
                toast.show();
            }
        });

        myTextButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //点击时触发
                toast.setText("带内边距的按钮被点击了");
                toast.show();
            }
        });
    }
}

2.效果

4. ImageView 控件

ImageView 用于显示图像。

常用属性:

1）android:src:

设置要显示的图像资源。

2）android:scaleType:

图像缩放类型（如 fitXY, centerCrop 等）。

3）android:adjustViewBounds:

是否根据图片调整视图边界。

4）android:contentDescription:

为无障碍功能提供的描述文本。

案例:图片切换

1.代码

布局文件代码
<?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">


    <!--使用帧布局-->

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        >

        <ImageView
            android:id="@+id/img_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/girl" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击切换"
            android:id="@+id/btn_change"
            android:background="#457509"

            />
        </FrameLayout>


</LinearLayout>

2-java代码
package com.xiji.myimgview;

import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

    //定义点击事件按钮
    private Button mBtn;

    //图片组件获取
    private ImageView mImgView;

    //定义标志位
    private boolean isShow = true;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        initView();
        initListener();
    }



    //控件初始化
    private void initView() {
        mImgView = findViewById(R.id.img_view);

        mBtn = findViewById(R.id.btn_change);

    }

    //控件事件绑定

    private void initListener() {

        mBtn.setOnClickListener(v -> {

            //点击事件
            if (isShow == true) {
                mImgView.setImageResource(R.drawable.boy
                );
                Toast.makeText(this, "我是小男孩", Toast.LENGTH_SHORT).show();
                isShow = false;
                return;

            }
            mImgView.setImageResource(R.drawable.girl
            );
            Toast.makeText(this, "我是小姑娘", Toast.LENGTH_SHORT).show();
            isShow = true;

        });

    }

}

2.效果

5. RadioButton 控件

RadioButton 用于让用户从一组选项中选择一个。

常用属性:

1）android:checked:

初始选中状态。

2）android:text:

显示的文本。

3）android:button:

设置单选按钮的外观。

4）android:gravity:

文本对齐方式。

案例:RadioButton控件的简单使用

1.代码

1-java
package com.xiji.myapplication123;

import android.os.Bundle;
import android.provider.MediaStore;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

    private RadioGroup mRadioGroup;
    private TextView mTextView;




    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        initView();
        initListener();
    }
    //初始化
    private void initView() {

        mRadioGroup = findViewById(R.id.radioGroup);

        //显示控件
        mTextView = findViewById(R.id.textShow);
    }

    //绑定事件
    private void initListener() {

        //radioGroup控件组
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //获取选中的radioButton
                RadioButton radioButton = findViewById(checkedId);
                //设置显示
                mTextView.setText(radioButton.getText());
                Toast.makeText(MainActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
            }
        });
    }
}

2-xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/radioGroup">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="男"
                android:id="@+id/radioBoy"
                android:checked="true"/>
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="女"
                android:id="@+id/radioGril"/>
        </RadioGroup>
        <!--线性布局-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="请选择性别："/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textShow"
                android:text="男"/>

        </LinearLayout>



    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2.效果

6. CheckBox 控件

CheckBox 用于让用户选择一个或多个选项。

常用属性:

1）android:checked:

初始选中状态。

2）android:text:

显示的文本。

3）android:button:

设置复选框的外观。

4）android:gravity:

文本对齐方式。

案例:CheckBox的简单使用

1.代码

1-java
package com.xiji.mycheckbox;

import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {
    //声明变量
    private CheckBox checkBoxOne;
    private CheckBox checkBoxTwo;
    private CheckBox checkBoxThree;

    //展示
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        initView();
        initEvent();
    }

    //控件初始化
    private void initView() {
        checkBoxOne = findViewById(R.id.myCheckOne);
        checkBoxTwo = findViewById(R.id.myCheckTwo);
        checkBoxThree = findViewById(R.id.myCheckThree);
        textView = findViewById(R.id.myLikeShow);
    }
    //事件

    private void initEvent() {
        checkBoxOne.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

                String text = (String) checkBoxOne.getText();
                if (b) {
                    textView.setText(textView.getText()+text);
                    return;
                }
                //如果没有选中那么就把文字去掉
                textView.setText(textView.getText().toString().replace(text,""));

            }
        });

        checkBoxTwo.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

                String text = (String) checkBoxTwo.getText();
                if (b) {
                    textView.setText(textView.getText()+text);
                    return;
                }
                //如果没有选中那么就把文字去掉
                textView.setText(textView.getText().toString().replace(text,""));

            }
        });

        checkBoxThree.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

                String text = (String) checkBoxThree.getText();
                if (b) {
                    textView.setText(textView.getText()+text);
                    return;
                }
                //如果没有选中那么就把文字去掉
                textView.setText(textView.getText().toString().replace(text,""));

            }

        });

    }

}

2-xml
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            tools:ignore="MissingConstraints">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="请选择你喜欢的游戏"
                />

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="流放之路"
                android:checked="true"
                android:id="@+id/myCheckOne"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="英雄联盟"

                android:id="@+id/myCheckTwo"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="星际战甲"

                android:id="@+id/myCheckThree"

                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="喜欢的游戏: "
                android:id="@+id/myLikeShow"


                />


        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

2.效果

7.Toash类

Toast 用于显示简短的消息提示。

创建方法

Toast.makeText(Context context, CharSequence text, int duration).show();

1）context

        上下文环境。

2）text

        显示的消息文本。

3）duration

        显示时间长度，通常使用 Toast.LENGTH_SHORT 或 Toast.LENGTH_LONG。

附录:

素材下载

girl.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

相关文章