准备工具:安卓开发工具
实现页面效果:
1.第一页面:要求停留三秒跳转第二页面
2.第二页面,要求:获取输入的数据点击确定按钮跳转第三页面并数据传入第三页面
3.第三页面:要求:接收第二页面数据显示在文本框并吐司显示
打开android开发工具 在左上角找到File新建一个项目,找到New里的Android Application Project,在这里我项目的名称为Work
项目创建好之后开始写第一个页面的代码,打开第一个页面编辑:
在layout里找到activity_main.xml里编辑页面样式:
修改整个手机页面的布局,呈线性布局:LinearLayout,并修改页面的排列方式为垂直排列(android:orientatinotallow=“vertical”)
代码如下:
<LinearLayout 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:orientation="vertical" >
</LinearLayout>
编辑页面里需要的控件,这里我们只需要让整个页面背景设置一张图片即可,这里我用系统自带的图片作为背景
在上一步的线性布局里加入android:background="@drawable/ic_launcher"即可
运行结果演示:
下一步要实现用户点击程序之后显示的第一个页面自动停留3秒钟,跳转到第二个页面,在做这些操作之前我们要准备要跳转的第二个页面,这时候在src文件下的com.example.work包创建第二个的页面,如下图:
做完这些操作之后我们回到MainActivity.java文件里实现页面自动停留3秒钟,跳转到第二个页面的功能
代码如下:
package com.example.work;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 1.隐藏状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
// 2.隐藏标题栏
getActionBar().hide();
setContentView(R.layout.activity_main);
//开启一个线程(等三秒之后自动执行)
Thread t = new Thread(new Runnable() {
@Override
public void run() {
// 等待3秒
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 启动第二个页面
Intent it = new Intent(getApplicationContext(),
LoginActivity.class);
// 开启这个页面
startActivity(it);
}
});
// 启动这个页面
t.start();
}
}
这个时候第一个页面的代码编辑已经结束了,现在开始写第二个页面的代码首先选中第二个页面的android代码页,首先我们在layout文件夹里找到刚才创建的第二个页面也就是activity_login.xml文件双击打开
在里面就可以编写我们页面的代码:
<!-- 第一步首先要把整个页面的布局改成线性布局1(LinearLayout),并且垂直排列 (android:orientation="vertical") -->
<!-- 这里的布局有包含被包含的关系这里我用数字表示 -->
<LinearLayout 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:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<!-- 写一个布局(1.1),他的宽与他的上一级布局(父容器)一样宽,高度这里设置50dp,他的背景颜色更改为灰黑色,里面的内容居中排列 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#32373a"
android:gravity="center" >
<!-- 在布局里定义一个文本框控件显示文字 ,宽度与上一级布局(父容器)一样宽,高度这里设置20dp,文本内容为用户注册,文本字体颜色为 灰色 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="用户注册"
android:textColor="#ffffff" />
</LinearLayout>
<!-- 这个布局(1.1)到这里结束 -->
<!-- 新写一个线性布局(1.2) ,并添加宽高 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<!-- 在布局里定义一个文本框控件显示文字 ,这里使用了比重的属性(在这个布局(1.2)里宽的比重为1,前提宽为0dp时),高与父容器同高,本文内容为账号,排列方式为垂直水平并且靠右 -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|right"
android:text="账号:" />
<!-- 创建一个输入框控件,id为et_username,并设置宽高,宽为0dp,高度与1.2同高,宽在(1.2)的比重为2,提示文字为请输入QQ号/手机号 -->
<EditText
android:id="@+id/et_username"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:hint="请输入QQ号/手机号" />
</LinearLayout>
<!-- 这个布局(1.2)到这里结束 -->
<!-- 新写入一个布局(1.3) 并添加宽高 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<!-- 写入一文本框控件,并设置宽高,宽为0dp,高度与父容器同高(1.3)同高,宽在(1.2)的比重为1,排列方式为垂直水平并且靠右 -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|right"
android:text="密码:" />
<!-- 创建一个输入框控件,id为et_pwd,并设置宽高,宽为0dp,高度与(1.3)同高,宽在(1.2)的比重为2 -->
<EditText
android:id="@+id/et_pwd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
</LinearLayout>
<!-- 这个布局(1.3)到这里结束 -->
<!-- 新写入一个布局(1.4) 并添加宽高 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<!-- 创建一文本框控件,并设置宽高,宽为0dp,高度与父容器同高(1.4)同高,宽在(1.4)的比重为1,排列方式为垂直水平并且靠右,文本内容为班级: -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|right"
android:text="班级:" />
<!-- 创建一个下拉列表 id为sp_item,宽度比重(1.4)为2,高度为50dp 列表里的内容我们在对应安卓的java文件里添加内容 -->
<Spinner
android:id="@+id/sp_item"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="2" />
</LinearLayout>
<!-- 这个布局(1.4)到这里结束 -->
<!-- 新写入一个布局(1.5) 并添加宽高 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<!-- 创建一文本框控件,并设置宽高,宽为0dp,高度与父容器同高(1.4)同高,宽在(1.4)的比重为1,排列方式为垂直水平并且靠右,文本内容为性别:: -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|right"
android:text="性别:" />
<!-- 创建一个单选按钮组,并设置宽高,宽比重为2,高位50dp,呈水平方式排列(和横着排列),并且里面的创建单选按钮只能选中一个 -->
<RadioGroup
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="2"
android:orientation="horizontal" >
<!-- 创建单选按钮:id为rb1,宽度与内容自适应,高度与父类容器(RadioGroup)同高,按钮后面文字为男 -->
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="男" />
<!-- 创建单选按钮:id为rb1,宽度与内容自适应,高度与父类容器(RadioGroup)同高,按钮后面文字为女 -->
<RadioButton
android:id="@+id/rb2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="女" />
</RadioGroup>
<!-- 结束单选按钮组 -->
</LinearLayout>
<!-- 这个布局(1.5)到这里结束 -->
<!-- 新写入一个布局(1.6) 并添加宽高 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<!-- 创建一文本框控件,并设置宽高,宽为0dp,高度与父容器同高(1.5)同高,宽在(1.5)的比重为1,排列方式为垂直水平并且靠右,文本内容为爱好: -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|right"
android:text="爱好:" />
<!-- 新写入一个布局(1.6.1) 并添加宽高 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="2" >
<!-- 创建多选按钮1:id为cb1,宽都与内容自适应,高度与父容器(1.6.1),文本文字为上网 -->
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="上网" />
<!-- 创建多选按钮2:id为cb2,宽都与内容自适应,高度与父容器(1.6.1),文本文字为聊天 -->
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="聊天" />
<!-- 创建多选按钮3:id为cb3,宽都与内容自适应,高度与父容器(1.6.1),文本文字为睡觉 -->
<CheckBox
android:id="@+id/cb3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="睡觉" />
<!-- 创建多选按钮4:id为cb4,宽都与内容自适应,高度与父容器(1.6.1),文本文字为看书 -->
<CheckBox
android:id="@+id/cb4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="看书" />
</LinearLayout>
<!-- 这个布局(1.6.1)到这里结束 -->
</LinearLayout>
<!-- 这个布局(1.6)到这里结束 -->
<!-- 新写入一个布局(1.7) 并添加宽高 ,并让里面的内容居中排列 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center" >
<!-- 创建按钮1:id为btn1,宽度100dp,高度与父容器(1.7)同高,按钮里的文字为确定 -->
<Button
android:id="@+id/btn_commit"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="确定" />
<!-- 创建按钮2:id为btn1,宽度100dp,高度与父容器(1.7)同高,按钮里的文字为取消 -->
<Button
android:id="@+id/btn2"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="取消" />
</LinearLayout><!-- 这个布局(1.6)到这里结束 -->
</LinearLayout><!-- 这个布局1到这里结束 -->
我们点击预览示图如下:
到这里我们的第二个页面的基础效果已经做好了,但是有点掉不美观,现在我想让输入框和按钮变得美观一点,应该怎么改呢?
首先我们需要找到res文件下的drawable-hdpi文件,选中鼠标右键
设置完成之后我们就可以在里面编写内容,在里面主要写关于输入框的样式,如一下代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 设置输入框的边框圆角度 -->
<corners android:radius="15dp"/>
<!-- 设置输入框的填充颜色 -->
<solid android:color="#acc"/>
<!--设置输入框的边框的大小和颜色 -->
<stroke android:width="1dp" android:color="#000000"/>
</shape>
写完之后保存,我们要使用它,我们回到第二个页面的代码页面
现在我们回到预览视图看下效果
同理按钮的样式也是同样的设置,使颜色修改即可,代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 设置输入框的边框圆角度 -->
<corners android:radius="15dp" />
<!-- 设置输入框的填充颜色 -->
<solid android:color="#227700" />
<!-- 设置输入框的边框的大小和颜色 -->
<stroke
android:width="1dp"
android:color="#acc" />
</shape>
效果如下:
最后我们要在下拉列表里添加数据,打开第二个页面对应的java文件:LoginActivity.java文件打开编辑,代码如下
package com.example.works;
import android.widget.Spinner;
public class LoginActivity extends Activity {
// 定义有ID的各种控件
Spinner spitem;
String[] str = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_login);
// 准备下拉列表(spinner)控件所要显示的数据
str = new String[] { "六年级一班", "六年级二班", "六年级三班", "六年级四班" };
// 使用适配器来进行页面和数据的判定,参数解释:getApplicationContext():当前页面,R.layout.item:自定义样式文件, str:需要显示的数据
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getApplicationContext(), R.layout.item, str);
//适配器和控件绑定
spitem.setAdapter(adapter);
}
}
保存之后会报错,因为R.layout.item是自己为下拉列表创建的样式的文件,所以我们创建文件item文件
编写完成之后查看效果,因为预览时视图不会显示下拉列表的效果所以我们要启动虚拟机来查看效果,那么我们要创建虚拟机如以下图:
如果出现类似手机的页面出现说明虚拟机打开成功然后我们点击项目鼠标右击,鼠标移动到Run as,选中里面第一个即可运行,如图:
运行之后结果演示如下:
现在我们写第三个页面,目的是让第二个页面用户填写的数据放到第三个页面文本框上显示,如之前创造第二个页面一样在src文件下的com.example.work包创建第二个的页面:InfoActivity.java文件,打开第三个页面的android代码页面,并在文本框加上id,如图:
最后一步,我们要使第二页面输入的内容放到第三个页面上,首先要在第二个页面(LoginActivity.java)里写入功能,代码如下
package com.example.works;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Spinner;
import android.widget.Toast;
public class LoginActivity extends Activity implements OnClickListener {
// 定义有ID的各种控件
EditText et_username, et_pwd;
RadioButton rb1, rb2;
CheckBox cb1, cb2, cb3, cb4;
Button btn_commit;
Spinner spitem;
String[] str = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_login);
//找到所有控件
init();
// 给id为btn1的按钮添加点击事件
btn1.setOnClickListener(this);
// 准备控件所要显示的数据
str = new String[] { "六年级一班", "六年级二班", "六年级三班", "六年级四班" };
// 使用适配器来进行页面和数据的判定
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
getApplicationContext(), R.layout.item, str);
//控件与适配器的绑定
spitem.setAdapter(adapter);
}
// 定义init方法
public void init() {
// 找到需要用到的控件
et_username = (EditText) findViewById(R.id.et_username);
et_pwd = (EditText) findViewById(R.id.et_pwd);
rb1 = (RadioButton) findViewById(R.id.rb1);
rb2 = (RadioButton) findViewById(R.id.rb2);
cb1 = (CheckBox) findViewById(R.id.cb1);
cb2 = (CheckBox) findViewById(R.id.cb2);
cb3 = (CheckBox) findViewById(R.id.cb3);
cb4 = (CheckBox) findViewById(R.id.cb4);
btn_commit = (Button) findViewById(R.id.btn_commit);
spitem = (Spinner) findViewById(R.id.sp_item);
}
public void onClick(View v) {
// 获取账号
String userName = et1.getText().toString();
// 获取密码
String pwd = et2.getText().toString();
// 获取性别
String sex = "";
if (rb1.isChecked()) {
sex = rb1.getText().toString();
}
if (rb2.isChecked()) {
sex = rb2.getText().toString();
}
// 获取爱好多选框内容
String fav = "";
if (cb1.isChecked()) {
fav += cb1.getText().toString();
}
if (cb2.isChecked()) {
fav += cb2.getText().toString();
}
if (cb3.isChecked()) {
fav += cb3.getText().toString();
}
if (cb4.isChecked()) {
fav += cb4.getText().toString();
}
// 7:获取下拉列表选中的内容
int i = spitem.getSelectedItemPosition();
String spItem = str[i];
// 8:传值跳转
Intent it = new Intent(getApplicationContext(), InfoActivity.class);
// 传递数据
it.putExtra("userName", userName);
it.putExtra("pwd", pwd);
it.putExtra("sex", sex);
it.putExtra("fav", fav);
it.putExtra("spitem", spItem);
startActivity(it);
}
}
以上代码使第二页(LoginActivity)面输入内容后点击按钮的数据传入第三页面(InfoActivity)中,下一步就是要让第三页面接受数据并放在文本框里且吐司显示,代码如下:
package com.example.works;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;
public class InfoActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_info);
// 获取上一个页面传递过来的数据
Intent it = getIntent();
String userName = it.getStringExtra("userName");
String pwd = it.getStringExtra("pwd");
String sex = it.getStringExtra("sex");
String fav = it.getStringExtra("fav");
String spItem = it.getStringExtra("spitem");
//将这些数据放在一起
String str = "账号: "+userName + " 密码: " + pwd + " 性别: " + sex + " 爱好: " + fav+" 班级: "+spItem;
// 显示这些数据
// 1:吐司显示
Toast.makeText(getApplicationContext(), str, 1).show();
// 2:文本框显示
TextView tvShow = (TextView) findViewById(R.id.tv_show);
tvShow.setText(str);
}
}
保存,然后右键项目Run as运行虚拟机试试效果,以下视频为演示效果
android演示