Android底部导航栏的四种实现
2024-05-07 15:43:39
现在大多数App都会用到底部导航栏，比如常见的聊天工具QQ、微信，购物App等等，有了底部导航栏，用户可以随时切换界面，查看不同的内容。它的实现方式也很多，以前大多使用TabHost来实现，但是现在我们有很多更好的选择。
使用LinearLayout + TextView实现了底部导航栏的效果
首先看看工程目录：
Step 1：实现底部选项的一些资源文件
图片Drawable资源：tab_menu_deal.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/ic_menu_deal_on" android:state_selected="true"/><item android:drawable="@mipmap/ic_menu_deal_off"/>
</selector>不用做过多解释了吧，点击图片，变换图片。
其他三个依葫芦画瓢。
文字资源：tab_menu_deal_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/text_blue" android:state_selected="true"/><item android:color="@color/text_gray" /></selector>背景资源 tab_menu_bg.xml：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true"><shape><solid android:color="#FFC4C4C4"/></shape></item><item><shape><solid android:color="@color/transparent" /></shape></item></selector>Step 2：编写我们的Activity布局
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<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"><RelativeLayout
android:id="@+id/tab_title"android:layout_width="match_parent"android:layout_height="48dp"android:background="@color/transparent"><TextView
android:id="@+id/txt_top"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="18sp"android:textColor="@color/text_gray"android:text= "@string/infomation" /><View
android:layout_width="match_parent"android:layout_height="2px"android:background="@color/text_gray"android:layout_alignParentBottom="true"/></RelativeLayout><LinearLayout
android:id="@+id/tab_menu"android:layout_width="match_parent"android:layout_height="56dp"android:orientation="horizontal"android:layout_alignParentBottom="true"><TextView
android:id="@+id/txt_deal"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_deal"android:gravity="center"android:textColor="@drawable/tab_menu_deal_text"android:text="点餐"/><TextView
android:id="@+id/txt_poi"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_poi"android:gravity="center"android:textColor="@drawable/tab_menu_poi_text"android:text="商铺"/><TextView
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_user"android:gravity="center"android:textColor="@drawable/tab_menu_user_text"android:text="用户"/><TextView
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="更多"/></LinearLayout><View
android:id="@+id/div_tab_bar"android:layout_width="match_parent"android:layout_height="2px"android:background="@color/text_gray"android:layout_above="@id/tab_menu"/><FrameLayout
android:id="@+id/fragment_container"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/tab_title"android:layout_above="@id/tab_menu"android:background="@color/transparent"></FrameLayout></RelativeLayout>
效果图如下：
Step 3：创建一个Fragment的简单布局与类：
first_fragment.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/transparent"><TextView
android:id="@+id/txt_content"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="呵呵"android:textColor="@color/text_blue"android:textSize="20sp"/></LinearLayout>FirstFragment.java:
public class FirstFragment extends Fragment {private String context;private TextView mTextView;public FirstFragment(String context){this.context = context;}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.first_fragment,container,false);mTextView = (TextView)view.findViewById(R.id.txt_content);//mTextView = (TextView)getActivity().findViewById(R.id.txt_content);mTextView.setText(context);return view;}
}
Step 4：编写MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener{private TextView topBar;private TextView tabDeal;private TextView tabPoi;private TextView tabMore;private TextView tabUser;private FrameLayout ly_content;private FirstFragment f1,f2,f3,f4;private FragmentManager fragmentManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);bindView();}//UI组件初始化与事件绑定private void bindView() {topBar = (TextView)this.findViewById(R.id.txt_top);tabDeal = (TextView)this.findViewById(R.id.txt_deal);tabPoi = (TextView)this.findViewById(R.id.txt_poi);tabUser = (TextView)this.findViewById(R.id.txt_user);tabMore = (TextView)this.findViewById(R.id.txt_more);ly_content = (FrameLayout) findViewById(R.id.fragment_container);tabDeal.setOnClickListener(this);tabMore.setOnClickListener(this);tabUser.setOnClickListener(this);tabPoi.setOnClickListener(this);}//重置所有文本的选中状态public void selected(){tabDeal.setSelected(false);tabMore.setSelected(false);tabPoi.setSelected(false);tabUser.setSelected(false);}//隐藏所有Fragmentpublic void hideAllFragment(FragmentTransaction transaction){if(f1!=null){transaction.hide(f1);}if(f2!=null){transaction.hide(f2);}if(f3!=null){transaction.hide(f3);}if(f4!=null){transaction.hide(f4);}}@Overridepublic void onClick(View v) {FragmentTransaction transaction = getFragmentManager().beginTransaction();hideAllFragment(transaction);switch(v.getId()){case R.id.txt_deal:selected();tabDeal.setSelected(true);if(f1==null){f1 = new FirstFragment("第一个Fragment");transaction.add(R.id.fragment_container,f1);}else{transaction.show(f1);}break;case R.id.txt_more:selected();tabMore.setSelected(true);if(f2==null){f2 = new FirstFragment("第二个Fragment");transaction.add(R.id.fragment_container,f2);}else{transaction.show(f2);}break;case R.id.txt_poi:selected();tabPoi.setSelected(true);if(f3==null){f3 = new FirstFragment("第三个Fragment");transaction.add(R.id.fragment_container,f3);}else{transaction.show(f3);}break;case R.id.txt_user:selected();tabUser.setSelected(true);if(f4==null){f4 = new FirstFragment("第四个Fragment");transaction.add(R.id.fragment_container,f4);}else{transaction.show(f4);}break;}transaction.commit();}
}
实现效果图如下：
使用RadioGroup + RadioButton实现了底部导航栏的效果
这一次的资源文件和上一次是一样的，只需要把外drawable类的资源的selected 状态修改成checked状态：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/ic_menu_deal_on" android:state_checked="true"/><item android:drawable="@mipmap/ic_menu_deal_off"/></selector>其他文字资源及背景资源不变
这里我们首先从主布局文件开始：
Step 2：编写我们的Activity布局
由于布局中的RadioButton的属性大部分是一样的，因此我们可以将这一部分一样的代码抽取出来，写到style.xml文件中：
style.xml:
<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style><style name="tab_menu_item"><item name="android:layout_width">0dp</item><item name="android:layout_weight">1</item><item name="android:layout_height">match_parent</item><item name="android:background">@drawable/tab_menu_bg</item><item name="android:button">@null</item><item name="android:gravity">center</item><item name="android:paddingTop">3dp</item><item name="android:textColor">@drawable/tab_menu_text</item><item name="android:textSize">18sp</item></style></resources>
然后我们的activity_main.xml中的RadioButton就用不着次次都写相同的代码了， 只需让RadioButton的style=”@style/tab_menu_item”就可以了！
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<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"><RelativeLayout
android:id="@+id/ly_top_bar"android:layout_width="match_parent"android:layout_height="48dp"android:background="@color/transparent"><TextView
android:id="@+id/txt_topbar"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerInParent="true"android:gravity="center"android:text="信息"android:textColor="@color/text_gray"android:textSize="18sp" /><View
android:layout_width="match_parent"android:layout_height="2px"android:layout_alignParentBottom="true"android:background="@color/text_gray" /></RelativeLayout><RadioGroup
android:id="@+id/rd_group"android:layout_width="match_parent"android:layout_height="56dp"android:layout_alignParentBottom="true"android:background="@color/transparent"android:orientation="horizontal"><RadioButton
android:id="@+id/rd_menu_deal"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_deal"android:text="点餐"/><RadioButton
android:id="@+id/rd_menu_poi"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_poi"android:text="商铺"/><RadioButton
android:id="@+id/rd_menu_more"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_more"android:text="更多"/><RadioButton
android:id="@+id/rd_menu_user"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_user"android:text="用户"/></RadioGroup><FrameLayout
android:id="@+id/fragment_container"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/rd_group"android:layout_below="@id/ly_top_bar"android:background="@color/transparent"></FrameLayout>
</RelativeLayout>
效果图如下：
Step 3：创建一个Fragment的简单布局与类：
my_fragment.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><TextView
android:id="@+id/textView"android:layout_width="match_parent"android:layout_height="match_parent"android:textSize="20sp"android:textColor="@color/text_blue"android:gravity="center"android:text="呵呵"/></LinearLayout>MyFragment.java :
public class MyFragment extends Fragment{private String context;private TextView mTextView;public MyFragment(String context){this.context = context;}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.my_fragment,container,false);mTextView = (TextView)view.findViewById(R.id.textView);mTextView.setText(context);return view;}
}
Step 4：编写MainActivity.java
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{private RadioGroup rpTab;private RadioButton rbDeal,rbPoi,rbMore,rbUser;private MyFragment fg1,fg2,fg3,fg4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bindView();}private void bindView() {rpTab = (RadioGroup)findViewById(R.id.rd_group);rpTab.setOnCheckedChangeListener(this);rbDeal = (RadioButton)findViewById(R.id.rd_menu_deal);rbPoi = (RadioButton)findViewById(R.id.rd_menu_poi);rbMore = (RadioButton)findViewById(R.id.rd_menu_more);rbUser = (RadioButton)findViewById(R.id.rd_menu_user);rbDeal.setChecked(true);}public void hideAllFragment(FragmentTransaction transaction){if(fg1!=null){transaction.hide(fg1);}if(fg2!=null){transaction.hide(fg2);}if(fg3!=null){transaction.hide(fg3);}if(fg4!=null){transaction.hide(fg4);}}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {FragmentTransaction transaction = getFragmentManager().beginTransaction();hideAllFragment(transaction);switch (checkedId){case R.id.rd_menu_deal:if(fg1==null){fg1 = new MyFragment("第一个Fragment");transaction.add(R.id.fragment_container,fg1);}else{transaction.show(fg1);}break;case R.id.rd_menu_poi:if(fg2==null){fg2 = new MyFragment("第二个Fragment");transaction.add(R.id.fragment_container,fg2);}else{transaction.show(fg2);}break;case R.id.rd_menu_more:if(fg3==null){fg3 = new MyFragment("第三个Fragment");transaction.add(R.id.fragment_container,fg3);}else{transaction.show(fg3);}break;case R.id.rd_menu_user:if(fg4==null){fg4 = new MyFragment("第四个Fragment");transaction.add(R.id.fragment_container,fg4);}else{transaction.show(fg4);}break;}transaction.commit();}
}
效果图和上面一样：
实现类似新浪微博的底部导航栏
前面我们已经跟大家讲解了实现底部导航栏的两种方案，但是这两种方案只适合普通的情况，如果 是像新浪微博那样的，想在底部导航栏上的item带有一个红色的小点，然后加上一个消息数目这样， 前面两种方案就显得无力了，我们来看看别人的APP是怎么做的，打开手机的开发者选项，勾选里面的： 显示布局边界，然后打开我们参考的那个App，可以看到底部导航栏是这样的：
上面这个图我们就可以看出，这种底部导航栏不是简单的TextView或者RadioGroup构成的， 大概布局方案可能是：外层一个LinearLayout，中间一个RelativeLayout，而在中间有一个TextView， 然后再在TextView的右上角有一个红色圆圈背景的TextView或者一个红色的小点； 大概就这样，而这些小点平时的时候应该设置的不可见，当收到信息推送，即有相关类别信息的 时候再可见，并且显示对应的信息数目！那么下面我们就来实现下这种底部导航栏的效果，！
实现效果：
为了方便理解，这里通过点击按钮的形式，模拟收到推送信息，然后显示红色点！
Step 1：相关资源文件的准备：
和前面一样，准备好drawable系列的资源：
文字资源：tab_menu_text.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/text_blue" android:state_selected="true"/><item android:color="@color/text_gray" /></selector>图标资源：tab_menu_better.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/ic_menu_deal_on" android:state_selected="true"/><item android:drawable="@mipmap/ic_menu_deal_off"/></selector>其他三个依葫芦画瓢！
Step 2：编写activity的布局代码：
因为四个选项的TextView以及右上角的红点数字属性都差不多，如下：
<TextViewandroid:id="@+id/tab_menu_channel"android:layout_marginTop="5dp"android:layout_width="wrap_content"android:layout_height="48dp"android:layout_centerInParent="true"android:textColor="@drawable/tab_menu_text"android:drawableTop="@drawable/tab_menu_channel"android:text="@string/tab_menu_alert"/><TextViewandroid:layout_width="20dp"android:layout_height="20dp"android:background="@mipmap/bg_num"android:layout_toRightOf="@+id/tab_menu_channel"android:layout_marginLeft="-10dp"android:text="99+"android:textSize="12sp"android:gravity="center"android:textColor="@color/text_white"/>我们将他们抽取出来，写到style.xml里：
<style name="tab_menu_text"><item name="android:layout_marginTop">5dp</item><item name="android:layout_width">wrap_content</item><item name="android:layout_height">48dp</item><item name="android:layout_centerInParent">true</item><item name="android:textColor">@drawable/tab_menu_text</item>
</style><style name="tab_menu_bgnum"><item name="android:layout_width">20dp</item><item name="android:layout_height">20dp</item><item name="android:background">@mipmap/bg_num</item><item name="android:layout_marginLeft">-10dp</item><item name="android:textSize">12sp</item><item name="android:gravity">center</item><item name="android:textColor">@color/text_white</item>
</style>然后开始编写我们的activity.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<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"><RelativeLayout
android:id="@+id/ly_top_bar"android:layout_width="match_parent"android:layout_height="48dp"android:background="@color/transparent"><TextView
android:id="@+id/txt_topbar"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerInParent="true"android:gravity="center"android:text="信息"android:textColor="@color/text_gray"android:textSize="18sp" /><View
android:layout_width="match_parent"android:layout_height="2px"android:layout_alignParentBottom="true"android:background="@color/text_gray" /></RelativeLayout><LinearLayout
android:id="@+id/ly_tab_menu"android:layout_width="match_parent"android:layout_height="56dp"android:layout_alignParentBottom="true"android:background="@color/transparent"android:orientation="horizontal"><LinearLayout
android:id="@+id/ly_tab_menu_deal"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><RelativeLayout
android:layout_width="wrap_content"android:layout_height="match_parent"android:padding="5dp"><TextView
android:id="@+id/tab_menu_deal"style="@style/tab_menu_text"android:drawableTop="@drawable/tab_menu_deal"android:text="点餐" /><TextView
android:id="@+id/tab_menu_deal_num"style="@style/tab_menu_bgnum"android:layout_toRightOf="@+id/tab_menu_deal"android:text="99+"android:visibility="gone" /></RelativeLayout></LinearLayout><LinearLayout
android:id="@+id/ly_tab_menu_poi"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><RelativeLayout
android:layout_width="wrap_content"android:layout_height="match_parent"android:padding="5dp"><TextView
android:id="@+id/tab_menu_poi"style="@style/tab_menu_text"android:drawableTop="@drawable/tab_menu_poi"android:text="商铺" /><TextView
android:id="@+id/tab_menu_poi_num"style="@style/tab_menu_bgnum"android:layout_toRightOf="@+id/tab_menu_poi"android:text="99+"android:visibility="gone" /></RelativeLayout></LinearLayout><LinearLayout
android:id="@+id/ly_tab_menu_more"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><RelativeLayout
android:layout_width="wrap_content"android:layout_height="match_parent"android:padding="5dp"><TextView
android:id="@+id/tab_menu_more"style="@style/tab_menu_text"android:drawableTop="@drawable/tab_menu_more"android:text="更多" /><TextView
android:id="@+id/tab_menu_more_num"style="@style/tab_menu_bgnum"android:layout_toRightOf="@+id/tab_menu_more"android:text="99+"android:visibility="gone" /></RelativeLayout></LinearLayout><LinearLayout
android:id="@+id/ly_tab_menu_user"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><RelativeLayout
android:layout_width="wrap_content"android:layout_height="match_parent"android:padding="5dp"><TextView
android:id="@+id/tab_menu_user"style="@style/tab_menu_text"android:drawableTop="@drawable/tab_menu_user"android:text="用户" /><ImageView
android:id="@+id/tab_menu_setting_partner"android:layout_width="12dp"android:layout_height="12dp"android:layout_marginLeft="-5dp"android:layout_toRightOf="@id/tab_menu_user"android:visibility="gone"android:src="@mipmap/partner_red" /></RelativeLayout></LinearLayout></LinearLayout><View
android:id="@+id/div_tab_bar"android:layout_width="match_parent"android:layout_height="2px"android:layout_above="@id/ly_tab_menu"android:background="@color/text_gray" /><FrameLayout
android:id="@+id/fragment_container"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/transparent"android:layout_above="@id/div_tab_bar"android:layout_below="@id/ly_top_bar"/></RelativeLayout>效果图如下：
Step 3：编写Fragment界面布局以及类
Fragment布局由四个普通按钮构成：
fragment_my.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="5dp"><Buttonandroid:id="@+id/btn_one"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="显示第一个消息"/><Buttonandroid:id="@+id/btn_two"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="第二个显示信息"/><Buttonandroid:id="@+id/btn_three"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="第三个显示信息"/><Buttonandroid:id="@+id/btn_four"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="第四个显示信息"/></LinearLayout>接着是自定义的Fragment类，这里的话我们通过getActivity.findViewById()来获得Activity 中的小红点，这里仅仅是简单的控制显示而已！
MyFragment.java:
public class MyFragment extends Fragment implements View.OnClickListener{private Context mContext;private Button btn_one;private Button btn_two;private Button btn_three;private Button btn_four;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.frament_my,container,false);btn_one = (Button)view.findViewById(R.id.btn_one);btn_two = (Button)view.findViewById(R.id.btn_two);btn_three = (Button)view.findViewById(R.id.btn_three);btn_four = (Button)view.findViewById(R.id.btn_four);btn_one.setOnClickListener(this);btn_two.setOnClickListener(this);btn_three.setOnClickListener(this);btn_four.setOnClickListener(this);return view;}@Overridepublic void onClick(View v) {switch(v.getId()){case R.id.btn_one:TextView mTextViewDeal = (TextView)getActivity().findViewById(R.id.tab_menu_deal_num);mTextViewDeal.setText("11");mTextViewDeal.setVisibility(View.VISIBLE);break;case R.id.btn_two:TextView mTextViewPoi = (TextView)getActivity().findViewById(R.id.tab_menu_poi_num);mTextViewPoi.setText("99");mTextViewPoi.setVisibility(View.VISIBLE);break;case R.id.btn_three:TextView mTextViewMore = (TextView)getActivity().findViewById(R.id.tab_menu_more_num);mTextViewMore.setText("999+");mTextViewMore.setVisibility(View.VISIBLE);break;case R.id.btn_four:ImageView mImageView = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);mImageView.setVisibility(View.VISIBLE);break;}}
}
Step 4：编写MainActivity
我们在这里完成主要的逻辑实现，有些部分和前面TextView实现底部导航栏的效果类似， 就不具体讲解了，代码如下：
MainActivity.java：
public class MainActivity extends AppCompatActivity implements View.OnClickListener{private LinearLayout ly_one,ly_two,ly_three,ly_four;private TextView mTextView1,mTextView2,mTextView3,mTextView4;private TextView mTextNum1,mTextNum2,mTextNum3,mTxetNum3;private ImageView mImageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bindView();ly_one.performClick();FragmentTransaction transaction = getFragmentManager().beginTransaction();MyFragment fg1 = new MyFragment();transaction.add(R.id.fragment_container,fg1);transaction.commit();}private void bindView() {ly_one = (LinearLayout)findViewById(R.id.ly_tab_menu_deal);ly_two = (LinearLayout)findViewById(R.id.ly_tab_menu_poi);ly_three = (LinearLayout)findViewById(R.id.ly_tab_menu_more);ly_four = (LinearLayout)findViewById(R.id.ly_tab_menu_user);mTextView1 = (TextView)findViewById(R.id.tab_menu_deal);mTextView2 = (TextView)findViewById(R.id.tab_menu_poi);mTextView3 = (TextView)findViewById(R.id.tab_menu_more);mTextView4 = (TextView)findViewById(R.id.tab_menu_user);mTextNum1 = (TextView)findViewById(R.id.tab_menu_deal_num);mTextNum2 = (TextView)findViewById(R.id.tab_menu_poi_num);mTextNum3 = (TextView)findViewById(R.id.tab_menu_more_num);mImageView = (ImageView)findViewById(R.id.tab_menu_setting_partner);ly_one.setOnClickListener(this);ly_two.setOnClickListener(this);ly_three.setOnClickListener(this);ly_four.setOnClickListener(this);}//重置所有文本的选中状态private void setSelected() {mTextView1.setSelected(false);mTextView2.setSelected(false);mTextView3.setSelected(false);mTextView4.setSelected(false);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.ly_tab_menu_deal:setSelected();mTextView1.setSelected(true);mTextNum1.setVisibility(View.INVISIBLE);break;case R.id.ly_tab_menu_poi:setSelected();mTextView2.setSelected(true);mTextNum2.setVisibility(View.INVISIBLE);break;case R.id.ly_tab_menu_more:setSelected();mTextView3.setSelected(true);mTextNum3.setVisibility(View.INVISIBLE);break;case R.id.ly_tab_menu_user:setSelected();mTextView4.setSelected(true);mImageView.setVisibility(View.INVISIBLE);break;}}}
代码实现效果图：
利用BottomNavigationBar实现底部导航栏
这篇博客讲得很清楚~
http://blog.csdn.net/u010046908/article/details/50962081
Android底部导航栏的四种实现相关推荐
- 转载：Android底部导航栏，三种风格和实现
原文出处 标题:Android底部导航栏,三种风格和实现 作者:阿飞__ 原文链接:Android底部导航栏,三种风格和实现_阿飞__的博客-CSDN博客_android导航栏 一.效果图展示 如果动 ...
- Android底部导航栏的三种风格实现
一.效果图展示 如果动图没有动的话,也可以看下面这个静态图 以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Goo ...
- Android底部导航栏，三种风格和实现
一.效果图展示 如果动图没有动的话,也可以看下面这个静态图 以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Goo ...
- 21天学习之二(Android 10.0 SystemUI默认去掉底部导航栏的三种方法)
活动地址:CSDN21天学习挑战赛 1.概述 在定制化开发中,在SystemUI的一些定制功能中,针对默认去掉底部导航栏的方法有好几种,StatusBar和DisplayPolicy.java中api ...
- Android底部导航栏最常用的两种写法
先来看看底部导航栏的效果 Android 底部导航栏有很多种写法,例如: RadioGroup , Tablayout, TabHost , LinearLayout + ImageView + T ...
- 底部导航栏的几种实现方式
概述 Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ,TabLayout是Android Material Design中的 ...
- Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
- Android底部导航栏+消息提醒
Android底部导航栏+消息提醒 最近想在网上找一些Android底部导航栏切换并能提供消息提醒的案例,虽然有很多案例但都不是我想要的.我就开始自己瞎研究了,废话不多说了,直接上代码. 1.先创建一 ...
- android 固定底部导航,如何设置android底部导航栏位置固定在android
请帮我设置底部导航栏位置固定在底部, ,因为我在输入editText字段时遇到问题,底部导航栏向上移动并覆盖其他领域如何设置android底部导航栏位置固定在android 代码: xmlns:and ...
最新文章
- mongoDB设置用户名密码的一个要点
- IQmath中文手册
- QT的QQmlExtensionPlugin类的使用
- 使用Java读取 “Python写入redis” 的数据踩坑记录
- Spring3国际化和本地化
- u盘启动pxe安装linux,U盘启动安装centos5.5+centos6.3+PXE网络安装CentOS
- java-第五章-while=计算1~50中是7的被耍的数值之和
- 磁盘格式 mac android,MacDroid for mac(安卓手机数据传输助手)
- JQuery datatables - column ordering, searching with multi header lines
- Java 基础类库：System、Runtime、Object、Math、日期、时间
- otc机器人tp_OTC机器人是哪个国家的
- SONY α系列（A6000A7）数码微单相机APP破解免付费安装教程
- linux kylin 终端字体,安装Nerd Fonts字体
- 时空数据生成对抗网络研究综述（下）
- 什么是信用违约互换（信用违约掉期） - 债券市场中最常见的信用衍生品
- Windows Server执行定时任务
- 【数据结构】7-1 软硬车厢交替排列 (13 分)
- 共阴数码管段码-共阳数码管段码
- 阿里云-网站备案基本流程（2019.7）
- web实战-京东网（仅学习）