【Android】基础控件【基础】【复习】

🍰 个人主页:__Aurora__
🍞如果文章有什么需要改进的地方还请各位大佬指正。
🍉如果我的文章对你有帮助➡️ 关注🙏🏻 点赞👍 收藏⭐️

常用布局
组件TextView
组件Button
组件EditText
组件RadioButton
组件CheckBox
组件ImageView
组件ListView

正文开始：

⚡常用布局

🔥LinearLaout线性布局常用属性：

名称	含义
android:layout_width	组件宽度
android:layout_height	组件高度
android:orientation	组件排列方式
android:background	背景颜色
android:padding	内边距
android:layout_margin	外边距
android:gravity	组件初始方向
android:layout_weight	权重

Demo

layout添加组件VIew

 <LinearLayout

        android:id="@+id/first2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:background="#FF0"
        android:padding="20dp"
        android:layout_marginTop="100dp"
        android:gravity="bottom"
        >
        <View
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:background="#000000"
            android:layout_weight="1"
            />

        <View
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:background="#ff0033" />
    </LinearLayout>

1. id 为first2父组件中有两个子组件view，父组件设置外部上边距100dp，内边距为20dp
2. android:gravity="bottom"子组件初始方向为底部，子组件排列方向横向
3. 两个子组件中android:layout_width设置为0dp,在设置权重，则可平分横向空间。

🔥RelativeLayout相对布局常用属性

名称	含义
android:layout_alignParentBottom	和父组件底部对齐
android:layout_alignBottom	和某一组件底部对齐
android:layout_toRightOf	在某一组件的右边
android:layout_below	在某一组件的底部

layout添加组件View

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000"
        />
    <View
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff00ff"
       android:layout_toRightOf="@id/view1"
        android:layout_below="@id/view1"
        />
    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff0"
        android:layout_below="@id/view2"
        />
    </RelativeLayout>

1. 黑色为长宽100dp的黑色方块
2. android:layout_toRightOf="@id/view1" android:layout_below="@id/view1"紫粉色块在黑色块底部、黑色块的右侧。
3. android:layout_below="@id/view2"黄色块在紫粉色底部，横向从左侧排列排列。

⚡组件TextView

🔥常用效果：

🍓加入icon

layout添加组件TextView

 <TextView
        android:id="@+id/tv_3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="选择"
        android:textColor="#000000"
        android:drawablePadding="10dp"
        android:drawableRight="@drawable/ice"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        />

1. android:drawableRight加入图片
2. android:drawablePadding调整图片与文字的边距

🍓中划线

layout添加组件TextView

 <TextView
        android:id="@+id/tv_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="new Activity"
        android:textColor="#000000"
        android:textSize="30sp"
       	android:maxLines="1"
        android:ellipsize="end"
        />

Acitvity.java文件中的onCreate（）方法中添加

  mTv4=(TextView) findViewById(R.id.tv_4);
  mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//添加中划线
  mTv4.getPaint().setAntiAlias(true);//去除锯齿

2. android:maxLines="1"文字只显示在一行
3. android:ellipsize="end" 后面文字省略号代替

🍓下划线

layout添加组件TextView

 <TextView
        android:id="@+id/tv_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="new Activity"
        android:textColor="#000000"
        android:textSize="30sp"
        />

Acitvity.java文件中的onCreate（）方法中添加

mTv5=(TextView) findViewById(R.id.tv_5);
mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);//添加下划线
mTv5.getPaint().setAntiAlias(true);//去除锯齿

🔥效果图

⚡组件Button

🔥组件样式

🍓白色描边按钮

layout文件添加button组件

<!--    白色描边-->
    <Button
        android:id="@+id/btn_3"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/bg_btn3"
        android:text="按钮3"
        android:textSize="20sp"
        android:textColor="#ff9900"
        />

drawable创建bg_btn3.xml

<?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="#ff9900"/>
    <!--设置圆角-->
    <corners
        android:radius="50dp"/>
</shape>

🍓点击按钮颜色变化

layout.xml文件添加

