一、布局页面添加
1.添加四个切换页面的布局
(1)四个切换页面的布局(四个页面相同):
<?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="match_parent"
android:background="@color/aquamarine"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个页面"
android:textSize="22sp" />
</LinearLayout>
(2)相应Fragment的实现类:
public class FirstFragment extends Fragment {
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg1, container, false);
return view;
}
}
(3)如图:
2.添加主页面的布局(底部导航按钮布局和顶部标题布局直接写在该布局)
(1)主布局页面
<?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"
android:orientation="vertical"
android:background="@color/colorAccent"
tools:context=".MainActivity">
<include
android:id="@+id/show_main_title"
layout="@layout/title_layout"
/>
<!-- 此处添加Fragment布局 -->
<FrameLayout
android:id="@+id/fragment_buju"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/viewfinder_mask"
>
</FrameLayout>
<!-- 关于试题逻辑的相关功能布局暂时屏蔽
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:background="@color/whitesmoke">
<TextView
android:id="@+id/question_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp">
</TextView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/true_button"
android:textAllCaps="false"/>
<Button
android:id="@+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/false_button"
android:textAllCaps="false"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/up_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/arrow_left"
/>
<ImageButton
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/arrow_right"
/>
</LinearLayout>
</LinearLayout>
-->
<!-- 底部四个导航菜单栏 -->
<!-- 暂时先将该段底部实例注释掉,后期再添加 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/white">
<RelativeLayout
android:id="@+id/first_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_compass"/>
<TextView
android:id="@+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:textColor="#7597B3"
android:text="消息"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/second_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_agenda"/>
<TextView
android:id="@+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:textColor="#7597B3"
android:text="发现"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/third_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_edit"/>
<TextView
android:id="@+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:textColor="#7597B3"
android:text="记录"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/fourth_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_myplaces"/>
<TextView
android:id="@+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:textColor="#7597B3"
android:text="我的"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<!-- 替代按钮导航 -->
<!--
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#FFFFFF"
android:orientation="horizontal">
<Button
android:id="@+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"/>
<Button
android:id="@+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"/>
<Button
android:id="@+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="记录"/>
<Button
android:id="@+id/button_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的"/>
</LinearLayout>
-->
</LinearLayout>
页面上添加了四个底部菜单按钮和一个通用头部布局,头部引入代码如果没有写相关布局可以先忽略去掉(删除)
关键代码:
<FrameLayout
android:id="@+id/fragment_buju"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/viewfinder_mask"
>
</FrameLayout>
这一块是引入中间需要切换的界面的代码,导航和底部菜单的布局可以随意添加;初次使用底部的导航布局建议使用四个Button按钮,且先添加两个功能按钮,方便理解。
(2)相应实现类
public class MainActivity extends Activity {
private TextView mFirstButton, mSecondFragment;
private ImageView mFirstImage, mSecondImage;
private RelativeLayout mFirstLayout, mSecondLayout;
private Fragment mFragment1;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setview();
}
// 控件点击事件方法
private void setview() {
mFirstLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 获取Fragment对象
android.app.FragmentManager fm = getFragmentManager();
// 开启一个事物
android.app.FragmentTransaction MfragmentTransactions = fm.beginTransaction();
// 将自己创建的fragment通过对象引入
FirstFragment fff = new FirstFragment();
// 向容器内加入Fragment,一般使用add或者replace方法实现,需要传入容器的id和Fragment的实例
MfragmentTransactions .replace(R.id.fragment_buju,fff);
MfragmentTransactions .commit();
}
});
mSecondLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentManager fm = getFragmentManager();
FragmentTransaction fragmentTransaction = fm.beginTransaction();
SecondFragment f2 = new SecondFragment();
fragmentTransaction.replace(R.id.fragment_buju,f2);
fragmentTransaction.commit();
}
});
}
// 初始化控件方法
private void initView(){
mFirstButton = (TextView)findViewById(R.id.first_text);
mSecondFragment = (TextView)findViewById(R.id.second_text);
mFirstImage = (ImageView)findViewById(R.id.first_image);
mSecondImage = (ImageView)findViewById(R.id.second_image);
mFirstLayout = (RelativeLayout)findViewById(R.id.first_layout);
mSecondLayout = (RelativeLayout)findViewById(R.id.second_layout);
}
}
实现方法中主要分为四步:1.引入布局(主布局);2.定义成员变量;3.初始化数据;4.定义按钮点击事件;
定义点击事件中四个点击事件的代码重复,可以优化处理,这里为了便于理解不做分开处理。
(3)如图:
二、自己学习过程遇到的问题
(1)看不懂FrameLayout布局如何引入四个页面;
XXX:这个多看几遍,自己照着写写就水到渠成的明白了;
(2)四个底部导航布局包括ImageView、TextView和RelativeLayout,不知道初始化数据需要初始化哪些,按钮点击事件写在哪个组件上;
XXX:还是对组件布局不熟悉;具体看点击事件要实现在那个地方;
(3)引入fragment时报错:
错误:不兼容的类型:FirstFragment无法转换为Fragment,
XXX:这个是Fragment使用导入包不一致导致的;导入包有两个,一个是系统内置的android.app.Fragment,一个是support-v4库中的android.support.v4.app.Fragment,但是建议使用后者;