自定义TabLayout按钮

Question

目前我有以下TabLayout外观：

它的代码是普通的TabLayout：

<android.support.design.widget.TabLayout
   android:id="@+id/tabs"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:tabMode="fixed"
   app:tabGravity="fill"/>

我希望达到以下风格：

如何实现这一目标？ 中心按钮的功能是调用一个活动，TabLayout将放在屏幕的底部。

注意： 我实际上有4个标签而不仅仅是2个

这是我之前的代码

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.sampleproject.MainActivity"
        tools:showIn="@layout/activity_main">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:orientation="vertical">

               <!--SOME CODE HERE-->

            <android.support.v7.widget.CardView
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/top"
                android:orientation="horizontal"
                app:cardBackgroundColor="@color/colorWhite"
                app:cardCornerRadius="0dp"
                app:cardElevation="20dp"
                app:cardUseCompatPadding="false"
                tools:layout_editor_absoluteY="0dp"
                tools:layout_editor_absoluteX="8dp">

                <LinearLayout
                    android:id="@+id/bottom_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorWhite"
                    android:gravity="center_horizontal"
                    android:minHeight="48dp"
                    android:orientation="horizontal">

                    <ImageButton
                        style="@style/Base.Widget.AppCompat.ActionButton"
                        android:layout_width="0dp"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/ic_toolbar_messages" />

                    <!--START OF FAKE BUTTON, this button is here to create space between the two ImageButton -->
                    <ImageButton
                        style="@style/Base.Widget.AppCompat.ActionButton"
                        android:layout_width="0dp"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@null" />
                    <!--END OF FAKE BUTTON-->

                    <ImageButton
                        style="@style/Base.Widget.AppCompat.ActionButton"
                        android:layout_width="0dp"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/ic_drawer_contact" />   


                </LinearLayout>
            </android.support.v7.widget.CardView>

        </LinearLayout>
    </android.support.constraint.ConstraintLayout>

我正在使用FloatingActionButton并将其放在底部中心

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fabNewConversation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@drawable/ic_add" />

我刚决定使用TabLayout，但我不知道如何应用我的风格。

谢谢！

更新

似乎BottomNavigationView是我想要发生的事情，但它未能满足我的要求。我也不想为此使用外部库。所以我所做的只是remove the TabLayout和put the ViewPager at the top of the parent以及my custom TabLayout style in the bottom。我的要求之一是disable the swipe ViewPager，因此我使用自定义类禁用了对其的滑动，并触发了onClick的{​​{1}}页面。感谢您的答案和建议。我稍后会把我的代码放进去。

更新：这是我的代码

首先我为Custom ViewPager创建了一个类ImageButton，这将禁用它的滑动功能。（我搜索了这个，我实际上并不是这个NonSwipeableViewPager类的作者）

NonSwipeableViewPager

