8.Android中不常见的组件

1.SeekBar组件(拖动条)

  拖动条通过滑块位置来标识数值,拖动条允许用户拖动滑块来改变数值,因此拖动条常用于对系统的某种数值进行调节,比如调节音量。
  SeekBar允许用户改变拖动条的滑块外边:

属性介绍
android:thumb指定一个Drawable对象,该对象作为自定义滑块

为了程序能响应拖动条滑块位置,通过设置OnSeekBarChangeListener监听事件实现

实例:定义两个组件,ImageView用于显示图片,SeekBar用于动态改变图片的透明度
①布局文件内容

	<?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">
	    <!--用于演示的照片-->
	    <ImageView
	        android:id="@+id/image"
	        android:layout_width="match_parent"
	        android:layout_height="200dp"
	        android:src="@drawable/p1" />
	
	    <!--拖动进度条-->
	    <!--android:thumb 设置拖动条样式,这里为眼球状照片资源-->
	    <SeekBar
	        android:id="@+id/seekbar"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:max="255"
	        android:progress="255"
	        android:thumb="@drawable/view" />
	</LinearLayout>

在这里插入图片描述

②在Activity文件代码

package com.android.seekbar;


import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.SeekBar;

public class MainActivity extends AppCompatActivity {
    //1.1 创建对象
    ImageView image; //图片

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

        //1.2 关联图片控件、拖动条控件
        image = findViewById(R.id.image);
        SeekBar seekBar = findViewById(R.id.seekbar);

        //2.1 创建拖动条监听事件
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            //2.2 当拖动滑块位置发生改变时,触发该方法
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //3.使用setImageAlpha()方法设置透明度
                image.setImageAlpha(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

    }
}

③运行结果:
在这里插入图片描述在这里插入图片描述在这里插入图片描述

2.RatingBar组件(星级评分条)

  星级评分条和拖动条有相同的父类:AbsSeekbar,因此它们十分相似,并且用法和功能都十分接近:允许用户通过拖动来改变进度。Ratingba与SeekBar最大区别在于:RatingBar通过星星来表示进度

属性介绍
android:isIndicator设置该星级评分条是否允许用户改变(true为不允许修改)
android:numStars设置该星级评分条总共有多少个星级
android:rating设置该星级评分条默认的星级
android:stepSize设置每次最少需要改变多少个星级

为了让程序响应星级评分条评分的改变,通过设置OnRatingBarChangeListener监听事件实现

①布局代码

<?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">

    <!--用于实践的照片-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/p1" />

    <!--定义星级评分条-->
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:max="255"
        android:progress="255"
        android:stepSize="0.5"
        android:layout_gravity="center"/>
</LinearLayout>

在这里插入图片描述

②Activity文件代码

package com.android.ratingbar;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.RatingBar;

public class MainActivity extends AppCompatActivity {
    //1.1 创建对象
    ImageView image;

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

        //1.2关联控件
        image = findViewById(R.id.image);
        RatingBar ratingBar = findViewById(R.id.ratingBar);

        //2.1 设置监听事件
        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                //2.2 动态改变图片透明度,其中255是星级评分条的最大值,5个星星就代表最大值255
                image.setImageAlpha((int)(rating*255/5));
            }
        });
    }
}

③运行结果:
在这里插入图片描述在这里插入图片描述在这里插入图片描述

3.CalendarView组件(日历视图)

  日历视图(CalendarView)可用于显示和选择日期,用户可选择一个日期,也可以通过触摸来滚动日历。如果希望监控该组件的额日期改变,则可以通过CalendarViewsetOnDateChangeListener()方法为此组件的点击事件添加监听事件。

