本章将介绍一下内容,均为XML设置UI:
- 图像视图(ImageView)
- 列表选择框(Spinner)
- 列表视图(ListView)
- 日期、时间拾取器(DataPincker、TimePincker)
- 计时器(Chronometer)
图像视图(ImageView)
支持属性:
属性 | 作用 | 值 |
---|---|---|
android:adjustViewBounds | 用于设置ImageView是否调整自己的边界来保持显示图片的宽高与其他配合使用 | true、false |
android:maxHeight | ImageView的最大高度,前提是设置adjustViewBounds为true | |
android:maxWidth | ImageView的最大宽度,前提是设置adjustViewBounds为true | |
android:scaleType | 设置图片在ImageView中的宽高以及位置 | matrix缩放、fitXY横向纵向缩放、fitStart保持比例缩放图片最终显示在左上角、fitCenter保持比例缩放并显示在中间、fitEnd保持纵横比例缩放并显示在右下角、center不缩放图片显示在中间、centerCrop或centerInside保持比例缩放并完全覆盖ImageView |
android:src | 设置显示的图片 | @drawable/XXX |
android:tint | 用于对图片进行染色 | #rgb、#argb、#rrggbb、#aarrggbb |
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!--原图-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
/>
<!--调整自己边界-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
android:adjustViewBounds="true"
/>
<!--不调整自己边界并设置最大宽-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
android:maxWidth="15dp"
/>
<!--调整自己边界并设置最大宽-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
android:adjustViewBounds="true"
android:maxWidth="15dp"
/>
<!--调整自己边界并设置最大高-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
android:adjustViewBounds="true"
android:maxHeight="15dp"
/>
<!--将缩放后的图片放在右下角-->
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:src="@drawable/kangna"
android:scaleType="fitEnd"
/>
<!--染色-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/kangna"
android:tint="#f00"
/>
</LinearLayout>
</ScrollView>
列表选择框(Spinner)
类似于网页中的下拉列表框,提供一些选项供用户选择。
属性 | 作用 |
---|---|
android:entries | 指定列表项,数组资源文件 |
android:prompt | 指定列表选项的标题( style="@android:style/Widget.Spinner" 必须加上这一种属性,否则不显示效果,加上之后会变成弹窗样式的选项,值必须是引用String类型) |
1.通过数组资源实现
2.通过JAVA代码实现
1.通过数组资源实现
要在res/values下添加arrays.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 注意是string类型的数组-->
<string-array name="items">
<item>JAVA</item>
<item>C#</item>
<item>Android</item>
</string-array>
</resources>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<!-- 无选项框标题-->
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/items"
/>
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<!-- 有选项框标题-->
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/items"
android:prompt="@string/code"
style="@android:style/Widget.Spinner"
/>
</RelativeLayout>
JAVA设置监听并获取选项的值(xml用的是无标题的):
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Spinner;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(new OnItemSelectedListener(){
@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
Log.i("1111","你选择的是"+arg0.getItemAtPosition(arg2).toString());
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
});
}
}
2.通过JAVA代码实现
其也分为两种方式
(1)、适配器+数组资源
(2)、适配器+String型数组
(1)、适配器+数组资源(数组资源不变)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Spinner spinner = (Spinner) findViewById(R.id.spinner);
//数组资源的引用R.array.items,属于int型
ArrayAdapter<CharSequence> arrayAdapter = ArrayAdapter.createFromResource(MainActivity.this,R.array.items,android.R.layout.simple_dropdown_item_1line);
spinner.setAdapter(arrayAdapter);
}
}
其中android.R.layout.simple_dropdown_item_1line
仅是一个环境写好的布局文件,其内容为:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/dropDownItemStyle"
android:textAppearance="?android:attr/textAppearanceLargePopupMenu"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee" />
(2)、适配器+String型数组
xml代码不变(用的环境中的TextView)
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Spinner spinner = (Spinner) findViewById(R.id.spinner);
//数组用String,属于String型
String str[] = {"Java","C#","Android"};
ArrayAdapter<String> arrayAdapter =new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_dropdown_item_1line,str);
spinner.setAdapter(arrayAdapter);
}
}
特备注意 :与之前Adapter的构造方式并不相同、点击事件并无变化
自定义layout实现:
在res/layout中重新创建一个布局文件,我自己命名为qw.xml原有的activity_main.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:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Spinner spinner = (Spinner) findViewById(R.id.spinner);
String str[] = {"Java","C#","Android"};
ArrayAdapter arrayAdapter =new ArrayAdapter(MainActivity.this,R.layout.qw,R.id.textView1,str);
spinner.setAdapter(arrayAdapter);
}
}
特别注意适配器的形式在String类型的基础上又发生了变化,由于TextView的属性不同样式也会出现异样,大致还是相同的
列表视图(ListView)
Android中最常用,最重要的组件之一。它以垂直列表的形式列出需要显示的列表项。其实现方式与spinner类似。
属性 | 作用 |
---|---|
android:divider | 用于为列表视图设置分隔条,可用颜色,可用Drawable |
android:listSelector | 设置选中的颜色 |
android:dividerHeight | 设置分隔条的高度 |
android:entries | 设置数组资源 |
android:footerDividersEnable | 用于设置是否在footerView之前绘制分隔条,默认是true,表示会绘制。使用时,需要通过ListView提供addFooterView()为ListView设置footView |
android:headerDividersEnable | 用于设置是否在headerView之前绘制分隔条,默认是true,表示会绘制。使用时,需要通过ListView提供addHeaderView()为ListView设置headerView |
特别注意:要在创建适配器之前调用添加headView在创建完适配器之后添加footerView
1.使用数组资源设置列表项(沿用之前的数组资源)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<!--设置分隔条颜色、宽度、选中的颜色、数组资源-->
<ListView
android:id="@+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#f00"
android:dividerHeight="15dp"
android:listSelector="#0f0"
android:entries="@array/items"
/>
</RelativeLayout>
2.通过JAVA代码实现
(1)、创建适配器+数组资源
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="@+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listView);
ArrayAdapter adapter = ArrayAdapter.createFromResource(MainActivity.this, R.array.items, android.R.layout.simple_dropdown_item_1line);
listView.setAdapter(adapter);
}
}
(2)、创建适配器+String数组**(用的自建的qw.xml)**
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="@+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listView);
ArrayAdapter<String> adapter =new ArrayAdapter<String>(MainActivity.this,R.layout.qw,R.id.textView1,new String[]{"Java","C#","Android"});
listView.setAdapter(adapter);
}
}
用环境的android.R.layout.simple_dropdown_item_1line
,xml不变
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listView);
ArrayAdapter<String> adapter =new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_dropdown_item_1line,new String[]{"Java","C#","Android"});
listView.setAdapter(adapter);
}
}
由此可以发现使用环境所给的布局在配置适配器的时候比自己写的布局文件少一个参数(自己写的布局需要将布局中用来显示列表信息的空间id写出)
此处可用环境提供的不同的列表项:
android.R.layout.simple_list_item1
android.R.layout.simple_list_item_checked
android.R.layout.simple_list_item_multiple_choice
android.R.layout.simple_list_item_single_choice
监听事件(xml不变):
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listView);
ArrayAdapter<String> adapter =new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_dropdown_item_1line,new String[]{"Java","C#","Android"});
listView.setAdapter(adapter);
listView.setOnItemClickListener(new OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
Log.i("1111","你选择的是"+arg0.getItemAtPosition(arg2).toString());
}
});
}
}
日期拾取器DataPincker
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<DatePicker
android:id="@+id/datePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
package com.example.kami;
import java.util.Calendar;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.DatePicker;
import android.widget.DatePicker.OnDateChangedListener;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
DatePicker dataPincker = (DatePicker) findViewById(R.id.datePicker1);
final Calendar calendar = Calendar.getInstance();
dataPincker.init(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH), new OnDateChangedListener(){
@Override
public void onDateChanged(DatePicker arg0, int arg1, int arg2,
int arg3) {
Log.i("1111","现在是"+arg0+" "+arg1+" "+arg2+" "+arg3);
}
});
}
}
调用init();前三个参数为年、月、日最后一个为监听事件OnDateChangedListener()
无则写null
arg0:DataPicker对象
arg1:年
arg2:月比实际月少1(只在监听事件中少一个月,刚启动应用时日期与实际相同)
arg3:日
当月与年发生变化时,会调用两次监听,而日发生变化仅调用一次
时间拾取器TimePincker
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TimePicker
android:id="@+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
package com.example.kami;
import java.util.Calendar;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.TimePicker;
import android.widget.TimePicker.OnTimeChangedListener;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TimePicker timePicker = (TimePicker) findViewById(R.id.timePicker1);
//设置为24小时制默认是12小时制
timePicker.setIs24HourView(true);
timePicker.setOnTimeChangedListener(new OnTimeChangedListener(){
@Override
public void onTimeChanged(TimePicker arg0, int arg1, int arg2) {
Log.i("1111","现在是"+arg1+" "+arg2);
}
});
}
}
24小时制
12小时制(监听事件中点击上下午会切换成24小时制)
计时器(Chronometer)
重要方法:
方法 | 作用 |
---|---|
setBase() | 设置起始时间 |
setFormat() | 设置显示时间的格式 |
start() | 开始 |
stop() | 结束 |
setOnChronometerTickListener() | 设置监听 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Chronometer
android:id="@+id/chronometer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="55sp"
android:text="Chronometer" />
</RelativeLayout>
import android.os.Bundle;
import android.os.SystemClock;
import android.util.Log;
import android.widget.Chronometer;
import android.widget.Chronometer.OnChronometerTickListener;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Chronometer ch = (Chronometer) findViewById(R.id.chronometer1);
ch.setBase(SystemClock.elapsedRealtime());
ch.setFormat("已用世间%s");
ch.start();
ch.setOnChronometerTickListener(new OnChronometerTickListener(){
@Override
public void onChronometerTick(Chronometer arg0) {
if(SystemClock.elapsedRealtime()-ch.getBase()>=10000){
Log.i("1111","获取系统启动后所用掉的时间"+SystemClock.elapsedRealtime());
ch.stop();
}
Log.i("1111","中间时间"+SystemClock.elapsedRealtime());
}
});
}
}
获取系统启动后所用掉的时间SystemClock.elapsedRealtime()
有少许误差可以忽略