<!--有按压颜色变化-->
    <Button
        android:id="@+id/btn_4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
 
        android:layout_marginTop="1dp"
        android:background="@drawable/bg_btn4"
        android:text="按钮3"
        android:textColor="#ffffff"
        android:textSize="20sp" />

drawable创建bg_btn4.xml,配置样式文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- state_pressed按压状态 false表示未按压时   -->
    <item android:state_pressed="false">
        <shape>
<!--填充颜色-->
            <solid android:color="#ff9900"></solid>
<!--圆角-->
            <corners android:radius="50dp"/>
        </shape>
    </item>
    <!-- state_pressed按压状态 true表示按压时   -->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#AA6600"></solid>
            <corners android:radius="50dp"/>
        </shape>
    </item>
</selector>

🔥点击事件

🍓1.android:onClick属性绑定点击事件

activity.java添加showTosat()方法

public void showTosat(View view){
        Toast.makeText(this, "hello Android", Toast.LENGTH_SHORT).show();
    }

layout添加组件Button

  <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#ff9900"
        android:text="按钮"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:onClick="showTosat"
   />

点击效果：
手机底部弹出提示

1. android:onClick（）可以绑定方法

🍓2. findViewById获取组件绑定点击事件

layout

 <Button
        android:id="@+id/btn_5"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#ff9900"
        android:text="按钮"
        android:textSize="20sp"
        android:textColor="#ffffff"
        />

   private Button btn5;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        btn5=(Button) findViewById(R.id.btn_5);
        btn5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            //ButtonActivity.this表示这个类
                Toast.makeText(ButtonActivity.this, "hello Android", Toast.LENGTH_SHORT).show();
            }
        });
    }

点击效果：
手机底部弹出提示

⚡组件EditText

🔥常用属性

名称	作用
android:hint	初始默认显示内容
android:inputType	输入类型（textPassword输入为*）
android:drawableLeft	文本框内部填充的图标
android:drawablePadding	在文本和drawable之间创建填充间隙

layout文件下的xml

  <EditText
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="19sp"
        android:background="@drawable/bg_edit1"
        android:textColor="#000000"
        android:layout_marginTop="10dp"
        android:hint="用户名"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:maxLines="1"
        android:drawablePadding="5dp"
        android:drawableLeft="@drawable/user"
        />
    <EditText
        android:id="@+id/et_2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:textSize="19sp"
        android:textColor="#000000"
        android:inputType="textPassword"
        android:background="@drawable/bg_edit1"
        android:layout_marginTop="40dp"
        android:hint="密码"
        android:layout_below="@id/et_1"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:maxLines="1"
        android:drawablePadding="5dp"
        android:drawableLeft="@drawable/password"
        />
    <Button
        android:id="@+id/editBtn"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="登录"
        android:textSize="20dp"
        android:layout_below="@id/et_2"
        android:background="@drawable/bg_btn4"
        />

bg_edit1.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <stroke android:width="2dp" android:color="#ff9900"/>
</shape>

🔥监听事件

–activity.java

	private Button buttonLogin;
    private EditText mEtUserName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_text);
        buttonLogin =(Button)findViewById(R.id.editBtn);
        //点击按钮事件监听
        buttonLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(EditTextActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
            }
        });
//编辑文本框事件监听
        mEtUserName=(EditText) findViewById(R.id.et_1);
        mEtUserName.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                
            }
//监听输入内容
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                Log.d("edit",charSequence.toString());
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
    }

在文本框中输入hello

⚡ 组件RadioButton

RadioButton是一个单选按钮组件。要写在<RadioGroup>标签内

🔥组件样式

 <RadioGroup
        android:id="@+id/rg_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="100dp">

        <!--       android:checked是否设置为默认（前提要加上id）   -->
        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="60dp"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="男"
            android:textSize="18sp"
            android:textColor="#000000"
            android:checked="true"
            android:button="@null"
            android:background="@drawable/bg_radio"
            android:layout_marginLeft="10dp"
            />
        <RadioButton
            android:id="@+id/rb_4"
            android:layout_width="60dp"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="女"
            android:textSize="18sp"
            android:textColor="#000000"
            android:button="@null"
            android:background="@drawable/bg_radio"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            />
    </RadioGroup>