属性介绍
android:dateTextAppearance设置该日历视图的日期文字的样式
android:firstDayOfWeek设置每周的第一天,允许设置周一到周日任意一天作为每周的第一天;3对应周二、4对应周三、1对应周日
android:maxDate设置该日历组件支持的最大日期,以mm/dd/yyyy格式指定最大日期
andriod:minDate设置该日历组件支持的最小日期,以mm/dd/yyyy格式指定最小日期
android:weekDayTextAppearance设置星期几的文字样式

网上搜索你会发现这个属性还是蛮多的,但大多要么过时,要么无效了,所以没写

本实例重点是在界面布局文件中添加一个CalendarView组件,通过setOnDateChangeListener()方法实现监听事件
①布局文件内容

<?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="选择您的生日"
        android:gravity="center"/>

    <!--日历组件-->
    <CalendarView
        android:id="@+id/calendarView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:shownWeekCount="4"
        android:selectedWeekBackgroundColor="#aff"
        android:weekSeparatorLineColor="#f00"
        android:unfocusedMonthDateColor="#f9f"
        android:layout_gravity="center" />

    <!--用于显示点击后的显示文本-->
    <TextView
        android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp" />
</LinearLayout>

在这里插入图片描述

②Activity文件代码

package com.android.calendarview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CalendarView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //1.实例化
        CalendarView cv = findViewById(R.id.calendarView);
        //2.设置监听事件
        cv.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
            @Override
            public void onSelectedDayChange(@NonNull CalendarView view, int year, int Month, int dayOfMonth) {
                //3.1 设置显示文本
                TextView textView = findViewById(R.id.show);
                //3.2 月份默认从0开始
                textView.setText("生日:" + year + "年" + (Month+1) + "月" + dayOfMonth + "日");
            }
        });
    }
}

③运行结果:
在这里插入图片描述在这里插入图片描述

注:也不知道是控件问题还是我的问题,这个月份有点问题…月份默认从0开始,而不是1,所以在监听方法中,给month+1,看了网上别人的代码都没加

4.DatePicker(日期选择器)和TimePicker(时间选择器)

  DatePickerTimePicker是两个比较易用的组件,它们都是从FrameLayout派生而来,其中DatePicker用于选择日期;TimePicker用于选择时间。开发中,这两个组件经常一起使用

DatePicker常用属性
属性介绍
android:calendarViewShown设置该日期选择器是否显示CalendarView组件
android:endYear设置日期选择器允许选择的最后一年
android:maxDate设置该日期选择器支持的最大日期。以mm/dd/yyyy格式指定最大日期
android:minDate设置该日期选择器支持的最小日期。以mm/dd/yyyy格式指定最小日期
android:spinnersShown设置该日期选择器是否显示Spinner日期选择组件
android:startYear设置日期选择器允许选择的第一年

DatePicker通过在init()方法中设置OnDateChangedListener监听器实现监听
TimePicker通过setOnTimeChangedListener监听器实现监听

同时使用DatePickerTimePicker组件实现选择日期、时间显示的实例
①布局文件;由于多个组件运行后内容显示不完整,这里使用ScrollView控件(竖直滚动条),ScrollView控件中只能定义一个子组件,所以大多时候会定义一个布局控件

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

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

        <!--定义一个DatePicker组件-->
        <DatePicker
            android:id="@+id/datePicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:calendarViewShown="true"
            android:endYear="2030"
            android:spinnersShown="true"
            android:startYear="2000" />

        <!--定义一个TimePicker组件-->
        <TimePicker
            android:id="@+id/timePicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <!--显示用户输入日期、时间的控件-->
        <!--android:editable 设置是否可编辑
            android:cursorVisible 设置光标 显示/隐藏-->
        <TextView
            android:id="@+id/show"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:cursorVisible="false"
            android:editable="false" />
    </LinearLayout>
</ScrollView>

在这里插入图片描述在这里插入图片描述

②Activity文件全部代码:

package com.android.datetimepicker;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.CalendarView;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;
import java.util.Calendar;

public class MainActivity extends AppCompatActivity {
    //1.定义5个记录时间的变量
    //年、月、日、小时、分钟
    int Year, Month, Day, Hour, Minute;

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

