美文网首页
底部菜单栏demo实现

底部菜单栏demo实现

作者: hdychi | 来源:发表于2018-07-30 16:17 被阅读0次

    一、简介

    实现效果图如下:

    屏幕快照 2018-07-30 下午3.35.03.png

    类似美团主页的底部菜单栏,禁止横向滑动,可以点击tab切换fragment。

    采用的框架为Material Design中的tabLayout+ViewPager实现Fragment的切换

    二、布局/资源文件

    在xml中定义一个tab背景选中和没选中时采用不同的图片,以及不同的字体颜色

    2.1 tab的ImageButton背景选择器

    selector_home_tab.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_home_red" android:state_selected="true" />
        <item android:drawable="@drawable/ic_home_gray" android:state_selected="false" />
    </selector>
    

    selector_surround.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_surround_gray" android:state_selected="false" />
        <item android:drawable="@drawable/ic_surround_red" android:state_selected="true" />
    </selector>
    

    其余三个标签类似

    2.2 tab中文字颜色背景选择器

    selector_tab_text.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/colorRed" android:state_selected="true"/>
        <item android:color="@color/colorDefaultText" android:state_selected="false"/>
    </selector>
    

    2.3 tab item的布局文件

    tab_item.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="5dp">
        <LinearLayout
            android:layout_width="@dimen/tab_width"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/tab_btn"
                android:layout_width="match_parent"
                android:layout_height="@dimen/image_button_height"
                android:background="@drawable/ic_find_gray"
                android:clickable="false"/>
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/tab_text_height"
                android:text="发现"
                android:textColor="@drawable/selector_tab_text"
                android:textAlignment="center"
                android:id="@+id/tab_text"/>
        </LinearLayout>
    
    </LinearLayout>
    

    2.4 Fragment布局文件

    这次demo没有写好几种Fragment,而是用同一种Fragment。

    <?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="fragment"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/frag_text"/>
    </android.support.constraint.ConstraintLayout>
    

    2.5 MainActivity布局文件

    activity_main.xml

    <?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"
        tools:context=".MainActivity">
    
        <com.meituan.huangdanyang.practise.CustomViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="450dp"
            android:orientation="vertical" />
    
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorBoarder"
            app:layout_constraintBottom_toTopOf="@+id/menu" />
    
        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/tab_layout_height"
            android:id="@+id/menu"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tabIndicatorHeight="0dp"/>
    </android.support.constraint.ConstraintLayout>
    

    三、java文件

    3.1 HomeFragment.java

    package com.meituan.huangdanyang.practise;
    
    import android.content.Context;
    import android.net.Uri;
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    public class HomeFragment extends BaseFragment {
    
        private final static String ARG_PARAM1 = "text";
        private String text;
    
        public HomeFragment() {
            // Required empty public constructor
        }
    
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param text Parameter text.
         * @return A new instance of fragment HomeFragment.
         */
    
        public static HomeFragment newInstance(String text) {
            HomeFragment fragment = new HomeFragment();
            Bundle args = new Bundle();
            args.putString(ARG_PARAM1, text);
            fragment.setArguments(args);
    
            return fragment;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if (getArguments() != null) {
                text = getArguments().getString(ARG_PARAM1);
            }
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View view = inflater.inflate(R.layout.fragment_home, container, false);
            TextView textView = view.findViewById(R.id.frag_text);
            textView.setText(text);
            return view;
        }
    
    }
    
    

    使用newInstance方法创造对象,类似建造者模式,可以构造出不同的对象,给对象中塞入参数。

    3.2 ViewPager适配器

    HomeFragmentPagerAdapter.java:

    package com.meituan.huangdanyang.practise;
    
    import android.content.Context;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.ImageButton;
    import android.widget.TextView;
    
    public class HomeFragmentPagerAdapter extends FragmentPagerAdapter {
        private int[] tabViewId = {R.drawable.selector_home_tab, R.drawable.selector_surround_tab,
                R.drawable.selector_find_tab, R.drawable.selector_order_tab, R.drawable
                .selector_my_tab};
        private String[] tabName = {"首页", "附近", "发现", "订单", "我的"};
        private Context context;
    
        public HomeFragmentPagerAdapter(FragmentManager fm,Context context) {
            super(fm);
            this.context = context;
        }
    
        @Override
        public Fragment getItem(int position) {
            HomeFragment homeFragment = HomeFragment.newInstance(tabName[position]);
            homeFragment.TAG = tabName[position];
            return homeFragment;
        }
    
        @Override
        public int getCount() {
            return Math.min(tabViewId.length,tabName.length);
        }
    
        public View getTabView(int pos) {
            View view = LayoutInflater.from(context).inflate(R.layout.tab_item,null);
            TextView textView = view.findViewById(R.id.tab_text);
            textView.setText(tabName[pos]);
            ImageButton imageButton = view.findViewById(R.id.tab_btn);
            imageButton.setBackground(context.getDrawable(tabViewId[pos]));
            return view;
        }
    }
    
    

    3.3 MainActivity.java

    package com.meituan.huangdanyang.practise;
    
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.view.View;
    import android.widget.ImageButton;
    import android.widget.LinearLayout;
    
    import com.meituan.huangdanyang.practise.BaseActivity;
    
    import java.util.List;
    
    public class MainActivity extends BaseActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            CustomViewPager viewPager = findViewById(R.id.view_pager);
            TabLayout tabLayout = findViewById(R.id.menu);
            HomeFragmentPagerAdapter adapter = new HomeFragmentPagerAdapter(getSupportFragmentManager(),
                    this);
            viewPager.setAdapter(adapter);
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            for (int i = 0;i < tabLayout.getTabCount();i++){
                TabLayout.Tab tab = tabLayout.getTabAt(i);
                if (tab != null) {
                    //设置标签应当对应的view
                    tab.setCustomView(adapter.getTabView(i));
                }
            }
        }
    
        @Override
        protected String getName() {
            return "MainActivity";
        }
    
    }
    

    3.4 禁止横向滑动

    写一个CustomViewPager继承自ViewPager类,在布局中使用。

    package com.meituan.huangdanyang.practise;
    
    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;
    
    public class CustomViewPager extends ViewPager {
        private boolean canScroll = false;
    
        public CustomViewPager(@NonNull Context context) {
            super(context);
        }
    
        public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return canScroll && super.onInterceptTouchEvent(ev);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            return canScroll && super.onTouchEvent(ev);
        }
    }
    
    

    CustomViewPager中重写了ViewPager的的事件拦截和触摸事件的方法,不能scroll时,事件拦截器和触摸事件直接返回false,不会调用原本的事件拦截和触摸事件中的实现,返回false意味着这个事件没有分发完毕,还会继续向下分发。

    相关文章

      网友评论

          本文标题:底部菜单栏demo实现

          本文链接:https://www.haomeiwen.com/subject/uqvfvftx.html