【Android Demo】QQ登陆界面(三)
2019-07-05 本文已影响0人
感同身受_
当你登陆后,第一眼看到的当然是QQ消息列表啦,那么,我们继QQ登陆界面之后,再写一下QQ列表的相关代码
一、布局:
【效果图】
QQLogin_2.PNG
1、开始贴布局的代码
界面布局second_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F1F5F2">
<include layout="@layout/title"/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_below="@+id/title"
android:background="@drawable/editview"
android:text="搜索"/>
<ListView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/button2"/>
<include layout="@layout/navigation"/>
</RelativeLayout>
- Button按钮是搜索框
- ListView是一个listView控件,用于存放消息列表
(目前用的更多的是RecyclerView,但我还不怎么会使用,所以只有先用着ListView) - 这里使用了引用布局
<include layout="@layout/title"/>``<include layout="@layout/navigation"/>
这两个布局是对应布局中的标题栏和下面的导航栏。代码:
标题栏title.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:id="@+id/title"
android:background="#03A3F3"
android:orientation="horizontal">
<ImageButton
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="@drawable/img2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="22sp"
android:textColor="#EAEEEA"
android:text="消息"/>
<ImageButton
android:id="@+id/menu"
android:layout_width="58dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_marginRight="23dp"
android:src="@drawable/menu"
/>
</RelativeLayout>
导航栏navigation.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#DAD6D6">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="8dp"
android:src="@drawable/news"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/contacts"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="8dp"
android:src="@drawable/space"/>
</RelativeLayout>
现在开始分析代码部分:
(标题栏和导航栏只是做出来了一个效果,具体功能并没有去实现)
(这部分代码主要实现的是如何在ListView中展示消息列表的相应内容,如:联系人网名(备注)、头像、聊天内容、上次对话时间、火花、巨轮等等)
package com.example.qqlogin;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class SecondActivity extends Activity {
private Button button;
private ListView recyclerView;
private MyAdapter adapter;
private List<Map<String,Object>> list;
private Map<String,Object> map;
private int[] images = {R.drawable.jia,R.drawable.dachuang,R.drawable.android,R.drawable.he,R.drawable.zeng,R.drawable.jing,
R.drawable.cao,R.drawable.xu,R.drawable.wang,R.drawable.zheng,R.drawable.yang,R.drawable.zhengyin,R.drawable.li};
private String[] names = {"菻","android大创小组","安卓小组","何飘","曾祥辉","敬雅兰","曹靖","许昊伟","王志飞","郑淏天","杨龙","郑影","李琰"};
private int[] relation = {R.drawable.fire,0,0,R.drawable.boat,0,0,0,0,0,R.drawable.fire,0,0,0,};
private String[] time = {"16:44","15:33","12:03","11:32","7:21","昨天","昨天","昨天","昨天","昨天","昨天","星期五","星期三"};
private String[] contents = {};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.second_layout);
//用代码将状态栏变为透明,而不靠style;
// if(Build.VERSION.SDK_INT >= 21) {
// Window window = getWindow();
// window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
// | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
// getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
// window.setStatusBarColor(Color.TRANSPARENT);
// //导航栏
// window.setNavigationBarColor(Color.TRANSPARENT);
// Log.d("MainActivity","这是第222一一一处");
// }
adapterStatus();
initData();
initRecyclerView();
adapter = new MyAdapter();
recyclerView.setAdapter(adapter);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(SecondActivity.this, ThirdActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.in_from_right,R.anim.out_to_left);
}
});
recyclerView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent intent = new Intent(SecondActivity.this,ChatWindow.class);
startActivity(intent);
overridePendingTransition(R.anim.in_from_right,R.anim.out_to_left);
}
});
}
private void adapterStatus() {
int height = getStateBar3();
LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT);
layoutParam.setMargins(10, height, 10, 0);
}
private int getStateBar3(){
int result = 0;
int resourceId = this.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = this.getResources().getDimensionPixelSize(resourceId);
}
return result;
}
//重写Activity该方法,当窗口焦点变化时自动隐藏system bar,这样可以排除在弹出dialog和menu时,
//system bar会重新显示的问题。
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
hideSystemUI();
}
}
private void hideSystemUI() {
Log.d("MainActivity","这是第222二处");
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY //(修改这个选项,可以设置不同模式)
//使用下面三个参数,可以使内容显示在system bar的下面,防止system bar显示或
//隐藏时,Activity的大小被resize。
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
// 隐藏导航栏和状态栏
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
// | View.SYSTEM_UI_FLAG_FULLSCREEN
);
}
//显示system bar, 同时还是希望内容显示在system bar的下方。
private void showSystemUI() {
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
private void initRecyclerView() {
list = new ArrayList<Map<String, Object>>();
for(int i=0;i<images.length;i++){
map = new HashMap<String,Object>();
map.put("img",images[i]);
map.put("name",names[i]);
// map.put("content",contents[i]);
map.put("content","你好,我是"+names[i]);
map.put("relation",relation[i]);
map.put("time",time[i]);
list.add(map);
}
}
private void initData() {
button = findViewById(R.id.button2);
recyclerView = findViewById(R.id.recyclerView);
}
class MyAdapter extends BaseAdapter{
@Override
public int getCount() {
return list.size();
}
@Override
public Map<String,Object> getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Holder holder;
if(convertView == null){
convertView = LayoutInflater.from(SecondActivity.this).inflate(R.layout.chatlist_item,null);
holder = new Holder();
holder.image = convertView.findViewById(R.id.second_image);
holder.tvName = convertView.findViewById(R.id.second_name);
holder.time = convertView.findViewById(R.id.second_time);
holder.relation = convertView.findViewById(R.id.second_relation);
holder.tvContent = convertView.findViewById(R.id.second_content);
convertView.setTag(holder);
}else{
holder = (Holder) convertView.getTag();
}
holder.tvName.setText((String) list.get(position).get("name"));
holder.tvContent.setText((String) list.get(position).get("content"));
holder.time.setText((String) list.get(position).get("time"));
holder.image.setImageResource( (Integer)list.get(position).get("img"));
holder.relation.setImageResource( (Integer) list.get(position).get("relation"));
return convertView;
}
}
class Holder{
private ImageView image;
private TextView tvName;
private TextView tvContent;
private TextView time;
private ImageView relation;
}
@Override
public void onBackPressed() {
finish();
}
}
- 适配器里面有一个有个布局映射器引用了
R.layout.chatlist_item
代码chatlist_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F9F9FC"
android:padding="12dp"
>
<ImageView
android:id="@+id/second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="11dp"
android:src="@drawable/yang"/>
<RelativeLayout
android:id="@+id/namelist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/second_image">
<TextView
android:id="@+id/second_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#00000A"
android:layout_marginLeft="15dp"
android:text="杨龙"/>
<ImageView
android:id="@+id/second_relation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/second_time"
android:layout_marginRight="10dp"
android:src="@drawable/fire" />
<TextView
android:id="@+id/second_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:text="15:46"/>
</RelativeLayout>
<TextView
android:id="@+id/second_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/second_image"
android:layout_below="@+id/namelist"
android:layout_marginLeft="15dp"
android:text="你好,我是杨龙"/>
</RelativeLayout>