第二，初始化public class NonSwipeableViewPager extends ViewPager { public NonSwipeableViewPager(Context context) { super(context); setMyScroller(); } public NonSwipeableViewPager(Context context, AttributeSet attrs) { super(context, attrs); setMyScroller(); } @Override public boolean onInterceptTouchEvent(MotionEvent event) { // Never allow swiping to switch between pages return false; } @Override public boolean onTouchEvent(MotionEvent event) { // Never allow swiping to switch between pages return false; } //down one is added for smooth scrolling private void setMyScroller() { try { Class<?> viewpager = ViewPager.class; Field scroller = viewpager.getDeclaredField("mScroller"); scroller.setAccessible(true); scroller.set(this, new MyScroller(getContext())); } catch (Exception e) { e.printStackTrace(); } } public class MyScroller extends Scroller { public MyScroller(Context context) { super(context, new DecelerateInterpolator()); } @Override public void startScroll(int startX, int startY, int dx, int dy, int duration) { super.startScroll(startX, startY, dx, dy, 350 /*1 secs*/); } } //Disable Left and Right arrow swipe for keyboard in some devices @Override public boolean executeKeyEvent(KeyEvent event) { return false; } } 布局。记得！这是来自content_main.xml的{​​{1}}，content_main.xml @include，activity_main.xml和ToolBar视图初始化。

FloatingActionButton

第三，<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.sample.MainActivity" tools:showIn="@layout/activity_main"> <!--I use LinearLayout to be the container_parent--> <LinearLayout android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" android:orientation="vertical"> <!--TOP VIEW--> <RelativeLayout android:id="@+id/top" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <!--Initialize the Custom ViewPager here, Make sure you created the class for this--> <com.sample.NonSwipeableViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> <!--END OF CUSTOM VIEWPAGER --> </RelativeLayout> <!--END OF TOP VIEW--> <!--BOTTOM VIEW--> <android.support.v7.widget.CardView android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/top" android:orientation="horizontal" app:cardBackgroundColor="@color/colorWhite" app:cardCornerRadius="0dp" app:cardElevation="20dp" app:cardUseCompatPadding="false" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="8dp"> <LinearLayout android:id="@+id/bottom_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorWhite" android:gravity="center_horizontal" android:minHeight="48dp" android:orientation="horizontal"> <ImageButton android:id="@+id/btn_one" style="@style/Base.Widget.AppCompat.ActionButton" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/ic_one" /> <ImageButton android:id="@+id/btn_two" style="@style/Base.Widget.AppCompat.ActionButton" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/ic_two" /> <!--START OF FAKE BUTTON FOR SPACER--> <ImageButton android:id="@+id/fake_btn_spacer" style="@style/Base.Widget.AppCompat.ActionButton" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:adjustViewBounds="true" android:src="@null" android:clickable="false" /> <!--END OF START OF FAKE BUTTON FOR SPACER--> <ImageButton android:id="@+id/btn_three" style="@style/Base.Widget.AppCompat.ActionButton" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/ic_three" /> <ImageButton android:id="@+id/btn_four" style="@style/Base.Widget.AppCompat.ActionButton" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:adjustViewBounds="true" android:src="@drawable/ic_four" /> </LinearLayout> </android.support.v7.widget.CardView> <!--END OF BOTTOM VIEW--> </LinearLayout> </android.support.constraint.ConstraintLayout> 布局

activity_main.xml

最后，<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.sample.MainActivity"> <!--SOME CODE FOR MY AppBarLayout--> <!--SOME CODE FOR MY ToolBar--> <!--INCLUDE content_main.xml here--> <include layout="@layout/content_main" /> <!--START OF FloatingActionButton and set it to bottom|center--> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:layout_margin="@dimen/fab_margin" app:srcCompat="@drawable/ic_add" /> </android.support.design.widget.CoordinatorLayout>

MainActivity.class

输出：

Answer 1

此布局可以通过底部导航视图实现。

在导航中心视图中使用浮动按钮。

https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0

https://segunfamisa.com/posts/bottom-navigation-view-android

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

Answer 2

我建议您使用底部导航视图来实现这一目标。您可以找到文档here

但原生的BottomNavigationView在设计上有很多限制。所以你可以使用一些自定义库，如：

https://github.com/peng8350/JPTabBar

或

https://github.com/aurelhubert/ahbottomnavigation

或

您可以使用this one.

等自定义方式

Answer 3

使用Dialog并向其添加 Dialog<Pair<String, String>> dialog = new Dialog<>(); .... Optional<Pair<String, String>> result = dialog.showAndWait(); result.ifPresent(usernamePassword -> { System.out.println("Username=" + usernamePassword.getKey() + ", Password=" + usernamePassword.getValue()); }); ，ConstraintLayout和Left约束。

Right

将其他观点放在其中。

• Gradle Dependency：

  编译  ＆＃39; com.android.support.constraint：约束的布局：1.0.2＆＃39;

了解更多about ConstraintLayout