Android 养成记-1--1.2 导航栏实现

最新推荐文章于 2023-03-16 22:45:16 发布

原创最新推荐文章于 2023-03-16 22:45:16 发布 · 229 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #fragment #底部导航栏 #侧滑菜单 #仿微信QQ

android 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用Android自定义布局实现侧边栏和底部导航栏功能，包括创建自定义NoSlideDrawerLayout类、在activity_main.xml中应用自定义布局、在MainActivity中创建多个Fragment对象以响应不同导航按钮，以及实现触摸事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来几张效果图，看图说话：

侧边栏

底部导航栏：

1 侧边导航栏实现

侧边导航栏主要是采用android 的布局layout 来实现：

1) 在项目目录下新建 wiget 目录，添加NoSlideDrawerLayout.java

/**
 * Created by yangzi on 2018/10/12 0012.
 */
public class NoSlideDrawerLayout extends DrawerLayout {

    private View vMenu;
    private boolean mCanMove;

    public NoSlideDrawerLayout(Context context) {
        super(context);
    }

    public NoSlideDrawerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoSlideDrawerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        vMenu = findViewWithTag("menu");
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            int width = vMenu.getWidth();
            mCanMove = ev.getX() >= width || ev.getX() < 15;
        }
        try {
            return mCanMove && super.onInterceptTouchEvent(ev);
        } catch (Exception e) {
            return false;
        }
    }

}

2),在activity_main.xml 的布局文件里用自定义的layout:

<?xml version="1.0" encoding="utf-8"?>
<com.example.yangzi.yangzi_bottombar.widget.NoSlideDrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dlMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/main_container"/>

    <include layout="@layout/main_menu"/>

</com.example.yangzi.yangzi_bottombar.widget.NoSlideDrawerLayout>

2, 底部导航栏的实现：

1）在activity中需要创建几个不同fragment 对象，这样在底部按不同按钮时才会跳转到不同的fragment：

public class MainActivity extends AppCompatActivity   implements View.OnClickListener,View.OnTouchListener{


    private DrawerLayout dlMain;
    private LinearLayout llTitleDate;

    private long[] mNotes = new long[2];
    private TextView tvTitleMonth, tvTitleDay, tvTitle;

    //for nav  bottom menu
    private Button tabCheck;
    private Button tabEdit;
    private Button tabMore;
    private Button tabUser;
    private Button tabAdd;


    private CheckFragment checkFragment;
    private EditFragment editFragment;
    private AddFragment addFragment;
    private UserFragment userFragment;
    private MoreFragment moreFragment;

    private Fragment[] fragments;
    private int index;
    private int currentTabIndex;

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

        dlMain = (DrawerLayout) findViewById(R.id.dlMain);
        llTitleDate = (LinearLayout) findViewById(R.id.llTitleDate);
        tvTitle = (TextView) findViewById(R.id.tvTitle);

        //for nav bottom menu

        tabCheck = (Button)this.findViewById(R.id.txt_check);
        tabEdit = (Button)this.findViewById(R.id.txt_edit);
        tabAdd =  (Button)this.findViewById(R.id.txt_add);
        tabUser = (Button)this.findViewById(R.id.txt_user);
        tabMore = (Button)this.findViewById(R.id.txt_more);
        tabCheck.setOnClickListener(this);
        tabEdit.setOnClickListener(this);
        tabAdd.setOnClickListener(this);
        tabUser.setOnClickListener(this);
        tabMore.setOnClickListener(this);

        checkFragment = new CheckFragment();
        editFragment = new EditFragment();
        addFragment = new AddFragment();
        userFragment = new UserFragment();
        moreFragment = new MoreFragment();
        fragments = new Fragment[] {checkFragment, editFragment,addFragment, userFragment, moreFragment};

