仿微信 发起群聊 类似样式

原创 2015年11月18日 15:53:46

前段时间项目中有用到类似像微信发起群聊的功能,现在整理了出来 分享给大家

效果图如下:



选中后 添加到下面的选择栏中 ,点击选择栏中已选择的 就取消选择


简单说下思路:

自定义HorizontalScrollView 

每次在ListView中选中一个item   就加入到咱们的horizontalScrollView中去

已经选中的 再次中就移除

不多说,直接贴代码:


public class MyHorizontalScroll extends HorizontalScrollView {


    private LinearLayout mLinearLayout;

    private Map<String,UserBean> map;   
    private List<UserBean> list;      //用来顺序存储加入的信息

    /**
     * 默认文字
     */
    private TextView defaultTv;

    private boolean isFirst;

    /**
     * 内容控件的宽高
     */
    private int contentWidthPx;
    private int contentHeightPx;
    public MyHorizontalScroll(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    public MyHorizontalScroll(Context context) {
        super(context);
        init();
    }

    public MyHorizontalScroll(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        if(map == null){
            map = new HashMap<String,UserBean>();
        }

        contentWidthPx = DensityUtil.dip2px(getContext(), 60);
        contentHeightPx = DensityUtil.dip2px(getContext(), 80);
        //设置默认提示文字样式
        defaultTv = new TextView(getContext());
        defaultTv.setText("请添加群聊成员");
        defaultTv.setPadding(DensityUtil.dip2px(getContext(), 3), 0, 0, 0);
        android.view.ViewGroup.LayoutParams vl = new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
        defaultTv.setLayoutParams(vl);
        defaultTv.setGravity(Gravity.CENTER_VERTICAL);
        defaultTv.setTextColor(Color.parseColor("#ffffff"));

        defaultTv.setTextSize(15);

        list = new ArrayList<UserBean>();
        mLinearLayout = new LinearLayout(getContext());
        mLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
        mLinearLayout.setGravity(Gravity.CENTER_VERTICAL);
        android.widget.LinearLayout.LayoutParams lp = new android.widget.LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
        mLinearLayout.setLayoutParams(lp);
        mLinearLayout.setPadding(DensityUtil.dip2px(getContext(), 11), 0, DensityUtil.dip2px(getContext(), 35), 0);

        //将容器添加到Scroll中
        addView(mLinearLayout);

        mLinearLayout.addView(defaultTv);
        isFirst = true;
    }

    /**
     * 加入一个用户
     * @param uid	id
     * @param headpath	头像地址
     */
    public void add(String uid,String headpath,String nick){
        UserBean ub = new UserBean();
        ub.uid = uid;
        ub.headpath = headpath;
        ub.nick = nick;
        add(ub);
    }

    /**
     * 加入一个用户头像
     * @param ub
     */
    public void add(final UserBean ub){
        if(isFirst){
            //第一次添加的时候讲提示文字取出
            mLinearLayout.removeView(defaultTv);
            isFirst = false;
        }

        list.add(ub);
        map.put(ub.uid, ub);
        if(changeListener!=null){
            changeListener.changeAction(list.size(),ChangeListener.PUSH,ub.uid);
        }
        View v = View.inflate(getContext(), R.layout.scrol_item_layout,null);

        final ImageView rv = (ImageView) v.findViewById(R.id.scrol_item_iv);
        TextView tv = (TextView) v.findViewById(R.id.scrol_item_tv);
        tv.setText(ub.nick);

        //
        LinearLayout.LayoutParams vl = new LinearLayout.LayoutParams(contentWidthPx, contentHeightPx);
        vl.setMargins(DensityUtil.dip2px(getContext(), 5),0,0,0);
        v.setLayoutParams(vl);


        addClickListener(v, ub.uid);

        mLinearLayout.addView(v);

        scrollTo(mLinearLayout.getWidth(), 0);
        //将该控件设置上图片
        setUserAvatar(ub.headpath, rv);
    }

    /**
     * 设置头像
     * @param headpath
     * @param rv
     */
    private void setUserAvatar(String headpath, ImageView rv) {
        Picasso.with(getContext()).load(headpath).into(rv);
    }

    /**
     * 每添加一个头像进去  就给该头像添加一个点击事件
     * 用户点击头像 取消动作
     * @param rv
     * @param id
     */
    private void addClickListener(final View rv,final String id){
        OnClickListener click = new OnClickListener() {

            @Override
            public void onClick(View v) {
                remove(id);
            }
        };
        rv.setOnClickListener(click);
    }

    /**
     * 移除一个用户头像
     * @param uid	用户的uid
     */
    public void remove(String uid){
        UserBean ub = map.remove(uid);
        int in = list.indexOf(ub); <span style="white-space:pre">	</span>//得到该头像在控件中的位置
        mLinearLayout.removeViewAt(in);
        list.remove(in);


        if(changeListener!=null){
            changeListener.changeAction(list.size(),ChangeListener.POP,uid);
        }
        if(list.size()==0){
            //当控件中没有内容时  将提示文字加上
            mLinearLayout.addView(defaultTv);
            isFirst = true;
        }
    }

    /**
     * 移除一个用户头像
     * @param ub
     */
    public void remove(UserBean ub){
        remove(ub.uid);
    }

    /**
     * 得到选择的id
     * @return
     */
    public String[] getUsers(){
        Set<String> set = map.keySet();
        if(set==null){
            return null;
        }
        String[] str = new String[set.size()];
        set.toArray(str);
        return str;
    }

    /**
     * 得到选择好友的nick
     * @return
     */
    public String[] getUsersNick(){
        int size = list.size();
        String[] str = new String[size];
        for(int i=0; i<size; i++){
            String nick = list.get(i).nick;
            if(nick !=null){
                str[i] = nick;
            }else{
                str[i] = list.get(i).uid;
            }
        }
        return str;
    }



    /**
     * 添加监听  当往该控件中添加头像时 会调用该监听 并把当前的总个数传出去
     * @author Administrator
     *
     */
    public interface ChangeListener{
        /**
         * 添加一个
         */
        public static final int PUSH = 1;
        /**
         * 减少一个
         */
        public static final int POP = 2;
        /**
         * 传出当前控件中的总个数
         * @param count
<span style="white-space:pre">	</span> * @param action 当前的操作  PUSH或者POP
         * @param uid    当前被操作的对象id
         */
        public void changeAction(int count,int action,String uid);
    }

    public void setChangeListener(ChangeListener changeListener){
        this.changeListener = changeListener;
    }
    private ChangeListener changeListener;
}
UserBean类:


public class UserBean {