        //2.实例化 DatePicker、TimePicker组件
        DatePicker datePicker = findViewById(R.id.datePicker);
        TimePicker timePicker = findViewById(R.id.timePicker);

        //3.获取当前年、月、日、小时、分钟
        Calendar calendar = Calendar.getInstance();
        Year = calendar.get(Calendar.YEAR);
        Month = calendar.get(Calendar.MONTH);
        Day = calendar.get(Calendar.DAY_OF_MONTH);
        Hour = calendar.get(Calendar.HOUR);
        Minute = calendar.get(Calendar.MINUTE);

        //4.初始化DatePicker组件,设置监听事件
        datePicker.init(Year, Month, Day, new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) { //形参
                //成员变量(本类中自定义的属性) = 形参
                Year = year;
                Month = monthOfYear;
                Day = dayOfMonth;

                //7.1 调用show()方法显示时间
                show(Year,Month,Day,Hour,Minute);
            }
        });

        //5.初始化TimePicker组件,设置监听事件
        timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                Hour = hourOfDay;
                Minute = minute;

                //7.2 调用show()方法显示时间
                show(Year,Month,Day,Hour,Minute);
            }
        });
    }

    //6.定义方法,显示内容
    public void show(int year,int month,int day,int hour,int minute){
        TextView textView=findViewById(R.id.show);
        textView.setText(year+"年"+(month+1)+"月"+day+"日"+hour+":"+minute);
    }
}

③运行结果;设置了滚动条,可以上下拖动
在这里插入图片描述在这里插入图片描述

5.NumberPicker(数值选择器)

  数值选择器用于让用户输入数值,用户可以通过键盘输入数值,也可以通过滚动选择数值,通常组件有如下三个方法:

组件方法介绍
setMinValue(int minValue)设置该组件支持的最小值
setMaxValue(int maxValue)设置该组件支持的最大值
setValue(int value)设置该组件的当前值

通过定义两个NumberPicker组件设置setOnValueChangedListener方法实现监听事件
①布局文件代码

<?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
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="选择低价"
            android:layout_gravity="center_vertical"/>

        <NumberPicker
            android:id="@+id/np1"
            android:layout_width="120dp"
            android:layout_height="70dp"
            android:focusable="true"
            android:focusableInTouchMode="true" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="选择高价"
            android:layout_gravity="center_vertical"/>

        <!-- focusable 通过键盘(虚拟键盘或物理键盘)或轨迹球将焦点移动到当前控件上
            focusableInTouchMode 可以通过触摸获取焦点 -->
        <NumberPicker
            android:id="@+id/np2"
            android:layout_width="120dp"
            android:layout_height="70dp"
            android:focusable="true"
            android:focusableInTouchMode="true"/>
    </TableRow>
</TableLayout>

②Activity文件代码

package com.android.numberpicker;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.NumberPicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    //1.1 定义控件
    NumberPicker np1, np2;
    //1.2 定义最低价格、最高价格的初始值
    int minPrice = 25,maxPrice = 75;

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

        //2.1 关联np1控件
        np1 = findViewById(R.id.np1);
        //2.2 设置最小值,最大值,默认值
        np1.setMinValue(20);
        np1.setMaxValue(30);
        np1.setValue(minPrice);
        //2.3 设置监听器
        np1.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
            @Override
            public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                //将最新的数值 赋值给 最小值
                minPrice = newVal;
                //5.1 调用showToastPrice()方法显示价格
                showToastPrice();
            }
        });

        //3.1 关联np2控件
        np2 = findViewById(R.id.np2);
        //3.2 设置最小值,最大值,默认值
        np2.setMinValue(70);
        np2.setMaxValue(80);
        np2.setValue(maxPrice);
        //3.3 设置监听事件
        np2.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
            @Override
            public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                maxPrice = newVal;
                //5.2 调用showToastPrice()方法
                showToastPrice();
            }
        });
    }

    //4.定义展示价格的方法
    public void showToastPrice(){
        Toast.makeText(this, "最低价格:"+minPrice+"\n"+"最高价格:"+maxPrice,
                Toast.LENGTH_SHORT).show();
    }
}

