高仿微信发起群聊添加联系人界面

最新推荐文章于 2024-05-10 10:59:47 发布

三少爷的鞋

最新推荐文章于 2024-05-10 10:59:47 发布

阅读量1.2k

点赞数

分类专栏： Android 自定义View

本文链接：https://blog.csdn.net/dhl_1986/article/details/70258005

版权

Android 自定义View 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信中发起群聊页面，每点击一个item(联系人)，左上角就会添加上相应的联系人，再次点击就会取消选中，点击上面已选中的联系人也会取消选中，而且上面的联系人展示中会慢慢挤压右边的搜索框，直到右边有一定的距离，如下图所示：

这里，我用TextView展示，和ImageView本质上是一样的，首先我们要自定义一个水平滑动的ScrollView，并且设置最大宽度，给右边的搜索框留一定的空间，自定义水平滚动控件如下：

package com.dhl.mycontactui.view;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;

/**
 * Created by Administrator on 2017/4/18.
 * 宽度可变的水平滚动HorizontalScrollView，这里最大宽度设置为屏幕的4/5
 */

public class WidthVariableScrollView extends HorizontalScrollView{

    private Context context ;
    private int maxWidth ;
    public WidthVariableScrollView(Context context) {
        super(context);
        this.context = context ;
    }

    public WidthVariableScrollView(Context context, AttributeSet attributeSet)
    {
        super(context,attributeSet);
        this.context = context ;
    }

