UI组件-TextView及其子类

前言

时间就像海绵里的水，只要愿挤，总还是有的。

TextView组件

TextView直接继承了View,它的作用就是在界面上显示文本。

代码示例

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 设置文本框内文字居中 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15pt"
        android:text="halo_加油"
        android:gravity="center"
        />

    <!-- 设置字号为20pt，在文本框结尾处绘制图片 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HALO_加油"
        android:textSize="20pt"
        android:drawableEnd="@drawable/ic_launcher"
     />

    <!-- 设置结尾省略，所有字母大写 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油"
        android:ellipsize="end"
        android:textAllCaps="true"
    />

    <!-- 对邮箱、电话增加链接 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="邮箱是halo_andriod@163.com,电话是010666666"
        android:autoLink="email|phone"
    />

    <!-- 设置文字颜色、大小，并使用阴影  -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Halo_加油"
        android:shadowColor="#00f"
        android:shadowDx="10.0"
        android:shadowDy="8.0"
        android:shadowRadius="3.0"
        android:textColor="#f00"
        android:textSize="18pt"
    />
    <!-- 密码框 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="halo_加油"
        android:password="true"
    />
</LinearLayout>

效果

Screenshot_20171018-095040.png

提示

andriod:drawableBottom属性,在文本框内文本的底端绘制指定图像。
andriod:drawableTop属性,在文本框内文本的顶端绘制指定图像。
andriod:drawableLeft属性,在文本框内文本的左边绘制指定图像。
andriod:drawableRight属性,在文本框内文本的右边绘制指定图像。
andriod:drawableEnd属性,在文本框内文本的结尾处绘制指定图像。
andriod:drawableStart属性,在文本框内文本的开始处绘制指定图像。
andriod:ellipsize属性,设置当显示文本超过了TextView的长度时,如何处理文本内容。(none,start,middle,end,marquee)。
andriod:lines属性,设置该文本框默认占几行。
andriod:linksClickable属性,控制该文本框的URL、E-mail等链接是否可点击。
andriod:maxLines属性,设置该文本框最多占几行。
andriod:singleLine属性,设置该文本框是否为单行模式。
andriod:textAllCaps属性,设置是否将文本框的所有字母显示为大写字母。
andriod:autoLink属性,是否将符合指定格式的文本转换为可单击的超链接形式。
andriod:shadowColor属性,设置文本框内文本的阴影颜色。

自定义TextView组件

在有的时候，系统自带TextView满足不了你的要求，比如说在默认情况下，TextView是不带边框的，如果想为TextView添加边框，我们可以考虑为TextView设置一个背景Drawable，该Drawable只是一个边框，这样就实现了带边框的TextView。

代码示例

drawable\bg_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 设置背景色为透明色 -->
    <solid android:color="#0000"/>
    <!-- 设置红色边框 -->
    <stroke android:width="4px" android:color="#f00"/>
</shape>
drawable\bg_border2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 指定圆角矩形的4个圆角的半径 -->
    <corners
        android:topLeftRadius="20px"
        android:topRightRadius="20px"
        android:bottomLeftRadius="20px"
        android:bottomRightRadius="20px"
        />

    <!-- 指定边框线条的宽度和颜色 -->
    <stroke android:width="4px" android:color="#f0f"/>
    <!-- 指定使用渐变背景色，使用sweep类型的渐变。颜色从红色->绿色->蓝色 -->
    <gradient
        android:startColor="#f00"
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:type="sweep"
        />
</shape>
layout\textview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="带边框的文本1"
    android:textSize="22pt"
    android:background="@drawable/bg_border"
/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="圆角边框、渐变背景的文本"
    android:textSize="22pt"
    android:background="@drawable/bg_border2"
/>

</LinearLayout>

效果

Screenshot_20171018-102316.png

EditText组件

EditText与TextView非常相似，它甚至与TextView共用了绝大部分XML属性和方法。EditText与TextView的最大区别在于：EditText可以接受用户输入。