③运行结果
在这里插入图片描述

6.SearchView(搜索框)

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

SearchView常用的方法
方法介绍
setIconifiedByDefault(boolean iconified)设置该搜索框默认是否自动缩小为图标
setSubmitButtonEnabled(boolean enabled)设置是否显示搜索框
setQueryHint(CharSequence hint )设置搜索框默认显示的提示文本
setOnQueryTextListener(new SearchView.OnQueryTextListener()为搜索框设置事件监听器

  当为SearchView增加一个配套的ListView,则可以为SearchView增加自动完成的功能。一下实例定义了SearchViewListView组件,其中ListViewSearchView显示自动补齐列表
①布局文件代码

<?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"
        android:focusable="false"
        android:focusableInTouchMode="false"/>

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

在这里插入图片描述

②Activity文件代码

package com.android.searchview;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    //1.实例化SearchView、ListView控件
    SearchView sv;
    ListView lv;

    //2.1 创建自动完成的列表
    String[] mStrings = new String[]{"aaaaaa", "bbbbb", "ccccccc"};

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

        //2.2 关联控件
        sv = findViewById(R.id.sv);
        lv = findViewById(R.id.lv);

        //2.3 将创建的列表添加到lv上
        lv.setAdapter(new ArrayAdapter<String>(this,
                R.layout.support_simple_spinner_dropdown_item, mStrings));

        //3.1 设置ListView启用过滤
        //listview获得当前焦点的时候,相应用户输入的匹配符。筛选出匹配的listview Items
        lv.setTextFilterEnabled(true);
        //3.2 设置SearchView默认是否自动缩小为图标
        sv.setIconifiedByDefault(false);
        //3.3 设置该SearchView显示搜索按钮
        sv.setSubmitButtonEnabled(true);
        //3.4 设置该SearchView默认显示的提示文本
        sv.setQueryHint("查找");

        //4.1 为SearchView组件设置监听事件
        sv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            //单机搜索按钮时激发该方法
            @Override
            public boolean onQueryTextSubmit(String query) {
                //实际应用中应该在该方法内执行实际查询
                //此处仅使用Toast显示用户输入的查询内容
                Toast.makeText(MainActivity.this, "选择的是:" + query,
                        Toast.LENGTH_SHORT).show();
                return false;
            }

            //用户输入字符时激发该方法
            @Override
            public boolean onQueryTextChange(String newText) {
                //如果newText不是长度为0的字符串
                if (TextUtils.isEmpty(newText)) { //isEmpty()判断空
                    //清除ListView的过滤
                    lv.clearTextFilter();
                } else {
                    //使用用户输入的内容对ListView列表进行过滤
                    lv.setFilterText(newText);
                }
                return false;
            }
        });
    }
}

③运行结果
在这里插入图片描述在这里插入图片描述

7.ScrollView(垂直滚动视图)和HorizontalScrollView(水平滚动视图)

  ScrollViewFrameLayout派生而出,就是一个用于为普通组件添加滚动条的组件。ScrollView里面只能包含一个子组件,大多数会放置布局管理器作为子控件ScrollView作用就是为该组件添加垂直滚动条。

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

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#ff0000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#00BCD4" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#FF9800" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#009688" />
    </LinearLayout>
</ScrollView>

运行结果:可以上下拖动
在这里插入图片描述

  HorizontalScrollView水平滚动条

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#ff0000" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#ffdc00" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#ff48ad" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#ff38dd" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#ff90aa" />
    </LinearLayout>
</HorizontalScrollView>

运行结果:可以左右拖动
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值