Android ListView仿手机qq主页面

ListView的使用

仿照个人qq主页面

  • 原图

Android ListView仿手机qq主页面

  • 效果图
    Android ListView仿手机qq主页面
  1. 首先删除原来的工具栏
    在values文件夹下的styles文件中将style标签中的parent改为NoActionBar
    parent="Theme.AppCompat.Light.NoActionBar"
  2. 在activity_main.xml中创建一个Toolbar作为自己创建的工具栏,搜索框是抠图作为一个imageButton(原手机qq这个搜索框个人认为就是一个button)
    Android ListView仿手机qq主页面
<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"/>
  1. 为ListView的每一个item创建一个布局
    这里仿照qq主页面的item创建一个布局(即一个个头像加一个昵称)
    其中的宽高可以根据图片的大小以及效果微调
    Android ListView仿手机qq主页面
<?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>
  1. 为ListView获取数据
    我这里是创建了一个javaBean名为FriendsBean,有name和icon属性,get和set方法没有贴出来
public class FriendsBean {
    private String name;
    private int icon;
    }

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

  1. 创建一个适配器类继承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;
    }
}

  1. 在MainActivity中调用
ListView listView = (ListView)findViewById(R.id.lv);
listView.setAdapter(new MyAdapter(friends,this));
上一篇:做题集——(高精度+找规律)Friends


下一篇:C#核心语法复习——封装