Andriod开发学习——Android UI基础知识1.3

04 基本UI组件

4.1 TextView （文本框）

TextView 用于显示文本的一个控件。

• 文本的字体尺寸单位为 sp :
• sp: scaled pixels(放大像素)， 主要用于字体显示。
• 文本常用属性：

id => 设置一个组件id，通过findViewById()的方法获取到该对象，然后进行相关设置
layout_width => 组件宽度
layout_height => 组件高度
　　wrap_content 自适应大小
　　match_parent 与父同
text => 设置文本内容
background => 背景颜色（或背景图片）
textColor => 设置字体颜色
textStyle => 设置字体样式
textSize => 字体大小
gravity => 内容的对齐方向
autoLink => autoLink的属性可以将符合指定格式的文本转换为可单击的超链接形式
drawableTop => TextView上部出现一个图片
shadow =>
　　shadowColor属性用来设置阴影颜色，颜色可以再colors.xml中预先配置；
　　shadowRadius属性设置模糊程度，数值越大，阴影就越模糊；
　　shadowDx属性设置在水平方向上的偏移量，数值越大，则阴影越向右移动；
　　shadowDy属性设置在垂直方向上的偏移量，数值越大，则阴影越向下移动。
autoLink => 超链接 web,email,phone,map,all
　　textColorLink改颜色
drawableTop =>（drawableLeft、drawableRight、drawableBottom）:在TextView的上（左、右、下方放置一个drawable（图片等））

4.2 EditText（输入框）

• EditText 输入框，集成与TextView, 也继承其属性
• EditText 特有属性

TextView的子类
hint => 文本框内提示
textColorHint => 设置hint提示文字颜色
inputType =>
　　"none"//输入普通字符
　　"text"//输入普通字符
　　"textCapCharacters"//输入普通字符
　　"textCapWords"//单词首字母大小
　　textCapSentences"//仅第一个字母大小
　　"textAutoCorrect"//前两个自动完成
　　"textAutoComplete"//前两个自动完成
　　"textMultiLine"//多行输入
　　"textImeMultiLine"//输入法多行（不一定支持）
　　"textNoSuggestions"//不提示
　　"textUri"//URI格式
　　"textEmailAddress"//电子邮件地址格式
　　"textEmailSubject"//邮件主题格式
　　"textShortMessage"//短消息格式
　　"textLongMessage"//长消息格式
　　"textPersonName"//人名格式
　　"textPostalAddress"//邮政格式
　　"textPassword"//密码格式
　　"textVisiblePassword"//密码可见格式
　　"textWebEditText"//作为网页表单的文本格式
　　"textFilter"//文本筛选格式
　　"textPhonetic"//拼音输入格式
　　"number"//数字格式
　　"numberSigned"//有符号数字格式
　　"numberDecimal"//可以带小数点的浮点格式
　　"phone"//拨号键盘
　　"datetime"//日期+时间格式
　　"date"//日期键盘
　　"time"//时间键盘
drawableLeft => 编辑框内左侧绘制图片资源，= Start | 也有Top Bottom Right
drawablePadding => 图片padding
lines => 占几行(显示上)
digits => 设置只接收指定的文本内容
textAlignment => center(居中),inherit(默认,居左边显示),viewStart(居左显示),viewEnd(居右显示),textStart(居左显示),textEnd(居右显示).
extCursorDrawable => 光标颜色
android:textScaleX => 文本水平缩放系数.
android:typeface => hint字体
maxLength => 最多接收文本长度
maxHeight => 文本区域最大高度
minHeight => 文本区域最小高度
scrollHorizontally => 文本超出,是否出现横拉条
ellipsize => 文字过长时,如何显示
　　"start”开头省略
　　”end”结尾省略
　　”middle”中间省略
　　”marquee” 跑马灯

在 MainActivity 获取文本内容(Java)：

EditText editText = findViewById(R.id.et1);
editText.getText();

4.3 Button（按钮）

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

单击事件监听器（OnClickListener）：

1. 匿名内部类（在 MainActivity 中设置）

        Button button = findViewById(R.id.b1); // id of button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //执行代码
            }
        });

2. onClick属性

    public void myClick(View view){
        //执行代码
    }

然后在 activity_main.xml 中设置

android:onClick = "myClick"

4.5 ImageButton（图像按钮）

