【发布时间】：2018-03-14 13:51:38
【问题描述】：
目前我的 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"/>
我想实现如下风格：
如何可能实现这一目标？ 中心按钮的作用是调用一个activity，然后将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，所以我通过使用自定义类禁用了滑动并触发ImageButton 的页面onClick。感谢您的回答和建议。稍后我会放上我的代码。
更新：这是我的代码
首先我为Custom ViewPager创建了一个类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布局。记住！这是 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
public class MainActivity extends AppCompatActivity {
private NonSwipeableViewPager viewPager; //Declare Custom ViewPager Class
ImageButton btn_one, btn_two, btn_three, btn_four; //Declare ImageButton
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**SOME CODE HERE**/
//Initialize ImageButton
btn_messages = (ImageButton) findViewById(R.id.btn_one);
btn_people = (ImageButton) findViewById(R.id.btn_two);
btn_video_call = (ImageButton) findViewById(R.id.btn_three);
btn_voice_call = (ImageButton) findViewById(R.id.btn_four);
//Initialize FloatingActionButton which in the Center at the Bottom of the Parent
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Handle some functions here...
}
});
//Initialize ViewPager
viewPager = (NonSwipeableViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager); //Call setupViewPager to setup the ViewPager
//Initialize OnClickListener in every ImageButton
btn_one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem(0); //Trigger Page 1 of ViewPager
}
});
btn_two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem(1); //Trigger Page 2 of ViewPager
}
});
btn_three.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem(2); //Trigger Page 3 of ViewPager
}
});
btn_four.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem(3); //Trigger Page 4 of ViewPager
}
});
}
//This function setup the ViewPager
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new Fragment_Zero(), "ZERO");
adapter.addFragment(new Fragment_One(), "ONE");
adapter.addFragment(new Fragment_Two(), "TWO");
adapter.addFragment(new Fragment_Three(), "THREE");
viewPager.setAdapter(adapter);
}
//Inner Class for ViewPagerAdapter
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return null;
// return mFragmentTitleList.get(position);
}
}
//END
}
输出：
【问题讨论】：
-
使用底部导航视图来实现这个视图
标签： android android-layout android-tablayout