【效果】（这里下载的软件收费的试用有水印)
【推荐】这里推荐一个图标网http://iconfont.cn/。以上图标来自此图标网
【项目结构】
【步骤】
①创建布局文件，写底部导航栏
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"> <RelativeLayout
android:id="@+id/rl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--这里设置权重weight为1， 下面不设置权重。-->
<!--意思是，剩余的位置全都是RelativeLayout的-->
</RelativeLayout> <TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#797878"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/item1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/item1_iv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="3dp"
android:scaleType="fitCenter"
android:src="@drawable/wxb"
android:padding="1dp"/>
<TextView
android:id="@+id/item1_tv"
android:text="女王"
android:textSize="16sp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/item2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/item2_iv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="3dp"
android:scaleType="fitCenter"
android:src="@drawable/meizhuang"
android:padding="4dp"/>
<TextView
android:id="@+id/item2_tv"
android:text="美妆"
android:textSize="16sp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/item3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/item3_iv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="3dp"
android:scaleType="fitCenter"
android:src="@drawable/fuzhuang"
android:padding="5dp"/>
<TextView
android:id="@+id/item3_tv"
android:text="衣帽"
android:textSize="16sp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:id="@+id/item4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/item4_iv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="3dp"
android:scaleType="fitCenter"
android:src="@drawable/xiebaopeishi"
android:padding="3dp"/>
<TextView
android:id="@+id/item4_tv"
android:text="鞋包"
android:textSize="16sp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
②定义Fragment
【提示】可以通过下图方式创建
public class FragmentA extends Fragment {
public FragmentA() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_a, container, false);
}
}
对于生成的Fragment不用作修改，对应的布局中设置一个背景颜色便于观察。
③MainActivity代码的编写
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private FragmentManager fragmentManager;
private RelativeLayout rl_content;
private ImageView item1_iv,item2_iv,item3_iv,item4_iv;
private TextView item1_tv,item2_tv,item3_tv,item4_tv;
private LinearLayout item1,item2,item3,item4;
private ImageView[] ivs;
private TextView[] tvs;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
fragmentManager = getSupportFragmentManager();
initListener();
}
private void initListener() {
item1.setOnClickListener(this);
item2.setOnClickListener(this);
item3.setOnClickListener(this);
item4.setOnClickListener(this);
}
private void initView() {
rl_content = (RelativeLayout) findViewById(R.id.rl_content);
item1_iv = (ImageView) findViewById(R.id.item1_iv);
item1_tv = (TextView) findViewById(R.id.item1_tv);
item1 = (LinearLayout) findViewById(R.id.item1);
item2_iv = (ImageView) findViewById(R.id.item2_iv);
item2_tv = (TextView) findViewById(R.id.item2_tv);
item2 = (LinearLayout) findViewById(R.id.item2);
item3_iv = (ImageView) findViewById(R.id.item3_iv);
item3_tv = (TextView) findViewById(R.id.item3_tv);
item3 = (LinearLayout) findViewById(R.id.item3);
item4_iv = (ImageView) findViewById(R.id.item4_iv);
item4_tv = (TextView) findViewById(R.id.item4_tv);
item4 = (LinearLayout) findViewById(R.id.item4);
ivs = new ImageView[]{item1_iv,item2_iv,item3_iv,item4_iv};
tvs = new TextView[]{item1_tv,item2_tv,item3_tv,item4_tv};
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.item1: {
FragmentTransaction transaction = fragmentManager.beginTransaction();//创建一个事务
transaction.replace(R.id.rl_content,new FragmentA());
transaction.commit();//事务一定要提交，replace才会有效
setCheck(0);//自定义方法
break;
}
case R.id.item2: {
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.rl_content,new FragmentB());
transaction.commit();
setCheck(1);
break;
}
case R.id.item3: {
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.rl_content,new FragmentC());
transaction.commit();
setCheck(2);
break;
}
case R.id.item4: {
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.rl_content,new FragmentD());
transaction.commit();
setCheck(3);
break;
}
default:break;
}
}
public void setCheck(int itemId){
//这个方法设置底部导航栏选中时的效果
for (int i = 0; i < 4; i++) {
ivs[i].setColorFilter(Color.parseColor("#0f0f0f"));
tvs[i].setTextColor(Color.parseColor("#0f0f0f"));
}
ivs[itemId].setColorFilter(Color.GREEN);
tvs[itemId].setTextColor(Color.GREEN);
}
}
【提示】①这里的点击事件是通过Activity实现Onclick接口的方式
②getSupportFragmentManager()是v4包中的，兼容效果好，如果用getFragmentManager()可能会崩掉
③FragmentManager只需要获取一次，但是事务FragmentTransaction要重新开启。最后事务一定要提交commit。
④方法setCheck是为了设置导航的被选中效果。