UI组件-实用组件-阿里云开发者社区

前言

我们听过无数的道理，却仍旧过不好这一生。

Toast组件

Toast是一种非常方便的提示消息框，它会在程序界面上显示一个简单的提示信息。它具有如下两个特点。

Toast提示信息不会获得焦点。
Toast提示信息过一段时间会自动消失。

使用Toast来生成提示消息也非常简单，只要如下几个步骤。

调用Toast的构造器或makeText()静态方法创建一个Toast对象。
调用Toast的方法来设置该消息的对齐方式、页边距等。
调用Toast的show()方法将它显示出来。

除此之外，Toast不仅可以显示文本，还可以显示图片、列表之类的复杂提示。

代码示例

toast.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"
    android:gravity="center_horizontal" >
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示简单提示"
        />
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示图片提示"
        />
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toast);
        Button simple = (Button) findViewById(R.id.bt1);
        //为按钮的单击事件绑定事件监听器
        simple.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                //创建一个Toast提示消息                                         //设置该Toast提示信息的持续时间
                Toast toast = Toast.makeText(MainActivity.this, "简单的提示信息", Toast.LENGTH_SHORT);
                toast.show();
            }
        });

        Button imageBt = (Button) findViewById(R.id.bt2);
        imageBt.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                //创建一个Toast提示信息
                Toast toast = new Toast(MainActivity.this);
                //设置Toast的显示位置
                toast.setGravity(Gravity.CENTER, 0, 0);
                //创建一个ImageView
                ImageView image = new ImageView(MainActivity.this);
                image.setImageResource(R.drawable.ic_launcher);
                //创建一个LinearLayout容器
                LinearLayout ll = new LinearLayout(MainActivity.this);
                //向LinearLayout中添加图片、原有的View
                ll.addView(image);
                //创建一个TextView
                TextView textView = new TextView(MainActivity.this);
                textView.setText("带图片的提示信息");
                textView.setTextSize(24);
                textView.setTextColor(Color.BLUE);
                ll.addView(textView);
                //设置Toast显示自定义View
                toast.setView(ll);
                //设置Toast的显示时间、
                toast.setDuration(Toast.LENGTH_LONG);
                toast.show();
            }
        });
    }
}

效果

Screenshot_20171023-104940.png

提示

建议使用对话框来完成图片提示及其列表显示之类的复杂提示

CalendarView组件

日历视图(CalendarView)用于显示和选择日期，用户既可以选择日期，也可通过触摸来滚动日历。

代码示例

calendarview.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="选择您的生日:"
        />
    <!-- 设置以星期二作为每周的第一天，设置该组件总共显示4个星期，并对该组件的日期时间进行了定制 -->
    <CalendarView
        android:id="@+id/calendarView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:firstDayOfWeek="3"
        android:shownWeekCount="4"
        android:focusedMonthDateColor="#f9f"
        android:weekSeparatorLineColor="#ff0"
        android:unfocusedMonthDateColor="#f00"
        />
