Simple UI Component

一. Some Simple Component

1.TextView

XML

<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” />                       // 字体大小

Code

setText(CharSequence text)
CharSequence  getText()
void setVisibility(int visibility) : 设置视图的可见性

2.EditText

XML

<EditText
        android:id="@+id/et_test1_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint=“请输入手机号“    //默认提示文本
        android:inputType=“phone”>    // 输入数据类型限定
</EditText>

Code

Editable getText()
setText(CharSequence text)

3.Button

XML

<Button
    android:id="@+id/btn_test1_submit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="提 交" />

Code

setOnClickListener(OnClickListener l)

4.ImageView

XML

<ImageView
    android:id="@+id/iv_simple_image"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@android:drawable/alert_dark_frame"
    android:src="@android:drawable/ic_media_play" />

Code

public void setImageResource(int resId)
public void setBackgroundResource(int resid)
setTag(final Object tag)
Object getTag(int key)

5.CheckBox

XML

<CheckBox
    android:id="@+id/cb_test1_basket"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="篮球" 
    android:checked=“true”/> //标识默认是否勾选

Code

//设置选中状态改变的监听
void setOnCheckedChangeListener(OnCheckedChangeListener listener)
//判断当前是否勾选
boolean isChecked()
//设置CheckBox是否勾选
void setChecked(boolean checked)

6.RadioGroup，RadioButton

XML

<RadioGroup
    android:id="@+id/rg_simple_sex"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/rb_simple_male"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Male" />

    <RadioButton
        android:id="@+id/rb_simple_female"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Female" />

    <RadioButton
        android:id="@+id/rb_simple_notmale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NotMale" />
</RadioGroup>

Code

//为RadioGroup设定改变监听函数
void setOnCheckedChangeListener(OnCheckedChangeListener listener)

7.Toast

Code

Toast.makeText(DialogActivity.this, "取消数据", Toast.LENGTH_SHORT).show();

二. Menu

1.OptionMenu，ContextMenu

XML

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/add" android:title="添加2"></item>
    <item android:id="@+id/del" android:title="删除2"></item>
</menu>

Code

View:
    //注意：长按触发
    void setOnCreateContextMenuListener(OnCreateContextMenuListener l)
OnCreateContextMenuListener:
    public void onCreateContextMenu(ContextMenu menu, View v,
            ContextMenuInfo menuInfo) {
        //方式一：手动添加菜单
        menu.add(0, 1, 0, "添加");
        menu.add(0, 2, 0, "删除");
        super.onCreateContextMenu(menu, v, menuInfo);
    }
    //添加选择实现,item为选择的标识
    public boolean onContextItemSelected(MenuItem item)

public boolean onCreateOptionsMenu(Menu menu) {
    //方式二：使用布局文件添加
    MenuInflater menuInflater=getMenuInflater();
    menuInflater.inflate(R.menu.option_menu, menu);
    return super.onCreateOptionsMenu(menu);
}
boolean onOptionsItemSelected(MenuItem item)

三. Bar

1.Progressbar

XML

<ProgressBar   //默认为圆形进度条
android:id="@+id/pb_test3_loading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ProgressBar
android:id="@+id/pb_test3_loading2"
style=“?android:attr/progressBarStyleHorizontal“    //水平进度条
android:layout_width="match_parent“
android:layout_height="wrap_content"
android:progress=“2“     //当前进度, 默认为0
android:max=“10”/>      // 最大进度, 默认为100

Code

void setProgress(int Progress) : 设置当前进度
int getProgress() : 得到当前进度
void setMax(int max) : 设置最大进度
int getMax() : 设置或得到最大进度

2.SeekBar

XML

<SeekBar
android:id="@+id/sb_test3_prgress"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Code

SeekBar:
    setOnSeekBarChangeListener(OnSeekBarChangeListener l)  : 设置改变的监听
