本篇文章重点讲解Android中那些你忽略的控件:
1、SearchView
2、Switch
3、AutoCompleteTextView
4、CalendarView
5、DatePicker
6、Chronomet
7、ExpandableListView
8、ViewSwitcher
执笔不易,更多文章还请大家关注左侧我的公众账号。
开发当中比如说让你写一个根据用户的输入,去搜索相关内容,你会怎么实现,写一个输入框,监听输入框的内容变化,调起软键盘的搜索或者确认键进行搜索?还有,让你实现一个开关的切换,你会怎么做,写一个layout,一半点击为开,一半点击为关,还是两张图片,点一下开,再点一下关?让你实现一个根据用户的输入弹出一个下拉菜单等等,其实都大可没有必要去自己写,本身Android里都有,下面对各个控件,我会一一举例。
1、SearchView
SearchView这个控件,主要用来处理用户的输入,并对用户的输入做出响应。
先看下各个属性介绍:
属性名称 | 相关方法 | 描述 |
android:iconifiedByDefault | setIconifiedByDefault(boolean) | 设置搜索图标是否显示在搜索框内 |
| | |
android:imeOptions | setImeOptions(int) | 设置输入法搜索选项字段,默认是搜索,可以是:下一页、发送、完成等 |
| | |
android:inputType | setInputType(int) | 设置输入类型 |
| | |
android:maxWidth | setMaxWidth(int) | 设置最大宽度 |
| | |
android:queryHint | setQueryHint(CharSequence) | 设置查询提示字符串 |
XML里引用
<SearchView
android:id="@+id/seach"
android:layout_width="match_parent"
android:layout_height="50dp"
android:iconifiedByDefault="false"
android:queryHint="请输入要搜寻的东西" />
代码里通过以下方法可以监听用户的输入
SearchView mSearchView = (SearchView) findViewById(R.id.seach);
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
//点击搜索
@Override
public boolean onQueryTextSubmit(String query) {
Log.i("MainActivity", query);
return false;
}
//搜索内容改变
@Override
public boolean onQueryTextChange(String newText) {
Log.i("MainActivity", newText);
return false;
}
});
具体效果可见下图:
2、Switch
Switch控件主要作用是描述一个开关,可以滑动,也可以点击,省去了我们自定义的很多不必要的麻烦。
XML里引用
<Switch
android:id="@+id/switchs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
代码里监听状态
Switch mSwitch=(Switch) findViewById(R.id.switchs);
mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//开
if(isChecked){
}else{
//关
}
}
});
具体效果如下图:
具体UI我们可以自己来调整,可通过下面两个属性,第一个设置是设置拖动按钮,第二个是设置背景。
android:thumb="@drawable/switch_bg”
android:track="@drawable/track_bg"
设置自动选中状态可以通过android:checked="true”来设置。
3、AutoCompleteTextView
AutoCompleteTextView控件可以根据用户的输入,弹出一个下拉菜单
AutoCompleteTextView常用属性 | |
android:completionHint | 设置出现在下拉菜单中的提示标题 |
android:completionThreshold | 设置用户至少输入多少个字符才会显示提示 |
android:dropDownHorizontalOffset | 下拉菜单于文本框之间的水平偏移。默认与文本框左对齐 |
android:dropDownHeight | 下拉菜单的高度 |
android:dropDownWidth | 下拉菜单的宽度 |
android:singleLine | 单行显示 |
android:dropDownVerticalOffset | 垂直偏移量 |
XML里引用:
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/autotext"
/>
代码实现:
AutoCompleteTextView autotext =(AutoCompleteTextView) findViewById(R.id.autotext);
final String [] arr={"1001","1002","1003","1004"};
ArrayAdapter arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,arr);
//设置Adapter
autotext.setAdapter(arrayAdapter);
//监听item选择
autotext.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(MainActivity.this,arr[position],Toast.LENGTH_LONG).show();
}
});
具体效果见下图:
4、CalendarView
CalendarView这个控件是要是用于显示日历。
其各个属性如下显示:
android:dateTextAppearance 设置日历View在日历表格中的字体皮肤;
android:firstDayOfWeek 指定日历第一个星期的第一天,在日历中横向所在位置,从右边向左数,从1开始计数;
android:focusedMonthDateColor 设置日历表格当月显示的日期字体颜色;
android:maxDate 设置日历能够显示的最大日期;
android:minDate 设置日历能够显示的最小日期;
android:selectedDateVerticalBar 设置当前选择日期选择边框左右两边显示的图标;
android:selectedWeekBackgroundColor 设置当前选择日期所在行的背景颜色(除了选中的日期之外);
android:showWeekNumber 设置是否显示周期数量;
android:shownWeekCount 设置设备一屏显示多少周即多少行;
android:unfocusedMonthDateColor 设置非当前选择月的字体颜色与focusedMonthDateColor相反;
android:weekNumberColor 设置显示周期编号字体的颜色;
android:weekSeparatorLineColor 设置日历每行之间分割线的颜色;
XML里引用:
<CalendarView
android:id="@+id/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
代码实现选择日期:
CalendarView mCalendarView=(CalendarView) findViewById(R.id.calendar);
//获取日期点击事件
mCalendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
@Override
public void onSelectedDayChange(CalendarView view, int year, int month, int dayOfMonth) {
Toast.makeText(MainActivity.this,year+"==="+(month+1)+"==="+dayOfMonth,Toast.LENGTH_LONG).show();
}
});
效果如下图:
5、DatePicker
DatePicker控件和CalendarView基本类似,都是用来显示日期,只不过了一个显示选择后的日期UI,
-
android:calendarViewShown:是否显示日历。
-
android:startYear:设置可选开始年份。
-
android:endYear:设置可选结束年份。
-
android:maxDate:设置可选最大日期,以mm/dd/yyyy格式设置。
-
android:minDate:设置可选最小日期,以mm/dd/yyyy格式设置。
XML里引用
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
代码实现:
DatePicker mDatePicker=(DatePicker) findViewById(R.id.datePicker);
//初始化日期
mDatePicker.init(2017, 7, 16, new DatePicker.OnDateChangedListener() {
@Override
public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
Toast.makeText(MainActivity.this, year+"==="+monthOfYear+"=="+dayOfMonth, Toast.LENGTH_SHORT).show();
}
});
效果如下图:
6、Chronomet:
Chronomet控件用来展示一个倒计时。
XML里引用,这里我添加了几个按钮,用来控制开始,暂停,和重置,format用于格式化时间。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<Chronometer
android:id="@+id/chronometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:format="计时:%s" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/chronometer"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
<Button
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始" />
<Button
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="暂停"
/>
<Button
android:id="@+id/reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="重置"
/>
</LinearLayout>
</RelativeLayout>
在代码里实现定时任务:
public class MainActivity extends AppCompatActivity {
private Chronometer mChronometer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_svg);
mChronometer = (Chronometer) findViewById(R.id.chronometer);
mChronometer.setFormat("计时:%s");
findViewById(R.id.start).setOnClickListener(onClickLitener);
findViewById(R.id.stop).setOnClickListener(onClickLitener);
findViewById(R.id.reset).setOnClickListener(onClickLitener);
}
private View.OnClickListener onClickLitener = new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.start://开始
mChronometer.start();
break;
case R.id.stop://停止
mChronometer.stop();
break;
case R.id.reset://重置
mChronometer.setBase(SystemClock.elapsedRealtime());
break;
}
}
};
}
具体效果可见下图:
7、ExpandableListView
ExpandableListView控件主要用于实现一个可以下拉的下单,用起来也是很简单:
XML里引用:
<ExpandableListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
业务逻辑代码实现:
public class MainActivity extends AppCompatActivity {
private List<String> groupArray = new ArrayList<>();
private List<List<String>> childArray = new ArrayList<>();
private List<String> tempArray = new ArrayList<String>();
private List<String> tempArray2 = new ArrayList<String>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_svg);
groupArray.add("百家姓");
groupArray.add("国家行政区划");
tempArray.add("李");
tempArray.add("王");
tempArray.add("刘");
tempArray.add("张");
tempArray2.add("商丘市");
tempArray2.add("北京市");
tempArray2.add("天津市");
tempArray2.add("上海市");
childArray.add(tempArray);
childArray.add(tempArray2);
ExpandableListView mExpandableListView = (ExpandableListView) findViewById(R.id.listview);
mExpandableListView.setAdapter(new ExpandableAdapter());
//获取item点击事件
mExpandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
Toast.makeText(MainActivity.this, childArray.get(groupPosition).get(childPosition), Toast.LENGTH_SHORT).show();
return false;
}
});
}
//ExpandableListView的Adapter
public class ExpandableAdapter extends BaseExpandableListAdapter {
public Object getChild(int groupPosition, int childPosition) {
return childArray.get(groupPosition).get(childPosition);
}
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
public int getChildrenCount(int groupPosition) {
return childArray.get(groupPosition).size();
}
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
String string = childArray.get(groupPosition).get(childPosition);
return getGenericView(string);
}
// group method stub
public Object getGroup(int groupPosition) {
return groupArray.get(groupPosition);
}
public int getGroupCount() {
return groupArray.size();
}
public long getGroupId(int groupPosition) {
return groupPosition;
}
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
String string = groupArray.get(groupPosition);
return getGenericView(string);
}
public TextView getGenericView(String string) {
AbsListView.LayoutParams layoutParams = new AbsListView.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT, 64);
TextView text = new TextView(MainActivity.this);
text.setLayoutParams(layoutParams);
text.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
text.setPadding(100, 0, 0, 0);
text.setTextColor(Color.parseColor("#000000"));
text.setText(string);
return text;
}
public boolean hasStableIds() {
return false;
}
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
}
具体效果如下:
8、ViewSwitcher
ViewSwitcher控件是一个可以实现layout上下或者左右翻滚的效果,也就是所谓的翻页效果。
XML里引用:
<ViewSwitcher
android:id="@+id/viewSwitch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
代码实现:
public class MainActivity extends AppCompatActivity {
private ScheduledExecutorService scheduledExecutorService;
private ViewSwitcher mViewSwitcher;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_svg);
mViewSwitcher = (ViewSwitcher) findViewById(R.id.viewSwitch);
mViewSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
return View.inflate(MainActivity.this, R.layout.activity_text, null);
}
});
//设置切入动画
TranslateAnimation animationTop = new TranslateAnimation(0, 0, -15, 0);
animationTop.setFillAfter(true);
animationTop.setDuration(200);
mViewSwitcher.setInAnimation(animationTop);
//设置切出动画
TranslateAnimation animationBottom = new TranslateAnimation(0, 0, 0, 60);
animationBottom.setFillAfter(true);
animationBottom.setDuration(200);
mViewSwitcher.setOutAnimation(animationBottom);
}
@Override
protected void onStart() {
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleAtFixedRate(new Runnable() {
@Override
public void run() {
handler.obtainMessage().sendToTarget();
}
}, 1, 5, TimeUnit.SECONDS);
}
private String[] tags = {
"我是第一段文字",
"我是第二段文字",
"我是第三段文字",
"我是第四段文字"
};
private int indexSel;
private android.os.Handler handler = new android.os.Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
mViewSwitcher.getNextView().findViewById(R.id.text).setVisibility(View.VISIBLE);
String tag = tags[indexSel % tags.length];
((TextView) mViewSwitcher.getNextView().findViewById(R.id.text)).setText(tag);
mViewSwitcher.showNext();
indexSel++;
}
};
具体效果如图(图片静态,实际可以翻滚):