    public WidthVariableScrollView(Context context, AttributeSet attributeSet,int defStyleAttr)
    {
        super(context,attributeSet, defStyleAttr);
        this.context = context ;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        //获取屏幕的最大宽度
        DisplayMetrics metric = new DisplayMetrics();
        ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(metric);
        int width = metric.widthPixels;
        maxWidth = 4*width/5;
        if(widthMode == MeasureSpec.AT_MOST && widthSize > maxWidth){
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(maxWidth, widthMode);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

}

这个控件默认最大宽度是屏幕的4/5。下面贴出这个界面的布局文件：

activity_select_contact.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_select_contact"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >


    <com.dhl.mycontactui.view.WidthVariableScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginRight="2dp"
        android:minWidth="0dp"
        android:fillViewport="true"
        android:maxWidth="270dp"
        android:measureAllChildren="true"
        android:adjustViewBounds="true"
        android:scrollbarAlwaysDrawHorizontalTrack="false"
        android:scrollbars="none"
        >

        <LinearLayout
            android:id="@+id/contact_lay"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingRight="5dp" >
            </LinearLayout>
    </com.dhl.mycontactui.view.WidthVariableScrollView>

    <EditText
        android:id="@+id/search_input"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_alignBottom="@+id/horizontalScrollView"
        android:layout_gravity="center|left"
        android:layout_marginLeft="2dip"
        android:layout_marginRight="3dp"
        android:layout_toRightOf="@+id/horizontalScrollView"
        android:background="@null"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:inputType="textNoSuggestions"
        android:imeOptions="actionSearch"
        android:minWidth="300dp"

        android:maxLines="1"
        android:textSize="15sp" />
    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp"
        android:background="@color/colorAccent"
        android:layout_below="@+id/horizontalScrollView"
        android:layout_height="0.2dp"/>
    <ListView
        android:id="@+id/contact_list"
        android:layout_below="@id/line"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</RelativeLayout>

ListView的Item布局文件：

select_contact_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_select_contact"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <include
        layout="@layout/select_contact_textview">
    </include>

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:focusable="false"
        android:clickable="false"
        android:layout_height="wrap_content" />

</RelativeLayout>

这里引用个TextView布局文件：

select_contact_textview.xml

<?xml version="1.0" encoding="utf-8"?>
    <TextView  xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/contact_name"
        android:layout_width="50dp"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:textColor="#ffffff"
        android:padding="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:background="@color/colorAccent"
        android:text="AB"
        android:layout_height="50dp">
    </TextView>

下面是主要的代码：

1， Contact类：

package com.dhl.mycontactui.model;

/**
 * Created by dhl on 2017/4/15.
 */

public class Contact {

    private String header ;
    private String name ;

    public String getHeader() {
        return header;
    }

    public void setHeader(String header) {
        this.header = header;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

2，联系人Adapter：

package com.dhl.mycontactui.adapter;

import android.content.Context;
import android.util.SparseArray;

import com.dhl.mycontactui.R;
import com.dhl.mycontactui.model.Contact;
import com.zhy.adapter.abslistview.CommonAdapter;
import com.zhy.adapter.abslistview.ViewHolder;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by dhl on 2017/4/20.
 * 选人Adapter
 */

public class SelectContactAdapter extends CommonAdapter<Contact>{
    /**
       选中记录
     */
    private List<String> isSelectContact = new ArrayList<>();
    public SelectContactAdapter(Context context, int layoutId, List<Contact> datas) {
        super(context, layoutId, datas);
    }

    @Override
    protected void convert(ViewHolder viewHolder, Contact item, int position) {
        viewHolder.setText(R.id.contact_name,item.getName());
        if(isSelectContact.contains(item.getName()))//选中
        {
            viewHolder.setChecked(R.id.checkbox,true);
        }else
        {
            viewHolder.setChecked(R.id.checkbox,false);
        }

    }

    /**
     * 传入选中的列表
     * @param isSelectContact
     */
    public void setIsSelectContact(List<String> isSelectContact )
    {
        this.isSelectContact = isSelectContact ;
    }
}

最后是选人界面的核心代码：

SelectContactActivity

package com.dhl.mycontactui.Activity;

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import com.dhl.mycontactui.R;
import com.dhl.mycontactui.adapter.SelectContactAdapter;
import com.dhl.mycontactui.model.Contact;
import com.dhl.mycontactui.view.WidthVariableScrollView;
import com.zhy.adapter.abslistview.CommonAdapter;
import com.zhy.adapter.abslistview.ViewHolder;

import java.util.ArrayList;
import java.util.List;

/**
 * 选人UI
 * @author  dhl
 */
public class SelectContactActivity extends AppCompatActivity {

    private WidthVariableScrollView widthVariableScrollView ;
    private ListView listView ;
    private LinearLayout contact_lay ;
    private List<Contact> contactList = new ArrayList<>();
    private  LayoutInflater layoutInflater;
    private final int SELETE_CONTACT = 1024 ;
    private List<String> isSelectContact = new ArrayList<>();
    private SelectContactAdapter selectContactAdapter ;
    private Handler handler = new Handler()
    {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case SELETE_CONTACT :
                    setContact(msg);
                    break;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_select_contact);
        widthVariableScrollView = (WidthVariableScrollView) findViewById(R.id.horizontalScrollView) ;
        contact_lay = (LinearLayout) findViewById(R.id.contact_lay);
        layoutInflater = LayoutInflater.from(this);
        listView = (ListView)findViewById(R.id.contact_list);
        initData();
        selectContactAdapter =new SelectContactAdapter(this,R.layout.select_contact_item,contactList);
        selectContactAdapter.setIsSelectContact(isSelectContact);
        listView.setAdapter(selectContactAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Contact contact = contactList.get(position);
                String tag = contact.getName();
                if(!isSelectContact.contains(tag)) {
                    Message msg = Message.obtain();
                    msg.obj = contactList.get(position);
                    msg.what = SELETE_CONTACT;
                    handler.sendMessage(msg);
                    isSelectContact.add(tag);
                    selectContactAdapter.setIsSelectContact(isSelectContact);
                    selectContactAdapter.notifyDataSetChanged();
                }else
                {
                     TextView textView =  (TextView) contact_lay.findViewWithTag(contactList.get(position));
                    contact_lay.removeView(textView);
                    isSelectContact.remove(tag);
                    selectContactAdapter.setIsSelectContact(isSelectContact);
                    selectContactAdapter.notifyDataSetChanged();
                }
            }
        });

    }

    /**
     * 初始化联系人
     */
    private  void initData()
    {
        for(int i = 0;i<15;i++)
        {
            Contact contact = new Contact();
            contact.setName("张飞"+i);
            contactList.add(contact);
        }

    }

    /**
     * 选人逻辑控制
     * @param msg 接收Message
     */
    private void setContact(Message msg)
    {
        final  Contact contact = (Contact) msg.obj ;
        //动态加载一个TextView
        View view = layoutInflater.inflate(R.layout.select_contact_textview, contact_lay, false);
        final TextView textView = (TextView) view.findViewById(R.id.contact_name);
        textView.setText(contact.getName());
        textView.setTag(contact);
        contact_lay.addView(textView);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                contact_lay.removeView(textView);
                isSelectContact.remove(contact.getName());
                selectContactAdapter.setIsSelectContact(isSelectContact);
                selectContactAdapter.notifyDataSetChanged();

            }
        });
        //滑动
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                widthVariableScrollView.arrowScroll(HorizontalScrollView.FOCUS_RIGHT);
            }
        },50);
    }
}

OK，已完成选人的基本功能。最后附上这里引用鸿阳大神的通用Adapter：

Android 快速开发系列打造万能的ListView GridView 适配器

依赖：

  compile 'com.zhy:base-adapter:3.0.3'

源码地址：

高仿微信发起群聊联系人选人UI

三少爷的鞋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
高仿微信发起群聊添加联系人界面

微信中发起群聊页面，每点击一个item(联系人)，左上角就会添加上相应的联系人，再次点击就会取消选中，点击上面已选中的联系人也会取消选中，而且上面的联系人展示中会慢慢挤压右边的搜索框，直到右边有一定的距离，如下图所示：这里，我用TextView展示，和ImageView本质上是一样的，首先我们要自定义一个水平滑动的ScrollView，并且设置最大宽度，给右边的搜索框留
复制链接

扫一扫

专栏目录