OnSeekBarChangeListener:
    onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) : 进度改变
    onStartTrackingTouch(SeekBar seekBar) : 按下滑杆
    onStopTrackingTouch(SeekBar seekBar) : 从滑杆离开

四. Dialog

1. 一般Dialog

Code

//通过AlertDialog.Builder构建
AlertDialog.Builder :   
     create() : 创建AlertDialog对象
     show() : 创建AlertDialog对象, 同时将其显示出来
     setTitle(CharSequence title) : 设置标题
     setMessage(CharSequence message) : 设置内容
     setPositiveButton(String text, OnClickListener listener) : 设置正面按钮
     setNegativeButton(String text, OnClickListener listener): 设置负面按钮
     dismiss() : 移除dialog

2.单选列表AlertDialog

Code

AlertDialog.Builder :   
    setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener)

3.自定义AlertDialog

Code

//注意：此view的真是类型是布局文件根标签的类型，其内部包含子View对象
//注意：如何得到其内部的独立的子View：view.findViewById(id)
View view = View.inflate(this, R.layout.dialog_view, null);
final EditText et_dialog_name = (EditText) view.findViewById(R.id.et_dialog_name);
final EditText et_dialog_password = (EditText) view.findViewById(R.id.et_dialog_password);
AlertDialog.Builder:
    setView(View view)

4.ProgressDialog：Circle

Code

/**
 * 显示CircleProgress
 * 
 * @param v
 */
public void showCP(View v){
    //回调方法在主线程执行
    /*
     * 按下变色
     * 松开触发click回调(2s)
     * 颜色恢复
     * 触发回调中的显示动作
     */
    final ProgressDialog show = ProgressDialog.show(this, "数据加载", "数据加载中");

    //模拟长时间工作
    //注意1：长时间的工作不能在主线程中做，得启动分线程完成
    new Thread(){
        public void run() {
            for(int i=0;i<20;i++){
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            // 此方法更新UI，但是内部使用Handler实现主线程移除Dialog
            show.dismiss();
            // 注意2：不能在分线程中直接更新UI
            // Toast.makeText(DialogActivity.this, "加载完成",Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {// 此run方法在主线程中执行
                    Toast.makeText(DialogActivity.this, "加载完成",
                            Toast.LENGTH_SHORT).show();
                }
            });
        };
    }.start();
}

5.ProgressDialog：Horizontal

Code

/**
 * 显示HorizontalProgress
 * 
 * @param v
 */
public void showHP(View v) {
    //step1:创建Dialog对象
    final ProgressDialog pd = new ProgressDialog(this);
    //step2:设置
    pd.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
    //step3:显示
    pd.show();
    //step4:启动分线程加载数据更新进度
    new Thread(new Runnable() {
        @Override
        public void run() {
            int count=20;
            pd.setMax(count);
            for(int i=0;i<count;i++){
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                pd.setProgress(pd.getProgress()+1);
            }
            pd.dismiss();
        }
    }).start();
}

6.DatePickerDialog

Code

/**
 * 显示日期
 * 
 * @param v
 */
public void showDP(View v) {
    Calendar calendar = Calendar.getInstance();
    int year = calendar.get(Calendar.YEAR);
    int monthOfYear = calendar.get(Calendar.MONTH);
    int dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH);

    new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int year, int monthOfYear,
                int dayOfMonth) {

        }
    }, year, monthOfYear, dayOfMonth).show();
}

7.TimePickerDialog

Code

/**
 * 显示时间
 * 
 * @param v
 */
public void showTP(View v) {
    Calendar calendar = Calendar.getInstance();
    int hourOfDay=calendar.get(Calendar.HOUR_OF_DAY);
    int minute=calendar.get(Calendar.MINUTE);

    new TimePickerDialog(this,new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            Toast.makeText(DialogActivity.this, hourOfDay+":"+minute, Toast.LENGTH_SHORT).show();
        }
    }, hourOfDay, minute, true).show();
}