自定义ViewGroup实现多个控件的封装

导语

有时候，我们项目中的需求如下图

聊天选择面板_PxCook.png

整个界面我们可以就理解为两个部分，上面部分是一个ListView，下面是一个自定义VewGroup，这个ViewGroup包装了底部的所有控件。下面我们重点讲解如何包装底部

先上代码

（一）继承RelativeLayout的ChatInput类：

package com.weplaykit.sdk.module.person.view.widget;

import android.Manifest;
import android.app.Activity;
import android.content.Context;
import android.content.pm.PackageManager;
import android.os.Build;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.inputmethod.EditorInfo;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.weplaykit.sdk.common.WPKApplication;
import com.weplaykit.sdk.module.person.contract.PrivateMsgDetailContract;
import com.weplaykit.sdk.thirdparty.emojicon.EmojiconEditText;
import com.weplaykit.sdk.util.MR;
import com.weplaykit.sdk.util.SoftKeyboardUtil;
import com.weplaykit.sdk.widget.EmojiSelectView;

import static com.weplaykit.sdk.module.person.view.widget.ChatInput.PanelState.ISALLUNSEE;
import static com.weplaykit.sdk.module.person.view.widget.ChatInput.PanelState.ISEMOJIPANELSEE;
import static com.weplaykit.sdk.module.person.view.widget.ChatInput.PanelState.ISKEYBOARDSEE;
import static com.weplaykit.sdk.module.person.view.widget.ChatInput.PanelState.ISMEDIAPANELSEE;

/**
 * Created by daniel.xiao on 2017/3/7.
 * 聊天输入框
 */

public class ChatInput extends RelativeLayout {

    private static final String TAG = "ChatInput";
    private EmojiconEditText mEtEmoji;
    private ImageView mIvEmoji;
    private ImageView mIvChoose;
    private EmojiSelectView mSelectViewEmoji;
    private ViewGroup mRootView;
    private LinearLayout mLlMediaPanel;
    private ImageView mIvChoosePic;
    private ImageView mIvTakePic;
    private Context mContext;
    private PanelState mState;
    private TextView mBtnSend;

    private PrivateMsgDetailContract.IView mView;
    private final int REQUEST_CODE_ASK_PERMISSIONS = 100;


    public ChatInput(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mRootView = (ViewGroup) LayoutInflater.from(context)
                .inflate(MR.getIdByLayoutName(context, "wpk_common_chat_input"), this);
        mState = ISALLUNSEE;
        initView(context);
        initListener();
    }

    private void initView(Context context) {
        mEtEmoji = MR.getViewByIdName(context, mRootView, "emoj_et_content");
        mIvEmoji = MR.getViewByIdName(context, mRootView, "iv_emoji");
        mIvChoose = MR.getViewByIdName(context, mRootView, "iv_img");
        mSelectViewEmoji = MR.getViewByIdName(context, mRootView, "emoji_select_view");
        mLlMediaPanel = MR.getViewByIdName(context, mRootView, "ll_media_panel");
        mIvChoosePic = MR.getViewByIdName(context, mRootView, "iv_choose_picture");
        mIvTakePic = MR.getViewByIdName(context, mRootView, "iv_take_picture");
        mBtnSend = MR.getViewByIdName(context, mRootView, "btn_send");
        mSelectViewEmoji.setNeedShowEmojEdt(mEtEmoji);
    }

