高仿京东分类页面实现

最近写了个小demo，仿京东的分类功能实现，网上看了有些用ListView并排，个人并不推荐这种方法，自己使用ListView+Fragment实现，OK，直接上代码

首先看主页面布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:orientation="horizontal"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#EAE8E9"        android:orientation="horizontal" >        <ListView            android:id="@+id/listview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:scrollbars="none"            android:layout_weight="1.0"            android:background="@color/whilte" />        <FrameLayout            android:id="@+id/fragment_container"            android:layout_marginLeft="10dp"            android:layout_width="0dp"            android:background="@color/whilte"            android:layout_height="match_parent"            android:layout_weight="3.0" />    </LinearLayout></LinearLayout>

左边使用ListVIew，右边使用FramLayout。接着往下看页面代码：

/** * Created by modsdom on 2016/5/5. */public class ClassfityFragment extends BaseFragment implements AdapterView.OnItemClickListener {    private View view;    public static int mPosition;    private String[] strs = {"常用分类", "服饰内衣", "鞋靴", "手机", "家用电器", "数码", "电脑办公", "常用分类", "服饰内衣", "鞋靴", "手机", "家用电器", "数码", "电脑办公",            "个护化妆", "图书"};    private ListView listView;    private Classify_LeftAdapter adapter;    private GoodsFragment myFragment;    private static int totalHeight = 0;//ListView高度    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment_classify, container, false);        initView(view);        return view;    }    /**     * 初始化view     */    private void initView(View view1) {        listView = (ListView) view1.findViewById(R.id.listview);        adapter = new Classify_LeftAdapter(getActivity(), strs);        listView.setAdapter(adapter);        listView.setOnItemClickListener(this);        //创建MyFragment对象        myFragment = new GoodsFragment();        FragmentTransaction fragmentTransaction = getChildFragmentManager()                .beginTransaction();        fragmentTransaction.replace(R.id.fragment_container, myFragment);        //通过bundle传值给MyFragment        Bundle bundle = new Bundle();        bundle.putString(GoodsFragment.TAG, strs[mPosition]);        myFragment.setArguments(bundle);        fragmentTransaction.commit();    }    @Override    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {        //拿到当前位置        mPosition = position;        totalHeight = listView.getMeasuredHeight()-120;        //点击listViewitem回滚居中        listView.smoothScrollToPositionFromTop(mPosition, totalHeight / 2, 50);        //即使刷新adapter        adapter.notifyDataSetChanged();        for (int i = 0; i < strs.length; i++) {            myFragment = new GoodsFragment();            FragmentTransaction fragmentTransaction = getChildFragmentManager()                    .beginTransaction();            fragmentTransaction.replace(R.id.fragment_container, myFragment);            Bundle bundle = new Bundle();            bundle.putString(GoodsFragment.TAG, strs[position]);            myFragment.setArguments(bundle);            fragmentTransaction.commit();        }    }}

代码很简单，自定义一个适配器，给LIstView填充数据，当然我们需要和右边的Fragment通信，

//创建MyFragment对象myFragment = new GoodsFragment();FragmentTransaction fragmentTransaction = getChildFragmentManager()        .beginTransaction();fragmentTransaction.replace(R.id.fragment_container, myFragment);//通过bundle传值给GoodsFragmentBundle bundle = new Bundle();bundle.putString(GoodsFragment.TAG, strs[mPosition]);myFragment.setArguments(bundle);fragmentTransaction.commit();

,ok这里已经建立了关系，最后一点，点击ListView条目，动态改变数据

@Overridepublic void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {    //拿到当前位置    mPosition = position;    totalHeight = listView.getMeasuredHeight()-120;    //点击listViewitem回滚居中    listView.smoothScrollToPositionFromTop(mPosition, totalHeight / 2, 50);    //即使刷新adapter    adapter.notifyDataSetChanged();    for (int i = 0; i < strs.length; i++) {        myFragment = new GoodsFragment();        FragmentTransaction fragmentTransaction = getChildFragmentManager()                .beginTransaction();        fragmentTransaction.replace(R.id.fragment_container, myFragment);        Bundle bundle = new Bundle();        bundle.putString(GoodsFragment.TAG, strs[position]);        myFragment.setArguments(bundle);        fragmentTransaction.commit();    }}

解释一下这两句代码

//拿到当前位置mPosition = position;totalHeight = listView.getMeasuredHeight()-120;//点击listViewitem回滚居中listView.smoothScrollToPositionFromTop(mPosition, totalHeight / 2, 50);

细心的你一定会发现，当你点击每一个item的时候，每个item都会居中显示，那么如何做到？使用

smoothScrollToPositionFromTop(int position,int height,int time)方法，方法有三个参数，第一个，当前点击的位置，第二个，点击后
显示在哪个位置，第三个，跳动的时间。

至于fragment页面，只需要接收点击是传的参数就就可以了，更多的业务逻辑可以自行处理

@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    View view = inflater.inflate(R.layout.goodsfragment, null);    //得到传过来的值    str = getArguments().getString(TAG);    return view;}

希望对这个功能还在纠结的朋友有所帮助。