[Android]-常见控件与布局方式-CSDN博客

本文链接：https://blog.csdn.net/renboyu010214/article/details/106896760

线性布局-LinearLayout

background:设置背景色

layout_height/layout_width:设置控件布局高度/宽度

orientation:设置线性布局的方向

padding/paddingLeft/paddingRight/paddingTop/paddingBottom
:设置空间的边距

layout_marginTop/margin/…..:设置布局边距

gravity:内部元素的对其方式

layout_weight :权重/比重，取值范围从0-1，指占据该位置的权重(注意，这里是在父空间剩余部分对其做出分配，自己本身设置的大小也占用父空间)

<?xml version="1.0" encoding="utf-8"?>
<!--

LinearLayout  线性布局
background设置背景色
layout_height/layout_width设置控件布局高度/宽度
orientation设置线性布局的方向
padding/paddingLeft/paddingRight/paddingTop/paddingBottom
设置空间的边距
layout_marginTop/margin/.....  设置布局边距
gravity内部元素的对其方式
layout_weight 权重/比重，取值范围从0-1，指占据该位置的权重
(注意，这里是在父空间剩余部分对其做出分配，自己本身设置的大小也占用父空间)

<view/>控件是一切控件的父类

-->
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


        <LinearLayout
                android:id="@+id/ll_1"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:background="#000000"
                android:orientation="vertical"
                android:padding="20dp">
                <View
                        android:layout_height="match_parent"
                        android:layout_width="match_parent"
                        android:background="#FF0033"
                />
        </LinearLayout>

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="horizontal"
                android:background="#0066FF"
                android:layout_marginTop="20dp"
                android:layout_marginRight="15dp"
                android:layout_marginLeft="15dp"
                android:gravity="center">
                <View
                        android:layout_width="50dp"
                        android:layout_height="100dp"
                        android:background="#000000"
                        android:layout_weight="1"
                        />
                <View
                        android:layout_width="0dp"
                        android:layout_height="50dp"
                        android:background="#ffffff"
                        android:layout_weight="2"
                />

        </LinearLayout>


</LinearLayout>

最终效果

线性布局

绝对布局-RelativeLayout

常用属性：

layout_alignParentBottom:与父控件底部对齐

layout_alignBottom:与其他控件底部对齐

layout_toLeftOf:在某个控件的左边

layout_below:在某个控件的下方

<?xml version="1.0" encoding="utf-8"?>
<!--

RelativeLayout-相对布局
常用属性：
layout_alignParentBottom与父控件底部对齐
layout_alignBottom与其他控件底部对齐
layout_toLeftOf在某个控件的左边
layout_below在某个控件的下方

-->


<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:id="@+id/view_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <View
            android:id="@+id/view_2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#00ff00"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"/>
    <View
            android:id="@+id/view_3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#00ffcc"
            android:layout_alignBottom="@id/view_2"
            android:layout_toLeftOf="@id/view_2"/>
    <View
            android:id="@+id/view_4"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#0000ff"
            android:layout_below="@id/view_1" 
            tools:ignore="NotSibling"/>




</RelativeLayout>

最终效果

相对布局

TextView

text字体内容

textSize字体大小

textColor字体颜色

drawableRight图片放置在右侧

layout_width宽度，字体超出默认会换行

maxLines限制最大行数，限制之后再超出宽度就省略

ellipsize超出部分以某种方式例如…表示

<?xml version="1.0" encoding="utf-8"?>

<!--

TextView
text字体内容
textSize字体大小
textColor字体颜色
drawableRight图片放置在右侧
layout_width宽度，字体超出默认会换行
maxLines限制最大行数，限制之后再超出宽度就省略
ellipsize超出部分以某种方式例如...表示

-->

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".TextViewActivity"
        android:padding="20dp"
        android:orientation="vertical"
        android:background="#000000">

    <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_name"
            android:textColor="#00FFCC"
            android:textSize="24sp"
            />

    <TextView
            android:id="@+id/tv_2"
            android:layout_width="50dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_height="wrap_content"
            android:text="@string/my_name"
            android:textColor="#00FFCC"
            android:textSize="24sp"
    />
    <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_name"
            android:textColor="#00FFCC"
            android:textSize="24sp"
            android:drawableRight="@drawable/icon_badge"
            android:layout_marginTop="10dp"
    />
    <TextView
            android:id="@+id/tv_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_name"
            android:textColor="#00FFCC"
            android:textSize="24sp"
    />
    <TextView
            android:id="@+id/tv_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#00FFCC"
            android:textSize="24sp"
    />
    <TextView
            android:id="@+id/tv_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="YWRBYYWRBYYWRBYYWRBYYWRBYYWRBYYWRBYYWRBYYWRBYYWRBY"
            android:textColor="#00FFCC"
            android:textSize="24sp"
            android:singleLine="true"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:focusable="true"
            android:focusableInTouchMode="true"

    />
