:heavy_check_mark: A framework that helps the keyboard smoothly transition to the function panel 一个帮助键盘平稳过渡到功能面板的框架,支持动画无缝衔接,支持 activity/fragment/dialog/dialogFragment/popupWindow 容器,支持IM/直播/视频播放/信息流评论等场景,支持全屏模式。
README: 中文文档
When developing a chat/video/live/information interface, users are expected to maintain a smooth transition between the input method and the function panel (such as the expression panel/more options panel, etc.). Investigate the mainstream app effects and implementation in the market, and realize a set of input panel switching framework compatible with multiple scenes. Currently the framework has been tested and used.
Weight+LinearLayoutto dynamically change the layout height to suit the panel, and support multiple native ViewGroup containers
For more details, please refer to
Demo content is as follows
Download from QR code
The Androidx version runs by default. If you need to open non-Androidx, open the app in
Settings.gradleand close the Androidx configuration in
gradle.properties.
build.gradle
implementation'com.effective.android:panelSwitchHelper:1.3.13'//or for androidx implementation 'com.effective.android:panelSwitchHelper-androidx:1.3.13'
<linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- Layout that does not need to be processed by the frame, can be arranged freely --> <relativelayout android:id="@+id/cus_title_bar" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/colorPrimary" android:visibility="gone"> <textview android:id="@+id/title" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="left|center_vertical" android:paddingleft="20dp" android:text="自定义标题栏" android:textcolor="@android:color/white" android:textsize="20sp" android:textstyle="bold"></textview> </relativelayout> <com.effective.android.panel.view.panelswitchlayout android:id="@+id/panel_switch_layout" android:layout_width="match_parent" app:animationspeed="standard" android:layout_height="match_parent" android:orientation="vertical"> <!-- ContentContainer --> <!-- linear_edit_view, Specify an EditText for input, required--> <!-- linear_auto_reset_enable,Specifies whether the LinearContentContainer can accept Touch events and automatically hide the panel--> <!-- linear_auto_reset_area, Specifies whether the LinearContentContainer only accepts Touch events in a View area to customize the hidden panel--> <com.effective.android.panel.view.content.linearcontentcontainer android:id="@+id/content_view" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:edit_view="@id/edit_text"> <com.example.demo.scene.chat.view.hookactionuprecyclerview android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></com.example.demo.scene.chat.view.hookactionuprecyclerview> <linearlayout android:id="@+id/bottom_action" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/shape_input_layout" android:gravity="bottom" android:minheight="@dimen/dp_50" android:orientation="horizontal" android:paddingleft="@dimen/dp_10" android:paddingright="@dimen/dp_10" android:paddingbottom="@dimen/dp_7.5"> <!--More entrances --> <imageview android:id="@+id/add_btn" android:layout_width="@dimen/dp_35" android:layout_height="@dimen/dp_35" android:layout_marginright="@dimen/dp_10" android:src="@drawable/icon_add"></imageview> <!-- Input entrances --> <edittext android:id="@+id/edit_text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginend="@dimen/dp_10" android:layout_marginright="@dimen/dp_10" android:layout_weight="1" android:background="@drawable/selector_edit_focus" android:imeoptions="actionSearch" android:maxlines="5" android:minheight="@dimen/dp_35" android:paddingleft="@dimen/dp_3" android:paddingtop="@dimen/dp_7.5" android:paddingright="@dimen/dp_3" android:paddingbottom="@dimen/dp_3" android:textcursordrawable="@drawable/shape_edit_cursor" android:textsize="@dimen/sp_16"></edittext> <linearlayout android:layout_width="wrap_content" android:layout_height="@dimen/dp_35" android:orientation="horizontal"> <!-- Emotion entrances --> <imageview android:id="@+id/emotion_btn" android:layout_width="@dimen/dp_35" android:layout_height="@dimen/dp_35" android:layout_marginend="@dimen/dp_10" android:layout_marginright="@dimen/dp_10" android:src="@drawable/selector_emotion_btn"></imageview> <textview android:id="@+id/send" android:layout_width="@dimen/dp_50" android:layout_height="@dimen/dp_35" android:background="@drawable/selector_send_btn" android:gravity="center" android:text="@string/send" android:textcolor="@color/color_send_btn" android:textsize="@dimen/sp_15"></textview> </linearlayout> </linearlayout> </com.effective.android.panel.view.content.linearcontentcontainer> <!--Panel Container, can only contain PanelView--> <com.effective.android.panel.view.panel.panelcontainer android:id="@+id/panel_container" android:layout_width="match_parent" android:background="@color/common_page_bg_color" android:layout_height="wrap_content"> <!-- Each panel --> <!-- panel_layout,Used to specify the layout corresponding to the ID of the panel, required--> <!-- panel_trigger, Used to switch to this panel when the user clicks the View corresponding to this ID --> <!-- panel_toggle ,When the panel is displayed, if the user clicks the View corresponding to panel_trigger again, whether to switch back to the input method--> <com.effective.android.panel.view.panel.panelview android:id="@+id/panel_emotion" android:layout_width="match_parent" android:layout_height="match_parent" app:panel_layout="@layout/panel_emotion_layout" app:panel_trigger="@id/emotion_btn"></com.effective.android.panel.view.panel.panelview> <!-- In addition to using the PanelView provided by the framework, you can also use a custom Panel --> <com.example.demo.scene.api.cuspanelview android:id="@+id/panel_addition" android:layout_width="match_parent" android:layout_height="match_parent" app:cus_panel_trigger="@id/add_btn" app:cus_panel_toggle="true"></com.example.demo.scene.api.cuspanelview> </com.effective.android.panel.view.panel.panelcontainer> </com.effective.android.panel.view.panelswitchlayout> </linearlayout>
//Activity scene, initialized in onStart method, others such as Fragment/Dialog/PopupWindow refer to Demo private PanelSwitchHelper mHelper;@Override protected void onStart() { super.onStart(); if (mHelper == null) { mHelper = new PanelSwitchHelper.Builder(this) .addKeyboardStateListener { onKeyboardChange { //Optional implementation, monitor input method changes } } .addEditTextFocusChangeListener { onFocusChange { _, hasFocus -> //Optional implementation, monitor input box focus changes } } .addViewClickListener { onClickBefore { //Optional implementation, listen for trigger clicks } } .addPanelChangeListener { onKeyboard { //Optional implementation, input method display callback } onNone { //Optional implementation, default state callback } onPanel { //Optional implementation, panel display callback } onPanelSizeChange { panelView, _, _, _, width, height -> //Optional implementation, dynamic callback of panel height change caused by input method dynamic adjustment } } .addContentScrollMeasurer { //Optional, in sliding mode, the sliding distance can be customized for the view in the content panel, the default sliding distance is defaultDistance getScrollDistance { defaultDistance -> defaultDistance - 200 } getScrollViewId { R.id.recycler_view } } .addPanelHeightMeasurer { //Optional It is used to set the height of the front panel without obtaining the height of the input method. If it is not set, the height within the frame is the default getTargetPanelDefaultHeight { DisplayUtils.dip2px([email protected],400f)} getPanelTriggerId { R.id.add_btn } }
.logTrack(true) //Optional, default false, whether to enable log information output .build(true) //Optional, default false, whether to open the input method by default } }@Override public void onBackPressed() { //When the user presses the return key, if the panel is displayed, it needs to be hidden if (mHelper != null && mHelper.hookSystemBackForHindPanel()) { return; } super.onBackPressed(); }
The project was written only to improve the efficiency of daily development and focus on processing business. If you have better practices or suggestions, please write to [email protected]
You can also add WeChat and enter the feedback group to discuss feedback.
If the framework is helpful to you, Amway can give the partners around you, and every star is an affirmation of the framework.