属性名称	作用
android:checked	是否设置为默认（前提要加上id）
android:button	选择按钮（@null 设置为空）

android:background引用样式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    >
<!-- state_checked false表示未被选中   -->
    <item android:state_checked="false">
        <shape>
<!--            填充颜色-->
            <solid android:color="#FFFFFF"></solid>
<!--            边框设置-->
            <stroke android:width="2dp"
                android:color="#D08007"/>
        </shape>
    </item>
<!--state_checked true表示选中   -->
    <item android:state_checked="true">
        <shape>
            <solid android:color="#EFBC6D"></solid>
            <stroke android:width="2dp"
                android:color="#D08007"/>
        </shape>
    </item>

</selector>

🔥监听事件

RadioButtonActivity.java监听单选框事件。

 private RadioGroup mRg1;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_radio_button);
      mRg1=(RadioGroup) findViewById(R.id.rg_2);
      mRg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
          @Override
          public void onCheckedChanged(RadioGroup radioGroup, int i) {
              RadioButton radioButton =(RadioButton) radioGroup.findViewById(i);
              //屏幕上显示选中的内容
              Toast.makeText(RadioButtonActivity.this, radioButton.getText(), Toast.LENGTH_SHORT).show();
          }
      });
  }

⚡组件复选框CheckBox

🔥常用属性

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="喜欢吃什么？"
        android:textSize="20dp"
        android:textColor="#000"
        android:layout_marginBottom="10dp"/>

    <CheckBox

        android:id="@+id/cb_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:button="@drawable/apple"
        android:background="@drawable/bg_checkbox"
        android:text="苹果"
        android:textSize="20dp" />
    <CheckBox

        android:id="@+id/cb_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/or"
        android:background="@drawable/bg_checkbox"
        android:text="橙子"
        android:textSize="20dp"
        android:layout_marginTop="10dp"
        android:layout_below="@id/cb_1"
        />

    <CheckBox
        android:id="@+id/cb_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/cb_2"
        android:background="@drawable/bg_checkbox"
        android:button="@drawable/mie"
        android:layout_marginTop="10dp"
        android:text="草莓"
        android:textSize="20dp" />

配置bg_checkbox.xml样式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
    <shape>
        <!--            填充颜色-->
        <solid android:color="#EBB86B"></solid>
        <!--            圆角-->
        <corners android:radius="5dp"/>
    </shape>
</item>
    <item android:state_checked="false">
        <shape>
            <!--            填充颜色-->
            <solid android:color="#fff"></solid>
            <!--            圆角-->
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>

🔥监听事件

CheckBoxActivity.java绑定事件

public class CheckBoxActivity extends AppCompatActivity {
    private CheckBox mcb1,mcb2,mcb3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check_box);
        mcb1=(CheckBox) findViewById(R.id.cb_1);
        mcb2=(CheckBox) findViewById(R.id.cb_2);
        mcb3=(CheckBox) findViewById(R.id.cb_3);
        mcb1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Toast.makeText(CheckBoxActivity.this, b?"选中"+compoundButton.getText():"取消"+compoundButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });
        mcb2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Toast.makeText(CheckBoxActivity.this, b?"选中"+compoundButton.getText():"取消"+compoundButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });
        mcb3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Toast.makeText(CheckBoxActivity.this, b?"选中"+compoundButton.getText():"取消"+compoundButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

点击时显示选中的内容。

⚡组件ImageView

🔥常见属性

属性名称	作用
android:src	图片地址
android:scaleType	缩放形式 fitXY撑满空间，宽高比可能发生变化 fitCenter保持宽高缩放，直至能完全显示 centerCrop保持宽高比缩放，直至完全覆盖控件，裁剪显示

<ImageView
    android:id="@+id/btn_Image"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:background="#ff9900"
    android:src="@drawable/png1"
    android:scaleType="fitCenter"/>

🔥加载网络图片

1. 需要用到
   https://github.com/bumptech/glide

分为多种下载模式，我通过Gradle引入下载

下载好后配置
2. 在AndroidManifest.xml声明,发出网络请求

<!--    声明网络请求-->
    <uses-permission android:name="android.permission.INTERNET"/>
    

3. 加载网络图片

设置布局

<!--加载网络图片-->
    <ImageView
        android:id="@+id/btn_Image2"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#ff9900"
        android:src="@drawable/png1"
        android:scaleType="fitCenter"
     />

加载网络图片

public class ImageViewActivity extends AppCompatActivity {
    private ImageView mIv4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_view);
        mIv4=(ImageView) findViewById(R.id.btn_Image2);
        //load(src) 请求的网络图片地址
        Glide.with(this).load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2008-6-13%2F200806131108306030.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661331321&t=fdb855955392a1209e3bba8ab70d1a0b").into(mIv4);
    }
}

