微信中发起群聊页面,每点击一个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'
源码地址: