android基础 [超级详细android常用控件解析(TextView,EditText, ImageView,Button)]

1 章节目录

1 章节目录

2 TextView

2.1 TextView的基本使用

2.2 文本设置边框

2.3 带图片(drawableXxx)的TextView

2.4 TextView 显示html

3 EditText(输入框)

3.1 EditText的基本使用

3.2 设置EditText获得焦点,同时弹出小键盘

3.3 EditText光标位置的控制

4 ImageView(图像视图)

4.1 ImageView的基本使用

4.2 src属性和background属性的区别

4.3 scaleType 属性 android:scaleType

4.4 alpha 设置图片透明度

5 Button(按钮)

5.1 Button的基本使用

5.2 StateListDrawable 简介


2 TextView

TextView (文本框),用于显示文本的一个控件。

2.1 TextView的基本使用

  • 文本的字体尺寸单位为 sp

  • sp: scaled pixels(放大像素). 主要用于字体显示。

  • 文本常用属性:

    属性名作用
    id为TextView设置一个组件id,根据id,我们可以在Java代码中通过findViewById()的方法获取到该对象,然后进行相关属性的设置
    layout_width组件的宽度
    layout_height组件的高度
    gravity设置控件中内容的对齐方向,TextView中是文字,ImageView中是图片等等
    text设置显示的文本内容,一般我们是把字符串写到string.xml文件中,然后通过@String/xxx取得对应的字符串内容的
    textColor设置字体颜色,同上,通过colors.xml资源来引用
    textStyle设置字体风格,三个可选值:normal(无效果),bold(加粗),italic(斜体)
    textSize字体大小,单位一般是用sp
    background控件的背景颜色,可以理解为填充整个控件的颜色,可以是图片
    autoLink识别链接类型 (web, email, phone ,map ,none, all)
  • 案例:

    <TextView     
    android:id="@+id/tv1"     
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"     
    android:text="Hello World" />
    

2.2 文本设置边框

  • 实现原理:

    编写一个ShapeDrawable的资源文件!然后TextView将 background 设置为这个drawable资源即可

  • ShapeDrawable的资源文件

    • <solid android:color="xxx" > 这个是设置背景颜色的

    • <stroke android:width="xdp" android:color="xxx"> 这个是设置边框的粗细,以及边

      框颜色的

    • <padding androidLbottom="xdp"> 这个是设置边距的

    • <corners android:topLeftRadius="10px"> 这个是设置圆角的

    • <gradient> 这个是设置渐变色的,可选属性有: startColor:起始颜色 endColor:结束颜色 centerColor:中间颜色 angle:方向角度,等于0时,从左到右,然后逆时针方向转,当angle = 90度时从下往上 type:设置渐变的类型

      • 编写矩形边框的Drawable:

      <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 设置一个黑色边框 -->
        <stroke android:width="2px" android:color="#000000"/>
        <!-- 渐变 -->
        <gradient
          android:angle="270"
          android:endColor="#C0C0C0"
          android:startColor="#FCD209" />
        <!-- 设置一下边距,让空间大一点 -->
        <padding
          android:left="5dp"
          android:top="5dp"
          android:right="5dp"
          android:bottom="5dp"/>
      </shape>
      • 编写圆角矩形边框的Drawable

      <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 设置透明背景色 -->
        <solid android:color="#87CEEB" />
        <!-- 设置一个黑色边框 -->
        <stroke
          android:width="2px"
          android:color="#000000" />
        <!-- 设置四个圆角的半径 -->
        <corners
          android:bottomLeftRadius="10px"
          android:bottomRightRadius="10px"
          android:topLeftRadius="10px"
          android:topRightRadius="10px" />
        <!-- 设置一下边距,让空间大一点 -->
        <padding
          android:bottom="5dp"
          android:left="5dp"
          android:right="5dp"
          android:top="5dp" /> 
      </shape>

2.3 带图片(drawableXxx)的TextView

属性名作用
android:drawableLeft文本左边设置图片
android:drawableRight文本右边设置图片
android:drawableBottom文本下边设置图片
android:drawableTop文本上边设置图片
  • 应用场景

  • 属性使用

<RelativeLayout
  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" 
  tools:context="com.jay.example.test.MainActivity" > 
  <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:drawableTop="@drawable/show1" 
    android:drawableLeft="@drawable/show1" 
    android:drawableRight="@drawable/show1" 
    android:drawableBottom="@drawable/show1" 
    android:drawablePadding="10dp" 
    android:text="张全蛋" /> 
</RelativeLayout>
  

2.4 TextView 显示html

假设我们有一段html文本,要显示像浏览器一样的效果。 对于简单的html文本,我们可以使用TextView来显示。

  • 使用

    上手很简单,使用 Html.fromHtml() 把html文本转换再交给 setText 。

    • html文本如下,这里指定“color”文字为红色。

    <p>Tell me the <font color="red">color</font></p>
    

    浏览器显示效果:

    Tell me the color

    • Java中需要对双引号转义一下。

    private static final String T1 = "<p>Tell me the <fontcolor=\"red\">color</font></p>";
    tv1.setText(Html.fromHtml(T1));
    • 手机上显示效果。

  • 默认支持的标签