    private void initListener() {
        // 控制键盘、emoji、媒体入口显示
        clickPanel();

        //选择相册
        mIvChoosePic.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Activity activity = (Activity) getContext();
                if(activity!=null && requestStorage(activity)){
                    ChatInput.this.mView.sendImage();
                }
            }
        });

        //选择相机
        mIvTakePic.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Activity activity = (Activity) getContext();
                if(activity!=null && requestCamera(activity)){
                    ChatInput.this.mView.sendPhoto();
                }
            }
        });

        // 发送按钮监听
        mEtEmoji.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_SEND) {
                    String content = mEtEmoji.getText().toString();
                    if(!TextUtils.isEmpty(content)){
                        mEtEmoji.setText("");
                        ChatInput.this.mView.sendText(content);
                    }
                    return true;
                }
                return false;
            }
        });

        //发送消息按钮
        mBtnSend.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = mEtEmoji.getText().toString();
                if(!TextUtils.isEmpty(content)){
                    mEtEmoji.setText("");
                    ChatInput.this.mView.sendText(content);
                }
            }
        });
    }


    private void showOnBaseState(PanelState mState){

        switch (mState){
            case ISMEDIAPANELSEE:

                break;

            case ISEMOJIPANELSEE:
                break;

            case ISKEYBOARDSEE:
                break;

            case ISALLUNSEE:
                break;
        }
    }

    /**
     * 控制键盘、emoji、媒体入口显示
     */
    private void clickPanel(){
        //控制键盘、emoji、媒体入口显示
        mEtEmoji.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mState == ISEMOJIPANELSEE){
                    mSelectViewEmoji.setVisibility(View.GONE);
                    mLlMediaPanel.setVisibility(View.GONE);
                    SoftKeyboardUtil.showKeyBoard(mEtEmoji);
                    mState = ISKEYBOARDSEE;
                }else if(mState == ISMEDIAPANELSEE){
                    mLlMediaPanel.setVisibility(View.GONE);
                    mSelectViewEmoji.setVisibility(View.GONE);
                    SoftKeyboardUtil.showKeyBoard(mEtEmoji);
                    mState = ISKEYBOARDSEE;
                }

            }
        });

        mEtEmoji.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if(hasFocus){
                    //SoftKeyboardUtil.showKeyBoard(mEtEmoji);
                    mSelectViewEmoji.setVisibility(View.GONE);
                    mLlMediaPanel.setVisibility(View.GONE);
                    mState = ISKEYBOARDSEE;
                }
            }
        });

        //控制键盘、emoji、媒体入口显示
        mIvEmoji.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mState == ISEMOJIPANELSEE ){
                    // 隐藏emoji，显示键盘
                    mSelectViewEmoji.setVisibility(View.GONE);  //改用动画
                    SoftKeyboardUtil.showKeyBoard(mEtEmoji);
                    mState = ISKEYBOARDSEE;
                }else if(mState == ISKEYBOARDSEE || mState == ISALLUNSEE){
                    // 隐藏键盘，显示emoji

                    SoftKeyboardUtil.hideSoftKeyBoard(mEtEmoji);
                    WPKApplication.runOnUIThread(new Runnable() {
                        @Override
                        public void run() {
                            mSelectViewEmoji.setVisibility(View.VISIBLE);  //改用动画
                        }
                    }, 300);
                    mState = ISEMOJIPANELSEE;
                }else if(mState  == ISMEDIAPANELSEE){
                    mSelectViewEmoji.setVisibility(View.VISIBLE);
                    mLlMediaPanel.setVisibility(View.GONE);
                    SoftKeyboardUtil.hideSoftKeyBoard(mEtEmoji);
                    mState = ISEMOJIPANELSEE;
                }
            }
        });

        //控制键盘、emoji、媒体入口显示
        mIvChoose.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mState == ISALLUNSEE || mState == ISKEYBOARDSEE ){
                    SoftKeyboardUtil.hideSoftKeyBoard(mContext);
                    mState = ISMEDIAPANELSEE;
                    WPKApplication.runOnUIThread(new Runnable() {
                        @Override
                        public void run() {
                            mLlMediaPanel.setVisibility(View.VISIBLE); //改用动画
                        }
                    }, 300);
                }else if(mState == ISMEDIAPANELSEE){
                    mLlMediaPanel.setVisibility(View.GONE);
                    SoftKeyboardUtil.showKeyBoard(mEtEmoji);
                    mState = ISKEYBOARDSEE;
                }else if(mState == ISEMOJIPANELSEE){
                    mLlMediaPanel.setVisibility(View.VISIBLE);
                    SoftKeyboardUtil.hideSoftKeyBoard(mEtEmoji);
                    mSelectViewEmoji.setVisibility(View.GONE);
                    mState = ISMEDIAPANELSEE;
                }
            }
        });
    }

    enum PanelState{
        ISMEDIAPANELSEE,
        ISEMOJIPANELSEE,
        ISKEYBOARDSEE,
        ISALLUNSEE;
    }

    private boolean requestCamera(Activity activity){
        if (afterM()){
            int hasPermission = activity.checkSelfPermission(Manifest.permission.CAMERA);
            if (hasPermission != PackageManager.PERMISSION_GRANTED) {
                activity.requestPermissions(new String[]{Manifest.permission.CAMERA},
                        REQUEST_CODE_ASK_PERMISSIONS);
                return false;
            }
        }
        return true;
    }

    private boolean requestStorage(Activity activity){
        if (afterM()){
            int hasPermission = activity.checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE);
            if (hasPermission != PackageManager.PERMISSION_GRANTED) {
                activity.requestPermissions(new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},
                        REQUEST_CODE_ASK_PERMISSIONS);
                return false;
            }
        }
        return true;
    }

    private boolean afterM(){
        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.M;
    }

    public void setView(PrivateMsgDetailContract.IView view){
        this.mView = view;
    }

    public EmojiconEditText getmEtEmoji() {
        return mEtEmoji;
    }

    public ImageView getmIvEmoji() {
        return mIvEmoji;
    }

    public ImageView getmIvChoose() {
        return mIvChoose;
    }

    public EmojiSelectView getmSelectViewEmoji() {
        return mSelectViewEmoji;
    }

    public ViewGroup getmRootView() {
        return mRootView;
    }

    public LinearLayout getmLlMediaPanel() {
        return mLlMediaPanel;
    }

    public ImageView getmIvChoosePic() {
        return mIvChoosePic;
    }

    public ImageView getmIvTakePic() {
        return mIvTakePic;
    }
}

分析：
构造方法里有一行代码如下：

mRootView = (ViewGroup) LayoutInflater.from(context)
                .inflate(MR.getIdByLayoutName(context, "wpk_common_chat_input"), this);

看到this没有，这个this就意味着把wpk_common_chat_input的所有内容添加到根布局RelativeLayout中。这样我们就可以把ChatInput这个类当做一个ViewGroup使用了。
封装就是这么简单

好处

我们可以在这个封装类中处理各个按钮的点击事件，不在Activity或者Fragment处理，这样Activity和Fragment就没那么臃肿。

结论

有时候我们界面中的元素比较多，我们可以把一部分关联比较紧密的控件封装在一个java类中，从而实现封装给我们带来的好处。

最后编辑于：2017.12.10 03:09:05

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,242评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,769评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,484评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,133评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,007评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,080评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,496评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,190评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,464评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,549评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,330评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,205评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,567评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,889评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,160评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,475评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,650评论 2赞 335

自定义ViewGroup实现多个控件的封装

导语

（一）继承RelativeLayout的ChatInput类：

好处

结论

推荐阅读更多精彩内容