Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android常见UI组件

Android开发者常见的UI组件总结大全

作者：YUFENGSHI.LJ

Android开发中UI组件是构建用户界面的基本元素,下面这篇文章主要给大家介绍了关于Android开发者常见的UI组件总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

TextView 文本视图

设置字体大小：android:textSize="20sp" 用sp
设置颜色：android:textColor="#00ffff"
设置倍距(行距)：android:lineSpacingMultiplier="2"
设置具体行距：android:lineSpacingExtra="15sp" 与倍距只可取其一
过长文本的处理方式：
    1.在外面添加滚动条，注意，一个滚动条里面只能添加一个子控件
    2.省略过长部分，取消换行部分
省略过长部分：
    1.android:singleLine="true" 后面加省略号  android:ellipsize="middle" 设置省略号的位置
    2.android:lines="1"  设置单行  后面加句号

 <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="20sp"
    android:textColor="#00ffff"
    android:lineSpacingMultiplier="2"
    android:text="@string/long_text"/>

eg:跑马灯 

跑马灯,一个页面只有一个跑马灯生效，因为它需要获取焦点
    android:ellipsize="marquee" 设置跑马灯形式
    android:focusable="true" 设置可以获取焦点
    android:focusableInTouchMode="true" 设置在触摸时获取焦点
    android:marqueeRepeatLimit="marquee_forever" 设置跑马灯时长

<TextView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:textSize="20sp"
   android:textColor="#00ffff"
   android:singleLine="true"
   android:ellipsize="marquee"
   android:focusable="true"
   android:focusableInTouchMode="true"
   android:marqueeRepeatLimit="marquee_forever"
   android:text="@string/long_text"/>

string类中定义的长文本 

<string name="long_text"> 洞穴昏暗潮湿，被植物发出的微弱荧光照亮。
　　石壁上缠绕着藤蔓，墨绿，深紫，浓黑，像大团的、纠缠的蛇。
　　一只黑色的飞虫跌跌撞撞闯入，它长着六只坚硬的翅膀，有三个口器。
　　下一秒，纠缠的藤蔓间忽然出现一个巨大的深紫色膨起，它迅速裂开，像张开了一张嘴，在下一刻瞬间合拢，将飞虫吞入腹中。
　　藤蔓群缓缓蠕动起来，膨起的那部分逐渐回收，恢复到原本的状态。
　　洞穴里响起仿佛翅膀扇动的声音，一滴粘液拖曳着半透明的细丝从洞穴顶端落下来，啪嗒一声落进地面黏腻的苔藓里，它们细微地蠕动起来，这滴闪光的粘液很快被吸收殆尽，在地面消失了踪影。
　　角落——被绿色真菌发出的荧光照亮的角落。岩石与土壤的缝隙里，白色像潮水一样涌出来，覆盖了大片的区域，是雪白的菌丝。它生长，蔓延，伸出数以亿计的触角，最后向着中央蠕动而去，合拢，聚集，拉长，一个形体出现。一只脚踏上厚重软腻的苔藓，苔藓陷下去吞没了它，只露出雪白的脚踝。
　　安折看自己的脚踝——属于人类的肢体，由骨架、肌肉和血管支撑起来的肢体，关节可以活动，但因骨骼的限制并不灵活。角质层构成指甲，圆润透明，是退化的产物，来自兽类锋利的爪尖。
　　他抬起腿，迈出一步，先前因被踩而凹陷的苔藓湿凉且富有弹性，在他离开后重新聚拢起来，像竖立的蚯蚓。
　　这一次，他脚下踩到了别的东西，是一具人类骨骼的手臂。
　　昏暗中，安折望向那具骷髅。
    </string>

ImageView

•matrix：使用matrix方式进行缩放。
•fitXY：横向、纵向独立缩放，以适应该ImageView。
•fitStart:保持纵横比缩放图片，并且将图片放在ImageView的左上角。
•fitCenter：保持纵横比缩放图片，缩放完成后将图片放在ImageView的中央。
•fitEnd：保持纵横比缩放图片，缩放完成后将图片放在ImageView的右下角。
•center：把图片放在ImageView的中央，但是不进行任何缩放。
•centerCrop：保持纵横比缩放图片，以使图片能完全覆盖ImageView。
•centerInside：保持纵横比缩放图片，以使得ImageView能完全显示该图片。

ImageButton

ImageButton继承与ImageView；

Button可以显示图片也可以显示文本，而ImageButton只能显示图片；

ImageButton中的图片可以按比例缩放；

Button只能设置一张图片，而ImageButton可以设置前景和背景两张图片重叠的效果

