#android 利用fragment实现模仿微信的实例

这里写图片描述

图片中给出了实例的效果，在点击下方的按钮时，上半部分会自动切换成对应的内容。这里使用的技术是fragment。

想必大家对fragment已经有所了解，就算不清楚，百度也有详细的介绍。在这里就着重介绍实现的过程。

首先，拿其中的一个部分“首页”来讲：
这里写图片描述
上面一部分是fragment，下面则是相对固定的按钮区。也就是说，当点击按钮时，切换的只是上半部分内容。所以，每一个fragment都有一个自己的xml布局文件。就想图中所示的，“首页”这个fragment的xml文件就是由一个textview构成。
完成fragment的xml文件后，需要定义一个对应的java类来找到它，比如：首页对应的类是homeFragment.java。注意，这个类需要继承fragment，并且每一个这样继承fragment的类都需要重写其onCreateView的方法。具体代码是：

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.cerian.marcon.R;

/**
 * Created by Cerian on 2017/7/9.
 */

public class homeFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,  ViewGroup container,
                             Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_home, null);
        //找到按钮前要加view.


        return view;
    }
}

完成到这步时，每一个fragment的内容就已经完成了。接下来要做的是，将每一个fragment与一个页面绑定并在其上显示。这里我用了一个menufunction.xml
这里写图片描述

代码是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/rl_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
        android:id="@+id/ll_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>


    <LinearLayout
       android:showDividers="beginning|end|middle"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageView
            android:id="@+id/ig_home"
            android:clickable="true"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/homepage1"/>

        <ImageView
            android:id="@+id/ig_lib"
            android:clickable="true"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/library1"/>

        <ImageView
            android:id="@+id/ig_my"
            android:clickable="true"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/my1"/>


    </LinearLayout>

</RelativeLayout>

在这个布局中，上面的LinearLayout是用来显示fragment内容的，下面的是按钮。

然后，在这个menufunction.xml的对应java类中，找到定义好的fragment，并显示。主要的思想是：①拿到一个管理者②开启一个事务③替换fragment内容④提交，注意，这里的第四步很容易被遗忘。

代码是：

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;

import com.example.cerian.marcon.fragment.homeFragment;
import com.example.cerian.marcon.fragment.libFragment;
import com.example.cerian.marcon.fragment.myFragment;

/**
 * Created by Cerian on 2017/7/9.
 */

public class home extends AppCompatActivity implements View.OnClickListener {

    private ImageView ig_home, ig_lib, ig_my;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menufunction);

        ig_home = (ImageView) findViewById(R.id.ig_home);
        ig_lib = (ImageView) findViewById(R.id.ig_lib);
        ig_my = (ImageView) findViewById(R.id.ig_my);

        ig_home.setOnClickListener(this);
        ig_lib.setOnClickListener(this);
        ig_my.setOnClickListener(this);

/**
 * 第一步：拿到管理者
 * 第二步：开启事务
 * 第三步：替换
 * 第四步：提交
 */
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction beginTransaction = fragmentManager.beginTransaction();
        beginTransaction.replace(R.id.ll_layout, new homeFragment());
        ig_home.setImageResource(R.mipmap.homepage2);
        beginTransaction.commit();



    }

    @Override
    public void onClick(View view) {

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction beginTransaction = fragmentManager.beginTransaction();

        switch (view.getId()) {
            case R.id.ig_home:  //点击的是主页

                beginTransaction.replace(R.id.ll_layout, new homeFragment());
                ig_home.setImageResource(R.mipmap.homepage2);
                ig_my.setImageResource(R.mipmap.my1);
                ig_lib.setImageResource(R.mipmap.library1);
                break;

            case R.id.ig_lib:  //点击的是收藏
                beginTransaction.replace(R.id.ll_layout, new libFragment());
                ig_home.setImageResource(R.mipmap.homepage1);
                ig_my.setImageResource(R.mipmap.my1);
                ig_lib.setImageResource(R.mipmap.library2);
                break;

            case R.id.ig_my:  //点击的是我的
                beginTransaction.replace(R.id.ll_layout, new myFragment());
                ig_home.setImageResource(R.mipmap.homepage1);
                ig_my.setImageResource(R.mipmap.my2);
                ig_lib.setImageResource(R.mipmap.library1);
                break;

        }
        beginTransaction.commit();

    }
}

其中，因为涉及到的点击事件有点多且相似，我用到了一个特殊的写法，也就是setonclicklistener（this），参数用了this，并重新定义了一个click方法。注意：这样写，必须要继承一个clicklistener的接口。
最后，提交就ok。
效果是：
这里写图片描述

这就是利用fragment来模拟微信界面。
以上内容，如有不足之处，还望多多批评指正，谢谢。

扫描二维码关注公众号，回复： 5605333 查看本文章

#android 利用fragment实现模仿微信的实例

猜你喜欢