Fragment实例之微信界面

今天我们来看看微信界面是怎么实现的。

（一）首先，我们先在主布局XML中实现三部分：

第一个部分：<include layout="@layout/activity_top"></include>，这里面用<include.../>元素设计出了微信界面头部的XML，这里面也是一个XML文件，开发人员可以随意在里面制作界面。

第二部分：运用<FrameLayout.../>元素构建一个容器，里面可以放入不同的frameLayout，创建容器的ID，让你能在java代码中找到。当然，你也可以使用ViewFlipper充当第二部分，采用 手势滑动。viewFlipper这里不作详解，以后会介绍。

第三部分：<includelayout="@layout/activity_bottom"></include>这里又运用了<include.../>元素制作微信底部。

下面是整个主XML布局文件：

<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.wc.wei_xin.MainActivity"> <include layout="@layout/activity_top" ></include> <FrameLayout android:id="@+id/frame_content" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <include layout="@layout/activity_bottom"></include> </LinearLayout>

（二）创建微信底部的XML文件：

这里面使用了<LinearLayout.../>元素，里面包含了一个ImageView，这是微信的底部图片，图片的下面用一个TextView来显示文字。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="45dp" android:layout_gravity="bottom"> <LinearLayout android:id="@+id/line1" android:orientation="vertical" android:layout_weight="1" android:gravity="center" android:layout_width="wrap_content" android:layout_height="match_parent"> <ImageView android:layout_weight="1" android:id="@+id/ic_1" android:src="@drawable/weixin" android:layout_width="wrap_content" android:layout_height="match_parent" /> <TextView android:text="微信" android:id="@+id/textview_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11dp" /> </LinearLayout> <LinearLayout android:id="@+id/line2" android:orientation="vertical" android:layout_weight="1" android:gravity="center" android:layout_width="wrap_content" android:layout_height="match_parent"> <ImageView android:layout_weight="1" android:id="@+id/ic_2" android:src="@drawable/tongxin" android:layout_width="wrap_content" android:layout_height="match_parent" /> <TextView android:text="通讯录" android:id="@+id/textview_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11dp" /> </LinearLayout> <LinearLayout android:id="@+id/line3" android:orientation="vertical" android:layout_weight="1" android:gravity="center" android:layout_width="wrap_content" android:layout_height="match_parent"> <ImageView android:layout_weight="1" android:id="@+id/ic_3" android:src="@drawable/faxian" android:layout_width="wrap_content" android:layout_height="match_parent" /> <TextView android:text="通讯录" android:id="@+id/textview_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11dp" /> </LinearLayout> <LinearLayout android:id="@+id/line4" android:orientation="vertical" android:layout_weight="1" android:gravity="center" android:layout_width="wrap_content" android:layout_height="match_parent"> <ImageView android:layout_weight="1" android:id="@+id/ic_04" android:src="@drawable/wo" android:layout_width="wrap_content" android:layout_height="match_parent" /> <TextView android:text="我" android:id="@+id/textview_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11dp" /> </LinearLayout> </LinearLayout> （三）然后就是创建4个Fragment让他继承基类，然后实现onCreateView()方法返回一个视图。同时你也要创建相应的布局加载文件 weixin_layout ,布局文件里面可以创作很多你的想法，这里不给出。

public class Weixin extends Fragment { public Weixin(){}; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.weixin_layout,container,false); } } （四）编写主Activity的代码： 这里面使用了上一章介绍的Fragment的基础知识，可以去看下。由于篇幅过长， 我在代码的每块做了详细介绍。 public class MainActivity extends AppCompatActivity implements View.OnClickListener { //Fragment private Fragment Weixin; private Fragment Tongxin; private Fragment Faxian; private Fragment Wo; //底端菜单栏LinearLayout private LinearLayout linear_1; private LinearLayout linear_2; private LinearLayout linear_3; private LinearLayout linear_4; //底端菜单栏Imageview private ImageView iv_1; private ImageView iv_2; private ImageView iv_3; private ImageView iv_4; //底端菜单栏textView private TextView tv_1; private TextView tv_2; private TextView tv_3; private TextView tv_4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化各个控件 InitView(); //初始化点击触发事件 InitEvent(); //初始化Fragment InitFragment(1); //将第一个图标设置为选中状态 iv_1.setImageResource(R.drawable.weixin); } private void InitView(){ //找到XML文件中的LinearLayout linear_1 = (LinearLayout) findViewById(R.id.line1); linear_2 = (LinearLayout) findViewById(R.id.line2); linear_3 = (LinearLayout) findViewById(R.id.line3); linear_4= (LinearLayout) findViewById(R.id.line4); //绑定XML文件中的ImageView iv_1 = (ImageView) findViewById(R.id.ic_1); iv_2 = (ImageView) findViewById(R.id.ic_2); iv_3= (ImageView) findViewById(R.id.ic_3); iv_4= (ImageView) findViewById(R.id.ic_04); //绑定XML文件中的TextView tv_1 = (TextView) findViewById(R.id.textview_1);  tv_2 = (TextView) findViewById(R.id.textview_2);   tv_3 = (TextView) findViewById(R.id.textview_3);   tv_4 = (TextView) findViewById(R.id.textview_4);  }  private void InitFragment(int index){//得到Fragment的布局管理器，目的是开启FragmentTransaction FragmentManager fragmentManager = getSupportFragmentManager(); android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction(); //使用transaction里面的add（）方法，向FragmentLayout容器里添加Fragment，第一个ID是容器的id。 hideAllFragment(transaction); switch (index){ case 1: if (Weixin== null){ Weixin = new Weixin(); transaction.add(R.id.frame_content,Weixin); } else{ transaction.show(Weixin); } break; case 2: if (Tongxin== null){ Tongxin = new Tongxin(); transaction.add(R.id.frame_content,Tongxin); } else{ transaction.show(Tongxin); } break; case 3: if (Faxian== null){ Faxian =new Faxian(); transaction.add(R.id.frame_content,Faxian); } else{ transaction.show(Faxian); } break; case 4: if (Wo== null){ Wo = new Wo(); transaction.add(R.id.frame_content,Wo); } else{ transaction.show(Wo); } break; } transaction.commit(); } private void InitEvent(){//把注册监听器放在一个方法里，有利于后期的维护。 linear_1.setOnClickListener(this); linear_2.setOnClickListener(this); linear_3.setOnClickListener(this); linear_4.setOnClickListener(this); } @Override public void onClick(View view) { //单击事件，单击微信底部的LinearLayout，则呈现不同的Fragment switch(view.getId()){ case R.id.line1: InitFragment(1); break; case R.id.line2: InitFragment(2); break; case R.id.line3: InitFragment(3); break; case R.id.line4: InitFragment(4); break; } } private void hideAllFragment(android.support.v4.app.FragmentTransaction transaction){//使用transaction的隐藏方法，使Fragment隐藏。 if (Weixin!= null){ transaction.hide(Weixin); } if (Tongxin!= null){ transaction.hide(Tongxin); } if (Faxian!= null){ transaction.hide(Faxian); } if (Wo!= null){ transaction.hide(Wo); } }