⚡组件ListView

用于以列表的形式 展示具体数据内容。

🔥activity_listview.xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/lv_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:listSelector="@drawable/list_item" />

</LinearLayout>

android:listSelector="@drawable/list_item"选中元素样式

list_item.xml样式代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"     android:drawable="@color/teal_200"/>
    <item android:state_pressed="true" android:drawable="@color/teal_200"/>
    <item android:state_focused="true" android:drawable="@color/teal_200"/>
    <item android:drawable="@color/white"/>
</selector>

🔥对应的ListViewActivity.java代码

public class ListViewActivity extends Activity {
    private ListView listView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview);
        listView=(ListView) findViewById(R.id.lv_1);
        //将元素整合到列表中
        listView.setAdapter(new MyListAdapter(ListViewActivity.this));
        //监听点击事件
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                TextView textView= (TextView)view.findViewById(R.id.tv_title);
                System.out.println(textView.getText());
                Toast.makeText(ListViewActivity.this, "点击pos"+position, Toast.LENGTH_SHORT).show();
            }
        });
        //监听长按点击事件
        listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener(){
            @Override
            public boolean onItemLongClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(ListViewActivity.this, "长按pos"+ id, Toast.LENGTH_SHORT).show();
                return  true;
            }
        });
    }
}

onItemClick解释
Parent指定AdapterView
View: view.findViewById()可以取出元素内容。
position:点击该元素在列表中的位置，第一个标号为0
id点击了ListView对应的元素，一般与i一样

🔥设置列表中单个元素样式

<?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:orientation="horizontal"
    android:padding="20dp">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:background="#000"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="10dp">
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"
            android:textSize="20sp"
            android:textColor="#000"/>
        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2022-01-01"
            android:textSize="15sp"
            android:layout_marginTop="10dp"
            android:textColor="#919191"/>
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="XXXXXXXXXXXXX"
            android:layout_marginTop="10dp"
            android:textSize="15sp"
            android:textColor="#919191"/>
    </LinearLayout>

</LinearLayout>

单个元素样式图

🔥配置列表中单个元素并赋值

public class MyListAdapter extends BaseAdapter {
    private Context    mContext;
    private LayoutInflater layoutInflater;
    MyListAdapter(Context context){
        this.mContext=context;
        layoutInflater=LayoutInflater.from(context);
    }
   //设置为10条元素
    @Override
    public int getCount() {
        return 10;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }


    static  class ViewHolder{
        public ImageView imageView;
        public TextView tv_title,tv_time,tv_content;
    }
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder viewHolder=null;
        if(view == null){
            view = layoutInflater.inflate(R.layout.layout_list_item,null);
            viewHolder = new ViewHolder();
            viewHolder.imageView=(ImageView) view.findViewById(R.id.iv);
            viewHolder.tv_title=(TextView) view.findViewById(R.id.tv_title);
            viewHolder.tv_time=(TextView) view.findViewById(R.id.tv_time);
            viewHolder.tv_content=(TextView) view.findViewById(R.id.tv_content);
            view.setTag(viewHolder);
        }else{
            viewHolder=(ViewHolder) view.getTag();
        }
        viewHolder.tv_title.setText("标题");
        viewHolder.tv_time.setText("2022-03-03");
        viewHolder.tv_content.setText("内容xxxx");
        Glide.with(mContext).load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2008-6-13%2F200806131108306030.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661331321&t=fdb855955392a1209e3bba8ab70d1a0b").into(viewHolder.imageView);
        return view;
    }
}

点击后