Android 底部导航栏-极致简单版

最新推荐文章于 2024-05-13 17:40:54 发布

Big Joker

最新推荐文章于 2024-05-13 17:40:54 发布

阅读量8.9k

点赞数 16

本文链接：https://blog.csdn.net/nonecode/article/details/82025447

版权

底部导航栏是常用的一个工具，大多数的APP都带有底部导航栏，底部导航栏可以方便用户一只手操作，切占用内存比常规的Activity少，底部导航栏使用Fragment+RadioGroup方法来实现，示意图如下：

1.准备8张导航栏的切换图（4张未选中状态，4张选中状态）

ID：radio_msg_0，radio_friend_0，radio_look_0，radio_my_0

radio_msg_1，radio_friend_1，radio_look_1，radio_my_1

2.设置ActivityLayout.xml

（1）放置1个RadioGroup

ID：radiogroup

（2）放置4个RadioButton（根据自己的需要放置RadioButton，一般不超过5个）

ID：btn_0,btn_1,btn_2,btn_3

（3）放置4个Fragment（RadioButton对应的数量）

ID：fragment_msg，fragment_friend，fragment_look，fragment_my

<RelativeLayout     
    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"	
    tools:context="com.example.mytest.MainActivity"> 
    
       <fragment
           android:id="@+id/fragment_msg"
           android:name="com.example.MyFragment.MsgFragment"
           android:layout_width="match_parent"
           android:layout_height="80dp"
           android:layout_above="@+id/radiogroup"
           android:layout_alignParentTop="true" />
       <fragment
           android:id="@+id/fragment_friend"
           android:name="com.example.MyFragment.FriendFragment"
           android:layout_width="match_parent"
           android:layout_height="80dp"
           android:layout_above="@+id/radiogroup"
           android:layout_alignParentTop="true" />
       <fragment
           android:id="@+id/fragment_look"
           android:name="com.example.MyFragment.LookFragment"
           android:layout_width="match_parent"
           android:layout_height="80dp"
           android:layout_above="@+id/radiogroup"
           android:layout_alignParentTop="true" />
        <fragment
           android:id="@+id/fragment_my"
           android:name="com.example.MyFragment.MyFragment"
           android:layout_width="match_parent"
           android:layout_height="80dp"
           android:layout_above="@+id/radiogroup"
           android:layout_alignParentTop="true" />

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:text="female" >

        <RadioButton
            android:id="@+id/btn_0"
            android:layout_width="fill_parent"
            android:layout_height="54dp"
            android:layout_alignParentLeft="true"
            android:layout_weight="1"
            android:background="@drawable/radio_msg"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="17.0sp" />
        <RadioButton
            android:id="@+id/btn_1"
            android:layout_width="fill_parent"
            android:layout_height="54dp"
            android:layout_weight="1"
            android:background="@drawable/radio_friend"
            android:button="@null"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="17.0sp" />
        <RadioButton
            android:id="@+id/btn_2"
            android:layout_width="fill_parent"
            android:layout_height="54dp"
            android:layout_weight="1"
            android:background="@drawable/radio_look"
            android:button="@null"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="17.0sp" />
        <RadioButton
            android:id="@+id/btn_3"
            android:layout_width="fill_parent"
            android:layout_height="54dp"
            android:layout_weight="1"
            android:background="@drawable/radio_my"
            android:button="@null"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="17.0sp" />
    </RadioGroup>

</RelativeLayout>

3.设置每个Radio的xml布局

XML ID:radio_msg，radio_friend，radio_look，radio_my

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

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

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

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

4.设置每个Fragment的xml布局

XML ID:fragment_msg，fragment_friend，fragment_friend，fragment_friend

<?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/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="这是聊天" />
</RelativeLayout>

<?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/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="这是好友" />
    
</RelativeLayout>

<?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/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="这是看点" />
    
</RelativeLayout>

<?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/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="这是我的" />
    
</RelativeLayout>

5.建立继承Fragment类新建一个package用来存放4个Fragment类

ID：MsgFragment，FriendFragment，LookFragment，MyFragment

package com.example.MyFragment;

import com.example.mytest.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MsgFragment extends Fragment
{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
	{
		//mxl文件
		return inflater.inflate(R.drawable.fragment_msg, container, false);
	}

}

package com.example.MyFragment;