</LinearLayout>

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.calendarview);
        CalendarView cv = (CalendarView) findViewById(R.id.calendarView);

        cv.setOnDateChangeListener(new OnDateChangeListener() {

            @Override
            public void onSelectedDayChange(CalendarView view, int year, int month, int dayOfMonth) {

                //使用Toast显示用户选择的日期
                Toast.makeText(MainActivity.this, "您的生日是" + year + "年" + month + "月" + dayOfMonth + "日",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

MainActivity.java

效果

Screenshot_20171023-111302.png

提示

android:dataTextAppearance属性，设置该日历视图的日期文字的样式。

android:firstDayOfWeek属性，设置每周的第一天。

android:showWeekNumber属性，设置是否显示第几周。

android:设置该日历组件总共显示几个星期。

DatePicker和TimePicker组件

日期、时间选择器是两个简单的组件，由FrameLayout派生而来，其中DatePicker供用户选择日期；TimePicker供用户选择时间。

代码示例

picker.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="选择购买本书的具体时间"
        />

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:startYear="2000"
        android:endYear="2018"
        android:calendarViewShown="true"
        android:spinnersShown="true"
        />
    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        />

    <EditText
        android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:editable="false"
        android:cursorVisible="false"
        />

</LinearLayout>

public class MainActivity extends Activity {

    private int year;
    private int month;
    private int day;
    private int hour;
    private int minute;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.picker);
        DatePicker datePicker = (DatePicker) findViewById(R.id.datePicker);
        TimePicker timePicker = (TimePicker) findViewById(R.id.timePicker);

        //获取当年的年、月、日、小时、分钟
        Calendar c = Calendar.getInstance();
        year = c.get(Calendar.YEAR);
        month = c.get(Calendar.MONTH);
        day = c.get(Calendar.DAY_OF_MONTH);
        hour = c.get(Calendar.HOUR);
        minute = c.get(Calendar.MINUTE);

        //初始化DatePicker组件，初始化指定监听器
        datePicker.init(year, month, day, new OnDateChangedListener() {

            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {

                MainActivity.this.year = year;
                MainActivity.this.month = monthOfYear;
                MainActivity.this.day =dayOfMonth;
                //显示当前日期、时间、
                showDate(year, month, day, hour, minute);
            }
        });

        //为TimePicker指定监听器
        timePicker.setOnTimeChangedListener(new OnTimeChangedListener() {

            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {

                MainActivity.this.hour = hourOfDay;
                MainActivity.this.minute = minute;
                //显示当前日期、时间、
                showDate(year, month, day, hour, minute);
            }
        });
    }

    //定义在EditText中显示当前日期、时间的方法
    private void showDate(int year, int month,
            int day, int hour, int minute)
    {
        EditText show = (EditText) findViewById(R.id.show);
        show.setText("您的购买日期为:" + year + "年" + (month + 1) + "月" + day + "日" + hour + "时" + minute +"分");
    }

}

MainActivity.java

效果

Screenshot_20171023-124453.png

提示

android:calendarViewShown属性，设置该日期选择器是否显示CalendarView组件。

android:endYear属性，设置日期选择器允许选择的最后一年。

android:startYear属性，设置日期选择器允许选择的第一年。

android:spinnersShown属性，设置该日期选择器是否显示Spinner日期选择组件。

NumberPicker组件

数值选择器用于让用户输入数值，用户既可以通过键盘输入数值，也可以通过拖动来选择数值。使用该组件常用的方法如下。

setMinValue(int minVal):设置该组件支持的最小值。
setMaxValue(int maxVal):设置该组件支持的最大值。
setValue(int value):设置该组件的当前值。

代码示例

numberpicker.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="wrap_content" >
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView
            android:text="选择低价:"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            />

        <NumberPicker
            android:id="@+id/np1"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:focusable="true"
            android:focusableInTouchMode="true"
            />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView
            android:text="选择高价:"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            />
        <NumberPicker
            android:id="@+id/np2"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:focusable="true"
            android:focusableInTouchMode="true"
            />
    </TableRow>
</TableLayout>

MainActivity.java

public class MainActivity extends Activity {

    NumberPicker np1,np2;
    //定义最低价格、最高价格的初始值

    int minPrice = 25, maxPrice = 75;

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

        np1 = (NumberPicker) findViewById(R.id.np1);
        //设置np1的最大值和最小值
        np1.setMinValue(10);
        np1.setMaxValue(50);
        //设置np1的当前值
        np1.setValue(minPrice);
        np1.setOnValueChangedListener(new OnValueChangeListener() {
            //当NumberPicker的值发生改变时，将会激发该方法
            @Override
            public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

                minPrice = newVal;
                showSelectedPrice();
            }
        });

        np2 = (NumberPicker) findViewById(R.id.np2);
        //设置np2的最小值和最大值
        np2.setMinValue(60);
        np2.setMaxValue(100);
        //设置np2的当前值
        np2.setValue(maxPrice);
        np2.setOnValueChangedListener(new OnValueChangeListener() {

            @Override
            public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

                maxPrice = newVal;
                showSelectedPrice();
            }
        });
    }

    private void showSelectedPrice() {

        Toast.makeText(this, "您选择最低价格为: " + minPrice +
                ",最高价格为: " + maxPrice, Toast.LENGTH_SHORT).show();
    }
}

效果

Screenshot_20171023-131415.png

SearchView组件

SearchView是搜索框组件，它可以让用户在文本框内输入文字，并允许通过监听器监控用户输入，当用户输入完成后提交搜索时，也可以通过监听器执行实际的搜索。使用SearchView时可使用如下常用的方法。

setIconifiedByDefault(boolean iconified):设置该搜索框默认是否自动缩小为图标。
setSubmitButtonEnabled(boolean enable):设置是否显示搜索按钮。
setQueryHint(CharSequence hint):设置搜索框内默认显示的提示文本。
setOnQueryTextListener(SearchView.OnQueryTextListener listener):为该搜索设置监听事件。

