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 stubpage1Btn = (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") @Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (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;}}