import com.example.mytest.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FriendFragment extends Fragment
{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
	{
		//mxl文件
		return inflater.inflate(R.drawable.fragment_friend, container, false);
	}

}

package com.example.MyFragment;

import com.example.mytest.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LookFragment extends Fragment
{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
	{
		//mxl文件
		return inflater.inflate(R.drawable.fragment_look, container, false);
	}

}

package com.example.MyFragment;

import com.example.mytest.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment extends Fragment
{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
	{
		//mxl文件
		return inflater.inflate(R.drawable.fragment_my, container, false);
	}

}

6.在Activity里设置Activity

package com.example.mytest;

import com.example.MyFragment.FriendFragment;
import com.example.MyFragment.MsgFragment;
import com.example.MyFragment.MyFragment;
import com.example.mytest.R;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends Activity 
{
	private MsgFragment    fragment1;
	private FriendFragment fragment2;
	private MyFragment     fragment3;
	private RadioGroup  radioGroup;
	private RadioButton radioButton;
	//private FragmentManager manager;
	//private FragmentTransaction transaction;
    
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		//全屏显示，显示时间和电量
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

	
		//开启事务管理，主要处理Fragment
		 //manager = getFragmentManager();
		// transaction = manager.beginTransaction();

		//设置切换Fragment
		radioGroup = (RadioGroup)findViewById(R.id.radiogroup);
		RadioGroupList radigGroupList = new RadioGroupList();
		radioGroup.setOnCheckedChangeListener(radigGroupList);

		//设置默认按钮为选中状态
		radioButton =(RadioButton) findViewById(R.id.btn_0);
		radioButton.setChecked(true);

		
		//开始处理Fragment
		fragment1 = new MsgFragment();
		fragment2 = new FriendFragment();
		fragment3 = new MyFragment();
		
		findViewById(R.id.fragment_msg).setVisibility(View.INVISIBLE);
		findViewById(R.id.fragment_friend).setVisibility(View.INVISIBLE);
		findViewById(R.id.fragment_look).setVisibility(View.INVISIBLE);
		findViewById(R.id.fragment_my).setVisibility(View.INVISIBLE);

	}
		@Override
	public boolean onCreateOptionsMenu(Menu menu) 
	{
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) 
	{
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) 
		{
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
	public class RadioGroupList implements RadioGroup.OnCheckedChangeListener
	{

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) 
		{
			if(group.getId() == R.id.radiogroup)
			{
			switch (checkedId)
			{
			case R.id.btn_0:
				findViewById(R.id.fragment_msg).setVisibility(View.VISIBLE);
				findViewById(R.id.fragment_friend).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_look).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_my).setVisibility(View.INVISIBLE);
				Log.d("消息", "提示");
				break;
			case R.id.btn_1:
				findViewById(R.id.fragment_msg).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_friend).setVisibility(View.VISIBLE );
				findViewById(R.id.fragment_look).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_my).setVisibility(View.INVISIBLE);
				Log.d("好友", "提示");
				break;
			case R.id.btn_2:
				findViewById(R.id.fragment_msg).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_friend).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_look).setVisibility(View.VISIBLE);
				findViewById(R.id.fragment_my).setVisibility(View.INVISIBLE );
				Log.d("看点", "提示");
				break;
			case R.id.btn_3:
				findViewById(R.id.fragment_msg).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_friend).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_look).setVisibility(View.INVISIBLE);
				findViewById(R.id.fragment_my).setVisibility(View.VISIBLE );
				
				Log.d("我的", "提示");
				break;
			default :
				break;
			}
			}
		}	
	}
}

这就是最简单的底部导航栏实现方法，原理非常简单，只要学过一周Android开发的朋友都可以使用，但是这个程序有一个特点是不能实现滑动，ViewPage的实现方法，可以到我的博客看下。

Demo下载地址：https://download.csdn.net/download/nonecode/10625735

Big Joker

关注

16
点赞
踩
58

收藏

觉得还不错? 一键收藏
1
评论
Android 底部导航栏-极致简单版

底部导航栏是常用的一个工具，大多数的APP都带有底部导航栏，底部导航栏可以方便用户一只手操作，切占用内存比常规的Activity少，底部导航栏使用Fragment+RadioGroup方法来实现，示意图如下：1.准备8张导航栏的切换图（4张未选中状态，4张选中状态） ID：radio_msg_0，radio_friend_0，radio_look_0，ra...
复制链接

扫一扫