如果为SearchView增加一个配套的ListView，则可以为SearchView增加自动完成的功能。

代码示例

searchview.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" >

    <SearchView
        android:id="@+id/sv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    private SearchView sv;
    private ListView lv;

    // 自动完成的列表
    private final String[] mString = { "aaaaa", "bbbbbb", "cccccc" };

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

        lv = (ListView) findViewById(R.id.lv);
        lv.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
                mString));

        //设置ListView启用过滤器
        lv.setTextFilterEnabled(true);
        sv = (SearchView) findViewById(R.id.sv);
        //设置该SearchView默认是否自动缩小为图标
        sv.setIconifiedByDefault(true);
        //设置该SearchView显示搜索按钮
        sv.setSubmitButtonEnabled(true);
        //设置该SearchView内默认显示的提示文本
        sv.setQueryHint("查找");
        //为该组件设置监听器
        sv.setOnQueryTextListener(new OnQueryTextListener() {

            //单击搜索按钮时激发该方法
            @Override
            public boolean onQueryTextSubmit(String query) {

                //实际应用中应该在该方法中执行查询
                Toast.makeText(MainActivity.this, "您的选择是:" + query, Toast.LENGTH_SHORT).show();
                return false;
            }

            //用户输入字符时激活该方法
            @Override
            public boolean onQueryTextChange(String newText) {

                //如果newText不是长度为0的字符串
                if(TextUtils.isEmpty(newText)) {
                    //清楚ListView的过滤
                    lv.clearTextFilter();
                }
                else {
                    //使用用户输入的内容对ListView的列表项进行过滤
                    lv.setFilterText(newText);
                }
                return true;
            }
        });
    }
}

效果

Screenshot_20171023-134249.png

TabHost组件

选项卡(TabHost)是一种非常实用的组件，TabHost可以很方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组件摆放区域。通过这种方式，就可以在一个容器里放置更多的组件，例如手机系统都会在同一个窗口中定义多个标签页来显示通话记录。

使用TabHost的一般步骤如下。

在界面布局文件中定义TabHost组件，并为该组件定义该选项卡的内容。
Activity应该继承TabActivity。
调用TabActivity的getTabHost()方法获取TabHost对象。
通过TabHost对象的方法来创建、添加选项卡。

代码示例

tabhost.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <!-- 定义第一个标签页内容 -->

            <LinearLayout
                android:id="@+id/tab01"
                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="已拨电话" />
            </LinearLayout>

            <!-- 定义第二个标签页内容 -->

            <LinearLayout
                android:id="@+id/tab02"
                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="未接电话" />
            </LinearLayout>

            <!-- 定义第三个标签内容 -->
            <LinearLayout
                android:id="@+id/tab03"
                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="语音信箱" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

MainActivity.java

public class MainActivity extends TabActivity {

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

        // 获取该Activity里面的TabHost组件

        TabHost tabHost = getTabHost();
        // 创建第一个Tab界面

        TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator("已接电话")// 设置标题
                .setContent(R.id.tab01);// 设置内容

        // 添加第一个标签页
        tabHost.addTab(tab1);

        TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator("未接电话")// 设置标题
                .setContent(R.id.tab02);// 设置内容

        // 添加第二个标签页
        tabHost.addTab(tab2);

        TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator("语音信箱")// 设置标题
                .setContent(R.id.tab03);// 设置内容

        // 添加第三个标签页
        tabHost.addTab(tab3);
    }
}

效果

Screenshot_20171023-141612.png

提示

ScrollView和HorizontalScrollView组件

ScrollView由FrameLayout派生而出，它就是一个用于为普通组件添加滚动条的组件。ScrollView的作用是为该组件添加垂直滚动条，HorizontalScrollView的作用是为该组件添加水平滚动条。

代码示例

<?xml version="1.0" encoding="utf-8"?>
<!-- 定义ScrollView，为里面的组件添加垂直滚动条 -->
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!-- 定义HorizontalScrollView，为里面的组件添加水平滚动条 -->
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
            ....若干个TextView
        </LinearLayout>
    </HorizontalScrollView>
</ScrollView>

效果

Screenshot_20171023-143018.png

Notification组件

Notification是显示在手机状态栏的通知——手机状态栏位于手机屏幕的最上方，它是一种具有全局效果的通知。程序一般通过NotificationManager服务来发送Notification。

代码示例

