UI用户界面（2018.5.7）

UI的定义

• 全称 user interface , 意为 : 用户界面

• UI 由 View 和 ViewGroup 组成       

• View 类是所有视图 ( 包括 ViewGroup) 的 根基类

• View 在屏幕上占据一片 矩形区域 , 并会在上面进行 内容绘制

• ViewGroup 包含一些 View 或 ViewGroup, 用于 控制子 View 的布局

View的API结构

UI的组成：

       

•界面的整体布局(layout)

• 组成可视界面的各个 UI 组件 (Component)

理解UI事件

• 当用户通过手指 触摸 UI 时 , 系统会自动创建对应的 Event 对象

• Android 中提供了多种方式 拦截处理 不同类型的事件

• 视图本身就可以处理发生在该视图上的事件

使用UI事件

• Android 提供了很多不同类型的 事件监听器接口

View.OnClickListener: onClick()

View.OnLongClickListener: onLongClick()

View.OnTouchListener: onTouch()

View.OnCreateContextMenuListener: onCreateContextMenu()

View.OnFocusChangeListener: onFocusChange()

View.OnKeyListener: onKey()

• 给视图添加事件监听的方式

       view.seton…Listener(listener)

测试用例

常用的简单Component

TextView:  文本视图

<TextView

    android:id=“@+id/tv_test1_message“     //指定id

    android:layout_width=“match_parent“  //宽度

    android:layout_height=“wrap_content“//高度

    android:text=“这是TextView的内容“     // 文本

    android:textColor=“#ff0000“                    // 文本颜色

    android:textSize=“20sp”/>                       // 字体大小

EditText:  文本输入框

<EditText

        android:id="@+id/et_test1_number"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint=“请输入手机号“                                //默认提示文本

       android:inputType=“phone”>    // 输入数据类型限定

</EditText>

Button:  按钮

<Button

    android:id="@+id/btn_test1_submit"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:text="提交" />

ImageView: 图片视图

<ImageView

    android:id="@+id/iv_test1_play"

    android:layout_width="70dp"

    android:layout_height="70dp"

   android:background=“@drawable/ic_launcher“          //背景图片

    android:src=“@android:drawable/ic_media_play”/> //前景图片

//设置前景图片

publicvoid setImageResource(intresId)

//设置背景图片

publicvoid setBackgroundResource(intresid)

CheckBox: 多选框

<CheckBox

            android:id="@+id/cb_test1_basket"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="篮球"

            android:checked=“true”/>//标识默认是否勾选

//判断当前是否勾选

booleanisChecked()

//设置CheckBox是否勾选

void setChecked(booleanchecked)

//设置选中状态改变的监听

void setOnCheckedChangeListener(OnCheckedChangeListener listener)

RadioGroup/RadioButton: 单选框

<RadioGroup     

            android:id="@+id/rg_test1_sex"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal" >

            <RadioButton

                android:id="@+id/rb_test1_male"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="男" />

            <RadioButton

                android:id="@+id/rb_test1_female"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content“

                android:checked="true"

                android:text="女" />

        </RadioGroup>

——————————————————————————————————————————————

 关于异常

————————————————————————————————————————————————————

代码如下：

一.主界面

初始化

setContentView(R.layout.activity_main);

findViewById(R.id.button1).setOnClickListener(this);

findViewById(R.id.button2).setOnClickListener(this);

findViewById(R.id.button3).setOnClickListener(this);

findViewById(R.id.button4).setOnClickListener(this);

}

public void onClick(View v){

switch (v.getId()) {//简单的

case R.id.button1:

startActivity(new Intent(this,SimpleComponentActivity.class));

break;

case R.id.button2:

break;

case R.id.button3:

break;

case R.id.button4:

break;

}

简单的Component 

对RadioButto设置

rg_sex=(RadioGroup)findViewById(R.id.rg_sex);//获取Id

rg_sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {//设置监听

public void onCheckedChanged(RadioGroup group, int checkedId) {

//checkedId就是RadioButton的id

RadioButton rb = (RadioButton) findViewById(checkedId);

String sex = rb.getText().toString();//得到文本

Toast.makeText(SimpleComponentActivity.this, sex, Toast.LENGTH_SHORT).show();

//同理都获取ID设置监听

 tv_simple_msg=(TextView)findViewById(R.id.tv_simple_msg);

et_simple=(EditText)findViewById(R.id.et_simple);

bt_simple_submit=(Button)findViewById(R.id.bt_simple_submit);

//对图片视图设置监听

iv_simple_play=(ImageView) findViewById(R.id.iv_simple_play);

iv_simple_play.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

if (status) {

//设置背景图片

iv_simple_play.setBackgroundResource(R.drawable.ic_launcher);

//系统自带

iv_simple_play.setBackgroundResource(android.R.drawable.alert_dark_frame);

//设置前景图片

iv_simple_play.setImageResource(android.R.drawable.ic_media_pause);

status =false;

}else{

iv_simple_play.setBackgroundResource(android.R.drawable.alert_light_frame);

//设置前景图片

iv_simple_play.setImageResource(android.R.drawable.ic_media_play);

status =true;

}

}

}）；

//对选框获取Id设置 选择监听

cb_basketball=(CheckBox) findViewById(R.id.cb_basketball);

textView2=(CheckBox) findViewById(R.id.textView2);

cb_pingpong=(CheckBox) findViewById(R.id.cb_pingpong);

//选中状态改变的监听    我们对篮球设置   其他控件同理

cb_basketball.setOnCheckedChangeListener(new OnCheckedChangeListener() {

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked) {

Toast.makeText(SimpleComponentActivity.this, "选中篮球", Toast.LENGTH_SHORT).show();

}else{

Toast.makeText(SimpleComponentActivity.this, "未选中篮球", Toast.LENGTH_SHORT).show();

}

}

}）；

//是否选中 控件

public void confirm(View v){

StringBuffer sb = new StringBuffer();

if (cb_basketball.isChecked()) {

sb.append(cb_basketball.getText().toString().trim());

}

if (textView2.isChecked()) {

sb.append(textView2.getText().toString().trim());

}

if (cb_pingpong.isChecked()) {

sb.append(cb_pingpong.getText().toString().trim());

}

}