自学Android第十一天——学以致用

在学历那么多UI开发的知识，也是时候实战一下了。这次我们要综合运用前面所学的大量内容来编写出一个较为复杂且相当美观的界面，你准备好了吗？也就是仿造QQ界面啦。

先创建一个新项目的。取名为Demo_TestOne。然后在登录activity_main.xml文件里添加如下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="60dp"

android:hint="请输入用户名"

android:id="@+id/l_name"

android:maxLines="2"

android:background="@drawable/et_bg"

android:layout_marginTop="4dp"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"

android:drawableRight="@drawable/cancel"

android:textSize="18dp"/>

android:layout_width="match_parent"

android:layout_height="60dp"

android:hint="请输入密码"

android:id="@+id/l_pwd"

android:maxLines="2"

android:inputType="textPassword"

android:background="@drawable/et_bg"

android:layout_marginTop="4dp"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"

android:drawableRight="@drawable/cancel"

android:textSize="18dp"/>

android:id="@+id/btn_login"

android:layout_width="match_parent"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:text="登录"

android:textAllCaps="false"

android:textSize="24dp"

android:background="@drawable/btn_bg"

android:layout_marginTop="4dp"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"

android:textColor="#fff"/>

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/forget"

android:text="忘记密码"

android:textColor="#E40A75A7"

android:layout_marginLeft="8dp"

android:textSize="16dp"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="right"

android:id="@+id/sign"

android:text="用户注册"

android:textColor="#E40A75A7"

android:textSize="16dp"

android:layout_marginRight="8dp"/>

</LinearLayout>

其中，在EditText(编辑框)里面添加android:background="@drawable/et_bg"和在Button(按钮)里面添加android:background="@drawable/btn_bg"都是放在drawable里面的资源文件。把第二个EditText里添加android:inputType="textPassword"是为了将EditText设置成password类型，也就是输入时不可见。编辑框里添加android:drawableRight="@drawable/cancel"是为了在右边添加一个清空小图标。

资源文件et_bg.xml和btn_bg.xml代码分别如下所示：(如果不知道是什么意思就去百度一下shape吧，有很多关于这个的。)

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<padding android:top="2dp"

android:bottom="2dp"

android:left="2dp"

android:right="2dp"/>

</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<padding android:top="2dp"

android:bottom="2dp"

android:left="2dp"

android:right="2dp"/>

</shape>

说了这么多，上图吧。

是不是有点意思了？既然登录有了，那么注册(activity_sign.xml)也该有了。直接上图吧。

其实和登录一样，去掉下面的注册和忘记密码就好啦。忘记密码就不说了。可以自己去仿照QQ写哦。接下来就是该首页啦。首页activity_index.xml代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="50dp"

android:id="@+id/search"

android:text="搜索"

android:textSize="22dp"

android:background="@drawable/search_bg"

android:drawableLeft="@drawable/search"

android:paddingLeft="@android:dimen/thumbnail_width"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"/>

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:orientation="horizontal">

android:id="@+id/message"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:drawableTop="@drawable/message"

android:gravity="center"

android:text="消息" />

android:id="@+id/contact"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:drawableTop="@drawable/contact"

android:gravity="center"

android:text="联系人" />

android:id="@+id/dynamic"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:drawableTop="@drawable/dynamic"

android:gravity="center"

android:text="动态" />

</LinearLayout>

其中android:background="@drawable/search_bg"和上面说的EditText以及Button是一样的资源文件。代码如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<padding android:top="2dp"

android:bottom="2dp"

android:left="2dp"

android:right="2dp"/>

</shape>

然后<include layout="@layout/title"/>是导入一个标题栏。(其他的相信聪明的你能够明白，这就不用说了吧。)细心的你有没有发现QQ的标题栏和系统自带的不一样。在layout新建一个title.xml文件吧。里面的代码如下：

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ED1DAAC4"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_gravity="center_vertical"

android:gravity="center"

android:id="@+id/image_left"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="5"

android:layout_gravity="center_vertical"

android:gravity="center"

android:id="@+id/tv_name"

android:text="@string/app_name"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_gravity="center_vertical"

android:src="@drawable/image_right"

android:gravity="center"

