安卓仿京东商品分类（listview+fragment）

最近做项目，设置界面是使用类似京东商品分类的界面，就记录下来。下面就看看效果图

效果图：

   

下面介绍具体的实现：

1.fragment的基类

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Fragment 基类
 */
public abstract class BaseFragment extends Fragment {

    protected Context mContext;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mContext = getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return initView();

    }

    /**
     * 实现子类特有的UI
     * @return
     */
    protected abstract View initView();


    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        initData();
    }

    /**
     * 子类初始化数据
     */
    protected void initData(){

    }


}

 

2.listview的适配器，adapter类

public class MyAdapter extends BaseAdapter {
    private Context context;
    private String[] mData;

    private int defItem;    //声明默认选中的项

    /**
     * 适配器中添加这个方法
     * 默认选中项
     * @param position
     */
    public void setDefSelect(int position) {
        this.defItem = position;
        notifyDataSetChanged();
    }

    public MyAdapter(String[] mData, Context context) {
        this.context = context;
        this.mData = mData;
    }

    @Override
    public int getCount() {
        return mData.length;
    }

    @Override
    public Object getItem(int position) {
        return mData[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null){
            holder = new ViewHolder();
            convertView = LayoutInflater.from(context).inflate(R.layout.layout_face_setting_item,null);
            holder.mListViewText = convertView.findViewById(R.id.mListViewText);
            holder.llBg = convertView.findViewById(R.id.ll_bg);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder) convertView.getTag();
        }

        String name = mData[position];
        holder.mListViewText.setText(name);


        //true和false用来解决复用问题的，如果当前标记为选中状态那么item字体颜色变红，红色竖条显示，item背景色变白
        if (defItem == position){

            holder.mListViewText.setTextColor(Color.WHITE);
            holder.llBg.setBackgroundColor(Color.BLUE);


        } else {//如果不是被选中的状态，item字体颜色变黑，红色竖条隐藏，item背景还变灰
            holder.mListViewText.setTextColor(Color.BLACK);
            holder.llBg.setBackgroundColor(Color.parseColor("#EBEBEB"));
        }

        return convertView;
    }

    class ViewHolder{
        public TextView mListViewText;
        public LinearLayout llBg;
    }
}

 

3.adapter中需要的布局 layout_face_setting_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:id="@+id/ll_bg"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_margin="10dp"
        >

        <TextView
            android:gravity="center"
            android:id="@+id/mListViewText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="20sp"
            android:text="概览信息"
            />

    </LinearLayout>

</LinearLayout>

 

4.MainActivity类

/**
 *  author:Wu_zpeng
 */
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {

    private ListView lvSetting;

    private List<BaseFragment> mBaseFragment;

    /**
     * 选中fragment对应的位置
     */
    private int FragmentPosition = 0;

    /**
     * 上次切换的fragment
     */
    private Fragment mContent;

    private String[] strs = {"概览信息", "人脸演示", "系统设置", "门禁设置", "识别算法", "设备自检"};

    MyAdapter myAdapter;

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

        //初始化View
        initView();

        //初始化fragment
        initFragment();

        //设置listview适配器
        initAdapter();
    }

    private void initAdapter(){

        myAdapter = new MyAdapter(strs, getBaseContext());

        lvSetting.setAdapter(myAdapter);

        myAdapter.setDefSelect(0);//设置默认选中第一项

        BaseFragment to = getFragment();
        //替换到Fragment
        switchFrament(mContent,to);

        lvSetting.setOnItemClickListener(this);
    }


    /**
     *
     * @param from  刚显示的fragment，马上就要被隐藏了
     * @param to    马上要切换到的fragment，一会要显示
     */
    private void switchFrament(Fragment from, Fragment to){
        if (from != to){    //切换
            mContent = to;
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();    //开始事务
            //判断to有没有被添加
            if ( !to.isAdded()){    //to没有被添加
                //1.from隐藏
                if (from != null){
                    ft.hide(from);
                }
                //2.添加to
                if (to != null){
                    ft.add(R.id.mFrame, to).commit();
                }
            }else { //to已经被添加
                //1.from隐藏
                if (from != null){
                    ft.hide(from);
                }
                //2.显示to
                if (to != null){
                    ft.show(to).commit();
                }
            }
        }
    }


    /**
     * 根据位置得到对应的fragment
     * @return
     */
    private BaseFragment getFragment(){
        BaseFragment fragment = mBaseFragment.get(FragmentPosition);
        return fragment;
    }

    private void initFragment(){
        mBaseFragment = new ArrayList<>();
        mBaseFragment.add(new InfoFragment());  //概览信息fragment
        mBaseFragment.add(new FacedemoFragment());  //人脸演示fragment
        mBaseFragment.add(new SysSettingFragment());  //系统设置fragment
        mBaseFragment.add(new AccessSettingFragment());  //门禁设置fragment
        mBaseFragment.add(new RecoAlgFragment());       //识别算法fragment
        mBaseFragment.add(new DeviceMyselfFragment());  //设备自检fragment

    }

    private void initView(){
        lvSetting = findViewById(R.id.lv_setting_items);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

        myAdapter.setDefSelect(position);//更改选中项

        FragmentPosition = position; //当默认为第一条时，设置默认Position = 0 即可

        //根据位置得到对应的Fragment
        BaseFragment to = getFragment();
        //替换到Fragment
        switchFrament(mContent,to);
    }
}

 

5.对应的main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >

    <ListView
        android:id="@+id/lv_setting_items"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:scrollbars="none"

        />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#cdcdcd"
        />

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

</LinearLayout>

 

以上的代码基本都可以就这功能完成了，另外的几个fragment是点击listview中的item所要切换的界面。

该代码上传到资源中了，需要该代码的兄弟可以去下载。

资源地址：https://download.csdn.net/download/Wu_zpeng/11972676

 

没有积分的兄弟可以去GitHub下载。

GitHub地址：https://github.com/Wu-zpeng/ListViewSettingDemo