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

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

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

    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">
            android:id="@+id/left_fragment"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:background="@color/green">
   
            android:id="@+id/right_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="@color/blue">

分别是给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 adapter = new ArrayAdapter(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 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 adapter1 = new ArrayAdapter(getActivity(),android.R.layout.simple_list_item_1,mList);
                listView.setAdapter(adapter1);
                break;
            case 2:
                initData(2);
                ArrayAdapter adapter2 = new ArrayAdapter(getActivity(),android.R.layout.simple_list_item_1,mList);
                listView.setAdapter(adapter2);
                break;
            case 3:
                initData(3);
                ArrayAdapter adapter3 = new ArrayAdapter(getActivity(),android.R.layout.simple_list_item_1,mList);
                listView.setAdapter(adapter3);
                break;
            default:
                break;
        }
    }

}

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