代码示例

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="用户名:"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写登陆账号"
            android:selectAllOnFocus="true"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="密码:"
            android:textSize="16sp"
            />
        <!-- andriod:inputType="numberPassword"表明只能接受数字密码 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="年龄:"
            android:textSize="16sp"
            />
        <!-- inputType="number"表明是数值输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="生日:"
            android:textSize="16sp"
            />
        <!-- inputType="date"表明是日期输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="date"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="电话号码:"
            android:textSize="16sp"
            />
        <!-- inputType="phone"表明是输入电话号码的输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写您的电话号码"
            android:selectAllOnFocus="true"
            android:inputType="phone"
            />
    </TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册"
        />
</TableLayout>

效果

Screenshot_20171018-110532.png

提示

android:hint属性,设置当该文本框内容为空时，文本框内默认显示的提示文本。
android:inputType属性,指定文本框的类型。类似于HTML中<input.../>元素的type属性。

Button组件

Button继承了TextView,它主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮会触发一个onClick事件。

示例代码

\layout\button.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 文字带阴影的按钮 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文字带阴影的按钮"
        android:textSize="12pt"
        android:shadowColor="#aa5"
        android:shadowRadius="1"
        android:shadowDx="5"
        android:shadowDy="5"
        />
    <!-- 普通文字按按钮 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        android:textSize="10pt"
        android:background="@drawable/red"
        />
    <!-- 带文字的图片按钮 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="11px"
        android:text="带文字的图片按钮"
        android:background="@drawable/button_selector"
        />
</LinearLayout>
\drawable\button_selector.xml
<?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/red"
        />
    <!-- 指定按钮松开时的图片 -->
    <item android:state_pressed="false"
        android:drawable="@drawable/blue"
        />
</selector>

效果

Screenshot_20171018-123121.png

提示

这里只是简单的介绍了Button组件的生成方式,Button是一个很强大的组件,使用Button生成的按钮不仅可以是普通的文字按钮,也可以定制成任意形状。另外,Button的点击事件将在后面的章节介绍。

RadioButton组件和CheckBox组件

单选钮(RadioButton)和复选框(CheckBox)继承了Button类,因此可以直接使用Button支持的各种属性和方法。

代码示例

\layout\radio_check.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="性别:"
            />
        <!-- 定义一组单选按钮 -->
        <RadioGroup
            android:id="@+id/rg"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal"
            >
            <!-- 定义两个单选按钮 -->
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/male"
                android:text="男"
                android:checked="true"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/female"
                android:text="女"
                />
        </RadioGroup>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="喜欢的颜色:"/>
        <!-- 定义一个垂直的现线性布局 -->
        <LinearLayout
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <!-- 定义三个复选框 -->
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="红色"
                android:checked="true"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="蓝色"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="绿色"
                />
        </LinearLayout>
    </TableRow>
    <TextView
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</TableLayout>
MainActivity.java
public class MainActivity extends Activity {

    RadioGroup rg;
    TextView show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.radio_check);

        //获取rg、show两个组件
        rg = (RadioGroup) findViewById(R.id.rg);
        show = (TextView) findViewById(R.id.show);
        //为RadioGroup组件的OnCheckedChanged事件绑定事件监听器
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // TODO Auto-generated method stub
                String tip = checkedId == R.id.male?"您的性别是男人":"您的性别是女人";

                show.setText(tip);
            }
        });
    }

}

效果

Screenshot_20171018-131021.png

提示

andriod:checked属性，用于指定RadioButton、CheckBox初始时是否被选中。
RadioButton与CheckBox的不同之处在于,一组RadioButton只能选中其中一个,因此RadioButton通常要与RadioGroup一起使用。

ToggleButton组件和Switch组件

状态开关按钮(ToggleButton)和开关(Switch)由Button派生出来,因此它们的本质也是按钮,只不过它们通常用于切换程序中的某种状态。

代码示例