• ImageButton与Button属性基本一致，但无text属性，需要把背景设置为透明（在 activity_main.xml 中设置）：

android:background = "#0000"

4.6 RadioButton（单选按钮）

• RadioButton基本用法与事件处理：

1. 如图所示，单选按钮就是只能够选中一个，所以我们需要把RadioButton放到RadioGroup按钮组中，从而实现单选功能
2. 另外我们可以为外层RadioGroup设置orientation属性然后设置RadioButton的排列方式，是竖直还是水平。
   

<RadioGroup
        android:id="@+id/rg1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />
    </RadioGroup>

• 获取选择值

1. 方法一： 切换选项获取(MainActivity)：

   		RadioGroup rg1 = findViewById(R.id.rg1);
        rg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton r = findViewById(checkedId);
                r.getText(); // 返回选择的text
            }
        });

PS：另外有一点要切记，要为每个 RadioButton 添加一个id，不然单选功能不会生效！！！
2. 方法二 用按钮获取：
加入到onClick()的执行代码中。

        for(int i = 0; i < rg1.getChildCount(); i++) {
            RadioButton r = (RadioButton) rg1.getChildAt(i);
            if(r.isChecked()){
                Toast.makeText(MainActivity.this,"success" + r.getText(),Toast.LENGTH_SHORT).show();
                break;
            }
        }

4.7 CheckBox（复选框）

如图所示复选框，即可以同时选中多个选项，至于获得选中的值，同样有两种方式：

1. 为每个CheckBox添加事件：
   setOnCheckedChangeListener
2. 弄一个按钮，在点击后，对每个checkbox进行判断: isChecked()
   
   监听，先添加id/cb1

 CheckBox cb1;
        cb1 = findViewById(R.id.cb1);
        cb1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(cb1.isChecked()){
                    cb1.getText(); // 执行代码
                }
            }
        });

在 activity_main.xml 中的 android:checked = “true” 默认选中。

4.8 DatePicker（日期选择器）

DatePicker获得日期，用Calendar对象：

 public class MainActivity extends AppCompatActivity {
    DatePicker dp;
    int y, m, d;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        dp = findViewById(R.id.dp);
        Calendar c = Calendar.getInstance();
        y = c.get(Calendar.YEAR);
        m = c.get(Calendar.MONTH);
        d = c.get(Calendar.DAY_OF_MONTH);
        dp.init(y, m, d, new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                MainActivity.this.y = year;
                MainActivity.this.m = monthOfYear;
                MainActivity.this.d = dayOfMonth;
                show();
            }
        });
    }
    private void show(){
        String s = y + "年" + (m+1) + "月" + d + "日";
        Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
    }
}

4.9 TimePicker（日历视图）

    TimePicker tp;
        tp = findViewById(R.id.tp);
        tp.setIs24HourView(true);
        tp.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                String s1 = hourOfDay + ":" + minute;
                Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
            }
        });

4.10 Chronometer（计时器）

就是一个简单的计时器，继承至 TextView

• android:format = “格式：%s” 设置格式
  

    Chronometer cm;
        cm = findViewById(R.id.cm);
        cm.setBase(SystemClock.elapsedRealtime());
        cm.setFormat("%s");
        cm.start();
        cm.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
                if(SystemClock.elapsedRealtime() - cm.getBase() >= 10000){
                    cm.stop();
                }
            }
        });

**start()和stop()**只是影响屏幕上的显示，实际后台还是在计时。
时间的获得方法：

• System.currentTimeMillis()
  1970.01.01至今的ms数，与时间设置有关
• SystemClock.elapsedRealtime()
  手机从上一次启动到现在的ms数

让Activity失去焦点暂停计数的方法：使用LifeCycle做观察者，xml改成自己的LifeChronometer ：

public class LifeChronometer extends Chronometer implements LifecycleObserver {
    private long elapsedTime;
    public LifeChronometer(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    // 观察Activity的生命周期
    @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
    private void pause(){
        elapsedTime = SystemClock.elapsedRealtime() - getBase();
        stop();
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
    private  void resume(){
        setBase(SystemClock.elapsedRealtime() - elapsedTime);
        start();
    }
}
// main内：
        LifeChronometer cm2 =  findViewById(R.id.cm2);
        cm2.setBase(SystemClock.elapsedRealtime());
        getLifecycle().addObserver(cm2);