Android中底部tab，中间凸起按钮的效果

经小伙伴建议，

先上效果图：

如上所示漂亮的主页面。那么这是如何实现的呢？其实主要就是在XML文件中进行的操作。然后就是在代码逻辑那边使用ViewPager + Fragment进行页面展示。

来看activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/index_rl_contain"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.xiangrong.yunyang.indexscanicon.customview.MyViewPager
            android:id="@+id/index_vp_fragment_list_top"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true">

        </com.xiangrong.yunyang.indexscanicon.customview.MyViewPager>

        <FrameLayout
            android:id="@+id/index_fl_bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/index_fl_bg_color">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@mipmap/bottom_bar_background"
                android:clickable="true"
                android:orientation="horizontal">

                <!-- 首页 -->

                <LinearLayout
                    android:id="@+id/index_bottom_bar_home"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="6dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/index_bottom_bar_home_image"
                        android:layout_width="20dp"
                        android:layout_height="27dp"
                        android:layout_gravity="top|center"
                        android:src="@drawable/index_bottom_bar_image_select_home" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginTop="2dp"
                        android:text="@string/index_bottom_bar_home"
                        android:textColor="@drawable/bottom_bar_text_color_select"
                        android:textSize="10sp" />

                </LinearLayout>

                <!-- 动态 -->

                <LinearLayout
                    android:id="@+id/index_bottom_bar_dynamic_state"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="6dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/index_bottom_bar_dynamic_state_image"
                        android:layout_width="25dp"
                        android:layout_height="25dp"
                        android:layout_gravity="top|center"
                        android:layout_marginTop="2dp"
                        android:src="@drawable/index_bottom_bar_image_select_dynamic_state" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginTop="2dp"
                        android:text="@string/index_bottom_bar_dynamic_state"
                        android:textColor="@drawable/bottom_bar_text_color_select"
                        android:textSize="10sp" />
                </LinearLayout>

                <!-- 留白 -->

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1">

                </FrameLayout>

                <!-- 积分 -->

                <LinearLayout
                    android:id="@+id/index_bottom_bar_integral"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="6dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/index_bottom_bar_integral_image"
                        android:layout_width="23dp"
                        android:layout_height="23dp"
                        android:layout_gravity="top|center"
                        android:src="@drawable/index_bottom_bar_image_select_integral" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginTop="2dp"
                        android:text="@string/index_bottom_bar_integral"
                        android:textColor="@drawable/bottom_bar_text_color_select"
                        android:textSize="10sp" />
                </LinearLayout>

                <!-- 我的 -->

                <LinearLayout
                    android:id="@+id/index_bottom_bar_me"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="6dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/index_bottom_bar_me_image"
                        android:layout_width="26dp"
                        android:layout_height="26dp"
                        android:layout_gravity="top|center"
                        android:src="@drawable/index_bottom_bar_image_select_me" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginTop="2dp"
                        android:text="@string/index_bottom_bar_me"
                        android:textColor="@drawable/bottom_bar_text_color_select"
                        android:textSize="10sp" />

                </LinearLayout>

            </LinearLayout>

        </FrameLayout>

        <ImageView
            android:id="@+id/index_bottom_bar_scan"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true"
            android:layout_marginBottom="0dp"
            android:src="@mipmap/index_bottom_bar_scan" />

    </RelativeLayout>

</LinearLayout>

注释写的很清楚，OK，下一个。