  public  String uid;		//用户id
  public  String headpath;	//用户的头像路径
  public  String nick;		//用户昵称

}

XML  布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="80dp" android:layout_height="80dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/scrol_item_iv"
        android:layout_width="60dp"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center_horizontal"
        android:scaleType="centerCrop"
        android:layout_height="60dp" />
    <TextView
        android:id="@+id/scrol_item_tv"
        android:layout_width="match_parent"
        android:text="12321312"
        android:gravity="center_horizontal"
        android:textColor="#fff"
        android:ellipsize="end"
        android:maxWidth="60dp"
        android:singleLine="true"
        android:layout_height="wrap_content" />
</LinearLayout>

恩,大致就这么多


源码下载:

https://github.com/yingshirun/HorizontalScroll


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

仿微信添加群聊界面——addView

发现一个listview和checkbox混乱的bug,现已解决,见博客ListView和CheckBox的混乱问题当然这一篇主要是在说addview,也是可以看看。微信大家都用过,微信里添加群聊时点...

Android学习之仿QQ讨论组和微信群聊头像

GroupView一、前言最近做东西的时候要用到qq讨论组群头像的功能,网上找了下,发现别人的并不是特别的好用,效果并不是和qq这个很像,或者是使用gridView,(NineGridImageVie...

Android 仿微信群聊头像

在网上找了些仿微信群聊头像的开源库后,发现没特别好用的,或者说满足我需求的,就只好在别人的基础上改了下,也就有了这样的自定义控件了,以此来实现微信群聊头像的效果,效果图如下所示: 主要实现:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)