Android学习--底部导航Fragment填充

很多APP都会有一个底部导航栏，作为一开始接触Android的新手，学习基本的框架基础，对这些要有一定的了解，这里是笔者就类似QQ的消息、联系人、动态三个底部导航的简单框架代码的一个整理和分享。   笔者在这里采用的是fragment碎片填充的方法。

先看布局

 

 

 

 

 

 

 

一个主布局mainfragment，三个子页面的fragment布局，还有一个单独写的bottombar底部样式。

在mainfragment.xml中，引用了framelayout布局，和底部bottombar.

<?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" > <FrameLayout android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </FrameLayout> <include android:id="@+id/include_bottombar" android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/bottombar"/> </LinearLayout>

 

在bottombar.xml中，设置消息，联系人，动态的背景图片和文字，加载到上述的mainfragment.xml文件中

<?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" android:orientation="vertical" > <View android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/my_view_color" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/view1" android:layout_marginTop="5dp" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <Button android:id="@+id/btn_xiaoxi" android:layout_width="30dp" android:layout_height="30dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_weight="1" android:background="@drawable/xiaoxi_pressed" android:gravity="center" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <Button android:id="@+id/btn_lianxiren" android:layout_width="30dp" android:layout_height="30dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_weight="1" android:background="@drawable/lianxiren_normal" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <Button android:id="@+id/btn_dongtai" android:layout_width="30dp" android:layout_height="30dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_weight="1" android:background="@drawable/dongtai_normal" /> </RelativeLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_weight="1" android:text="消息" android:textColor="#1fbaf3" android:textSize="15sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <TextView android:id="@+id/tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btn_home" android:layout_centerHorizontal="true" android:layout_weight="1" android:text="联系人" android:textColor="#929292" android:textSize="15sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <TextView android:id="@+id/tv3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btn_home" android:layout_centerHorizontal="true" android:layout_weight="1" android:text="动态" android:textColor="#929292" android:textSize="15sp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout>

 

 

再写三个fragment碎片，但是因为只做简单框架所以都只给了一个文字，代码简单就不加解释了。

<?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" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是消息页面" /> </LinearLayout>

 

布局文件配置好了，现在写java文件，

 

笔者把内容基本都写在了MainActivity.java中了，然后在里面加载三个碎片。

package com.example.fragmentdemo; import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.support.v4.content.ContextCompat; import android.view.Menu; import android.view.View; import android.view.WindowManager; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; public class MainActivity extends Activity { // 这里是初始化并定义了一些变量，并赋初值 private Button page1Btn = null; private Button page2Btn = null; private Button page3Btn = null; private TextView page1Tv = null; private TextView page2Tv = null; private TextView page3Tv = null; private XiaoXiFragment fragxiaoxi = new XiaoXiFragment(); private LianXiRenFragment fraglianxiren = new LianXiRenFragment(); private DongTaiFragment fragdongtai = new DongTaiFragment(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.mainfragment); // 启动activity时不自动弹出软键盘 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN); View_Init();//初始化页面 setDefaultFragment();//设置默认的fragment。 } @SuppressLint("NewApi") private void setDefaultFragment() { FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.replace(R.id.frame_layout, fragxiaoxi);//用fragxiaoxi取代frame_layout这个碎片 transaction.commit();//调用commit方法，将这些变化应用 } private void View_Init() { // TODO Auto-generated method stub page1Btn = (Button) findViewById(R.id.btn_xiaoxi); page1Btn.setOnClickListener(btnListener); page2Btn = (Button) findViewById(R.id.btn_lianxiren); page2Btn.setOnClickListener(btnListener); page3Btn = (Button) findViewById(R.id.btn_dongtai); page3Btn.setOnClickListener(btnListener); page1Tv = (TextView) findViewById(R.id.tv1); page2Tv = (TextView) findViewById(R.id.tv2); page3Tv = (TextView) findViewById(R.id.tv3); } private void setMainState(int page) { page1Btn.setBackgroundResource(R.drawable.xiaoxi_normal); page2Btn.setBackgroundResource(R.drawable.lianxiren_normal); page3Btn.setBackgroundResource(R.drawable.dongtai_normal); page1Tv.setTextColor(getResources().getColor(R.color.my_gray)); page2Tv.setTextColor(getResources().getColor(R.color.my_gray)); page3Tv.setTextColor(getResources().getColor(R.color.my_gray)); switch (page) { case 1: page1Btn.setBackgroundResource(R.drawable.xiaoxi_pressed); page1Tv.setTextColor(getResources().getColor(R.color.my_blue)); break; case 2: page2Btn.setBackgroundResource(R.drawable.lianxiren_pressed); page2Tv.setTextColor(getResources().getColor( R.color.my_blue)); break; case 3: page3Btn.setBackgroundResource(R.drawable.dongtai_pressed); page3Tv.setTextColor(getResources().getColor( R.color.my_blue)); break; } } private OnClickListener btnListener = new OnClickListener() { @SuppressLint("NewApi") @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.btn_xiaoxi: getFragmentManager().beginTransaction().replace(R.id.frame_layout, fragxiaoxi).commit(); setMainState(1); break; case R.id.btn_lianxiren: getFragmentManager().beginTransaction().replace(R.id.frame_layout, fraglianxiren).commit(); setMainState(2); break; case R.id.btn_dongtai: getFragmentManager().beginTransaction().replace(R.id.frame_layout, fragdongtai).commit(); setMainState(3); break; } } }; }

这段代码中声明了bottombar上的三个按钮，声明三个碎片页面，设置默认碎片页面为消息页面，底部bottom碎片不变。设置监听。switch来判别是点击的哪一个按钮，然后用新碎片替换当前碎片，并替换bottom上变化部分图片背景和文字颜色。

 

 

其他三个碎片都只有一个基本的框架，没有特定代码，以XiaoXiFragment为例，只是和相应的布局文件联系到一起。

package com.example.fragmentdemo; import android.annotation.SuppressLint; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; @SuppressLint("NewApi") public class XiaoXiFragment extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fragment_a, container, false); return view; } }