MainActivity.java文件

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.xiangrong.yunyang.indexscanicon.adapter.FragmentIndexAdapter;
import com.xiangrong.yunyang.indexscanicon.customview.MyViewPager;
import com.xiangrong.yunyang.indexscanicon.fragment.ExampleFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private MyViewPager index_vp_fragment_list_top;
    private ImageView index_bottom_bar_home_image;
    private LinearLayout index_bottom_bar_home;
    private ImageView index_bottom_bar_dynamic_state_image;
    private LinearLayout index_bottom_bar_dynamic_state;
    private ImageView index_bottom_bar_integral_image;
    private LinearLayout index_bottom_bar_integral;
    private ImageView index_bottom_bar_me_image;
    private LinearLayout index_bottom_bar_me;
    private FrameLayout index_fl_bottom_bar;
    private ImageView index_bottom_bar_scan;
    private RelativeLayout index_rl_contain;

    private List<Fragment> mFragments;

    private FragmentIndexAdapter mFragmentIndexAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initEvent();
    }

    private void initEvent() {
        index_bottom_bar_home.setOnClickListener(new TabOnClickListener(0));
        index_bottom_bar_dynamic_state.setOnClickListener(new TabOnClickListener(1));
        index_bottom_bar_integral.setOnClickListener(new TabOnClickListener(2));
        index_bottom_bar_me.setOnClickListener(new TabOnClickListener(3));
        index_bottom_bar_scan.setOnClickListener(new TabOnClickListener(4));
    }

    private void initIndexFragmentAdapter() {
        mFragmentIndexAdapter = new FragmentIndexAdapter(this.getSupportFragmentManager(), mFragments);
        index_vp_fragment_list_top.setAdapter(mFragmentIndexAdapter);
        index_bottom_bar_home.setSelected(true);
        index_vp_fragment_list_top.setCurrentItem(0);
        index_vp_fragment_list_top.setOffscreenPageLimit(3);
        index_vp_fragment_list_top.addOnPageChangeListener(new TabOnPageChangeListener());
    }

    private void initData() {
        mFragments = new ArrayList<Fragment>();
        mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_home)));
        mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_dynamic_state)));
        mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_integral)));
        mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_me)));
        initIndexFragmentAdapter();
    }

    private void initView() {
        index_vp_fragment_list_top = (MyViewPager) findViewById(R.id.index_vp_fragment_list_top);
        index_bottom_bar_home_image = (ImageView) findViewById(R.id.index_bottom_bar_home_image);
        index_bottom_bar_home = (LinearLayout) findViewById(R.id.index_bottom_bar_home);
        index_bottom_bar_dynamic_state_image = (ImageView) findViewById(R.id.index_bottom_bar_dynamic_state_image);
        index_bottom_bar_dynamic_state = (LinearLayout) findViewById(R.id.index_bottom_bar_dynamic_state);
        index_bottom_bar_integral_image = (ImageView) findViewById(R.id.index_bottom_bar_integral_image);
        index_bottom_bar_integral = (LinearLayout) findViewById(R.id.index_bottom_bar_integral);
        index_bottom_bar_me_image = (ImageView) findViewById(R.id.index_bottom_bar_me_image);
        index_bottom_bar_me = (LinearLayout) findViewById(R.id.index_bottom_bar_me);
        index_fl_bottom_bar = (FrameLayout) findViewById(R.id.index_fl_bottom_bar);
        index_bottom_bar_scan = (ImageView) findViewById(R.id.index_bottom_bar_scan);
        index_rl_contain = (RelativeLayout) findViewById(R.id.index_rl_contain);
    }

    /**
     * Bottom_Bar的点击事件
     */
    public class TabOnClickListener implements View.OnClickListener {

        private int index = 0;

        public TabOnClickListener(int i) {
            index = i;
        }

        public void onClick(View v) {
            if (index == 4) {
                // 跳转到Scan界面
                Toast.makeText(MainActivity.this, "点击了扫描按钮", Toast.LENGTH_SHORT).show();
            } else {
                //选择某一页
                index_vp_fragment_list_top.setCurrentItem(index, false);
            }
        }

    }

    public class TabOnPageChangeListener implements ViewPager.OnPageChangeListener {

        //当滑动状态改变时调用
        public void onPageScrollStateChanged(int state) {
        }

        //当前页面被滑动时调用
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        //当新的页面被选中时调用
        public void onPageSelected(int position) {
            resetTextView();
            switch (position) {
                case 0:
                    index_bottom_bar_home.setSelected(true);
                    break;
                case 1:
                    index_bottom_bar_dynamic_state.setSelected(true);
                    break;
                case 2:
                    index_bottom_bar_integral.setSelected(true);
                    break;
                case 3:
                    index_bottom_bar_me.setSelected(true);
                    break;
            }
        }
    }

    /**
     * 重置所有TextView的字体颜色
     */
    private void resetTextView() {
        index_bottom_bar_home.setSelected(false);
        index_bottom_bar_dynamic_state.setSelected(false);
        index_bottom_bar_integral.setSelected(false);
        index_bottom_bar_me.setSelected(false);
    }

}

一样，注释写的很清楚，来看一下上述代码用到的MyViewPager，以及MyViewPager的适配器FragmentIndexAdapter，和它联动的ExampleFragment和fragment_example.xml文件。

首先是MyViewPager.java

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 作者    yunyang
 * 时间    2019/3/13 10:20
 * 文件    YunyangBlogDemo
 * 描述   不滑动的ViewPager
 */
public class MyViewPager extends ViewPager {

    private boolean scrollble = false;

    public MyViewPager(@NonNull Context context) {
        this(context, null);
    }

    public MyViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (scrollble == false) {
            return false;
        } else {
            return super.onTouchEvent(ev);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (scrollble == false) {
            return false;
        } else {
            return super.onInterceptTouchEvent(ev);
        }
    }

}

然后是MyViewPager的适配器FragmentIndexAdapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * 作者    yunyang
 * 时间    2019/3/13 10:48
 * 文件    YunyangBlogDemo
 * 描述   主页面的Fragment适配器
 */
public class FragmentIndexAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public FragmentIndexAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    public Fragment getItem(int fragment) {
        return fragments.get(fragment);
    }

    public int getCount() {
        return fragments.size();
    }

}

随后是ExampleFragment.java

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.xiangrong.yunyang.indexscanicon.R;

/**
 * 作者    yunyang
 * 时间    2019/3/13 10:34
 * 文件    YunyangBlogDemo
 * 描述   示例Fragment
 */
public class ExampleFragment extends Fragment {

    private static final String SECTION_STRING = "fragment_string";

    public static ExampleFragment newInstance(String sectionNumber) {
        ExampleFragment fragment = new ExampleFragment();
        Bundle args = new Bundle();
        args.putString(SECTION_STRING, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_example, container, false);
        TextView textView = (TextView) view.findViewById(R.id.index_bottom_bar_fragment_example);
        textView.setText(getString(R.string.fragment_example_string, getArguments().getString(SECTION_STRING)));
        return view;
    }
}

最后是ExampleFragment的布局文件fragment_example.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/index_bottom_bar_fragment_example"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/colorAccent"
        android:textSize="24sp" />

</RelativeLayout>

随后运行程序展示主页面就OK了呢。

CSDN代码下载

GitHub代码下载