实现底部导航栏切换功能
2019-06-28 本文已影响53人
一只西西狸
Screenshot_2019-06-28-18-06-19-573_tsapp.example.com.withyou.png
上图是效果图，其中底部导航栏是自己画上去的，已经实现但是出现了小bug，运行时底部导航栏显示不出来，但可以正常点击切换界面。
功能需求：底部三个按钮分别是“首页”，“消息”和“我的”，点击其中一个按钮时切换到相应界面，字体变色，未点击时字体为白色。
备注：目前只写了首页界面，其他界面用无关界面替代
activity_navigation_bar.xml底部导航栏界面
<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=".activity.NavigationBarActivity">
<FrameLayout
android:id="@+id/fg_contents"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:layout_marginBottom="48dp"
android:background="#ff9291"/>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/ll_home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:focusable="true">
<TextView
android:id="@+id/home_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="首页"
android:textColor="@color/tab_text_color"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_message"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:focusable="true">
<TextView
android:id="@+id/message_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="消息"
android:textColor="@color/tab_text_color"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_me"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:focusable="true">
<TextView
android:id="@+id/me_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="我的"
android:textColor="@color/tab_text_color"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</RelativeLayout>
上述界面用到了颜色选择器tab_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#f6aabe" />
<item android:state_focused="true" android:color="#f6aabe" />
<item android:state_pressed="true" android:color="#f6aabe" />
<item android:color="#ffffff" />
</selector>
首页界面fragment_home.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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/index_index">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ll_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="114dp"
android:layout_gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginStart="114dp">
<TextView
android:id="@+id/top_recommend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="推荐"
android:textSize="18sp"
android:textColor="@color/home_text_color"/>
<View
android:layout_width="3dp"
android:layout_height="14dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="#dfdfdf"
android:layout_gravity="center"/>
<TextView
android:id="@+id/top_column"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="栏目"
android:textColor="@color/home_text_color"
android:textSize="18sp"/>
<View
android:layout_width="3dp"
android:layout_height="14dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="#dfdfdf"
android:layout_gravity="center"/>
<TextView
android:id="@+id/top_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="喜欢"
android:textColor="@color/home_text_color"
android:textSize="18sp"/>
</LinearLayout>
<ImageButton
android:id="@+id/head_top_right"
android:layout_width="36dp"
android:layout_height="42dp"
android:layout_marginLeft="42dp"
android:background="@drawable/index_index_03"
android:layout_marginStart="42dp"/>
</LinearLayout>
<ImageButton
android:id="@+id/bixin"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginHorizontal="315dp"
android:layout_marginVertical="460dp"
android:background="@drawable/index_index_14"
tools:targetApi="o"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="49dp"
android:gravity="bottom"
android:orientation="horizontal">
<ImageButton
android:id="@+id/head_bottom_left"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="12dp"
android:background="@drawable/index_index_17"
android:layout_marginStart="12dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:orientation="vertical"
android:layout_marginStart="12dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="19dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="养乐多"
android:textColor="#FFFFFF"
android:textSize="16sp"/>
<ImageView
android:id="@+id/iv_location"
android:layout_width="12dp"
android:layout_height="19dp"
android:layout_marginLeft="13dp"
android:background="@drawable/index_index_20"
android:layout_marginStart="13dp"/>
<TextView
android:id="@+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="7dp"
android:text="1km"
android:textColor="#ffffff"
android:textSize="11sp"
android:layout_marginStart="7dp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_menu"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:layout_marginTop="7dp"
android:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:id="@+id/menu_vediochat"
android:layout_width="48dp"
android:layout_height="21dp"
android:background="@drawable/shape_text"
android:gravity="center"
android:text="视频聊天"
android:textColor="#ffffff"
android:textSize="9sp"/>
<TextView
android:id="@+id/menu_voice_actor_chat"
android:layout_width="48dp"
android:layout_height="21dp"
android:layout_marginLeft="5dp"
android:background="@drawable/shape_text"
android:gravity="center"
android:text="声优聊天"
android:textColor="#ffffff"
android:textSize="9sp"
android:layout_marginStart="5dp"/>
<TextView
android:id="@+id/menu_play_with"
android:layout_width="48dp"
android:layout_height="21dp"
android:layout_marginLeft="5dp"
android:background="@drawable/shape_text"
android:gravity="center"
android:text="王者陪玩"
android:textColor="#ffffff"
android:textSize="9sp"
android:layout_marginStart="5dp"/>
<TextView
android:id="@+id/menu_model"
android:layout_width="48dp"
android:layout_height="21dp"
android:layout_marginLeft="5dp"
android:background="@drawable/shape_text"
android:gravity="center"
android:text="模特"
android:textColor="#ffffff"
android:textSize="9sp"
android:layout_marginStart="5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
接下来是功能实现，先初始化各组件，和fragment参数，再实现底部导航栏的点击事件，达到点击切换的目的。
NavigationBarActivity.java
public class NavigationBarActivity extends FragmentActivity implements View.OnClickListener {
private LinearLayout layoutHome,layoutMessage,layoutMe;
private TextView tvHome,tvMessage,tvMe;
private FragmentManager mFragmentManager;
private int containerId;
private List<Fragment> mFragements;
//初始化当前可见页码为0
private int nowTab=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_bar);
initViews();
initParams();
//添加底栏点击事件
layoutHome.setOnClickListener(this);
layoutMessage.setOnClickListener(this);
layoutMe.setOnClickListener(this);
}
/**
* 初始化首页布局组件
* */
private void initViews() {
layoutHome=(LinearLayout) findViewById(R.id.ll_home);
layoutMessage=(LinearLayout) findViewById(R.id.ll_message);
layoutMe=(LinearLayout) findViewById(R.id.ll_me);
tvHome=(TextView) findViewById(R.id.home_text);
tvMessage=(TextView) findViewById(R.id.message_text);
tvMe=(TextView) findViewById(R.id.me_text);
}
/**
* 初始化fragement参数
* */
private void initParams() {
mFragmentManager=getSupportFragmentManager();
//用于页面切换的framelayout容器
containerId=R.id.fg_contents;
FragmentTransaction transaction = mFragmentManager.beginTransaction();
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
//初始化Fragement保存到List默认加载首页
mFragements=new ArrayList<Fragment>(4);
mFragements.add(new HomeFragment());
mFragements.add(null);
mFragements.add(null);
mFragements.add(null);
transaction.add(containerId, mFragements.get(0));
transaction.commit();
onTabViewSelected(0);
}
@Override
public void onClick(View view) {
FragmentTransaction transaction = mFragmentManager.beginTransaction();
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
switch (view.getId()) {
case R.id.ll_home:
if(nowTab!=0){
transaction.hide(mFragements.get(nowTab));
nowTab=0;
onTabViewSelected(nowTab);
if(mFragements.get(nowTab)==null){
mFragements.set(nowTab,new HomeFragment());
transaction.add(containerId, mFragements.get(nowTab));
}else{
transaction.show(mFragements.get(nowTab));
}
}
break;
case R.id.ll_message:
if(nowTab!=1){
transaction.hide(mFragements.get(nowTab));
nowTab=1;
onTabViewSelected(nowTab);
if(mFragements.get(nowTab)==null){
mFragements.set(nowTab,new MessageFragment());
transaction.add(containerId, mFragements.get(nowTab));
}else{
transaction.show(mFragements.get(nowTab));
}
}
break;
case R.id.ll_me:
if(nowTab!=2){
transaction.hide(mFragements.get(nowTab));
nowTab=2;
onTabViewSelected(nowTab);
if(mFragements.get(nowTab)==null){
mFragements.set(nowTab,new MeFragment());
transaction.add(containerId, mFragements.get(nowTab));
}else{
transaction.show(mFragements.get(nowTab));
}
}
break;
default:
break;
}
transaction.commitAllowingStateLoss();
}
/**
* 改变底栏图标选择状态
* @param int position
* */
private void onTabViewSelected(int position) {
if(position<0 || position>3) {
return;
}
tvHome.setSelected(false);
tvMessage.setSelected(false);
tvMe.setSelected(false);
switch (position) {
case 0:
tvHome.setSelected(true);
break;
case 1:
tvMessage.setSelected(true);
break;
case 2:
tvMe.setSelected(true);
break;
default:
break;
}
}
}
首页自动显示的界面采用Fragment碎片，继承FragmentActivity，这里只是将界面调用过来，并没有实现内部功能。
HomeFragment.java
public class HomeFragment extends Fragment {
@Override
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}
小结：以上代码仅供参考，还有大量需要完善的地方。