/layout/togglebutton_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 定义一个ToggleButton按钮 -->
    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="横向排列"
        android:textOn="纵向排列"
        android:checked="true"
        />
    <!-- 定义一个Switch按钮 -->
    <Switch
        android:id="@+id/switcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="横向排列"
        android:textOn="纵向排列"
        android:checked="true"
        />
    <!-- 定义一个可以动态改变方向的线性布局 -->
    <LinearLayout
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3"
            />

    </LinearLayout>
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {

    ToggleButton toggle;
    Switch switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.togglebutton_switch);

        toggle = (ToggleButton) findViewById(R.id.toggle);
        switcher = (Switch) findViewById(R.id.switcher);

        final LinearLayout test = (LinearLayout) findViewById(R.id.test);

        OnCheckedChangeListener listener = new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                // TODO Auto-generated method stub
                if(isChecked)
                {
                    //设置LinearLayout垂直布局
                    test.setOrientation(1);
                    toggle.setChecked(true);
                    switcher.setChecked(true);
                }
                else
                {
                    //设置LinearLayout水平布局
                    test.setOrientation(0);
                    toggle.setChecked(false);
                    switcher.setChecked(false);
                }
            }
        };
        toggle.setOnCheckedChangeListener(listener);
        switcher.setOnCheckedChangeListener(listener);
    }

}

效果

Screenshot_20171018-133244.png
Screenshot_20171018-133246.png

提示

andriod:textOff属性,设置当前按钮的状态关闭时显示的文本。
andriod:textOn属性,设置当前按钮的状态关打开时显示的文本。

AnalogClock组件和TextClock组件

时钟UI组件是两个非常简单的组件,直接上代码。

代码示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal" >
    <!-- 定义模拟时钟 -->
    <AnalogClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <!-- 定义数字时钟-->
    <DigitalClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="10pt"
        android:textColor="#f0f"
        />
</LinearLayout>

效果

Screenshot_20171018-135214.png

提示

目前TextClock已经取代了早期的DigitalClock组件,需要API17以上才能使用。TextClock组件能以24小时制或12小时制来显示时间,而且可以由程序员来指定时间格式。

Chronometer组件

计时器(Chronometer)组件继承自TextView,它显示的是从某个起始时间开始,一共过去了多长时间。
Chronometer的用法也很简单,它只提供了一个andriod:format属性,用于指定计时器的计时格式。除此之外,还支持如下常用方法。
  • setBase(long base):设置计时器的起始时间。
  • setFormat(String format):设置显示时间的格式。
  • start():开始计时。
  • stop():停止计时。
  • setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener):为计时器绑定事件监听器,当计时器改变时触发该监听器。

代码示例

public class MainActivity extends Activity {
    Chronometer ch;
    Button start;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chronometer);

        ch = (Chronometer) findViewById(R.id.test);
        start = (Button) findViewById(R.id.start);

        start.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                //设置开始计时时间
                ch.setBase(SystemClock.elapsedRealtime());
                //启动计时器
                ch.start();
                start.setEnabled(false);
            }
        });
        //为Chronometer绑定监听事件
        ch.setOnChronometerTickListener(new OnChronometerTickListener() {

            @Override
            public void onChronometerTick(Chronometer ch) {
                //如果从现在开始计时到现在超过了20s
                if(SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000)
                {
                    ch.stop();
                    start.setEnabled(true);
                }
            }
        });
    }
}

效果

Screenshot_20171018-143258.png

提示

程序中用到的SystemClock类仅是一个获取系统时间、运行时间的工具类。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容

  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,357评论 0赞 17
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,432评论 25赞 707
  • D44
    【动待花开】20171124 由于堵车，到家八点过，芝麻哥已经睡觉了。奇怪，从来没有怎么早睡过，并且都没有吃晚饭。...
    芝麻_mom阅读 139评论 0赞 0
  • 时光砥柱
    时钟在不停的耕耘着 从不会停息 留下的只是时光的记忆 人们 在奔波中追逐 想去留下岁月的痕迹 到头来却是一片荒凉 ...
    青一墨阅读 193评论 0赞 2
  • 6.1晨读感悟---摆脱令人纠结的选择题
    在你的人生中，有没有遇到这样的情况？ *学生时代，本来不想买参考书，可是王二买了一套A，名次从46名一下蹦到13名...
    我也是简简单单阅读 336评论 2赞 2