Date Picker小程序及六种布局方式.docx

上传人:b****1 文档编号:1983207 上传时间:2023-05-02 格式:DOCX 页数:24 大小:332.72KB
下载 相关 举报
Date Picker小程序及六种布局方式.docx_第1页
第1页 / 共24页
Date Picker小程序及六种布局方式.docx_第2页
第2页 / 共24页
Date Picker小程序及六种布局方式.docx_第3页
第3页 / 共24页
Date Picker小程序及六种布局方式.docx_第4页
第4页 / 共24页
Date Picker小程序及六种布局方式.docx_第5页
第5页 / 共24页
Date Picker小程序及六种布局方式.docx_第6页
第6页 / 共24页
Date Picker小程序及六种布局方式.docx_第7页
第7页 / 共24页
Date Picker小程序及六种布局方式.docx_第8页
第8页 / 共24页
Date Picker小程序及六种布局方式.docx_第9页
第9页 / 共24页
Date Picker小程序及六种布局方式.docx_第10页
第10页 / 共24页
Date Picker小程序及六种布局方式.docx_第11页
第11页 / 共24页
Date Picker小程序及六种布局方式.docx_第12页
第12页 / 共24页
Date Picker小程序及六种布局方式.docx_第13页
第13页 / 共24页
Date Picker小程序及六种布局方式.docx_第14页
第14页 / 共24页
Date Picker小程序及六种布局方式.docx_第15页
第15页 / 共24页
Date Picker小程序及六种布局方式.docx_第16页
第16页 / 共24页
Date Picker小程序及六种布局方式.docx_第17页
第17页 / 共24页
Date Picker小程序及六种布局方式.docx_第18页
第18页 / 共24页
Date Picker小程序及六种布局方式.docx_第19页
第19页 / 共24页
Date Picker小程序及六种布局方式.docx_第20页
第20页 / 共24页
亲,该文档总共24页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

Date Picker小程序及六种布局方式.docx

《Date Picker小程序及六种布局方式.docx》由会员分享,可在线阅读,更多相关《Date Picker小程序及六种布局方式.docx(24页珍藏版)》请在冰点文库上搜索。

Date Picker小程序及六种布局方式.docx

DatePicker小程序及六种布局方式

DatePicker实例

程序参考:

一、程序介绍

程序运行如图:

点击按钮Changethedate后显示

二、代码实现分析

程序的目录结构:

1、新建一个Android项目HelloDatePicker.

2、打开res/layout/main.xml文件插入下面的两个要遇到的组件

Ø需要一个TextView用于显示当前日期

Ø需要一个Button,点击后可以改变当前日期。

首先在main.xml中加入TextView和Button

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

orientation="vertical">

id="@+id/dateDisplay"

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

text=""/>

id="@+id/pickDate"

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

text="Changethedate"/>

部分说明:

android:

text=""用于设置要显示的文本内容,默认为""

android:

text="Changethedate用于设置按钮上显示的文本

3、打开HelloDatePicker.java加入一些需要用到的属性

privateTextViewmDateDisplay;

privateButtonmPickDate;

privateintmYear;

privateintmMonth;

privateintmDay;

staticfinalintDATE_DIALOG_ID=0;

4、要在屏幕上显示当前日期,首先应该获取当前的年、月、日属性值:

//获取当前的时间

finalCalendarc=Calendar.getInstance();

mYear=c.get(Calendar.YEAR);

mMonth=c.get(Calendar.MONTH);

mDay=c.get(Calendar.DAY_OF_MONTH);

5、将当前获取的日期显示出来:

//显示当前的日期

updateDisplay();

//这个方法的实现如下:

//显示或更新TextView中的当前日期的方法

privatevoidupdateDisplay(){

mDateDisplay.setText(newStringBuilder()

//Monthis0basedsoadd1

.append(mMonth+1).append("-").append(mDay).append("-")

.append(mYear).append(""));

}

注:

这里的mDateDisplay是已经在XML文件中定义的组件

6、考虑如何修改显示在屏幕上的日期

屏幕上有一个改变日期的按钮,点击按钮后会触发事件

//为单击按钮增加监听

mPickDate.setOnClickListener(newView.OnClickListener(){

publicvoidonClick(Viewv){

showDialog(DATE_DIALOG_ID);

}

});

看一下showDialog(int)这个方法,官方文档中这样说:

IfyouuseshowDialog(int),theactivitywillcallthroughtothismethodthefirsttime,这句话中的thismethod指的是onCreateDialog(int)这个方法

@Override

protectedDialogonCreateDialog(intid){

switch(id){

caseDATE_DIALOG_ID:

//产生一个DatePickerDialog绑定mDateSetListener监听器

returnnewDatePickerDialog(this,mDateSetListener,mYear,mMonth,

mDay);

}

returnnull;

}

DatePickerDialog的构造函数如下:

DatePickerDialog(Contextcontext,DatePickerDialog.OnDateSetListenercallBack,intyear,intmonthOfYear,intdayOfMonth)

这样就必须实现一个监听来设置经过修改后的时间。

//点击DatePicker的设置按钮时触发了修改时间的事件的监听器定义

privateDatePickerDialog.OnDateSetListenermDateSetListener=newDatePickerDialog.OnDateSetListener(){

publicvoidonDateSet(DatePickerview,intyear,intmonthOfYear,intdayOfMonth){

mYear=year;

mMonth=monthOfYear;

mDay=dayOfMonth;

updateDisplay();

}

};

布局介绍

程序参考:

Android系统下提供了6中布局分别是:

LinearLayout

RelativeLayout

TableLayout

GridView

TabLayout

ListView

说明:

以下程序都使用GoogleAPIsAPILevel:

8

使用的模拟器为

使用Android版本为:

1、LinearLayout

这种布局属于线性布局:

线性布局的形式可以分为两种,第一种横向线性布局第二种纵向线性布局,这种布局一般和其他的布局方式嵌套使用。

示例:

通过看这个界面就可以发现,这个线性布局是采取:

总体纵向布局,局部先横向再纵向布局的方式。

新建一个项目:

HelloLinearLayout

程序目录结构如下:

XML实现代码分析如下:

1、总体纵向布局设置

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

orientation="vertical"

android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

--?

?

?

?

?

?

?

?

-->

2、局部首先采用横向布局,XML代码设置如下:

android:

orientation="horizontal"

android:

layout_width="fill_parent"

android:

layout_height="fill_parent"

android:

layout_weight="1">

android:

text="red"

android:

gravity="center_horizontal"

android:

background="#aa0000"

android:

layout_width="wrap_content"

android:

layout_height="fill_parent"

android:

layout_weight="1"/>

android:

text="green"

android:

gravity="center_horizontal"

android:

background="#00aa00"

android:

layout_width="wrap_content"

android:

layout_height="fill_parent"

android:

layout_weight="1"/>

解释:

android:

orientation="horizontal"设置布局方式-横向

3、设置局部纵向布局,XML代码如下:

android:

orientation="vertical"

android:

layout_width="fill_parent"

android:

layout_height="fill_parent"

android:

layout_weight="1">

android:

text="rowone"

android:

textSize="15pt"

android:

layout_width="fill_parent"

android:

layout_height="wrap_content"

android:

layout_weight="1"/>

android:

text="rowtwo"

android:

textSize="15pt"

android:

layout_width="fill_parent"

android:

layout_height="wrap_content"

android:

layout_weight="1"/>

解释:

android:

orientation="vertical"设置布局方式为纵向布局

2、RelativeLayout

相对布局是android布局中最为强大的,首先它可以设置的属性是最多了,其次它可以做的事情也是最多的。

android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。

相对布局的属性设置

设置距父元素右对齐

android:

layout_alignParentRight="true"

设置该控件在id为re_edit_0控件的下方

android:

layout_below="@id/re_edit_0"

设置该控件在id为re_image_0控件的左边

android:

layout_toLeftOf="@id/re_iamge_0"

设置当前控件与id为name控件的上方对齐

android:

layout_alignTop="@id/name"

设置偏移的像素值

android:

layout_marginRight="30dip"

示例运行如下:

新建一个项目HelloRelativeLayout

程序目录结构如下:

XML代码

1、全局布局方式设置

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

2、加入文本和文本框

android:

id="@+id/label"

android:

layout_width="fill_parent"

android:

layout_height="wrap_content"

android:

text="?

?

?

?

"/>

android:

id="@+id/entry"

android:

layout_width="fill_parent"

android:

layout_height="wrap_content"

android:

background="@android:

drawable/editbox_background"

android:

layout_below="@id/label"/>

解释:

android:

