Android半屏list

原创

mob64ca12e58adb 2024-09-06 05:11:12 ©著作权

文章标签 List Android xml 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e58adb的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android半屏List的实现与应用

在Android开发中，展示信息的方式千千万万，常见的如RecyclerView、ListView等。今天，我们将探讨如何创建一个“半屏List”，即在屏幕中只显示列表的一部分，并让用户通过滑动来查看更多内容。这种设计能使用户专注于特定信息，提升用户体验。

设计思路

在实现“半屏List”之前，需要确定四个核心要素：

使用RecyclerView展示列表。
设置按钮或手势使用户可以展开或收缩列表。
适配多种屏幕大小，确保良好的用户体验。
使用自定义适配器以便灵活管理数据。

类图

以下是我们将要实现的“半屏List”的类图示意：

classDiagram
    class RecyclerViewAdapter {
        +onCreateViewHolder(parent: ViewGroup, viewType: int)
        +onBindViewHolder(holder: ViewHolder, position: int)
        +getItemCount()
    }

    class MainActivity {
        -recyclerView: RecyclerView
        -adapter: RecyclerViewAdapter
        -expandButton: Button
        +onCreate(savedInstanceState: Bundle)
        +toggleList()
    }

    class ViewHolder {
        -itemView: View
        +ViewHolder(itemView: View)
        +bindData(data: String)
    }

    MainActivity --> RecyclerViewAdapter
    RecyclerViewAdapter --o ViewHolder

实现步骤

1. 创建项目

首先，创建一个新的Android项目，并选择一个基础的Activity模板。

2. 添加依赖

在你的build.gradle文件中，确保加入以下依赖：

implementation 'androidx.recyclerview:recyclerview:1.2.1'

3. 布局文件

在activity_main.xml中创建一个RecyclerView和一个按钮，用于扩展或收缩列表。

<LinearLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/expandButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Expand" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:visibility="gone" />
</LinearLayout>

4. 创建Adapter

创建一个自定义的RecyclerViewAdapter，用于填充数据。

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
    
    private List<String> data;

    public RecyclerViewAdapter(List<String> data) {
        this.data = data;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.bindData(data.get(position));
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(android.R.id.text1);
        }

        void bindData(String item) {
            textView.setText(item);
        }
    }
}

5. 主活动逻辑

在MainActivity中设置RecyclerView和按钮逻辑。

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecyclerViewAdapter adapter;
    private Button expandButton;
    private boolean isExpanded = false;

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

        recyclerView = findViewById(R.id.recyclerView);
        expandButton = findViewById(R.id.expandButton);
        
        List<String> data = new ArrayList<>();
        for(int i = 0; i < 20; i++){
            data.add("Item " + (i + 1));
        }
        
        adapter = new RecyclerViewAdapter(data);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);

        expandButton.setOnClickListener(v -> toggleList());
    }

    private void toggleList() {
        if (isExpanded) {
            // 收缩列表
            recyclerView.setVisibility(View.GONE);
            expandButton.setText("Expand");
        } else {
            // 扩展列表
            recyclerView.setVisibility(View.VISIBLE);
            expandButton.setText("Collapse");
        }
        isExpanded = !isExpanded;
    }
}