Fragment制作ImageButton底部导航栏

发布于:2023-01-17 ⋅ 阅读:(194) ⋅ 点赞:(0)

 第一步:在activity_main.xml文件中添加 LinearLayout布局、ImageButton标签

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#DCDCDC"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/imgb_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/imgb_device_state"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/white"
            android:src="@drawable/ic_baseline_devices_24" />

        <ImageButton
            android:id="@+id/imgb_setting"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/white"
            android:src="@drawable/ic_baseline_settings_24" />

        <ImageButton
            android:id="@+id/imgb_timelypreview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/white"
            android:src="@drawable/ic_baseline_preview_24" />

        <ImageButton
            android:id="@+id/imgb_takephoto"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/white"
            android:src="@drawable/ic_baseline_photo_camera_24" />

        <ImageButton
            android:id="@+id/imgb_takevideo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/white"
            android:src="@drawable/ic_baseline_videocam_24" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    </LinearLayout>

</RelativeLayout>

说明:android:orientation="horizontal"是让在LinearLayout布局下的所有控件水平,android:layout_alignParentBottom="true"是对于上一个父布局来说,在父布局的底部显示,android:src="@drawable/ic_baseline_devices_24"这是在drawable里的图片。在最下面的一个LinearLayout标签是为了放fragment的一个容器。

第二步:创建Fragment和对应的layout,重写onCreateView方法

public class TakePhotoFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        //把fragment对应的xml布局文件 转换为View对象 加载到界面上
        //重写onCreateView方法把fragment对应的xml布局文件加载进来
        View view = inflater.inflate(R.layout.fragment_takephoto, null);
        return view;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TakePhotoFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="这里是拍照监控" />

</LinearLayout>

 第三步:到MainActivity里写对应的监听点击事件

//设置当前的MainActivity监听事件
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //让创建的fragment实例化
    private DeviceStateFragment deviceStateFragment;
    private SettingsFragment settingFragment;
    private TimelyPreviewFragment timelyPreviewFragment;
    private TakePhotoFragment takePhotoFragment;
    private TakeVideoFragment takeVideoFragment;

    private ImageButton img_device_state,img_setting,
            img_timelypreview,img_takephoto,img_takevideo;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initImageButton();
        setOnClickListener();
    }

    private void initImageButton(){
        img_device_state = findViewById(R.id.imgb_device_state);
        img_setting = findViewById(R.id.imgb_setting);
        img_timelypreview = findViewById(R.id.imgb_timelypreview);
        img_takephoto = findViewById(R.id.imgb_takephoto);
        img_takevideo = findViewById(R.id.imgb_takevideo);
    }

    private void setOnClickListener(){
        img_device_state.setOnClickListener(this);
        //设置打开系统开始时默认选第一个
        img_device_state.performClick();
        img_setting.setOnClickListener(this);
        img_timelypreview.setOnClickListener(this);
        img_takephoto.setOnClickListener(this);
        img_takevideo.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        //恢复图标的初始状态
        clearIcon();

        //获取FragmentManager
        FragmentManager manager = getFragmentManager();
        //开启fragment事务
        FragmentTransaction transaction = manager.beginTransaction();

        switch(v.getId()){
            case R.id.imgb_device_state:
                if(deviceStateFragment == null)
                {
                    deviceStateFragment = new DeviceStateFragment();
                }
                transaction.replace(R.id.fragment_container, deviceStateFragment);
                //设置点击后的图像
                img_device_state.setImageResource(R.drawable.ic_baseline_devices);
                break;

            case R.id.imgb_setting:
                if (settingFragment == null)
                {
                    settingFragment = new SettingsFragment();
                }
                transaction.replace(R.id.fragment_container, settingFragment);
                //设置点击后的图像
                img_setting.setImageResource(R.drawable.ic_baseline_settings);
                break;

            case R.id.imgb_timelypreview:
                if(timelyPreviewFragment == null)
                {
                    timelyPreviewFragment = new TimelyPreviewFragment();
                }
                transaction.replace(R.id.fragment_container, timelyPreviewFragment);
                //设置点击后的图像
                img_timelypreview.setImageResource(R.drawable.ic_baseline_preview);
                break;

            case R.id.imgb_takephoto:
                if(takePhotoFragment == null)
                {
                    takePhotoFragment = new TakePhotoFragment();
                }
                transaction.replace(R.id.fragment_container, takePhotoFragment);
                //设置点击后的图像
                img_takephoto.setImageResource(R.drawable.ic_baseline_photo_camera);
                break;

            case R.id.imgb_takevideo:
                if(takeVideoFragment == null)
                {
                    takeVideoFragment = new TakeVideoFragment();
                }
                transaction.replace(R.id.fragment_container, takeVideoFragment);
                //设置点击后的图像
                img_takevideo.setImageResource(R.drawable.ic_baseline_videocam);
                break;
        }
        transaction.commit();
    }

    //恢复图标初始状态的函数
    private void clearIcon(){
        img_device_state.setImageResource(R.drawable.ic_baseline_devices_24);
        img_setting.setImageResource(R.drawable.ic_baseline_settings_24);
        img_timelypreview.setImageResource(R.drawable.ic_baseline_preview_24);
        img_takephoto.setImageResource(R.drawable.ic_baseline_photo_camera_24);
        img_takevideo.setImageResource(R.drawable.ic_baseline_videocam_24);

    }

最后:我使用了五个ImageButton,文章是一个ImageButton的例子,自己加多几个就可以了。

应注意的是在Fragment里导包的时候应该是

import android.app.Fragment;


网站公告

今日签到

点亮在社区的每一天
去签到