        getFragmentManager().beginTransaction().replace(R.id.flMainContainer, checkFragment).commit();
        tabCheck.setSelected(true);
    }

    @Override
    public void onBackPressed() {
        if (dlMain.isDrawerOpen(Gravity.START)) {
            dlMain.closeDrawer(Gravity.START);
        } else {
            System.arraycopy(mNotes, 1, mNotes, 0, mNotes.length - 1);
            mNotes[mNotes.length - 1] = SystemClock.uptimeMillis();
            if (SystemClock.uptimeMillis() - mNotes[0] < 1000) {
                finish();
            } else {
                Toast.makeText(this, getString(R.string.exit_app_hint), Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }




    //重置所有文本的选中状态
    public void selected(){
        tabCheck.setSelected(false);
        tabEdit.setSelected(false);
        tabAdd.setSelected(false);
        tabUser.setSelected(false);
        tabMore.setSelected(false);
    }

    //隐藏所有Fragment
    public void hideAllFragment(FragmentTransaction transaction){
        for (int i=0;i<=4;i++)
        {
            if (fragments[i]!=null) {
                transaction.hide(fragments[i]);
            }
        }
    }

    @Override
    public void onClick(View v) {
        FragmentTransaction transaction1 = getFragmentManager().beginTransaction();
        hideAllFragment(transaction1);
        //index = 0;
        switch(v.getId()){
            case R.id.llMenuAllPlayer:
            case R.id.txt_check:
                dlMain.closeDrawer(Gravity.START);
                selected();
                tabCheck.setSelected(true);
                index = 0;
                break;
            case R.id.llMenuNoCategory:
            case R.id.txt_edit:
                selected();
                tabEdit.setSelected(true);
                index = 1;
                break;
            case R.id.llMenuSchedule:
            case R.id.txt_add:
                selected();
                tabAdd.setSelected(true);
                index = 2;
                break;
            case R.id.txt_user:
                selected();
                tabUser.setSelected(true);
                index = 3;
                break;

            case R.id.txt_more:
                selected();
                tabMore.setSelected(true);
                index = 4;
                break;

            case R.id.ivMainMenu:
                dlMain.openDrawer(Gravity.START);
               // mEventSetAdapter.changeAllData(mEventSets);
                break;

            case R.id.tvMenuAddEventSet:

                break;
        }

        if (currentTabIndex != index && index<5) {
            FragmentTransaction trx = getFragmentManager().beginTransaction();
            trx.replace(R.id.flMainContainer, fragments[index]).commit();
        }
        currentTabIndex = index;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        return true;
        }
    /*
    下面几项用于checkFragment监听触摸侧滑删除item的监听事件
     */
    public interface MyTouchListener {
        /**
         * onTOuchEvent的实现
         */
        public void onTouchEvent(MotionEvent event);
    }

    /**
     * 保存MyTouchListener接口的列表
     */
    private ArrayList<MyTouchListener> myTouchListeners = new ArrayList<MyTouchListener>(10);
    /**
     * 提供给Fragment通过getActivity()方法来注册自己的触摸事件的方法
     */
    public void registerMyTouchListener(MyTouchListener listener) {
        myTouchListeners.add(listener);
    }

    /**
     * 提供给Fragment通过getActivity()方法来取消注册自己的触摸事件的方法
     */
    public void unRegisterMyTouchListener(MyTouchListener listener) {
        myTouchListeners.remove(listener);
    }

}

2） fragment 的个数可以自己定义，看你想实现的底部导航栏是多少个按钮了，例如上面的checkFragment：

public class CheckFragment  extends Fragment {


    public static CheckFragment getInstance() {
        return new CheckFragment();
    }
    private EditText fragmentName;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_fragment, container, false);
        fragmentName = view.findViewById(R.id.txt_edit);

        fragmentName.setText("这是球员界面");
        ((MainActivity) getActivity()).registerMyTouchListener(mTouchListener);

        return view;
    }

    /**
     * 接收Activity的Touch回调的对象
     * 重写其中的onTouchEvent函数，并进行该Fragment的逻辑处理
     */
    private MainActivity.MyTouchListener mTouchListener = new MainActivity.MyTouchListener() {
        @Override
        public void onTouchEvent(MotionEvent event) {

            Log.v("CheckFragment", "onTouch");
            MainActivity activity = (MainActivity) getActivity();
            activity.onTouch(null, event);

        }

    };


    @Override
    public void onDestroyView() {
        super.onDestroyView();

        /** 触摸事件的注销 */
        ((MainActivity) this.getActivity()).unRegisterMyTouchListener(mTouchListener);
    }

3）这个底部导航栏对应的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/content"
    android:layout_above="@+id/tab_menu"
    >


    <FrameLayout
        android:id="@+id/flMainContainer"

        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />



</LinearLayout>
    <LinearLayout
        android:id="@+id/tab_menu"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:background="@drawable/bg"
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/tab_menu_button"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:layout_gravity="bottom">

            <Button
                android:id="@+id/txt_check"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_user"
                android:gravity="center"
                android:textColor="@drawable/tab_menu_msg_text"
                android:text="球员"
                android:textSize = "12dp"/>

            <Button
                android:id="@+id/txt_edit"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_msg"
                android:gravity="center"
                android:textColor="@drawable/tab_menu_edit_text"
                android:text="赛程"
                android:textSize = "12dp"/>
            <Button
                android:id="@+id/txt_add"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_add"
                android:gravity="center"
                android:textColor="@drawable/tab_menu_add_text"
                android:text="添加"
                android:textSize = "12dp"/>
            <Button
                android:id="@+id/txt_user"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_basketball"
                android:gravity="center"
                android:textColor="@drawable/tab_menu_user_text"
                android:text="约球"
                android:textSize = "12dp"/>

            <Button
                android:id="@+id/txt_more"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_more"
                android:gravity="center"
                android:textColor="@drawable/tab_menu_more_text"
                android:text="更多"
                android:textSize = "12dp"/>

        </LinearLayout>

        <View
            android:id="@+id/div_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="4px"
            android:background="@color/grey"
            android:layout_above="@id/tab_menu_button"/>
    </LinearLayout>
    </RelativeLayout>

这样这个功能就算实现了，上gif图：