android 仿微信demo————微信发现界面实现

Posted 你要永远相信光z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android 仿微信demo————微信发现界面实现相关的知识,希望对你有一定的参考价值。

android 仿微信demo————微信启动界面实现

android 仿微信demo————注册功能实现(移动端)

android 仿微信demo————注册功能实现(服务端)

android 仿微信demo————登录功能实现(移动端)

android 仿微信demo————登录功能实现(服务端)

android 仿微信demo————微信主界面实现

android 仿微信demo————微信消息界面实现(移动端)

android 仿微信demo————微信消息界面实现(服务端)

android 仿微信demo————微信通讯录界面功能实现(移动端,服务端)

android 仿微信demo————微信发现界面实现

android 仿微信demo————微信顶部操作栏界面实现

android 仿微信demo————微信顶部操作栏搜索按钮实现(查询通讯录好友功能)

android 仿微信demo————微信顶部操作栏加号按钮实现(弹出子菜单)

在前面的文章里实现了微信消息,通讯录界面,它们的都需要在服务器中动态获取,而这一篇主要实现发现界面的实现,由于数据不需要从服务器中获取(静态的),所有实现相对比较简单

微信发现界面实现

微信发现界面跟之前的两个界面是一样的都是listview(微信消息,通讯录界面),那么既然是listview,无非就是给listview一个布局,然后再fragmeng中初始化数据,并设置一个适配器,但是我们观察微信,会发现微信发现界面有不同的分割线,如下
在这里插入图片描述

那么要怎么实现呢?很简单,细的分割线我们可以再ListView组件上添加分割线的属性来指定自定义的分割线,粗的分割条只需再ListView对应的布局上添加一个View组件来填充即可,那么问题来了,我们怎么知道要用细的,还是粗的分割线呢?可以在适配器上进行判断

在find_fragment布局文件添加如下代码
find_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E0E0E0">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:divider="@drawable/find_list_divider_line"
        android:dividerHeight="1.5px" />
</LinearLayout>

上面代码在fragment布局中添加一个listview,并给listview设置自定义的分割线,下面给出

创建自定义分割线find_list_divider_line.xml
find_list_divider_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="55dp"
        android:right="0dp">
        <shape android:shape="rectangle" >
            <solid android:color="#33000000" />
        </shape>
    </item>
</layer-list>

layer-list文件创建在之前的文章已经演示过,就不再演示了

创建listview对应的item布局
find_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/pic"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:padding="10dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:padding="10dp"
            android:textColor="#336598"
            android:textSize="16sp" />

        <View
            android:id="@+id/fill"
            android:layout_width="180dp"
            android:layout_height="match_parent" />

        <ImageView
            android:id="@+id/pic1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/tab_settings_pressed" />
    </LinearLayout>

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="#E0E0E0" />

    <View
        android:id="@+id/divider1"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:background="#E0E0E0" />

</LinearLayout>

上面布局除了包括每一个列表需要的图片,文字组件外,还包括了View组件实现不同的分割线(在适配器进行判断该不该显示)

修改fragment.java代码
FindFragment.xml

package com.example.wxchatdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