</LinearLayout>

实现下划线，中划线

public class TextViewActivity extends AppCompatActivity {

    private TextView mTv1,mTv4,mTv5;  //定义变量

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        mTv1=findViewById(R.id.tv_1);  //找到变量并捆绑
        mTv1.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);  //中划线
        mTv1.getPaint().setAntiAlias(true);  //去除中划线锯齿

        mTv4=findViewById(R.id.tv_4);
        mTv4.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);  //下划线

        mTv5=findViewById(R.id.tv_5);
        mTv5.setText(Html.fromHtml("<u>Hello!!</u>"));   //用HEML的方式为文字加下划线
    }
}

最终效果

（最后一个控件实现跑马灯效果）

Button

XML部分代码

<?xml version="1.0" encoding="utf-8"?>

<!--

Button控件
继承自TextView
onClick点击触发事件
background框体格式（形状/颜色/触发后变化）

-->

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ButtonActivity"
        android:padding="15dp">
    <Button
            android:id="@+id/btn_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button1"
            android:textSize="20sp"
            android:background="#00FFCC"
            />
    <Button
            android:id="@+id/btn_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:textSize="20sp"
            android:background="@drawable/bg_btn"
            android:layout_below="@id/btn_1"
            android:layout_marginTop="10dp"
    />
    <Button
        android:id="@+id/btn_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        android:textSize="20sp"
        android:background="@drawable/bg_bth2"
        android:layout_below="@id/btn_2"
        android:layout_marginTop="10dp"


    />
    <Button
            android:id="@+id/btn_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button4"
            android:textSize="20sp"
            android:background="@drawable/bg_btn3"
            android:layout_below="@id/btn_3"
            android:onClick="showToast"
            android:layout_marginTop="10dp"/>

</RelativeLayout>

button的backgroud属性配置

四角圆弧形，背景色设置，圆弧半径设置

<?xml version="1.0" encoding="utf-8"?>
<shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <solid
        android:color="#FF9900"/>
    <corners
        android:radius="10dp"/>

</shape>

四角圆弧形设置，无背景色，单线框，圆弧半径设置

<?xml version="1.0" encoding="utf-8"?>
<shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="#000000"/>
        <corners
            android:radius="10dp"/>

</shape>

按压效果实现

<?xml version="1.0" encoding="utf-8"?>

<!--
触摸效果
-->

<selector
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#CC7A00"/>
            <corners android:radius="10dp"/>

        </shape>
    </item>


    <item android:state_pressed="false">
        <shape>
            <solid android:color="#FF9900"/>
            <corners android:radius="10dp"/>

        </shape>
    </item>

</selector>

最终效果

button

EditText

可编辑文本框

<?xml version="1.0" encoding="utf-8"?>

<!--

EditText可编辑文本框
hint默认显示文字
inputType输入文字内容（密码/账号/电话等等）


-->


<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".EditTextActivity">
    <TextView
            android:id="@+id/tv_1"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:padding="15dp"
            android:layout_margin="15dp"
            android:gravity="center"
            android:drawableBottom="@drawable/login"/>

    <EditText
            android:id="@+id/et_1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="15dp"
            android:layout_below="@id/tv_1"
            android:textSize="16dp"
            android:textColor="#8D683BB8"
            android:hint="please input user phone number"
            android:inputType="number"
            android:background="@drawable/bg_bth2"
            android:padding="15dp"
            android:drawableLeft="@drawable/accountnumber"
            android:drawablePadding="10dp"
            android:maxLines="1"
            />
    <EditText
            android:id="@+id/et_2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="15dp"
            android:layout_below="@+id/et_1"
            android:textSize="16dp"
            android:textColor="#8D683BB8"
            android:hint="please input user password"
            android:inputType="textPassword"
            android:background="@drawable/bg_bth2"
            android:padding="15dp"
            android:drawableLeft="@drawable/password"
            android:drawablePadding="10dp"
            android:maxLines="1"

    />
    <Button
            android:id="@+id/bt_1"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_below="@+id/et_2"
            android:text="login"
            android:layout_marginTop="25dp"
            android:layout_centerHorizontal="true"/>



</RelativeLayout>

为输入框绑定监听事件

mEtUsername=findViewById(R.id.et_1);
        mEtUsername.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                Log.d("edittext",s.toString());

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

实现效果

edittext

RadioButton/CheckBox

单选框/复选框

<?xml version="1.0" encoding="utf-8"?>

<!--

RadioButton/RadioGroup
单选框/选择组
checked 默认选择（必须设置ID，否则失效）

checkbox复选框
button选项框图标


