仿美团、京东、饿了么点击左边列表 右边切换布局UI

实现思路：一个activity中添加2个fragment，左边的frgament继承自ListFragment，右边的frgament只是做布局UI上的改变直接继承自Fragment，当点击左边列表的某一项item右边的fragment显示对应的信息

MainActivity中布局文件xml中主要是放置两个FrameLayout：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context="com.example.wuke02.listfragmentdemo.MainActivity">

    <FrameLayout

        android:id="@+id/left_fragment"

        android:layout_width="80dp"

        android:layout_height="match_parent"

        android:background="@color/green">

    </FrameLayout>

    <FrameLayout

        android:id="@+id/right_fragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="horizontal"

        android:background="@color/blue"></FrameLayout>

</LinearLayout>

分别是给fragment分配显示空间大小。

MainActivity中需处理的逻辑是先添加左边的fragment:

FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.left_fragment,new LeftListFragment());
ft.commit();

左边的列表Fragment继承自ListFragment，创建一个列表要显示数据的数据源array绑定适配器，重写onListItemClick监听方法

定义一个接口，onClickCallBack监听单行item的点击事件，主要实现代码:

public LeftFragment extends ListFragment{

  private String[] array = new String[]{"音乐","视频","联系人","短信"};

    public interface OnItemClickCallBack{
        void onClickCallBack(int position);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,
                array);
        setListAdapter(adapter);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);
        OnItemClickCallBack callBack = (OnItemClickCallBack) getActivity();
        callBack.onClickCallBack(position);
    }

}

MainActivity实现OnItemClickCallBack接口，重写抽象方法onClickCallBack()；在此方法中替换右边fragment，并将点击某一项item的position传值到右边的fragment，主要代码:

@Override
public void onClickCallBack(int position) {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.right_fragment,new RightFragment().newInstance(position));
ft.commit();
}

右边的fragment通过SetArguments和getArguments获知左边列表的那一项被点击了，做出对应的事件处理

右边的fragment处理代码:

public class RightFragment extends Fragment {

    private View rightView;

    private ListView listView;

    private List<String> mList = new ArrayList<>();

    private ContentResolver contentResolver;

    public RightFragment newInstance(int position){

        RightFragment f = new RightFragment();

        Bundle bundle = new Bundle();

        bundle.putInt("position",position);

        f.setArguments(bundle);

        return f;

    }

@Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        rightView = inflater.inflate(R.layout.right_fragment,null);

        return rightView;

    }

    @Override

    public void onActivityCreated(@Nullable Bundle savedInstanceState) {

        super.onActivityCreated(savedInstanceState);

        listView = ((ListView) rightView.findViewById(R.id.right_listView));

        contentResolver = getActivity().getContentResolver();

        Bundle bundle = getArguments();

        if (bundle != null){

            int position = bundle.getInt("position");

            initLayout(position);

        }

    }

private void initData(int flag){

        switch (flag){

            case 1:

                if (mList != null) mList.clear();

                for (int i=0;i<20;i++){

                    mList.add("11111111111111");

                }

                break;

            case 2:

                if (mList != null) mList.clear();

                for (int i=0;i<20;i++){

                    mList.add("测试测试测试");

                }

                break;

            case 3:

                if (mList != null) mList.clear();

                for (int i=0;i<20;i++){

                    mList.add("最后一项了");

                }

                break;

        }

    }

private void initLayout(int position) {

        switch (position){

            case 0:

                new MyAsyncTask().execute();

                break;

            case 1:

                initData(1);

                ArrayAdapter<String> adapter1 = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,mList);

                listView.setAdapter(adapter1);

                break;

            case 2:

                initData(2);

                ArrayAdapter<String> adapter2 = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,mList);

                listView.setAdapter(adapter2);

                break;

            case 3:

                initData(3);

                ArrayAdapter<String> adapter3 = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,mList);

                listView.setAdapter(adapter3);

                break;

            default:

                break;

        }

    }

}

在此实现点击左边列表，右边切换不同的布局UI，此demo只是简单实现思路，右边是fragment所以可以实现多种复杂布局复杂，需要源码可以留言邮箱