目的：
- 设计四个界面
- 设计四个图片按钮实现界面跳转
- 按钮按动后出现变化
工具：
Android Stutid
原理：
设计多个XML页面，使用FrameLayout进行简单布局，并使用Fragment进行界面切换。
结果：
具体过程：
UI设计
设计的期望是实现类微信四个界面的切换，则至少包含四个页面，一个顶部top，一个底部bottom，具体如下：
top页面
在layout目录下新建一个XML文件，由于top页面只显示一个内容它只需要一个TextView，对TextView的处理如下：
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/app_name"
ndroid:textColor="#ffffff"
android:textSize="20sp" />
其中layout_gravity控制文本的位置，具体用法可以自行搜索。若设置了这个条件，文本内容还是未处于中间位置，则可能是LinearLayout的orientation未设置，设置为vertical(垂直)。
buttom页面
在layout目录下新建一个XML文件，由于bottom显示四个按钮，且要显示图片变化，故需要四个ImageButton（带图片的按钮），以及对按钮的解释TextView（四个），而一个ImageButton和一个TextView要包含在一起，则需要四个LinearLayout，对其中一个LinearLayout处理如下：
<LinearLayout
android:id="@+id/id_tab_movie"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_movie_img"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
android:src="@drawable/movie1"
tools:src="@drawable/movie1"
tools:srcCompat="@drawable/movie1" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="38dp"
android:gravity="center_horizontal"
android:clickable="false"
android:text="@string/movie"
android:textColor="#ffffff"
android:textSize="24sp" /><
/LinearLayout>
其中每个LinearLayout以及其中的ImageButton和TextView都必须要有一个id，以便后续的调用处理，且四个按键要进行平铺，则需要对子LinearLayout进行限制，此时需要用weight布局，并使其宽度（width）为0，而对ImageButton和TextView的处理可看个人喜好，例如：选择的图标，字体大小等。若选择的图标太大无法显示全部，可使用scaleType对图片进行处理，具体用法可自行搜索。若有什么警告信息，按其要求处理即可。
四个页面
在layout目录下新建四个XML文件，目前每个文件内只包含一个TextView，对每个TextView处理如下：（以其中一个为例）
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/movie_value"
android:textSize="30sp" />
这个可按自己喜好设计。
此时，视图设计结束，需要对四个视图进行压缩，并使其与top和bottom相平，此时需要用到include和FrameLayout。include的作用是在此XML文件上添加其他XML文件，FrameLayout的作用是将视图进行压缩。对activity_main.xml中LinearLayout的修改如下：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="@layout/top"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"/>
</LinearLayout>
由于，后面要对其内容进行控制，故需要加上一个id。而top和bottom已经占用了一定高度，此时可以用weight进行处理。
至此，界面设计完成，然后要实现界面的跳转以及按钮的变换。
而要实现界面的跳转则需要用Fragement，用四个Fragment对四个界面进行压缩，跳转界面即是跳转Fragment。在java.com.example.myapplication目录下新建四个Fragment.java文件，名字可按自己喜好。其作用是，将自己写的四个XML文件变为对象，通过java对对象的控制以控制XML文件实现想要的结果。对文件的主要代码更改如下：（以其中一个为例为例）
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.music, container, false);
}
此外，还要对MainActivity.java进行更改。
用Fragment进行切换需要一个控制器，用FragmentManager定义，而Fragment切换需要在FrameLayout中进行，代码如下：
private void initFragment(){
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.id_content,mmovie);
transaction.add(R.id.id_content,mmusic);
transaction.add(R.id.id_content,mfriend);
transaction.add(R.id.id_content,msetting);
transaction.commit();
}
然后是对图标的处理，之前每个LinearLayout都有一个id，而点击切换即是对id的识别并改变图片，代码如下：
private void selectfragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hidefragment(transaction);
switch (i){
case 0:
transaction.show(mmovie);
mimgmovie.setImageResource(R.drawable.movie2);
break;
case 1:
transaction.show(mmusic);
mimgmusic.setImageResource(R.drawable.music2);
break;
case 2:
transaction.show(mfriend);
mimgfriend.setImageResource(R.drawable.friend2);
break;
case 3:
transaction.show(msetting);
mimgset.setImageResource(R.drawable.setting2);
break;
default:
break; }
transaction.commit();
}
public void onClick(View v) {
resetimg(); switch (v.getId()) {
case R.id.id_tab_movie:
selectfragment(0);
break;
case R.id.id_tab_music:
selectfragment(1);
break;
case R.id.id_tab_friend:
selectfragment(2);
break;
case R.id.id_tab_set:
selectfragment(3);
break;
default:
break;
}
}
其中，每次点击时都要变换图片而其他图片不变，此时需要一个将图片复原的代码，如下：
public void resetimg(){
mimgmovie.setImageResource(R.drawable.movie1);
mimgmusic.setImageResource(R.drawable.music1);
mimgfriend.setImageResource(R.drawable.friend1);
mimgset.setImageResource(R.drawable.setting1);
}
最后在MainActivity后加上一个全活动的点击监听，即implements View.OnClickListener
至此，设计完成。