notification.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:onClick="send"
        android:layout_gravity="center_horizontal"
        />

     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="取消"
        android:onClick="cancel"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    static final int NOTIFICATION_ID = 0x123;
    NotificationManager nm;

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

        //获取系统的NotificationManager服务
        nm = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    }

    public void send(View v)
    {
        //创建一个启动其他Activity的Intent
        Intent intent = new Intent(MainActivity.this,OtherActivity.class);

        PendingIntent pi = PendingIntent.getActivity(MainActivity.this, 0, intent, 0);

        Notification notify = new Notification.Builder(this)
                //设置打开该通知，该通知自动取消
                .setAutoCancel(true)
                //设置显示在状态栏的通知提示信息
                .setTicker("有新消息")
                //设置通知内容的图标
                .setSmallIcon(R.drawable.ic_launcher)
                //设置通知内容的标题、
                .setContentTitle("一条新通知")
                //设置通知内容
                .setContentText("你好，halo")
                //设置使用系统默认的声音、默认LED灯
                .setDefaults(Notification.DEFAULT_SOUND | Notification.DEFAULT_LIGHTS)
                //设置通知将要启动的Intent
                .setContentIntent(pi).build();
        //发送通知
        nm.notify(NOTIFICATION_ID, notify);
    }
    public void cancel(View v)
    {
        nm.cancel(NOTIFICATION_ID);
    }
}

效果

Screenshot_20171023-150114.png

UI组件-实用组件

前言

我们听过无数的道理，却仍旧过不好这一生。

Toast组件

Toast是一种非常方便的提示消息框，它会在程序界面上显示一个简单的提示信息。它具有如下两个特点。

使用Toast来生成提示消息也非常简单，只要如下几个步骤。

除此之外，Toast不仅可以显示文本，还可以显示图片、列表之类的复杂提示。

代码示例

toast.xml

MainActivity.java

效果

提示

建议使用对话框来完成图片提示及其列表显示之类的复杂提示

CalendarView组件

日历视图(CalendarView)用于显示和选择日期，用户既可以选择日期，也可通过触摸来滚动日历。

代码示例

calendarview.xml

MainActivity.java

效果

提示

android:dataTextAppearance属性，设置该日历视图的日期文字的样式。

android:firstDayOfWeek属性，设置每周的第一天。

android:showWeekNumber属性，设置是否显示第几周。

android:设置该日历组件总共显示几个星期。

DatePicker和TimePicker组件

日期、时间选择器是两个简单的组件，由FrameLayout派生而来，其中DatePicker供用户选择日期；TimePicker供用户选择时间。

代码示例

picker.xml

MainActivity.java

效果

提示

android:calendarViewShown属性，设置该日期选择器是否显示CalendarView组件。

android:endYear属性，设置日期选择器允许选择的最后一年。

android:startYear属性，设置日期选择器允许选择的第一年。

android:spinnersShown属性，设置该日期选择器是否显示Spinner日期选择组件。

NumberPicker组件

数值选择器用于让用户输入数值，用户既可以通过键盘输入数值，也可以通过拖动来选择数值。使用该组件常用的方法如下。

代码示例

numberpicker.xml

MainActivity.java

效果

SearchView组件

SearchView是搜索框组件，它可以让用户在文本框内输入文字，并允许通过监听器监控用户输入，当用户输入完成后提交搜索时，也可以通过监听器执行实际的搜索。使用SearchView时可使用如下常用的方法。

如果为SearchView增加一个配套的ListView，则可以为SearchView增加自动完成的功能。

代码示例

searchview.xml

MainActivity.java

效果

TabHost组件

使用TabHost的一般步骤如下。

代码示例

tabhost.xml

MainActivity.java

效果

提示

最新版本的Anroid平台已经不再推荐使用TabActivity，而是推荐使用Fragement来代替TabActivity。

ScrollView和HorizontalScrollView组件

ScrollView由FrameLayout派生而出，它就是一个用于为普通组件添加滚动条的组件。ScrollView的作用是为该组件添加垂直滚动条，HorizontalScrollView的作用是为该组件添加水平滚动条。

代码示例

效果

Notification组件

Notification是显示在手机状态栏的通知——手机状态栏位于手机屏幕的最上方，它是一种具有全局效果的通知。程序一般通过NotificationManager服务来发送Notification。

代码示例

notification.xml

MainActivity.java

效果

提示

这个应用程序的功能是点击发送按钮收到消息通知，然后点击通知将会跳转到另一个Activity。因为上面的程序需要访问系统的闪关灯、振动器，还需要在AndroidManifest.xml文件中声明权限。

热门文章

最新文章

相关电子书