安卓仿京東商品分類（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