layout_below="@id/label"/>文本框位于文本之下,参照id

3、加入两个按钮,一个在左边,一个在右边。

android:

id="@+id/ok"

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

layout_below="@id/entry"

android:

layout_alignParentRight="true"

android:

layout_marginLeft="80dip"

android:

text="?

?

右?

"/>

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

layout_marginRight="100dip"

android:

layout_alignTop="@id/ok"

android:

text="?

?

左?

"/>

解释:

android:

layout_below="@id/entry"

设置位于文本框的下方

android:

layout_alignParentRight="true"

设置与父元素右对齐

android:

layout_marginLeft="80dip"

设置偏移的像素值

3、TableLayout

程序运行如下:

新建一个项目:

HelloTableLayout

程序目录结构如下:

XML代码

1、全局采用Table布局

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="fill_parent"

android:

layout_height="fill_parent"

android:

stretchColumns="1">

2、插入图片

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

src="@drawable/g"

android:

layout_gravity="center"

/>

3、插入一行

android:

layout_column="1"

android:

text="?

?

"

android:

gravity="left"

android:

padding="3dip"/>

android:

text="?

?

"

android:

gravity="right"

android:

padding="3dip"/>

4、插入分隔线

android:

layout_height="8dip"

android:

background="#FF909090"/>

5、插入一行记录信息

android:

layout_column="1"

android:

text="?

?

"

android:

padding="3dip"/>

android:

text="8888888888"

android:

gravity="right"

android:

padding="3dip"/>

4、GridView

Android的GridView控件用于把一系列的空间组织成一个二维的网格显示出来应用的比较多的就是组合图片显示。

例子运行如下图所示

GridView的XML属性如下:

新建项目:

HelloGridView

程序目录结构如下:

布局XML文件

Main.xml设置布局为方式为:

GridView

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

id="@+id/gridview"

android:

layout_width="fill_parent"

android:

layout_height="fill_parent"

android:

columnWidth="90dp"

android:

numColumns="auto_fit"

android:

verticalSpacing="10dp"

android:

horizontalSpacing="10dp"

android:

stretchMode="columnWidth"

android:

gravity="center"

/>

XML文件部分属性解释

android:

columnWidth="90dp"

每一列指定宽度为90dp

改为180dp后图片显示为:

android:

numColumns="auto_fit"

用于设置要展示的列数,这里为根据图片大小自动匹配

android:

verticalSpacing="10dp"

用于设置默认两行之间的间距

android:

horizontalSpacing="10dp"

用于设置默认两列之间的间距

android:

stretchMode="columnWidth"

用于设置缩放

android:

gravity="center"

用于设置此组件中的内容在组件中的位置

使用GridView布局方式

publicclassHelloGridViewextendsActivity{

/**Calledwhentheactivityisfirstcreated.*/

publicvoidonCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

GridViewgridview=(GridView)findViewById(R.id.gridview);

gridview.setAdapter(newImageAdapter(this));

gridview.setOnItemClickListener(newOnItemClickListener(){

publicvoidonItemClick(AdapterView

>parent,Viewv,intposition,longid){

Toast.makeText(HelloGridView.this,"?

?

"+position,Toast.LENGTH_SHORT).show();

}

});

}

}

说明:

gridview.setAdapter(newImageAdapter(this));

这里的ImageAdapter是一个自定义的适配器,用于为grid提供数据的适配器,它继承了BaseAdapter

publicvoidsetAdapter(ListAdapteradapter)

设置GridView的数据。

参数adapter为grid提供数据的适配器

此处省略ImageAdapter文件介绍,代码参考:

5、TabLayout

程序的运行结果如图所示:

新建一个项目:

HelloTabWidget

程序目录结构如下:

1、创建3个Activity.ArtistsActivity,AlbumsActivity,和SongsActivity.

3个文件内容相似举一个说明:

这个Activity用作一个单独的Tab,用于展示一个简单的TextView

2、将这3个Activity文件加入到AndroidManifest文件中去

3、需要3个图标,这里举一个例子说明:

首先将需要的图片

存放到项目的res/drawable/文件夹下,然后创建一个XML文件ic_tab_artists.xml

放到res/drawable/文件夹下。

用于设置图片的显示:

4、布局设置:

采用Tab布局

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

id="@android:

id/tabhost"

android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

5、增加组件

android:

orientatio

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 总结汇报 > 学习总结

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2