Android 底部导航开发
方法1-Fragment
第一步,创建底部导航对应的页面
我们创建三个,所以需要三个对应的页面 在layout
中新建xml文件 tab_bar_home_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fu_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:text="首页"
android:textSize="24sp" />
</LinearLayout>
按照这种方式再新建两个文件,分别为tab_bar_transmit_fragment.xml
, tab_bar_user_fragment.xml
第二步,创建页面对应的java Fragment文件
新建java文件 HomeFragment.java
package com.hxtx.august.NavFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.hxtx.august.R;
public class HomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@Nullable LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
return inflater.inflate(R.layout.tab_bar_home_fragment,container,false);
}
}
按照这种方式再新建两个文件,分别为TransmitFragment.java
, UserFragment.java
文件
第四步 创建底部按钮的变化状态
在drawable
中新建xml文件,tab_bar_home_selector.xml
注意:tab_icon_home2是我准备好的png图片,也可以使用自带的xml,tab_icon_home2表示点击后的图标,tab_icon_home1表示未点击的图标
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 按下此item-->
<item android:drawable="@mipmap/tab_icon_home2" android:state_checked="true" />
<!-- 默认为此item-->
<item android:drawable="@mipmap/tab_icon_home1" android:state_checked="false" />
</selector>
按照这种方式再新建两个文件,分别为tab_bar_transmit_selector.xml
, tab_bar_user_selector.xml
文件
到此为止,我们的准备工作结束,开始开发底部导航。
第五步,在MainActivity对应的xml中这样布局
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/ant_frame_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<RadioGroup
android:id="@+id/ans_radio_group"
android:layout_width="match_parent"
android:layout_height="55dp"
android:paddingTop="5dp"
android:layout_gravity="center_vertical"
android:orientation="horizontal"
>
<RadioButton
android:id="@+id/tab_bar_home_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tab_bar_home_selector"
android:drawablePadding="3dp"
android:gravity="center"
android:text="首页"
/>
<RadioButton
android:id="@+id/tab_bar_transmit_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/tab_bar_transmit_selector"
android:drawablePadding="3dp"
android:gravity="center"
android:text="新闻"
/>
<RadioButton
android:id="@+id/tab_bar_cloud_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/tab_bar_cloud_selector"
android:drawablePadding="3dp"
android:gravity="center"
android:text="公告"
/>
<RadioButton
android:id="@+id/tab_bar_connect_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/tab_bar_connect_selector"
android:drawablePadding="3dp"
android:gravity="center"
android:text="我的"
/>
<RadioButton
android:id="@+id/tab_bar_user_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/tab_bar_user_selector"
android:drawablePadding="3dp"
android:gravity="center"
android:text="我的"
/>
</RadioGroup>
</LinearLayout>
第六步,在MainActivity文件入口加入以下代码
MainActivity.java
package com.hxtx.august;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioGroup;
import com.hxtx.august.NavFragment.ConnectFragment;
import com.hxtx.august.NavFragment.HomeFragment;
import com.hxtx.august.NavFragment.TransmitFragment;
import com.hxtx.august.NavFragment.CloudFragment;
import com.hxtx.august.NavFragment.UserFragment;
import android.content.Intent;
import android.content.IntentFilter;
import com.google.zxing.integration.android.IntentIntegrator;
import com.google.zxing.integration.android.IntentResult;
import com.hxtx.august.Page.QrCodeCManagePage;
import com.hxtx.august.Components.MessageDialog;
import com.hxtx.august.Tools.Utils;
import java.security.InvalidAlgorithmParameterException;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import javax.crypto.BadPaddingException;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
public class MainActivity extends AppCompatActivity {
private FrameLayout antFrameLayout;
private RadioGroup ansRadioGroup;
private Fragment mCurrFragment;
private HomeFragment homeFragment;
private CloudFragment cloudFragment;
private TransmitFragment transmitFragment;
private ConnectFragment connectFragment;
private UserFragment userFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
selectPage(0);
}
private void initView(){
antFrameLayout = findViewById(R.id.ant_frame_layout);
ansRadioGroup = findViewById(R.id.ans_radio_group);
ansRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
selectPage(ansRadioGroup.indexOfChild((ansRadioGroup.findViewById(checkedId))));
}
});
}
private void selectPage(int index){
switch (index){
case 0:
if(homeFragment == null){
homeFragment = new HomeFragment();
}
changeFragment(homeFragment);
break;
case 1:
if(transmitFragment == null){
transmitFragment = new TransmitFragment();
}
changeFragment(transmitFragment);
break;
case 2:
if(cloudFragment == null){
cloudFragment = new CloudFragment();
}
changeFragment(cloudFragment);
break;
case 3:
if(connectFragment == null){
connectFragment = new ConnectFragment();
}
changeFragment(connectFragment);
break;
case 4:
if(userFragment == null){
userFragment = new UserFragment();
}
changeFragment(userFragment);
break;
}
}
private void changeFragment(Fragment showFragment){
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
if(!showFragment.isAdded()){
ft.add(R.id.ant_frame_layout,showFragment);
}
if(mCurrFragment !=null){
ft.hide(mCurrFragment);
}
mCurrFragment = showFragment;
ft.show(mCurrFragment);
ft.commit();
}
}
好了,布局完成。可以使用了
如果你看到了这里,觉得文章写得不错就给个赞呗?
更多Android进阶指南 可以扫码 解锁更多Android进阶资料
敲代码不易,关注一下吧。ღ( ´・ᴗ・` )