超全的Android组件及UI框架

2022-11-29 14:13:08 浏览数 (2)

设计和代码切换,一般情况下,我们 UI 布局都是先拖再细调整,也就是先用设计默认拖出一个大概的布局,然后用代码来微调

一、常见的布局

1. LinearLayout 线性布局

LinearLayout 几个重要的 XML 属性 xml 属性    说明 android:id    为组件设置一个资源 id,然后在 Java 中可以通过 findViewById(id) 找到该组件 android:background    为组件设置一个背景图片或者背景色 android:layout_width    布局的宽度,通常不直接写数字值,而是使用 wrap_content 组件实际大小 fill_parent/match_parent 填满父容器 android:layout_height    同 layout:layout_width android:baselineAligned    该属性为 false,将会阻止布局管理器与它的子元素基线对其 android:divider    设置垂直布局时,两个按钮之间的分隔条 android:gravity    设置布局管理器内组件的对齐方式,值可以是 top/button/left/right/center_vertical/fill_vertical... android:measureWithLargestChild    当属性设置为true时,所有带权重的子元素都会具有最大元素的最小尺寸 android:orientation    设置布局管理器内组件的排列方式,值可以是 vertical (默认) horizontal android:layout_gravity="left"    位于LinearLayout的最左侧 2. RelativeLayout 相对布局

重点:相对布局 (RelativeLayout) 以 父容器 或者 兄弟组件 参考 margin padding 来设置组件的显示位置

1. 基本属性

XML 属性    说明 android:gravity    设置容器内组件的排序方式 android:ignoreGravity    如果设置改属性为 true,将忽略 android:gravity android:gravity 本元素所有子元素的重力方向,处于怎样子的位置 ,有:

top 将对象放在其容器的顶部,不改变其大小. 

bottom 将对象放在其容器的底部,不改变其大小. 

left将对象放在其容器的左侧,不改变其大小. 

right将对象放在其容器的右侧,不改变其大小. 

center_vertical 将对象纵向居中,不改变其大小. 

android:layout_gravity 和 android:gravity 的区别:

比如说对于Button控件:

android:layout_gravity 表示button在界面上的位置

android:gravity表示button上的字在button上的位置。

2.根据父容器定位属性:

XML 属性    说明 android:layout_alignParentLeft    左对齐父容器 android:layout_alignParentRight    右对齐父容器 android:layout_alignParentTop    顶部对齐父容器 android:layout_alignParentBottom    底部对齐父容器 android:layout_centerHorizontal    在父容器中水平居中 android:layout_centerVertical    在父容器中垂直居中 android:layout_centerInParent    在父容器的居中位置

各个属性示意图如下:

3. 根据兄弟组件定位属性

兄弟组件定位就是处于同一层次容器的组件

图中的组件1,2就是兄弟组件了,

如对于组件2 :android:layout_right = "@id/组件1"

而组件3与组件1或组件2并不是兄弟组件,所以组件3 不能通过 组件1或 2来进行定位

4. 设置外边距(偏移)属性

上面这些属性用于设置组件对本来位置的偏移量

虚线框是组件2 本来的位置,如果设置了组件上边和左边的边距,则位置会发生一定的偏移,向右下偏移

5. 设置内边距(填充)属性

上面这些属性用于设置组件的内边距,内边距主要用于设置组件边框和子组件之间的间隙

6. 居中设置

android:layout_centerHorizontal 如果为true,将该控件的置于水平居中; android:layout_centerVertical 如果为true,将该控件的置于垂直居中; android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;

二、常用控件

 1. TextView 文本框

TextView 继承于 View

1.1 常用属性

跑马灯效果:

识别链接效果:

android:autoLink 属性用于设置 TextView 是否识别链接类型和设置可识别的链接类型

android:autoLink 的值有以下几种

设置 TextView 字间距

属性 android:textScaleX 控制字体水平方向的缩放,默认值 1.0f,类型值是 float

如: setScaleX(2.0f);

设置 TextView 行间距

Android TextView 默认显示中文时会比较紧凑,为了让每行保持的行间距,可以设置如下属性

如:setLineSpacing(1.5) 

1.2 常用方法

void append(CharSequence text); //增加文字 CharSequence getText(); // 获取文章文字 int getTextSize();  int length();

2. EditText 输入框

EditText 继承于 TextView

2.1 常用属性

android:inputType :对输入文本类型进行限制

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

代码语言:javascript复制
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"

数值类型

代码语言:javascript复制
android:inputType="number"  
android:inputType="numberSigned"  
android:inputType="numberDecimal"  
android:inputType="phone"         // 拨号键盘  
android:inputType="datetime"  
android:inputType="date"          // 日期键盘  
android:inputType="time"          // 时间键盘

2.2 常用方法

TextView 的方法,EditText 都有

.setText("success");

3. ImageView 图像视图

3.1 常用属性

ImageView 有 2中属性,分为为: src, backgroud,他们之间的区别是:

  1. background 通常指的都是 背景, 而 src 指的是 内容
  2. 当使用 src 填入图片时, 是按照图片大小直接填 ,不会进行拉伸。而使用 background 填入图片,则是会根据 ImageView 给定的宽度来进行 拉伸

 设置缩小放大的大小

3.2 常用方法

代码语言:javascript复制
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
                imageView.setImageResource(R.drawable.image_2); // 修改图片
                break;
            default:
                break;
        }
    }

4. Button 按钮 4.1 常用属性 1. Button 继承自 TextView ,所以可以 使用 TextView 的那些属性

2. 我们可以将 Button 的 android:background 属性设置为该 drawable 资源即可轻松实现按下 按钮时不同的按钮颜色或背景

下表列出了可以设置的属性

