Android realizes left list selection item click, right fragment switch

Android realizes left list selection item click, right fragment switch

problem background

In the daily development of Android, sometimes it is necessary to display a list of options on the left side in the development page, and switch to the fragment display on the right side after clicking a different option. This article will introduce an idea for implementation.

problem analysis

The effect to be achieved is as follows:

problem solved

Not much to say, just go to the code.
(1) The activity layout file is as follows, mainly including the vertical list on the left and the fragment on the right:

<?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=".MainActivity">

    <ListView
        android:id="@+id/mListview"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#ebebeb"
        android:layout_height="match_parent"/>

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

</LinearLayout>

(2) Left list item layout, item_left_list.xml file, the code is as follows:

<?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_menu"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_line"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="#ff0000"
            android:visibility="invisible"/>

        <TextView
            android:id="@+id/tv_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"/>

    </LinearLayout>

</LinearLayout>

(3) Fragment layout on the right side, the code is as follows:

<?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">
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"/>
</LinearLayout>

(4) Corresponding to the activity file, the code is as follows:

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.FrameLayout;
import android.widget.ListView;

import com.baorant.layoutdemo.R;
import com.baorant.layoutdemo.adapter.MyAdapter;
import com.baorant.layoutdemo.fragment.ItemFragment;
import com.baorant.layoutdemo.model.User;

import java.util.ArrayList;
import java.util.List;

public class LeftListViewAcitvity extends AppCompatActivity
        implements AdapterView.OnItemClickListener {

    ListView mListview;
    FrameLayout mFrame;
    // listview的数据集合
    List<User> mList = new ArrayList();
    List<Fragment> fragmentList = new ArrayList<>();
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_left_list_view_acitvity);
        initView();
        initData();
    }

    //    初始化数据
    private void initData() {
//        初始化左侧列表数据
        initLeftListData();
//        加载fragment
        initFragment();
//        默认选中页面1
        chooseListItem(0);
    }

    //    切换fragment
    private void chooseListItem(int position) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//        隐藏所有的fragment
        for(int i = 0; i < fragmentList.size(); i++ ){
            Fragment fragment = fragmentList.get(i);
            transaction.hide(fragment);
        }
        transaction.show(fragmentList.get(position));
        transaction.commit();
    }

    private void initFragment() {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        ItemFragment showFragment = new ItemFragment();
        for(int i = 0; i < mList.size(); i++){
            Fragment fragment = showFragment.getShowFragment(mList.get(i).getName());
            fragmentList.add(fragment);
        }
        for(int i = 0; i < fragmentList.size(); i++){
            transaction.add(R.id.mFrame,fragmentList.get(i));
        }
        transaction.commit();
    }

    private void initLeftListData() {
        for(int i = 1; i <= 10; i++){
            mList.add(new User("页面" + i));
        }
        adapter = new MyAdapter(mList,this);
        mListview.setAdapter(adapter);
        mListview.setOnItemClickListener(this);
    }

    //  控件初始化
    private void initView() {
        mListview = findViewById(R.id.mListview);
        mFrame = findViewById(R.id.mFrame);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//        点击item切换fragment
        chooseListItem(position);
        for(int i = 0; i < mList.size(); i++){
//            先把所有的item标记为未被选中
            mList.get(i).setChecked(false);
        }
//        找出被选中的item，把user中的ischecked属性改为true
        mList.get(position).setChecked(true);
//        刷新适配器
        adapter.notifyDataSetChanged();
    }
}

(5) The adapter file corresponding to the list on the left, the code is as follows:

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.baorant.layoutdemo.R;
import com.baorant.layoutdemo.model.User;

import java.util.List;

public class MyAdapter extends BaseAdapter {
    List<User> mList;
    Context context;

    public MyAdapter(List<User> mList, Context context) {
        this.mList = mList;
        this.context = context;
    }

    @Override
    public int getCount() {
        return mList != null ? mList.size() : 0;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

    @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.item_left_list, null);
            holder.tvText = convertView.findViewById(R.id.tv_text);
            holder.tvLine = convertView.findViewById(R.id.tv_line);
            holder.llMenu = convertView.findViewById(R.id.ll_menu);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }

        if(mList.get(position).isChecked()){
            holder.tvText.setTextColor(Color.RED);
            holder.tvLine.setVisibility(View.VISIBLE);
            holder.llMenu.setBackgroundColor(Color.WHITE);
        }else{
            holder.tvText.setTextColor(Color.BLACK);
            holder.tvLine.setVisibility(View.GONE);
            holder.llMenu.setBackgroundColor(Color.parseColor("#ebebeb"));
        }
        String name = mList.get(position).getName();
        holder.tvText.setText(name);
        return convertView;
    }
    class ViewHolder {
        LinearLayout llMenu;
        TextView tvText;
        TextView tvLine;
    }
}

(6) Defined fragment, the code is as follows:

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.baorant.layoutdemo.R;

public class ItemFragment extends Fragment {
    TextView tvText;
    private String name;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle = getArguments();
        if(bundle != null){
            name = bundle.getString("name");
        }
    }

    public static Fragment getShowFragment(String name){
        ItemFragment showFragment = new ItemFragment();
        Bundle bundle = new Bundle();
        bundle.putString("name",name);
        showFragment.setArguments(bundle);
        return showFragment;
    }

    @SuppressLint("MissingInflatedId")
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_show,null);
        tvText = view.findViewById(R.id.tv_content);
        tvText.setText(name);
        return view;
    }
}

conclusion of issue

This article introduces a solution for displaying list options on the left side and switching fragments on the right side after clicking different options in Android development. Interested students can further study in depth.