常用的TextView、Button、ImageView和几个常用布局就不介绍了,我们介绍一些特别好用但是常常忘记的组件。
标题栏组件
<!--标题栏-->
<android.support.v7.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
滚动组件
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ScrollView>
横向滚动组件
注意点:
1.滚动布局下,只能包含一个子布局,但是子布局下面可以包含多个布局。
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#ff00ff" />
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#000000" />
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#b7a500" />
</LinearLayout>
</HorizontalScrollView>
网格列表组件
<GridView
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:horizontalSpacing="1dp"
android:numColumns="3"
android:verticalSpacing="1dp">
</GridView>
常用的属性:
android:numColumns="auto_fit" ,GridView的列数设置为自动
android:columnWidth="90dp",每列的宽度,也就是Item的宽度
android:stretchMode="columnWidth",缩放与列宽大小同步
android:verticalSpacing="10dp",两行之间的边距
android:horizontalSpacing="10dp",两列之间的边距
网格布局
本身属性
- android:alignmentMode
- 说明:当设置alignMargins,使视图的外边界之间进行校准。可以取以下值:
- alignBounds – 对齐子视图边界。
- alignMargins – 对齐子视距内容。
- android:columnCount
- 说明:GridLayout的最大列数
- android:rowCount
- 说明:GridLayout的最大行数
- android:columnOrderPreserved
- 说明:当设置为true,使列边界显示的顺序和列索引的顺序相同。默认是true。
- android:orientation
- 说明:GridLayout中子元素的布局方向。有以下取值:
- horizontal – 水平布局。
- vertical – 竖直布局。
- android:rowOrderPreserved
- 说明:当设置为true,使行边界显示的顺序和行索引的顺序相同。默认是true。
- android:useDefaultMargins
- 说明: 当设置ture,当没有指定视图的布局参数时,告诉GridLayout使用默认的边距。默认值是false。
- android:layout_column
说明:显示该子控件的列,例如android:layout_column=”0”,表示当前子控件显示在第1列,android:layout_column=”1”,表示当前子控件显示在第2列。 -
android:layout_columnSpan
说明:该控件所占的列数,例如android:layout_columnSpan=”2”,表示当前子控件占两列。 -
android:layout_row
说明:显示该子控件的行,例如android:layout_row=”0”,表示当前子控件显示在第1行,android:layout_row=”1”,表示当前子控件显示在第2行。 -
android:layout_rowSpan
说明:该控件所占的列数,例如android:layout_rowSpan=”2”,表示当前子控件占两行。 -
android:layout_columnWeight
说明:该控件的列权重,与android:layout_weight类似,例如有GridLayout上两列,都设置android:layout_columnWeight = “1”,则两列各占GridLayout宽度的一半 - android:layout_rowWeight
说明:该控件的行权重,原理同android:layout_columnWeight。
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"></GridLayout>
表格布局
适合在桌面这种需要显示多个图标功能的情况下使用,所以别用ListView套GridView了,会麻烦死的。
<TableRow></TableRow> 为列表行
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TableLayout>
<?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 >
<Button
android:id="@+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
></Button>
<Button
android:id="@+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2"
></Button>
<Button
android:id="@+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3"
></Button>
</TableRow>
<TableRow >
<Button
android:id="@+id/button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮4"
></Button>
<Button
android:id="@+id/button05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮5"
></Button>
<Button
android:id="@+id/button06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮6"
></Button>
</TableRow>
<TableRow >
<Button
android:id="@+id/button07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮7"
></Button>
<Button
android:id="@+id/button08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮8"
></Button>
<Button
android:id="@+id/button09"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮9"
></Button>
</TableRow>
</TableLayout>
多媒体控制器组件
有快进,快退,进度条
<MediaController
android:layout_width="match_parent"
android:layout_height="match_parent"></MediaController>
标签栏组件
<TabHost
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TabHost>
选项卡组件(配合标题栏组件一起使用)
<TabWidget
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TabWidget>
下拉列表选择框组件
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/books"
android:popupBackground="#66ccff"
android:dropDownWidth="230dp"></Spinner>
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"></Spinner>
public class MainActivity extends AppCompatActivity {
Spinner spinner;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取界面布局文件的Spinner组件
spinner= (Spinner) findViewById(R.id.spinner);
String[] arr={"孙悟空","猪八戒","唐僧"};
//创建ArrayAdapter对象
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_multiple_choice,arr);
spinner.setAdapter(adapter);
}
}
列表内容下拉扩展组件
其实就是 ListView 加上 下拉列表框 功能的二合一
<ExpandableListView
android:id="@+id/ev_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:divider="@null"
android:groupIndicator="@null"
android:cacheColorHint="#00000000"
android:listSelector="#00000000" />
快速关联联系人组件(快速添加到联系人或者获取信息)
<QuickContactBadge
android:id="@+id/badge"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/zgdx"/>
图片按钮组件
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_phone_book"/>
文本切换组件(支持有动画切换)
文字也要有切换动画才够酷炫!
<TextSwitcher
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextSwitcher>
图片切换组件(支持有动画切换)
有动画切换图片了,肯定更加酷炫
<ImageSwitcher
android:layout_width="match_parent"
android:layout_height="match_parent"></ImageSwitcher>
视频切换组件(支持有动画切换)
是的,三兄弟到齐了,为了切换动画!
<ViewSwitcher
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ViewSwitcher>
图片轮播组件
你天天逛的淘宝,上面的让你心动的物品图片轮播,就是这种效果
AdapterViewAnimator支持的XML属性如下:
-
android:animateFirstView:设置显示组件的第一个View时是否使用动画。
-
android:inAnimation:设置组件显示时使用的动画。
-
android:loopViews:设置循环到最后一个组件时是否自动跳转到第一个组件。
-
android:outAnimation:设置组件隐藏时使用的动画。
<AdapterViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"></AdapterViewFlipper>
滑动按钮组件
一键双状态,但是是滑动开关图标的样子
<!--滑动按钮-->
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
拖动条组件
android系统的亮度条件拖动条看过没?就是那种样子
<!--拖动条按钮-->
<SeekBar
android:layout_width="200dp"
android:layout_height="wrap_content"
android:max="200"
android:background="@color/text_gray6"/>
叠堆组件
类似图片叠放在一起的效果
<StackView
android:layout_width="100dp"
android:layout_height="100dp"></StackView>
单选按钮组件
<!--单选按钮-->
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
单选按钮组
只能在多个选择里,选中一个的按钮组件,选择一个后,另外一个选中的会自动取消
<!--多选按钮组-->
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"/>
</RadioGroup>
复选框组件
<CheckBox
android:layout_width="match_parent"
android:layout_height="match_parent" />
带文字的复选框组件
什么?你还在用TextView在加CheckBox实现复选框功能?快使用带文字的复选框试试吧,优点比CheckBox 有更大的点击范围,点击文字也可以支持勾选,用户操作上更舒服。
<CheckedTextView
android:id="@+id/checktv_title"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center_vertical"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:paddingLeft="6dip"
android:filterTouchesWhenObscured="true"
android:focusableInTouchMode="true"
android:text="公司"
android:textSize="12sp"
android:paddingRight="6dip"/>
双向开关组件
跟你家里的灯的开关按钮一样,它一个按键支持两种状态
<!--双向开关按钮组件-->
<ToggleButton
android:id="@+id/btn_offAndOn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textOff="关闭功能"
android:textOn="启用功能"/>
mBtn = (ToggleButton)findViewById(R.id.btn_offAndOn);
mBtn.setOnClickListener(this);
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.btn_offAndOn:
Intent intent = new Intent(MainActivity.this,PhoneServer.class);
if (mBtnWiFiAP.isChecked()){
startService(intent);
}else {
stopService(intent);
}
break;
default:
break;
}
视图翻页
这是一个需要创建适配器的View,最常用的场景是在app进入后的引导页面,翻页方式为一页一页
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
视图翻页的兄弟ViewFlipper(快速翻页)
这是一个需要创建适配器的View,最常用的场景是在图库里的图片浏览界面,翻页方式为快速拖动
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ViewFlipper>
自动补全文本框
<MultiAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="match_parent" />
输入框自动提示组件
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
属性 | 对应方法 | 描述 |
---|---|---|
android:completionHint | setCompletionHint(CharSequence) | 设置下拉菜单中的提示标题 |
android:completionHintView | 设置下拉菜单中提示标题的视图 | |
android:completionThreshold | setThreshold(int) | 设置用户至少输入几个字符才会显示提示。默认为 2 个 |
android:dropDownSelector | 设置选中的item背景色 | |
android:dropDownAnchor | setDropDownAnchor(int id) | 它的值是一个View的ID,指定后,AutoCompleteTextView会在这个View下弹出自动提示。 |
android:dropDownWidth | 设置自动提示列表的宽度。 | |
android:dropDownHeight | 设置自动提示列表的高度。 | |
原属性之外的几个常用方法 | ||
android:dropDownHorizontalOffest | 设置下拉菜单与文本框之间的水平偏移,下拉菜单默认与文本框左对齐 | |
adnroid:dropDownVerticalOffest | 设置下拉菜单与文本框之间的垂直偏移,下拉菜单默认紧跟文本框 | |
android:popupBackground | setDropDownBackgroundResource(int) | 设置下拉菜单的背景 |
评分组件(给产品快速评分)
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
进度条组件
<!--默认圆环进度条-->
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="100"/>
<!--水平进度条-->
<ProgressBar
android:layout_width="200dp"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"/>
数字选择器组件(自定义选择器)
<NumberPicker
android:layout_width="match_parent"
android:layout_height="match_parent"></NumberPicker>
日历组件
<CalendarView
android:layout_width="match_parent"
android:layout_height="match_parent"></CalendarView>
计时器组件
<Chronometer
android:id="@+id/cRecordPopTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="@dimen/d24"
android:fontFamily="sans-serif-light"
android:textColor="@color/fontHint"
android:textSize="@dimen/s13"
tools:targetApi="jelly_bean" />
Chronometer mChronometer;
mChronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
@Override
public void onChronometerTick(Chronometer cArg) {
long time =System.currentTimeMillis() - cArg.getBase();
Date d = new Date(time);
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss", Locale.US);
sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
timeView.setText(sdf.format(d));
}
});
timeView.setBase(System.currentTimeMillis());
timeView.start();
时间显示组件
<TextClock
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/time_size"
android:textColor="@color/theme_color"
android:format24Hour="hh:mm"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"/>
<TextClock
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/size_25"
android:textColor="@color/theme_color"
android:format24Hour="MM月dd日 EEEE"
android:layout_below="@id/time"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>
时间选择器组件
<TimePicker
android:id="@+id/tiem_picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_gravity="center"
android:numbersTextColor="@color/theme_color"
android:scaleY="1.5"
android:scaleX="1.5"/>
//时间值传入,并且设置修改时间选择器的时间显示
public void timeDataInit(){
Intent intent = getIntent();
mHour = intent.getIntExtra(KEY_HOUR,-1);
mMinute = intent.getIntExtra(KEY_MINUTE,-1);
if(mHour != -1 && mMinute != -1){
mTiemPicker.setCurrentHour(mHour);
mTiemPicker.setCurrentMinute(mMinute);
}else {
Log.e("SelectionTiem","传入的时间值为空");
}
}
@Override
public void initData() {
//将时间选择器里的值传出
mTiemPicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
@Override
public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
mHour = hourOfDay;
mMinute = minute;
}
});
}
时间选择器对话框组件
new TimePickerDialog(this,new TimePickerDialog.OnTimeSetListener() {
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
houre = hourOfDay;
WuraoActivity.this.minute = minute;
if (WuraoActivity.this.minute < 10){
endTimeTv.setText(houre+":"+"0"+WuraoActivity.this.minute);
}else {
endTimeTv.setText(houre+":"+WuraoActivity.this.minute);
}
}
}, 0, 0, true).show();
日期选择器组件
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"></DatePicker>
日期选择器对话框组件
/**
* 日期选择
* @param activity
* @param themeResId
* @param tv
* @param calendar
*/
public static void showDatePickerDialog(Activity activity, int themeResId, final TextView tv, Calendar calendar) {
// 直接创建一个DatePickerDialog对话框实例,并将它显示出来
new DatePickerDialog(activity , themeResId,new DatePickerDialog.OnDateSetListener() {
// 绑定监听器(How the parent is notified that the date is set.)
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
// 此处得到选择的时间,可以进行你想要的操作
tv.setText("您选择了:" + year + "年" + (monthOfYear+1)+ "月" + dayOfMonth + "日");
}
}
// 设置初始日期
, calendar.get(Calendar.YEAR)
,calendar.get(Calendar.MONTH)
,calendar.get(Calendar.DAY_OF_MONTH)).show();
}
视频播放组件
<VideoView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
视频动画组件
在Android中,ViewAnimator
是FrameLayout
的一个子类,用来做Views之间的切换。它是一个变换控件的
元素,帮助我们在Views之间(如TextView
, ImageView
或者其他layout)添加变换。它有助于在屏幕view添加动画。ViewAnimator
可以在两个及以上Views上平滑的切换,通过合适动画,提供从一个View到另外一个View变换的方式。
<ViewAnimator
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ViewAnimator>
视图存根组件
要显示某些控件了,在加载,节省内存~ 跟android:visibility="gone"属性说拜拜
<ViewStub
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
曲面视图(这个View,不跟整个window一起刷新,而是单独刷新,一般在这个View里放入视频组件)
SurfaceView就是在Window上挖一个洞,它就是显示在这个洞里,其他的View是显示在Window上,所以View可以显示在 SurfaceView之上,你也可以添加一些层在SurfaceView之上。(例如在上面设置一些按钮控件)我们知道View的更新只能在UI线程中,所以使用自定义View没办法这么做,但是SurfaceView就可以了。它一个很好用的地方就是允许其他线程(不是UI线程)绘制图形(使用Canvas),根据它这个特性,你就可以控制它的帧数,你如果让这个线程1秒执行50次绘制,那么最后显示的就是50帧。(一般使用thread.sleep(20);代表一秒刷新50次)
SurfaceView能够自己控制执行帧数的对象,这样可以弥补View的不足,因为有时候View的帧数太低了,这会导致画面效果不顺畅,影响体验效果。
SurfaceView是在一个新起的单独线程中可以重新绘制画面,而View必须在UI的主线程中更新画面。那么在UI的主线程中更新画面 可能会引发问题,比如你更新画面的时间过长,那么你的主UI线程会被你正在画的函数阻塞。那么将无法响应按键,触屏等消息。当使用surfaceView 由于是在新的线程中更新画面所以不会阻塞你的UI主线程。但这也带来了另外一个问题,就是事件同步。比如你触屏了一下,你需要surfaceView中 thread处理,一般就需要有一个event queue的设计来保存touch event,这会稍稍复杂一点,因为涉及到线程同步。
所以基于以上,根据游戏特点,一般分成两类
1 被动更新画面的。比如棋类,这种用view就好了。因为画面的更新是依赖于 onTouch 来更新,可以直接使用 invalidate。 因为这种情况下,这一次Touch和下一次的Touch需要的时间比较长些,不会产生影响。
2 主动更新。比如一个人在一直跑动。这就需要一个单独的thread不停的重绘人的状态,避免阻塞main UI thread。所以显然view不合适,需要surfaceView来控制。
本质区别:
View:必须在UI的主线程中更新画面,用于被动更新画面。
surfaceView:UI线程和子线程中都可以。在一个新启动的线程中重新绘制画面,主动更新画面。
<SurfaceView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
TextureView(与上面的SurfaceView类似,但是它支持组件动画)
<TextureView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />