第一步:在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;