Android ListView仿手机qq主页面

ListView的使用

仿照个人qq主页面

• 原图

• 效果图
  

1. 首先删除原来的工具栏
   在values文件夹下的styles文件中将style标签中的parent改为NoActionBar
   parent="Theme.AppCompat.Light.NoActionBar"
2. 在activity_main.xml中创建一个Toolbar作为自己创建的工具栏，搜索框是抠图作为一个imageButton（原手机qq这个搜索框个人认为就是一个button）
   

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/blue"
            app:title="看客"
            app:titleTextColor="@color/write"
            android:paddingStart="15dp"
            android:paddingLeft="15dp"
            app:navigationIcon="@drawable/yonc"
            tools:ignore="RtlSymmetry"/>

    <ImageButton
            android:id="@+id/ib_search"
            android:layout_width="408sp"
            android:layout_height="55sp"
            android:src="@drawable/search_dark"
    />

ListView部分

1. 在xml布局文件中创建一个ListView
   android:divider="@color/transparent"可以设置每一个item的下划线为透明色即无下划线

<ListView
            android:id="@+id/lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

2. 为ListView的每一个item创建一个布局
   这里仿照qq主页面的item创建一个布局（即一个个头像加一个昵称）
   其中的宽高可以根据图片的大小以及效果微调
   

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="55sp" tools:ignore="UseCompoundDrawables">

    <ImageView
            android:layout_gravity="center_vertical"
            android:id="@+id/icon_group"
            android:paddingStart="15dp"
            android:paddingLeft="15dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="RtlSymmetry"/>
    <TextView
            android:paddingStart="15dp"
            android:paddingLeft="15dp"
            android:id="@+id/name_group"
            android:layout_width="wrap_content"
            android:textSize="20sp"
            android:layout_height="wrap_content" tools:ignore="RtlSymmetry"/>
</LinearLayout>

3. 为ListView获取数据
   我这里是创建了一个javaBean名为FriendsBean，有name和icon属性，get和set方法没有贴出来

public class FriendsBean {
     
    private String name;
    private int icon;
    }

并且手动写入上述数据并且将相应的对象写入friends集合中。

4. 创建一个适配器类继承BaseAdapter
   （详看注释）

package com.example.mylistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class MyAdapter extends BaseAdapter {
     
    private List<FriendsBean> friends;
    private Context context;

    //构造方法
    public MyAdapter(List<FriendsBean> friends, Context context) {
     
        this.friends = friends;
        this.context = context;
    }

    //item的数量，定义为集合的长度
    @Override
    public int getCount() {
     
        return friends.size();
    }

    @Override
    public Object getItem(int position) {
     
        return null;
    }

    @Override
    public long getItemId(int position) {
     
        return position;
    }

    //将每一个item条目进行设置并且返回一个View
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
     
        //拿到一个布局
        if (convertView==null){
     
            convertView = LayoutInflater.from(context)
                    .inflate(R.layout.list_item,parent,false);
        }
        //通过convertView对象拿到创建的布局中的子控件并且为之写入数据
        TextView textView = convertView.findViewById(R.id.name_group);
        textView.setText(friends.get(position).getName());
        ImageView imageView = convertView.findViewById(R.id.icon_group);
        imageView.setImageResource(friends.get(position).getIcon());
        return convertView;
    }
}

5. 在MainActivity中调用

ListView listView = (ListView)findViewById(R.id.lv);
listView.setAdapter(new MyAdapter(friends,this));