Android Fragment实现仿微信View切换

2018-10-14 19:11:17 XXM

最近在回顾之前学习过的Android开发知识,把一些做的一些小案例重新回顾了一遍.

先上效果图

WX20181014-191523@2x.pngWX20181014-191604@2x.png

这里主要采用了Fragment来进行实现,

我们需要准备5个布局文件,home_layout.xml,tab1.xml,tab2.xml,tab3.xml,tab4.xml

home_layout,主要用来放置顶部的按钮以及FrameLayout

具体代码实现如下:

<?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/colorWhite"
    tools:context="com.example.first.myapplication.MainActivity"
    >

    <FrameLayout
        android:id="@+id/content_frame_layout"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
    </FrameLayout>

    <include layout="@layout/bottom_layout">


    </include>

</LinearLayout>

然后我们需要创建4个tab_layout分别对应4个Fragment

package com.example.first.myapplication;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.View;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class WeiXinFragment extends Fragment {
    private ListView messageList;
    private SimpleAdapter simpleAdapter;
    private List<Map<String,Object>> dataList;
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //引入对应的layout
        View view = inflater.inflate(R.layout.home_layout, container, false);
        messageList = view.findViewById(R.id.messageList);
        loadMesasge();
        return view;
    }

    private void loadMesasge(){
        //消息组件id        dataList = new ArrayList<Map<String, Object>>();
        int[] messageObj = new int[]{R.id.avatar,R.id.name,R.id.messageContent,R.id.sendTime};
        String[] messageObjKey = new String[]{"avatar","name","content","sendTime"};
        simpleAdapter = new SimpleAdapter(getActivity(),fillData(),R.layout.message_item,messageObjKey,messageObj);
        messageList.setAdapter(simpleAdapter);
    }

    private List<Map<String,Object>> fillData(){
        for (int i=0;i<20;i++){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("avatar",R.drawable.avatar_1);
            map.put("name","XXM");
            map.put("content","快点睡觉");
            map.put("sendTime","04:30");
            dataList.add(map);
        }
        return dataList;
    }
}

四个Fragment建立好后,开始通过java来实现我们的逻辑功能。

我们需要初始化一下四个Button 以及 Fragment

//初始化顶部4个tab按钮private LinearLayout home_layout;
private LinearLayout address_list_layout;
private LinearLayout discover_layout;
private LinearLayout me_layout;

//初始化4个Fragmentprivate Fragment home_content;
private Fragment address_list_content;
private Fragment discover_content;
private Fragment me_content;

控件初始化完成后,开始实现切换View(具体初始化以及点击事件代码整合在最后)

首先来实现隐藏所有View这个方法

/**
     * 隐藏Fragment
     * @param transaction
     */
    private void hideFragment(FragmentTransaction transaction){
        if(home_content != null){
            transaction.hide(home_content);
        }
        if(address_list_content != null){
            transaction.hide(address_list_content);
        }
        if(discover_content != null){
            transaction.hide(discover_content);
        }
        if(me_content != null){
            transaction.hide(me_content);
        }
    }

隐藏完成后,开始实现切换view的功能

private void showFragment(int index){
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction); //每次点击之前先隐藏掉所有的Fragment
        //匹配对应的Fragment
        switch (index){
            case 0:
                if(home_content == null){
                    home_content = new WeiXinFragment();
                    //将Fragment添加到活动中
                    transaction.add(R.id.content_frame_layout,home_content);
                }else{
                    transaction.show(home_content);
                }
                break;
            case 1:
                if(address_list_content == null){
                    address_list_content = new AddressListFragment();
                    //将Fragment添加到活动中
                    transaction.add(R.id.content_frame_layout,address_list_content);
                }else{
                    transaction.show(address_list_content);
                }
                break;
            case 2:
                if(discover_content == null){
                    discover_content = new DisCoverFragment();
                    //将Fragment添加到活动中
                    transaction.add(R.id.content_frame_layout,discover_content);
                }else{
                    transaction.show(discover_content);
                }
                break;
            case 3:
                if(me_content == null){
                    me_content = new MeFragment();
                    //将Fragment添加到活动中
                    transaction.add(R.id.content_frame_layout,me_content);
                }else{
                    transaction.show(me_content);
                }
                break;
        }
        transaction.commit();//提交事务
    }

编写完成后,通过点击按钮点击事件调用

@Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.home_layout:
                showFragment(0);
                break;
            case R.id.address_list_layout:
                showFragment(1);
                break;
            case R.id.discover_layout:
                showFragment(2);
                break;
            case R.id.me_layout:
                showFragment(3);
                break;
        }
    }

这样就可以完成了仿微信的view切换功能,代码中还存在许多可以优化的地方,下次改进.

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容