Android 列表布局切换网格布局

Posted 2021-05-16 ~~~周

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android 列表布局切换网格布局相关的知识，希望对你有一定的参考价值。

android 列表布局切换网格布局

1.界面展示
在这里插入图片描述
(1)添加网络权限

<uses-permission android:name="android.permission.INTERNET"/>

(2)添加使用到的第三方库

implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.squareup.okhttp3:okhttp:3.12.1'
debugImplementation 'com.squareup.okhttp3:logging-interceptor:3.12.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

2.界面布局
主界面activity_main.xml

<?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="vertical"
    tools:context=".MainActivity">
        <ImageView
            android:id="@+id/i1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:src="@mipmap/photo1"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/r1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </androidx.recyclerview.widget.RecyclerView>

</LinearLayout>

水平列表界面list1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="8dp"
    android:gravity="center"
    android:layout_height="150dp">
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <ImageView
        android:id="@+id/i1"
        android:layout_width="150dp"
        android:layout_height="150dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="21dp"
            android:textColor="#000"
            android:layout_marginTop="30dp"/>

        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginTop="30dp"
            android:textSize="18dp"
            android:textColor="#FF0101"/>

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

垂直列表界面list2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:orientation="vertical"
    android:layout_marginTop="8dp"
    android:gravity="center"
    android:layout_height="250dp">

    <ImageView
        android:id="@+id/i1"
        android:layout_width="match_parent"
        android:layout_height="150dp"/>
    <TextView
        android:id="@+id/t1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15dp"
        android:textColor="#000"
        android:layout_marginTop="7dp"/>

    <TextView
        android:id="@+id/t2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="18dp"
        android:layout_marginTop="8dp"
        android:textColor="#FF0101"/>

</LinearLayout>

3.功能实现
新建一个DateModel类，解析JSON数据
在这里插入图片描述

新建一个Adapter1类

package com.example.note3;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;

import java.util.List;

public class Adapter1 extends RecyclerView.Adapter<Adapter1.ViewHolder> {
    private List<DateModel.ListBean> list;
    private MainActivity mainActivity;
    private boolean isTable = true;//在activity中设值

    Adapter1(List<DateModel.ListBean> list, MainActivity mainActivity) {
        this.list = list;
        this.mainActivity = mainActivity;
    }

    @NonNull
    @Override
    public Adapter1.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = null;
        if (isTable == true) {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list1, parent, false);
        } else {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list2, parent, false);
        }
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull Adapter1.ViewHolder holder, int position) {
        DateModel.ListBean listBean = list.get(position);
        holder.t1.setText(listBean.getTitle());
        holder.t2.setText("￥"+listBean.getMinprice());
        Glide.with(mainActivity).load(listBean.getThumb()).into(holder.i1);
    }
    @Override
    public int getItemCount() {
        return list.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView t1, t2;//文本框id
        private ImageView i1;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            t1 = itemView.findViewById(R.id.t1);//绑定id
            t2 = itemView.findViewById(R.id.t2);//绑定id
            i1=itemView.findViewById(R.id.i1);
        }
    }

    public void switchStyle(boolean isTable) {
        this.isTable = isTable;
    }
}

主函数MainActivity.class

package com.example.note3;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import com.google.gson.Gson;

import java.io.IOException;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.FormBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;

public class MainActivity extends AppCompatActivity {
    private ImageView i1;
    private RecyclerView r1;
    private int b=0;
    private Adapter1 adapter;
    private GridLayoutManager gridLayoutManager;
    private int layout=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        i1=(ImageView)findViewById(R.id.i1);
        r1=(RecyclerView)findViewById(R.id.r1);
        gridLayoutManager=new GridLayoutManager(MainActivity.this,1);
        r1.setLayoutManager(gridLayoutManager);
        Request();
        i1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                b++;
                if(b%2==1)
                {
                    layout=1;
                    i1.setImageResource(R.mipmap.photo3);
                }
                else
                {
                    layout=0;
                    i1.setImageResource(R.mipmap.photo1);
                }
                Request();
            }
        });

    }
    public void getDate(DateModel dateModel1)
    {
        if(dateModel1==null)
        {
            return;
        }
        adapter=new Adapter1(dateModel1.getList(),MainActivity.this);
        r1.setAdapter(adapter);//传递数值过去
        if(layout==0)
        {
            gridLayoutManager.setSpanCount(1);//设为1列，即列表
            adapter.switchStyle(true);
        }
        else if(layout==1)
        {
            gridLayoutManager.setSpanCount(2);//设为1列，即列表
            adapter.switchStyle(false);
        }
    }
    public void Request()
    {
        String url="下载源代码可查看链接";
        OkHttpClient okHttpClient=new OkHttpClient();
        RequestBody requestBody=new FormBody.Builder()
                .add("i","1")
                .add("r","goods.get_list")
                .build();
        Request request=new Request.Builder()
                .url(url)
                .post(requestBody)
                .build();
        Call call=okHttpClient.newCall(request);
        call.enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(MainActivity.this,"请查看您的网络",Toast.LENGTH_LONG).show();
                    }
                });
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String result=response.body().string();
                Gson gson=new Gson();
                final DateModel dateModel1=gson.fromJson(result,DateModel.class);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        getDate(dateModel1);
                    }
                });

            }
        });

    }
}

4.源代码
点击下载

以上是关于Android 列表布局切换网格布局的主要内容，如果未能解决你的问题，请参考以下文章

带有两个列表片段的可滚动布局

android listview 列表表格怎么布局

在 Android 中使用具有多个布局的单个片段

如何切换网格布局中的小部件可见性？

Kotlin 中的网格布局？

如何在kotlin的片段内显示网格视图？