android:id="@+id/image_right"/>

</LinearLayout>

我们再写一个搜索界面(activity_search.xml)吧。(其实可以在搜索界面下面添加水平方向的RecyclerView布局，我这没写，后面再添加吧。)代码如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_weight="9"

android:id="@+id/search"

android:hint="搜索"

android:textColor="#EB5E5B5B"

android:background="@drawable/search_bg"

android:drawableLeft="@drawable/search"

android:paddingLeft="14dp"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:id="@+id/cancel"

android:text="取消"

android:textColor="#F31D7BC5"

android:textSize="20dp"

android:gravity="center"/>

</LinearLayout>

新建menu如下图所示：

新建menu

然后在menu文件里新建top.xml文件。

top

top.xml文件代码如下：

<item android:id="@+id/all"

android:icon="@drawable/dynamic"

android:title="创建群聊"/>

<item android:id="@+id/find"

android:icon="@drawable/dynamic"

android:title="加好友/群"/>

<item android:id="@+id/see"

android:icon="@drawable/dynamic"

android:title="扫一扫"/>

<item android:id="@+id/face"

android:icon="@drawable/dynamic"

android:title="面对面快传"/>

<item android:id="@+id/money"

android:icon="@drawable/dynamic"

android:title="收付款"/>

</menu>

界面都弄得差不多了。接下来我们该响应活动了。(代码依次是登录，注册，主界面，搜索,导航栏)我们先设置只要密码不为空就能登录和注册。(数据储存还没学，后面学了我们在添加进来。)