在 res/drawable 目录下新建一个按钮状态的资源文件 btn_bg.xml

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/btn_pressed"/>
    <item android:state_enabled="false" android:drawable="@drawable/btn_disabled"/>
    <item android:drawable="@drawable/btn_normal"/>
</selector>

 4.2 监听方法

1. 一个按钮的监听方法

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

//点击Button会改变edittext的文字为"点击了Button"

edittext.setText("点击了Button");

}

});

2. 继承于接口 OnClickListener 的监听方法

代码语言:javascript复制
public class MainActivity extends Activity implements OnClickListener {
    private EditText edittext;
    private Button button;
    private Button button2;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        edittext=(EditText) findViewById(R.id.edit_text);
        button = (Button) findViewById(R.id.button);
        button2 = (Button) findViewById(R.id.button2);
        button.setOnClickListener(this);
        button2.setOnClickListener(this);
    }
 
    @Override
    //用switch区分是哪个id
    public void onClick(View v) {
        switch (v.getId()){
        case R.id.button:
            edittext.setText("点击了Button");
            break;
        case R.id.button2:
            edittext.setText("点击了Button2");
            break;
        }
    }
}

5. RadioButton 单选按钮 5.1 常用属性 RadioButton 单选按钮就是只能够选中一个,所以我们需要把 RadioButton 放到 RadioGroup 按钮组中,从而实现单选功能

RadioButton 继承自 Button,所以拥有 Button 的所有公开属性和方法

RadioButton 只有两个状态,选中与未选中,所以也就只有一个属性是最重要的,那就是 android:checked

android:checked

设置或获取 RadioButton 的选中状态

如果 RadioButton 未选中,那么点击它可以让它选中,但反过来是不可以的,就是不能从选中状态到未选中状态

5.2 监听方法 RadioGroup 是单选组合框,用于 将 RadioButton 框起来。在多个 RadioButton被 RadioGroup 包含的情况下,同一时刻只可以选择一个 RadioButton,并用 setOnCheckedChangeListener 来对 RadioGroup 进行监听。

代码语言:javascript复制
//调用setOnCheckedChangeListener来对RadioGroup进行监听的代码
        radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if(checkedId == radiobutton1.getId()){
                    textView.setText("北京");
                }else if(checkedId == radiobutton2.getId()){
                    textView.setText("上海");
                }
            }
        });

6. RadioGroup 单选按钮组 6.1 常用属性 要实现 RadioButton 的 单选功能,需要把所有的 RadioButton 放到 RadioGroup 里面

 用于将几个 RadioButton 组在一起形成单选按钮组,实现单选功能,也就是选中一个,会取消其它选项的选中

RadioGroup 只提供了一个 XML 属性 android:checkedButton 用于指定初始化时选中的 ID

属性

说明

android:checkedButton

初始化时选中的选项 ID (android:id)

RadioGroup 提供了很多方法用于选中或者获取选中的选项 ID ,下面列出常用的几个

方法

说明

check(int id)

根据 id 选中某个选项

clearCheck()

清除所有选项的选中状态,也就时一个都没选中

getCheckedRadioButtonId()

获取选中的选项 id

事件

说明

OnCheckedChangeListener

当 RadioGroup 中的某个选项被选中时触发

7. CheckBox 复选框

7.1 常用属性 Android CheckBox (复选框) 继承自 Button ,可以说是只有两种状态的按钮 (选中或未选中状态)

可以把多个 CheckBox 放在一起实现同时选中多项,但是,记住,它们之间没有任何关系,一个的选中并不会影响另一个选中或者不选中

CheckBox 除了从 Button 继承而来的属性外,没有自己的属性,但从 CompoundButton 继承了一个属性 android:checked 用于表示是否选中

属性

说明

android:checked

设置或者获取 CheckBox 是否选中

7.2 监听方法

CheckBox 提供了几个方法和事件用于设置或者获取自身是否选中状态

方法

说明

isChecked()

判断自身是否选中

setChecked(boolean checked)

设置自身是否选中状态

事件

说明

OnCheckedChangeListener

选中状态改变监听器,当自身选中状态变化时会触发这个事件

8. ToggleButton 开关按钮

8.1 常用属性

ToggleButton (开关按钮) 允许我们在两个状态之间切换,有点类似于电灯的开关

ToggleButton 和 CheckBox 一样都继承自 CompoundButton ,所以都有 Button 的属性和方法,又有 CompoundButton 的属性 android:checked

8.2 监听方法

ToggleButton 提供了一些方法用来改变或获取自身的状态和开关时的文本

9. Switch 开关

9.1 常用属性

允许我们在两个状态之间切换,有点类似于现在流行的滑动解锁

Switch (开关) 也继承自 Button 和 CompoundButton,所以拥有它们的属性、方法和事件

不过 Switch 也拥有自己的属性,而且特别的多

9.2 监听方法

Switch 提供了一些方法用来改变或获取自身的状态和开关时的文本

10. ProgressBar 进度条 10.1 常用属性  ProgressBar(进度条) 可以用来显示一个操作的进度,一般用于比较耗时的地方,比如下载进度条,比如加载等待

ProgressBar 有两种模式,确定性 和 不确定性的 ,有两种外观模式,条形 和 圆形,所以总共有四种,这涉及到两个属性

 其他属性

10.2 监听方法

11. SeekBar ( 拖动条 ) 控件

11.1 常用属性

SeekBar ( 拖动条 ) 控件一般用于音乐播放器或者视频播放器的音量控制或者播放进度控制

SeekBar 是 ProgressBar 的子类,所以 ProgressBar的属性都可以用

SeekBar 有以下几个简单的属性

11.2 监听方法

SeekBar 内置了 SeekBar.OnSeekBarChangeListener 事件

该事件会触发三个方法

完毕。

0 人点赞