EditView

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:inputType="number"
        android:maxLength="12"
        android:hint="账号"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:background="@color/design_default_color_secondary"
        android:inputType="textPassword"
        android:hint="密码"/>

Button

CheckBox 多选按钮

CheckBox继承CompoundButton，是多选按钮。
android:checked设置按钮是否选中。

  • setOnCheckedChangeListener(OnCheckedChangeListener)来对多选按钮进行监听。
  • boolean isChecked() 判断当前按钮是否选中
  • void.setChecked(boolean checked) 设置按钮是否勾选
 CheckBox checkBox = findViewById(R.id.checkBox1);

        // 设置选中状态
        checkBox.setChecked(false);

        // checkBox.isChecked() 获取选中状态
        boolean isChecked = checkBox.isChecked();

        Log.e("isChecked","当前复选框选中状态："+isChecked);

        // 监听状态变化 setOnCheckedChangeListener() 方法
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                Log.e("isChecked","当前复选框选中状态："+isChecked);
            }
        });

RadioButton 单选按钮

单选控件和 RadioGroup 一起使用， 在一个 RadioGroup 中只能选中一个

android:checkedButton指定初始选项。

RadioGroup 添加监听器：setOnCheckedChangeListener（OnCheckedChangeListener）

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RadioButtonActivity">
   
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@color/cardview_shadow_start_color">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="111"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="222"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="333"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="444"/>
    </RadioGroup>

</LinearLayout>
radioGroup = findViewById(R.id.radioGroupId);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            // checkedId 是选中的 RadioButton 的id
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // 找到选中的 RadioButton
                RadioButton radioButton = findViewById(checkedId);
                Toast.makeText(RadioButtonActivity.this, "当前选中的单选项："+radioButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });

ToggleButton 开关触发器

<ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textOff="关闭了"
        android:textOn="打开了"
        android:checked="true"
        android:text="ToggleButton" />

SeekBar 滑动条

android:max=“255” （最大的滑动值，从0开始）

android:progress=“255”（初始时滑动条的位置）

<SeekBar
    android:id="@+id/seekBar"
    android:max="100"
    android:progress="30"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
public class RadioButtonActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button);
       
        SeekBar seekBar = findViewById(R.id.seekBar);
        // 设置最大值
        seekBar.setMax(50);
        // 设置当前进度
        seekBar.setProgress(40);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            // 进度改变时（过程中）的回调方法
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.e("seekBar change","当前seekBar的进度："+progress);

            }

            // 开始时回调的方法
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.e("seekBar开始了","当前seekBar的进度："+seekBar.getProgress());

            }

            // 结束时回调的方法
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.e("seekBar结束了","当前seekBar的进度："+seekBar.getProgress());
            }
        });
    }
}

 ProgressBar 进度条

<?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"
    tools:context=".ProgressBarActivyty">
    <!--
    ProgressBar 的默认形式是转圈圈
    style="?android:attr/progressBarStyleHorizontal" style 设置风格
    android:max="100"  进度条的最大值
    android:indeterminate="true" 永恒滚动
    android:progress="10" 已完成进度
    -->
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ProgressBar
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:progress="10"
        android:max="100"
        style="?android:attr/progressBarStyleHorizontal"/>
    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:progress="10"
        android:max="100"
        android:indeterminate="true"
        style="?android:attr/progressBarStyleHorizontal"/>
    <ProgressBar
        android:id="@+id/progress1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:max="100"
        style="?android:attr/progressBarStyleHorizontal"/>

</LinearLayout>
public class ProgressBarActivyty extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar);
        ProgressBar progressBar1 = findViewById(R.id.progress1);
        // 设置progressBar进度
        // progressBar1.setProgress(80);
        // 通过代码控制进度--- 利用线程
        // 但是在Android 4.0 之后不能在线程中直接操纵控件，会崩溃。progressBar是一个特例
        new Thread(){
            public void run(){
                for (int i = 1; i <= 100 ; i++) {
                    progressBar1.setProgress(i);
                    try {
                        // 休眠一下
                        Thread.sleep(30);
                    } catch (InterruptedException e) {
                        throw new RuntimeException(e);
                    }
                }
            }
        }.start();
    }
}

共有属性

margin: 外边距，控件的外部边缘距离其父容器边缘的距离
padding: 内边距，控件内部的控件距离它边缘的边距
gravity:控件内部的控件相对于它的位置
layout_gravity:控件本身相对于父容器的位置
visibility: 可见状态 gone(不可见也不保留位置) visible(可见) invisible(不可见但保留位置)

总结 

到此这篇关于Android开发者常见的UI组件总结的文章就介绍到这了,更多相关Android常见UI组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文