public class MainActivityextends AppCompatActivityimplements View.OnClickListener {

Button btn_login;

EditText l_name,l_pwd;

TextView forget,sign;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

btn_login = findViewById(R.id.btn_login);

l_name = findViewById(R.id.l_name);

l_pwd = findViewById(R.id.l_pwd);

forget = findViewById(R.id.forget);

//sign = findViewById(R.id.sign);

sign = findViewById(R.id.sign);

btn_login.setOnClickListener(this);

forget.setOnClickListener(this);

sign.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch(v.getId()){

case R.id.btn_login:

String name =l_name.getText().toString().trim();//获取用户名

String pwd =l_pwd.getText().toString().trim();//获取密码

if(!name.equals("") && !pwd.equals("")){

/*用户输入的和数据库里的值比较。

用户名和密码同时满足就进行跳转

Intent intent =new Intent(MainActivity.this,IndexActivity.class);

startActivity(intent);

}else{

Toast.makeText(MainActivity.this, "用户名和密码不能为空！", Toast.LENGTH_SHORT).show();

}

break;

case R.id.forget:

/*点击后下面弹出一个小界面，分别显示：

找回密码，短信验证登录，取消

break;

case R.id.sign:

Intent intent =new Intent(MainActivity.this,SignActivity.class);

startActivity(intent);

break;

default:

break;

}

public class SignActivityextends AppCompatActivity {

Buttonbtn_sign;

EditTexts_name,s_pwd;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_sign);

btn_sign = findViewById(R.id.btn_sign);

s_name = findViewById(R.id.s_name);

s_pwd = findViewById(R.id.s_pwd);

btn_sign.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String sign_name =s_name.getText().toString().trim();

String sign_pwd =s_pwd.getText().toString().trim();

if(!sign_name.equals("") && !sign_pwd.equals("")){

Intent intent =new Intent(SignActivity.this,IndexActivity.class);

startActivity(intent);

}else{

Toast.makeText(SignActivity.this, "用户名或密码为空！", Toast.LENGTH_SHORT).show();

}

});

}

首页(IndexActivity.java)代码如下所示：

public class IndexActivityextends AppCompatActivityimplements View.OnClickListener{

EditTextsearch;

TextViewmessage,contact,dynamic;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_index);

//隐藏系统默认的标题栏

ActionBar actionBar = getSupportActionBar();

if(actionBar !=null){

actionBar.hide();

}

search = findViewById(R.id.search);

message = findViewById(R.id.message);

contact = findViewById(R.id.contact);

dynamic = findViewById(R.id.dynamic);

search.setOnClickListener(this);

message.setOnClickListener(this);

contact.setOnClickListener(this);

dynamic.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch(v.getId()){

case R.id.search:

Intent intent =new Intent(IndexActivity.this,SearchActivity.class);

startActivity(intent);

break;

case R.id.message:

break;

case R.id.contact:

break;

case R.id.dynamic:

break;

}

//显示菜单

@Override

public boolean onCreateOptionsMenu(Menu menu){

getMenuInflater().inflate(R.menu.top,menu);

return true;

}

//相应事件

@Override

public boolean onOptionsItemSelected(MenuItem item){

switch (item.getItemId()){

case R.id.all:

Toast.makeText(this, "创建群聊", Toast.LENGTH_SHORT).show();

break;

case R.id.find:

Toast.makeText(this, "加好友/群", Toast.LENGTH_SHORT).show();

break;

case R.id.see:

Toast.makeText(this, "扫一扫", Toast.LENGTH_SHORT).show();

break;

case R.id.face:

Toast.makeText(this, "面对面快传", Toast.LENGTH_SHORT).show();

break;

case R.id.money:

Toast.makeText(this, "收付款", Toast.LENGTH_SHORT).show();

break;

default:

Toast.makeText(this, "找不到！", Toast.LENGTH_SHORT).show();

break;

}

return true;

}

搜索(SearchActivity.java)代码如下所示：

public class SearchActivityextends AppCompatActivityimplements View.OnClickListener{

TextViewcancel;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_search);

//隐藏系统自带的标题栏

ActionBar actionBar = getSupportActionBar();

actionBar.hide();

cancel = findViewById(R.id.cancel);

cancel.setOnClickListener(this);

}

@Override

public void onClick(View v){

switch(v.getId()){

case R.id.cancel:

Intent intent =new Intent(SearchActivity.this,IndexActivity.class);

startActivity(intent);

break;

}

标题栏(Title.java)代码如下所示：

public class Titleextends AppCompatActivityimplements View.OnClickListener {

ImageViewimage_left,image_right;

private Menumenu;

@SuppressLint("ResourceType")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

image_left = findViewById(R.id.image_left);

image_right = findViewById(R.id.image_right);

menu = findViewById(R.menu.top);

image_left.setOnClickListener(this);

image_right.setOnClickListener(this);

}

/**

* Called when a view has been clicked.

* @param v The view that was clicked.

@Override

public void onClick(View v) {

switch(v.getId()){

case R.id.image_left:

//头像处理

break;

case R.id.image_right:

//三个图标根据不同的activity之间互换

onCreateOptionsMenu(menu);

break;

default:

break;

}

//显示菜单

@Override

public boolean onCreateOptionsMenu(Menu menu){

getMenuInflater().inflate(R.menu.top,menu);

return true;

}

//相应事件

@Override

public boolean onOptionsItemSelected(MenuItem item){

switch (item.getItemId()){

case R.id.all:

Toast.makeText(this, "创建群聊", Toast.LENGTH_SHORT).show();

break;

case R.id.find:

Toast.makeText(this, "加好友/群", Toast.LENGTH_SHORT).show();

break;

case R.id.see:

Toast.makeText(this, "扫一扫", Toast.LENGTH_SHORT).show();

break;

case R.id.face:

Toast.makeText(this, "面对面快传", Toast.LENGTH_SHORT).show();

break;

case R.id.money:

Toast.makeText(this, "收付款", Toast.LENGTH_SHORT).show();

break;

default:

Toast.makeText(this, "找不到！", Toast.LENGTH_SHORT).show();

break;

}

return true;

}

就这些啦。至于所需要的图片可以自己去网上找。或者自己弄。

不过做是做好了。有很多bug。如果有大神有时间看，可以指出来。我来改。比如其中一处就是点击首页右上角的加号没有弹出menu来。还有就是登录注册点击右边的清除小图标，也不能清除。这是我现在看到的bug。希望大神可以帮忙给小白指点迷津。谢谢啦。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,723评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,080评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,604评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,440评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,431评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,499评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,893评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,541评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,751评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,547评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,619评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,320评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,890评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,896评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,137评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,796评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,335评论 2赞 342

自学Android第十一天——学以致用

推荐阅读更多精彩内容