一丶现在很多项目都用到了仿微信底部导航,以前也用过,今天就作一个笔记,记录下来这个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"> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:layout_height="match_parent"/> <include android: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">
<View
android:layout_width="match_parent"
android:layout_height="0.5dip"
android:src="#DBDBDB" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:src="#ffffff"
android:orientation="horizontal"
android:padding="4dp">
<!-- 首页-->
<LinearLayout
android: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">
<ImageView
android:id="@+id/id_btn1_image"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:src="@drawable/ic_mutual_chat_click" />
<TextView
android: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>
<!-- 交管业务-->
<LinearLayout
android: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">
<RelativeLayout
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android:id="@+id/id_btn2_image"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:src="@drawable/ic_bottom2_default" />
<TextView
android: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>
<TextView
android: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>
<!-- 发现-->
<LinearLayout
android: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">
<ImageView
android:id="@+id/id_btn3_image"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:src="@drawable/ic_bottom1_default" />
<TextView
android: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>
<!--我的-->
<LinearLayout
android: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">
<RelativeLayout
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android: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" />
<TextView
android: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>
<TextView
android: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.BaseFragment
public class BaseFragment extends Fragment {
private View fatherView;
private LinearLayout ll_basefragment_father;
private TextView textViewTitle;
@Nullable
@Override
public 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
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return super.onCreateView(inflater, container, savedInstanceState);
}
@Override
public void initView() {
setTitle("首页");
}
}