Html.fromHtml() 支持一些标签,例如 <font> <p> 等等。 但是不支持 style 。

例如下面这段html文本,标签中带有style(内联样式)。

<p>Tell me the <text style="color: blue; font-weight: bold;">color</text>.</p>

浏览器显示效果:

Tell me the color.

Java代码

private static final String H1 = "<p>Tell me the <text style=\"color: blue; font-weight: bold;\">color</text>.</p>";
tv2.setText(Html.fromHtml(H1));

手机显示效果如下:

可以看到html中style指定的字体颜色和加粗并没有显示出来。

要想让它正常显示,需要改为

<p>Tell me the <b><font color="blue">color</font></b>.</p>

3 EditText(输入框)

EditText 输入框,集成与TextView, 也继承其属性

3.1 EditText的基本使用

  • EditText 特有属性

    属姓名说明
    android:hint默认提示文本
    android:textColorHint默认提示文本的颜色
    android:selectAllOnFocus布尔值。点击输入框获得焦点后,获取到输入框中所有的文本内容
    android:inputType对输入的数据进行限制
    android:minLines设置最小行数
    android:maxLines设置最大行数 PS:当输入内容超过maxline,文字会自动向上滚动!!
    android:singleLine只允许单行输入,而且不会滚动
    android:textScaleX设置字与字的水平间隔
    android:textScaleY设置字与字的垂直间隔
    android:capitalizesentences:仅第一个字母大写 ;words:每一个单词首字母大小,用空格区分单词;characters:每一个英文字母都大写
  • 案例:

    • 文本类型,多为大写、小写和数字符号

      android:inputType="none" 
      android:inputType="text" 
      android:inputType="textCapCharacters" 
      android:inputType="textCapWords" 
      android:inputType="textCapSentences" 
      android:inputType="textAutoCorrect" 
      android:inputType="textAutoComplete" 
      android:inputType="textMultiLine" 
      android:inputType="textImeMultiLine" 
      android:inputType="textNoSuggestions" 
      android:inputType="textUri" 
      android:inputType="textEmailAddress" 
      android:inputType="textEmailSubject" 
      android:inputType="textShortMessage" 
      android:inputType="textLongMessage" 
      android:inputType="textPersonName" 
      android:inputType="textPostalAddress" 
      android:inputType="textPassword" 
      android:inputType="textVisiblePassword" 
      android:inputType="textWebEditText" 
      android:inputType="textFilter" 
      android:inputType="textPhonetic"
    • 数值类型

      android:inputType="number" 
      android:inputType="numberSigned" 
      android:inputType="numberDecimal" 
      android:inputType="phone"//拨号键盘 
      android:inputType="datetime" 
      android:inputType="date"//日期键盘 
      android:inputType="time"//时间键盘

3.2 设置EditText获得焦点,同时弹出小键盘

edit.requestFocus(); //请求获取焦点
edit.clearFocus(); //清除焦点

低版本的系统直接requestFocus就会自动弹出小键盘了 稍微高一点的版本则需要我们手动地去弹键盘: 第一种:

InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);

第二种 :

InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);  
imm.showSoftInput(view,InputMethodManager.SHOW_FORCED); 
imm.hideSoftInputFromWindow(view.getWindowToken(), 0); //强制隐藏键盘

3.3 EditText光标位置的控制

setSelection();//一个参数的是设置光标位置的,两个参数的是设置起始位置与结束位置的中间括的部分,即部分选中

4 ImageView(图像视图)

ImageView 见名知意,就是用来显示图像的一个View或者说控件

4.1 ImageView的基本使用

  • ImageView的常用属性

    属性名说明
    android:src设置图片资源
    android:scaleType设置图片缩放类型
    android:maxHeight最大高度
    android:maxWidth最大宽度
    android:adjustViewBounds调整View的界限

4.2 src属性和background属性的区别

在API文档中我们发现ImageView有两个可以设置图片的属性,分别是:src和background 常识: ① background通常指的都是背景,而src指的是内容!! ② 当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸,而使用background填入图 片,则是会根据ImageView给定的宽度来进行拉伸

  • 案例:

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:tools="http://schemas.android.com/tools" 
      android:id="@+id/LinearLayout1" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      tools:context="com.jay.example.imageviewdemo.MainActivity" > 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/pen" /> 
      <ImageView 
        android:layout_width="200dp" 
        android:layout_height="wrap_content" 
        android:background="@drawable/pen" /> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/pen" /> 
      <ImageView 
        android:layout_width="200dp" 
        android:layout_height="wrap_content" 
        android:src="@drawable/pen" /> 
    </LinearLayout>

  • Java代码中设置blackground和src属性:

    前景(对应src属性):setImageDrawable();
    背景(对应background属性):setBackgroundDrawable();
  • 两者结合妙用

    <ImageView
        android:layout_gravity="center"
        android:padding="20dp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/shape_bg"
        android:src="@mipmap/pen" />

