Android仿微信底部导航

一丶现在很多项目都用到了仿微信底部导航，以前也用过，今天就作一个笔记，记录下来这个Demo。1.先上效果图。                                         2.主页Activity.

public class MainActivity extends BaseActivity implements View.OnClickListener {

//  4个 LinearLayout
@InjectView(R.id.ll_btn1)
LinearLayout linearLayout1;
@InjectView(R.id.ll_btn2)
LinearLayout linearLayout2;
@InjectView(R.id.ll_btn3)
LinearLayout linearLayout3;
@InjectView(R.id.ll_btn4)
LinearLayout linearLayout4;

//  4个textView
@InjectView(R.id.id_btn1_text)
TextView id_btn1_text;

@InjectView(R.id.id_btn2_text)
TextView id_btn2_text;

@InjectView(R.id.id_btn3_text)
TextView id_btn3_text;

@InjectView(R.id.id_btn4_text)
TextView id_btn4_text;

//    4个ImageView
@InjectView(R.id.id_btn1_image)
ImageView id_btn1_image;

@InjectView(R.id.id_btn2_image)
ImageView id_btn2_image;

@InjectView(R.id.id_btn3_image)
ImageView id_btn3_image;

@InjectView(R.id.id_btn4_image)
ImageView id_btn4_image;

private FragmentTransaction transaction;
private Fragment1 fragment1;
private Fragment2 fragment2;
private Fragment3 fragment3;
private Fragment4 fragment4;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

//        初始化显示首页
initFragment(0);
}

@Override
public void initEvent() {
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}

@Override
public void setLayout() {
super.setLayout();
setContentView(R.layout.activity_main);
}

@Override
public void onClick(View v) {
// 在每次点击后将所有的底部按钮(ImageView,TextView)颜色改为灰色，然后根据点击着色
restartBotton();
switch (v.getId()) {

case R.id.ll_btn1:

id_btn1_image.setImageResource(R.drawable.ic_mutual_chat_click);
id_btn1_text.setTextColor(context.getResources().getColor(R.color.orange));
initFragment(0);
break;
case R.id.ll_btn2:

id_btn2_image.setImageResource(R.drawable.ic_bottom2_click);
id_btn2_text.setTextColor(context.getResources().getColor(R.color.orange));
initFragment(1);
break;
case R.id.ll_btn3:

id_btn3_image.setImageResource(R.drawable.ic_bottom1_click);
id_btn3_text.setTextColor(context.getResources().getColor(R.color.orange));
initFragment(2);
break;
case R.id.ll_btn4:

id_btn4_image.setImageResource(R.drawable.ic_bottom4_click);
id_btn4_text.setTextColor(context.getResources().getColor(R.color.orange));

initFragment(3);
break;

}
}

private void initFragment(int index) {
// 由于是引用了V4包下的Fragment，所以这里的管理器要用getSupportFragmentManager获取
FragmentManager fragmentManager = getSupportFragmentManager();
// 开启事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 隐藏所有Fragment
hideFragment(transaction);
switch (index) {
case 0:
if (fragment1 == null) {
fragment1 = new Fragment1();
transaction.add(R.id.fl_content, fragment1);
} else {
transaction.show(fragment1);
}
break;
case 1:
if (fragment2 == null) {
fragment2 = new Fragment2();
transaction.add(R.id.fl_content, fragment2);
} else {
transaction.show(fragment2);
}
break;
case 2:
if (fragment3 == null) {
fragment3 = new Fragment3();
transaction.add(R.id.fl_content, fragment3);
} else {
transaction.show(fragment3);
}

break;
case 3:
if (fragment4 == null) {
fragment4 = new Fragment4();
transaction.add(R.id.fl_content, fragment4);
} else {
transaction.show(fragment4);
}

break;

default:
break;
}

// 提交事务
transaction.commit();

}

//隐藏Fragment
private void hideFragment(FragmentTransaction transaction) {
if (fragment1 != null) {
transaction.hide(fragment1);
}
if (fragment2 != null) {
transaction.hide(fragment2);
}
if (fragment3 != null) {
transaction.hide(fragment3);
}
if (fragment4 != null) {
transaction.hide(fragment4);
}
}

private void restartBotton() {
// ImageView置为灰色
id_btn1_image.setImageResource(R.drawable.ic_mutual_chat_normal);
id_btn2_image.setImageResource(R.drawable.ic_bottom2_default);
id_btn3_image.setImageResource(R.drawable.ic_bottom1_default);
id_btn4_image.setImageResource(R.drawable.ic_bottom4_default);

// TextView置为灰色
id_btn1_text.setTextColor(context.getResources().getColor(R.color.color_666));
id_btn2_text.setTextColor(context.getResources().getColor(R.color.color_666));
id_btn3_text.setTextColor(context.getResources().getColor(R.color.color_666));
id_btn4_text.setTextColor(context.getResources().getColor(R.color.color_666));
}

}

