In the knowledge that much education UI development, it is time to look at the actual combat. This time we make comprehensive use of large amounts of content previously learned to write a more complex and quite beautiful interface, are you ready? It is fake QQ interface.
Create a new project. Named Demo_TestOne. Then add the following code to log activity_main.xml file:
<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 = "Please enter your user name"
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 = "Please enter your password"
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 = "Login"
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 = "Forgot Password"
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 = "User Registration"
android:textColor="#E40A75A7"
android:textSize="16dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
Among them, the EditText (edit box) add inside android: background = "@ drawable / et_bg" and add the android Button (Button) inside: background = "@ drawable / btn_bg" are placed inside the drawable resource file. Add the second EditText in android: inputType = "textPassword" is provided in order to EditText password type, i.e. invisible input. Edit box add android: drawableRight = "@ drawable / cancel" is to add a small icon on the right side empty.
Resource files et_bg.xml and btn_bg.xml codes are as follows :( If you do not know what it means to go to Baidu shape it, there's a lot about this.)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="4dp"/>
<padding android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp"/>
<stroke android:color="#BA817F7F" android:width="4dp"/>
</shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="4dp"/>
<solid android:color="#F31D7BC5"/>
<padding android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp"/>
</shape>
Having said that, on the drawing.
Is not it mean? Now login with, the registrar (activity_sign.xml) should also have. It directly on the map.
In fact, and as login, registration and remove the following forgotten password thousand million. Forgot your password will not say. QQ can go modeled write oh. Then there is the matter of the home page. Home activity_index.xml code is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/title"/>
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">
<corners android:radius="60dp"/>
<solid android:color="#E9C9C6C6"/>
<padding android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp"/>
<stroke android:width="4dp" android:color="#fff"/>
</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文件里新建top.xml文件。
top.xml文件代码如下：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<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>
界面都弄得差不多了。接下来我们该响应活动了。(代码依次是登录，注册，主界面，搜索,导航栏)我们先设置只要密码不为空就能登录和注册。(数据储存还没学，后面学了我们在添加进来。)
登录(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, "can not be found!", Toast.LENGTH_SHORT) .show ();
break;
}
return true;
}
}
These friends. As for the picture needed you can go online to find their own. Or get their own.
But do be done. There are a lot of bug. If you have time to read the great God, you can point it out. I'll change. For example, where a home is to click on the top right corner of the pop-up menu plus sign does not come. There is a sign in registration click on the small icon to the right to clear, not clear. This is what I see now bug. Great God hope can help to white to help. Thank you.
Reproduced in: https: //www.jianshu.com/p/4185c179dc9d