在学历那么多UI开发的知识，也是时候实战一下了。这次我们要综合运用前面所学的大量内容来编写出一个较为复杂且相当美观的界面，你准备好了吗？也就是仿造QQ界面啦。
先创建一个新项目的。取名为Demo_TestOne。然后在登录activity_main.xml文件里添加如下代码：
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"/>
其中，在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吧，有很多关于这个的。)
android:shape="rectangle"> android:bottom="2dp" android:left="2dp" android:right="2dp"/>
android:shape="rectangle"> android:bottom="2dp" android:left="2dp" android:right="2dp"/>
说了这么多，上图吧。
是不是有点意思了？既然登录有了，那么注册(activity_sign.xml)也该有了。直接上图吧。
其实和登录一样，去掉下面的注册和忘记密码就好啦。忘记密码就不说了。可以自己去仿照QQ写哦。接下来就是该首页啦。首页activity_index.xml代码如下：
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="动态" />
其中android:background="@drawable/search_bg"和上面说的EditText以及Button是一样的资源文件。代码如下：
android:shape="rectangle"> android:bottom="2dp" android:left="2dp" android:right="2dp"/>
然后
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"/>
我们再写一个搜索界面(activity_search.xml)吧。(其实可以在搜索界面下面添加水平方向的RecyclerView布局，我这没写，后面再添加吧。)代码如下所示：
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"/>
新建menu如下图所示：
然后在menu文件里新建top.xml文件。
top.xml文件代码如下：
界面都弄得差不多了。接下来我们该响应活动了。(代码依次是登录，注册，主界面，搜索,导航栏)我们先设置只要密码不为空就能登录和注册。(数据储存还没学，后面学了我们在添加进来。)
登录(MainActivity.java)代码如下所示：
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;
}
}
}
注册(SignActivity.java)代码如下所示：
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。希望大神可以帮忙给小白指点迷津。谢谢啦。