修改腾讯IM咨询详情页面底部功能按钮样式

编者：李国帅

时间：2019/8/9

说明:

有时需要修改更多按钮弹出的操作栏，首先从聊天界面到底部更多按钮的调用顺序开始跟踪。

流程

Activity---ChatPanel---ChatBottomInputGroup---ChatActionsFragment---BottomBoxWave--ActionsPagerAdapter--ActionsGridviewAdapter

1、在聊天页面开始初始化按钮：

public class XXXChatActivity extends BaseActivityEx<ChatPresenter>

         chatPanel.setChatType(type);


public class XXXChatPanel extends ChatPanel implements IChatPanel {

    public void setChatType(int type) {//设置聊天类型

        mInputGroup.initDefaultActions(type);//初始化按钮

    }

   

public class ChatBottomInputGroup extends LinearLayout implements View.OnClickListener, UIKitAudioArmMachine.AudioRecordCallback, TextWatcher {

  public void initDefaultActions(int type) {

  //...

   actions.add(action);

  //...

2、显示按钮：

public class ChatBottomInputGroup extends LinearLayout implements View.OnClickListener, UIKitAudioArmMachine.AudioRecordCallback, TextWatcher {

   private ChatActionsFragment actionsFragment;


     private void showActionsGroup() {

        if (fragmentManager == null)

            fragmentManager = activity.getFragmentManager();

        if (actionsFragment == null)

            actionsFragment = new ChatActionsFragment();


        actionsFragment.setActions(actions);

        hideSoftInput();

        moreGroup.setVisibility(View.VISIBLE);

        fragmentManager.beginTransaction().replace(R.id.more_groups, actionsFragment).commitAllowingStateLoss();

        if (inputHandler != null)

            postDelayed(new Runnable() {

                @Override

                public void run() {

                    inputHandler.popupAreaShow();

                }

            }, 100);

    }



public class ChatActionsFragment extends BaseFragment {

   private BottomBoxWave panelWave = new BottomBoxWave();

   private List<MessageOperaUnit> actions;

   public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        baseView = inflater.inflate(R.layout.chat_bottom_actions_layout, container, false);

        panelWave.init(baseView, actions);

        return baseView;

    }


public class BottomBoxWave {

    public void init(View view, List<MessageOperaUnit> actions) {

        final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewPager);

        final ViewGroup indicator = (ViewGroup) view.findViewById(R.id.actions_page_indicator);


        ActionsPagerAdapter adapter = new ActionsPagerAdapter(viewPager, actions);

        viewPager.setAdapter(adapter);

        initPageListener(indicator, adapter.getCount(), viewPager);

    }


public class ActionsPagerAdapter extends PagerAdapter {

   @Override

    public Object instantiateItem(ViewGroup container, int position) {

        int end = (position + 1) * ITEM_COUNT_PER_GRID_VIEW > actions.size() ? actions

                .size() : (position + 1) * ITEM_COUNT_PER_GRID_VIEW;

        List<MessageOperaUnit> subBaseActions = actions.subList(position

                * ITEM_COUNT_PER_GRID_VIEW, end);


        GridView gridView = new GridView(context);

        gridView.setAdapter(new ActionsGridviewAdapter(context, subBaseActions));

        ...

               container.addView(gridView);

        return gridView;

    }


//在网格中显示按钮

public class ActionsGridviewAdapter extends BaseAdapter {

   public View getView(int position, View convertView, ViewGroup parent) {

            itemlayout = LayoutInflater.from(context).inflate(R.layout.chat_bottom_actoin, parent, false);

3、修改具体每个按钮的布局 chat_bottom_actoin.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="@dimen/130dp">



    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:gravity="center_horizontal"

        android:orientation="vertical">


        <ImageView

            android:id="@+id/imageView"

            android:layout_width="60dp"

            android:layout_height="60dp"

            android:layout_marginTop="@dimen/dp_5"

            android:background="@drawable/bottom_action_border"

            android:scaleType="centerInside" />


        <TextView

            android:id="@+id/textView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="5dp"

            android:textColor="@color/text_color_gray"

            android:textSize="@dimen/sp_13" />


    </LinearLayout>



</RelativeLayout>

底部图标布局 chat_bottom_actions_layout.xml

chat_bottom_actoin的高度不能大于chat_bottom_actions_layout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/actionsLayout"

    android:layout_width="match_parent"

    android:layout_height="130dp"

    android:orientation="vertical">


    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1" />


    <LinearLayout

        android:id="@+id/actions_page_indicator"

        android:layout_width="fill_parent"

        android:layout_height="8.0dip"

        android:layout_marginBottom="4dip"

        android:gravity="center"

        android:orientation="horizontal"

        android:visibility="gone" />


</LinearLayout>