2.

activity_main.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"><FrameLayoutandroid:id="@+id/fl_content"android:layout_width="match_parent"android:layout_height="match_parent"/><includeandroid:id="@+id/id_include"layout="@layout/layout_menu"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true" /></RelativeLayout>

3.

layout_menu.xml

<?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="wrap_content"android:orientation="vertical"><Viewandroid:layout_width="match_parent"android:layout_height="0.5dip"android:src="#DBDBDB" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:src="#ffffff"android:orientation="horizontal"4000android:padding="4dp"><!-- 首页--><LinearLayoutandroid:id="@+id/ll_btn1"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/id_btn1_image"android:layout_width="22dp"android:layout_height="22dp"android:layout_gravity="center"android:src="@drawable/ic_mutual_chat_click" /><TextViewandroid:id="@+id/id_btn1_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="2dp"android:gravity="center"android:text="首页"android:focusable="true"android:textColor="#666"android:textSize="12sp" /></LinearLayout><!-- 交管业务--><LinearLayoutandroid:id="@+id/ll_btn2"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:layout_weight="1"android:orientation="vertical"><RelativeLayoutandroid:layout_width="30dp"android:layout_height="22dp"android:layout_gravity="center"android:gravity="center"><ImageViewandroid:id="@+id/id_btn2_image"android:layout_width="22dp"android:layout_height="22dp"android:layout_gravity="center"android:src="@drawable/ic_bottom2_default" /><TextViewandroid:id="@+id/id_btn2_text_notify"android:layout_width="8dp"android:layout_height="8dp"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:layout_marginLeft="3dp"android:src="@drawable/msgboder"android:gravity="center"android:textColor="#fff"android:textSize="13sp"android:visibility="gone" /></RelativeLayout><TextViewandroid:id="@+id/id_btn2_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="2dp"android:gravity="center"android:text="交管业务"android:textColor="#666"android:textSize="12sp" /></LinearLayout><!-- 发现--><LinearLayoutandroid:id="@+id/ll_btn3"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/id_btn3_image"android:layout_width="22dp"android:layout_height="22dp"android:layout_gravity="center"android:src="@drawable/ic_bottom1_default" /><TextViewandroid:id="@+id/id_btn3_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="2dp"android:gravity="center"android:text="发现"android:textColor="#666"android:textSize="12sp" /></LinearLayout><!--我的--><LinearLayoutandroid:id="@+id/ll_btn4"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:layout_weight="1"android:orientation="vertical"><RelativeLayoutandroid:layout_width="30dp"android:layout_height="22dp"android:layout_gravity="center"android:gravity="center"><ImageViewandroid:id="@+id/id_btn4_image"android:layout_width="22dp"android:layout_height="22dp"android:layout_centerInParent="true"android:layout_gravity="center"android:src="@drawable/ic_bottom4_default" /><TextViewandroid:id="@+id/id_btn4_text_notify"android:layout_width="8dp"android:layout_height="8dp"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:src="@drawable/msgboder"android:gravity="center"android:textColor="#fff"android:textSize="13sp"android:visibility="gone" /></RelativeLayout><TextViewandroid:id="@+id/id_btn4_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="2dp"android:gravity="center"android:text="我的"android:textColor="#666"android:textSize="12sp" /></LinearLayout></LinearLayout></LinearLayout>4.BaseFragmentpublic class BaseFragment extends Fragment {private View fatherView;private LinearLayout ll_basefragment_father;private TextView textViewTitle;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {fatherView = inflater.inflate(R.layout.base_fragment_title, container,false);textViewTitle = (TextView) fatherView.findViewById(R.id.tv_basefragment_title);initView();return fatherView;}public void initView() {}public View inflater(LayoutInflater inflater, int fragment,ViewGroup container, boolean attachToRoot) {// 添加的布局 父控件ll_basefragment_father = (LinearLayout) fatherView.findViewById(R.id.ll_basefragment_father);ll_basefragment_father.addView(inflater.inflate(fragment, container, false));init();return fatherView;}public void setTitle(String str){textViewTitle.setText(str);}public void init() {}}5.Fragment1,Fragment2,Fragment3,Fragment4，都一样只是标题不一样public class Fragment1 extends BaseFragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return super.onCreateView(inflater, container, savedInstanceState);}@Overridepublic void initView() {setTitle("首页");}}