import com.example.wxchatdemo.adapter.findSortAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class FindFragment extends Fragment {
    /* 声明组件*/
    private ListView listView;
    //定义一个map集合存放数据
    private List<Map<String,String>> list = new ArrayList<>();
    //准备图片
    private int[] pic = new int[]{
            R.drawable.friend_img,R.drawable.video_img,
            R.drawable.scan_img,R.drawable.shark_img,
            R.drawable.look_img,R.drawable.search_img,
            R.drawable.direct_seeding_img,R.drawable.shopping_img,
            R.drawable.game_img,R.drawable.small_routine_img,
    };
    //准备文字
    private String data[] =new String[]
            {"朋友圈        ","视频号        " ,"扫一扫        ",
                    "摇一摇        ","看一看        " ,"搜一搜        ",
                    "直播和附近","购物            ","游戏            ","小程序        "};
    //准备图片
    private int[] pic1 = new int[]{
            R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,
            R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,
            R.drawable.tab_img,R.drawable.tab_img
    };
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.find_fragment, container, false);
        /*初始化组件*/
        listView = (ListView) view.findViewById(R.id.listView);
        //初始化数据
        initData();
        /*创建自定义适配器,并设置给listview*/
        findSortAdapter adapter = new findSortAdapter(getActivity().getApplicationContext(), list);
        listView.setAdapter(adapter);
        return view;
    }
    private void initData() {
        for(int i=0;i<data.length;i++){
            Map<String,String> map = new HashMap<>();
            map.put("pic",String.valueOf(pic[i]));
            map.put("title",data[i]);
            map.put("pic1",String.valueOf(pic1[i]));
            list.add(map);//将map放到list集合中
        }
    }
}

上面代码主要就是准备图片和文字,并进行初始化组件,然后把图片和文字封装在集合里传给适配器再设置给listview

在上面说过,显示不同分割线是在适配器上进行判断的,所有我们要自定义一个适配器并继承BaseAdapter
创建自定义适配器findSortAdapter.java
findSortAdapter.java

package com.example.wxchatdemo.adapter;

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 com.example.wxchatdemo.R;

import java.util.List;
import java.util.Map;

public class findSortAdapter extends BaseAdapter{

    private ViewHolder viewHolder;
    private List<Map<String, String>> data = null;
    private Context mContext;

    public findSortAdapter(Context mContext, List<Map<String, String>> data) {
        this.mContext = mContext;
        this.data = data;
    }

    public int getCount() {
        return this.data.size();
    }

    public Object getItem(int position) {
        return data.get(position);
    }

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

    public View getView(final int position, View view, ViewGroup arg2) {

        if (view == null) {
            viewHolder = new ViewHolder();
            //获取listview对应的item布局
            view = LayoutInflater.from(mContext).inflate(R.layout.find_item, null);
            //初始化组件
            viewHolder.pic = (ImageView) view.findViewById(R.id.pic);
            viewHolder.title = (TextView) view.findViewById(R.id.title);
            viewHolder.pic1 = (ImageView) view.findViewById(R.id.pic1);
            viewHolder.divider = (View) view.findViewById(R.id.divider);
            viewHolder.divider1 = (View) view.findViewById(R.id.divider1);
            view.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) view.getTag();
        }
        if (position == 0 || position == 1 || position == 3 || position == 5 ||
        position == 6 || position == 8) {
            Map<String, String> map = data.get(position);
            viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
            viewHolder.title.setText(map.get("title"));
            viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
            viewHolder.divider.setVisibility(View.VISIBLE);
            viewHolder.divider1.setVisibility(View.GONE);
        }else {
            if (position == 9) {
                Map<String, String> map = data.get(position);
                viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
                viewHolder.title.setText(map.get("title"));
                viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
                viewHolder.divider.setVisibility(View.GONE);
                viewHolder.divider1.setVisibility(View.VISIBLE);
            }else {
                Map<String, String> map = data.get(position);
                viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
                viewHolder.title.setText(map.get("title"));
                viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
                viewHolder.divider.setVisibility(View.GONE);
                viewHolder.divider1.setVisibility(View.GONE);
            }
        }
        return view;
    }

    final static class ViewHolder {
        ImageView pic;
        TextView title;
        ImageView pic1;
        View divider;
        View divider1;
    }
}

测试

在这里插入图片描述

以上是关于android 仿微信demo————微信发现界面实现的主要内容,如果未能解决你的问题,请参考以下文章

android 仿微信demo——持续更新(实现移动端,服务端)

android 仿微信demo————微信启动界面实现

android 仿微信demo————微信主界面实现

android 仿微信demo————微信主界面实现

android 仿微信demo————微信顶部操作栏界面实现

android 仿微信demo————微信消息界面实现(服务端)