4.3 scaleType 属性 android:scaleType

  • android:scaleType用于设置显示的图片如何缩放或者移动以适应ImageView的大小 Java代码中可以通过imageView.setScaleType(ImageView.ScaleType.CENTER);来设置。

  • scaleType可选值如下:

    • fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变

    • fitStart:保持纵横比缩放图片,知道较长的边与Image的编程相等,缩放完成后将图片放在ImageView的左上角

    • fitCenter:同上,缩放后放于中间;

    • fitEnd:同上,缩放后放于右下角;

    • center:保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理。

    • centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全

    • centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片

    • matrix:默认值,不改变原图的大小,从ImageView的左上角开始绘制原图, 原图超过ImageView的部分作裁剪处理

  • fitEnd , fitStart , fitCenter,fitXY

    带有“fit”字样的,会显示图片的全部内容。

    fitStart,fitCenter,fitEnd 图片会按原比例显示。图片会往指定的方向靠拢。

    fitXY会拉伸图片,铺满整个ImageView。

    <ImageView
        android:background="#ffc"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitStart"
        android:src="@mipmap/ic_launcher" />

  • centerCrop 与 centerInside

    centerCrop:按横纵比缩放,直接完全覆盖整个ImageView centerInside:按横纵比缩放,使得ImageView能够完全显示这个图片

  • fitXY

    不按比例缩放图片,目标是把图片塞满整个View

  • matrix

    从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理

  • center

    保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理

4.4 alpha 设置图片透明度

设置 alpha 值,能改变整个 ImageView 的透明度

<ImageView
   style="@style/IvDemo1"
   android:layout_marginStart="20dp"
   android:alpha="0.9"
   android:scaleType="fitCenter"
   android:src="@drawable/pic_2_robots" />

5 Button(按钮)

Button 控件继承 TextView ,拥有 TextView 的属性

5.1 Button的基本使用

  • 常用属性:

    属性名描述
    android:autoText如果设置,指定该TextView中有一个文本输入法,并自动纠正一些常见的拼写错误
    android:drawableBottom可拉伸要绘制的文本的下面
    android:drawableRight可拉伸要绘制的文本的右侧
    android:editable如果设置,指定该TextView有一个输入法
    android:text要显示的文本
    android:background这是一个可拉伸使用来做背景
    android:id对此视图提供一个标识符名称
    android:visibility控制视图的初始可视性
    android:onClick在本视图的上下文视图被点击时调用的方法的名称
    android:contentDescription定义文本简要介绍了视图内容

5.2 StateListDrawable 简介

  • StateListDrawable 是Drawable资源的一种,可以根据不同的状态,设置不同的图片效果,关键节点 < selector > ,我们只需要将Button的 background 属性设置为该drawable资源即可轻松实现,按下按钮时不同的按钮颜色或背景!

    属性名说明
    drawable引用的Drawable位图,我们可以把他放到最前面,就表示组件的正常状态
    state_focused是否获得焦点
    state_window_focused是否获得窗口焦点
    state_enabled控件是否可用
    state_checkable控件可否被勾选
    state_checked控件是否被勾选
    state_selected控件是否被选择,针对有滚轮的情况
    state_pressed控件是否被按下
    state_active控件是否处于活动状态
    state_single控件包含多个子控件时,确定是否只显示一个子控件
    state_first控件包含多个子控件时,确定第一个子控件是否处于显示状态
    state_middle控件包含多个子控件时,确定中间一个子控件是否处于显示状态
    state_last控件包含多个子控件时,确定最后一个子控件是否处于显示状态
  • 案例:

    • btn_bg1.xml

      <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@color/color1" android:state_pressed="true"/>
        <item android:drawable="@color/color4" android:state_enabled="false"/>
        <item android:drawable="@color/color3" />
      </selector>

    • layout_btn.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="match_parent"
        android:orientation="vertical"
        android:paddingTop="50dp">
        <Button
          android:id="@+id/btnOne"
          android:layout_width="match_parent"
          android:layout_height="64dp"
          android:background="@drawable/btn_bg1"
          android:text="按钮"
          android:textColor="#ffffff"
          android:textSize="20sp"    
          android:textStyle="bold" />
        <Button
          android:id="@+id/btnTwo"
          android:layout_width="match_parent"
          android:layout_height="64dp"
          android:text="按钮不可用"
          android:textColor="#000000"
          android:textSize="20sp"
          android:textStyle="bold" />
      </LinearLayout>

    • -----------------------MainActivity.java

      public class MainActivity extends Activity {
        private Button btnOne,btnTwo;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          btnOne = findViewById(R.id.btnOne);
          btnTwo = findViewById(R.id.btnTwo);
          btnTwo.setOnClickListener(new OnClickListener() {  //按钮绑定点击事件
            @Override
            public void onClick(View v) {
              if(btnTwo.getText().toString().equals("按钮不可用")){
                btnOne.setEnabled(false);
                btnTwo.setText("按钮可用");
             }else{
                btnOne.setEnabled(true);
                btnTwo.setText("按钮不可用");
             }
           }
         });
       }
      }

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值