-->

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".RadioButtonActivity">
    <RadioGroup
            android:id="@+id/rg_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginTop="20dp">
        <RadioButton
            android:id="@+id/rb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="男"
            android:checked="true"
            android:textSize="16sp"

        />
        <RadioButton
                android:id="@+id/rb_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="女"
                android:textSize="16sp"

        />
    </RadioGroup>

    <RadioGroup
            android:id="@+id/rg_2"
            android:layout_width="match_parent"
            android:layout_below="@+id/rg_1"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginTop="20dp">
        <RadioButton
                android:id="@+id/rb_3"
                android:layout_width="60dp"
                android:background="@drawable/bg_btn4"
                android:layout_height="30dp"
                android:button="@null"
                android:text="男"
                android:textSize="16sp"
                android:gravity="center"

        />
        <RadioButton
                android:id="@+id/rb_4"
                android:layout_width="60dp"
                android:background="@drawable/bg_btn4"
                android:layout_height="30dp"
                android:button="@null"
                android:text="女"
                android:gravity="center"
                android:textSize="16sp"

        />
    </RadioGroup>

    <CheckBox
            android:id="@+id/cb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/rg_2"
            android:text="高级"
            android:textSize="20dp"
            android:layout_marginTop="20dp"/>
    <CheckBox
            android:id="@+id/cb_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cb_1"
            android:text="中级"
            android:textSize="20dp"
            android:layout_marginTop="20dp"/>
    <CheckBox
            android:id="@+id/cb_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cb_2"
            android:text="低级"
            android:textSize="20dp"
            android:layout_marginTop="20dp"/>

</RelativeLayout>

绑定监听事件

mRg1=findViewById(R.id.rg_1);
        mRg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radioButton=group.findViewById(checkedId);
                Toast.makeText(RadioButtonActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
            }
        });

运行效果

radiobutton

ImageView

<?xml version="1.0" encoding="utf-8"?>

<!--

scalaType图片拉伸/铺满/缩放等等属性

-->

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ImageViewActivity"
        android:padding="15dp">
    <ImageView
            android:id="@+id/iv_1"
            android:layout_width="300dp"
            android:layout_height="200dp"
            android:background="#FFCC"
            android:src="@drawable/backpack"/>

</LinearLayout>

显示效果

imageview

ProgressBar加载框

<ProgressBar
            android:id="@+id/pb_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/bt_inputdata"
            android:layout_marginTop="20dp"/>

AlertDialog弹出式对话框

//首先引入View.OnClickListener接口然后重写接口的onClick方法
    //该方法会在setOnClickListener方法捕获到点击事件时调用
    //这里重写实现的效果是单击按钮产生AlertDialog
    @Override
    public void onClick(View v) {
        //获取控件ID
        switch (v.getId()) {
            //找到对应控件
            case R.id.bt_alertdialog:
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);  //创建实例
                dialog.setTitle("This is a AlertDialog!");  //标题
                dialog.setMessage("Something you need to know...");  //内容
                dialog.setCancelable(false);  //可否用back返回键关闭：设置为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();  //显示AlertDialog
                break;  //结束语句
            default:
                break;
        }
    }

类似的还有ProgressDialog，实现方法几乎一样，区别在于这个对话框是等待对话框，中间内容是一个等待进度条

自定义控件

自定义标签栏

首先绘制标签布局

title.xml

<?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="wrap_content"
              android:background="#2C2A2A"  >
    <ImageButton
            android:id="@+id/ib_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:src="@mipmap/back"

    />
    <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="Main Menu"
            android:textSize="20sp"
            android:textColor="#fff"

            />
    <ImageButton
            android:id="@+id/ib_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:src="@mipmap/edit"
            />

</LinearLayout>

此时绘制的布局，可以直接引入到主页面中

<include layout="@layout/title"/>

创建自定义控件

package cn.ywrby.uicustomviewsapplication;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.Toast;
import androidx.annotation.Nullable;

//继承LinearLayout控件并重写含两个参的构造方法TitleLayout(Context context, @Nullable AttributeSet attrs)
public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);  
        /*
        LayoutInflater的from方法可以获取到LayoutInflater对象
        再调用对象的inflate方法就可以动态加载控件
        第一个参数表示加载的布局文件的id，第二个参数表示给加载好的布局添加父布局
        这里直接采用TitleLayout本身作为父布局
         */

        ImageButton bt_back= findViewById(R.id.ib_back);  //获取两个按钮控件（ImageButton与Button无直接继承关系，不可强转）
        ImageButton bt_edit= findViewById(R.id.ib_edit);

        //绑定响应事件
        bt_back.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity)getContext()).finish();
            }
        });
        bt_edit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(),"you clicked the edit!",Toast.LENGTH_SHORT).show();
            }
        });



    }
}

在活动中调用自定义的控件

<cn.ywrby.uicustomviewsapplication.TitleLayout
            android:id="@+id/tl_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

    />

注意，自定义控件的路径要写全