使用HorizontalScrollView和ListView实现左右和上下都可以滑动的列表布局

最新推荐文章于 2022-08-31 14:17:01 发布
最新推荐文章于 2022-08-31 14:17:01 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36699930/article/details/81167134
版权

在项目的进行中要用到左右滑动又能上下滑动的列表布局，使用一个HorizontalScrollView嵌套一个ListView可以很好的实现。

效果图：


布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <HorizontalScrollView
        android:id="@+id/mHorizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <!--列的标题-->
            <LinearLayout
                android:id="@+id/titleLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#f1f1f1"
                android:orientation="horizontal" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="#cccccc" />

            <ListView
                android:id="@+id/mListView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="#cccccc"
                android:dividerHeight="1px" />
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>

MainActivity：

package com.xiaoyehai.tabview.widget;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import com.xiaoyehai.tabview.R;
import com.xiaoyehai.tabview.adapter.CommomViewHolder;
import com.xiaoyehai.tabview.adapter.CommonAdapter;

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

public class Main4Activity extends AppCompatActivity {

    // 界面上的控件
    private ListView mListView;

    //列标题
    private LinearLayout mTitleLayout;

    //数据
    private List<List<String>> contentList = new ArrayList<>();

    //行数
    private int pageNum = 50;

    //列数
    private int columnNum = 20;

    //适配器
    private CommonAdapter<List<String>> mContentAdapter;

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

        mListView = (ListView) findViewById(R.id.mListView);
        mTitleLayout = (LinearLayout) findViewById(R.id.titleLayout);

        // 首先填充头部的标题布局
        for (int i = 0; i < columnNum; i++) {
            View view = View.inflate(this, R.layout.head_item, null);
            TextView tv = view.findViewById(R.id.tv_data);
            tv.setText("第" + i + "列数据");
            mTitleLayout.addView(view);
        }

        initData();

        mContentAdapter = new CommonAdapter<List<String>>(this, contentList, R.layout.item_data) {
            @Override
            public void fillData(int position, CommomViewHolder holder) {
                List<String> strings = list.get(position);
                LinearLayout linContent = holder.getView(R.id.lin_content);
                for (int i = 0; i < linContent.getChildCount(); i++) {
                    if (i % 2 == 0) {
                        TextView tv = (TextView) linContent.getChildAt(i);
                        tv.setText(strings.get(i / 2));
                    }
                }

            }
        };
        mListView.setAdapter(mContentAdapter);
    }

    private void initData() {
        for (int i = 0; i < pageNum; i++) {
            List<String> list = new ArrayList<>();
            for (int j = 0; j < columnNum; j++) {
                list.add(i + "--" + j);
            }
            contentList.add(list);
        }
    }
}

头部列表标题布局：

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

    <TextView
        android:id="@+id/tv_data"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="第1列数据" />

    <View
        android:layout_width="1px"
        android:layout_height="50dp"
        android:background="#cccccc" />

</LinearLayout>

ListView条目布局 ：

<?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="vertical">

    <LinearLayout
        android:id="@+id/lin_content"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_01"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="1"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:id="@+id/tv_02"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="2"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:id="@+id/tv_03"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="3"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:id="@+id/tv_04"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="4"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:id="@+id/tv_05"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="5"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="5"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="5"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="5"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="5"/>

        <View
            android:layout_width="1px"
            android:layout_height="50dp"
            android:background="#cccccc"/>

    </LinearLayout>
</LinearLayout>

适配器的封装：

package com.xiaoyehai.tabview.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.List;

/**
 * Created by xiaoyehai on 2017/8/13.
 */

public abstract class CommonAdapter<T> extends BaseAdapter {

    public List<T> list;
    private Context mContext;
    private int resID;

    public CommonAdapter(Context context, List<T> list, int resID) {
        this.list = list;
        mContext = context;
        this.resID = resID;
    }

    /**
     * 替换元素并刷新
     *
     * @param mDatas
     */
    public void refresh(List<T> mDatas) {
        list = mDatas;
        this.notifyDataSetChanged();
    }

    /**
     * 删除元素并更新
     *
     * @param position
     */
    public void deleteList(int position) {
        list.remove(position);
        this.notifyDataSetChanged();
    }

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

    @Override
    public T getItem(int position) {
        return list.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        CommomViewHolder holder = CommomViewHolder.getHolder(mContext, convertView, resID);
        fillData(position, holder);
        return holder.getContentView();
    }

    public abstract void fillData(int position, CommomViewHolder holder);

}

package com.xiaoyehai.tabview.adapter;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


/**
 * Created by xiaoyehai on 2017/8/13.
 */

public class CommomViewHolder {

    private final View mContentView;

    //Android开发中官方推荐：当使用HashMap(K, V),如果K为整数类型时,使用SparseArray的效率更高
    private SparseArray<View> mSparseArray = new SparseArray<>();

    private Context mContext;

    public CommomViewHolder(Context context, int resID) {
        mContext = context;
        mContentView = LayoutInflater.from(context).inflate(resID, null);
        mContentView.setTag(this);
    }

    public View getContentView() {
        return mContentView;
    }

    public static CommomViewHolder getHolder(Context context, View convertView, int resID) {
        //        CommomViewHolder holder = null;
        //        if (holder == null) {
        //            holder = new CommomViewHolder(context, resID);
        //        } else {
        //            holder = (CommomViewHolder) convertView.getTag();
        //        }
        //        return holder;

        if (convertView == null) {
            synchronized (CommomViewHolder.class) {
                if (convertView == null) {
                    return new CommomViewHolder(context, resID);
                }
            }
        }
        return (CommomViewHolder) convertView.getTag();
    }

    /**
     * 通过控件的Id获取对于的控件，如果没有则加入mSparseArray
     *
     * @param id
     * @param <T>
     * @return
     */
    public <T extends View> T getView(int id) {
        View view = mSparseArray.get(id);
        if (view == null) {
            view = mContentView.findViewById(id);
            mSparseArray.append(id, view);
        }
        return (T) view;
    }

    /**
     * 为TextView设置字符串
     *
     * @param id
     * @param text
     * @return
     */
    public CommomViewHolder setText(int id, String text) {
        TextView view = getView(id);
        view.setText(text);
        return this;
    }

    /**
     * 设置TextView颜色
     *
     * @param id
     * @return
     */
    public CommomViewHolder setTextColor(int id, String color) {
        TextView view = getView(id);
        view.setTextColor(Color.parseColor(color));
        return this;
    }

    //    public CommomViewHolder setImageByUrl(int id, String url) {
    //        ImageView view = getView(id);
    //        Glide.with(mContext).load(url)
    //                .diskCacheStrategy(DiskCacheStrategy.ALL)
    //                .error(R.mipmap.ic_launcher)
    //                .placeholder(R.mipmap.ic_launcher)
    //                .into(view);
    //        return this;
    //    }

    public CommomViewHolder setImageResource(int id, int resId) {
        ImageView view = getView(id);
        view.setImageResource(resId);
        return this;
    }

    public CommomViewHolder setImageBitmap(int id, Bitmap bitmap) {
        ImageView view = getView(id);
        view.setImageBitmap(bitmap);
        return this;
    }
}
qq_36699930
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android实现上下左右滑动界面布局
08-25
主要为大家详细介绍了android实现上下左右滑动的界面布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android ScrollViewy与HorizontalScrollView实现上下左右滚动
肖赛SoAi
12-29 5756
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentTo
Android 用ScrollView和HorizontalScrollView同时实现上下 左右滚动
qq_44929301的博客
04-21 1620
Android 用ScrollView和HorizontalScrollView同时实现上下 左右滚动
解决HorizontalScrollView自动滑动问题
xwtao的专栏
01-16 4228
解决HorizontalScrollView自动滑动问题最近做的项目中遇到一个关于HorizontalScrollView的问题，一开始的布局是一个textview外面嵌套了一个HorizontalScrollView。如图，里面显示各个名字的是一个重写的EditText，点击名字的时候就会删除该名字，当名字很多的时候，可以通过HorizontalScrollView来滑动，但点击删除前面一个的时候
HorizontalScrollView 嵌套listview实现列表左右、上下滑动、控件复用等功能
qiantanlong的博客
11-25 1473
需求：就是要展示一组列表数据，上下滑动是必须的一般是ListView，但是由于横向内容也很多，需要左右滑动。大家都知道，单独横向或单独垂直滑动都没问题，但是一旦两者结合，必然会出现滑动冲突。大家也知道，ScrollView、ListView等列表控件嵌套使用，会出现显示不全等控件高度测量问题。最后就是大家都知道这个问题很难搞，需要解决奇葩的冲突。基于以上的问题的考虑，我开发这个功能也是费尽心思，呕
Scroll实现上下左右滑动
Suzi的专栏
07-12 1943
当使用ScrollView时，只能上下滑动，而使用HorizontalScrollView时只能左右滑动，所以当即需要左右也需要上下滑动时，可以在ScrollView里边再套一个HorizontalScrollView，这样就可以实现了。例：<ScrollView android:layout_width="match_parent" android:layout_height="m
【Android控件】HorizontalScrollView的基础使用记录（滚动条自定义）
PYB
08-31 2717
HorizontalScrollView用于布局的容器，可以放置让用户使用滚动条查看的视图层次结构，允许视图结构比手机的屏幕大。HorizontalScrollView是一种 FrameLayout（框架布局），其子项被滚动查看时是整体移动的，并且子项本身可以是一个有复杂层次结构的布局管理器。一个常见的应用是子项在水平 方向中，用户可以滚动显示顶层水平排列的子项(items)。很适合用场景、图片无限滑动，底部多个自定义按钮布局（支持递增）等。...
教你使用HorizontalScrollView和ListView打造左右和上下都可以滑动的列表布局
菜鸟江涛的博客
02-08 8647
在项目的进行中要用到左右滑动又能上下滑动的列表布局，现在使用一个HorizontalScrollView嵌套一个ListView可以很好的解决拓展的问题，这里提供一个思路，希望能帮到有需要的朋友。
android横向滚动视频,Android开发中利用HorizontalScrollView实现一个左右滑动效果
weixin_42352222的博客
05-26 693
Android开发中利用HorizontalScrollView实现一个左右滑动效果发布时间：2020-11-23 16:47:45来源：亿速云阅读：72作者：Leah这期内容当中小编将会给大家带来有关Android开发中利用HorizontalScrollView实现一个左右滑动效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。效果图一.什么是Horizont...
ListView和HorizontalScrollView左右和上下滑动的列表布局
03-07
使用ListView和HorizontalScrollView打造可以左右和上下滑动的列表布局使用ListView和HorizontalScrollView打造可以左右和上下滑动的列表布局
左右上下都可以滑动的列表
02-09
使用ListView和HorizontalScrollView打造可以左右和上下滑动的列表布局，有些情况下很实用哦。
使用HorizonalScrollView实现ListView横向滑动
10-05
通过在HorizontalScrollView中嵌套ListView控件，实现ListView的水平滑动效果
Android中HorizontalScrollView使用方法详解
01-04
下面介绍一下HorizontalScrollView的使用和需要注意的点：  HorizontalScrollView是一个FrameLayout ，这意味着你只能在它下面放置一个子控件，这个子控件可以包含很多数据内容。有可能这个子控件本身就是一个布局...
HorizontalScrollView+多列纵向listview处理
04-21
场景描述，页面中展示三个列表，分别为Lv1,Lv2,Lv3,点击Lv1,加载Lv2,点击Lv2,加载Lv3,当点击Lv2的... demo中是死数据，使用中，数据可以根据情况动态添加。 Github：https://github.com/yanxiaoyangyxy/HSListview.git
android学习SeekBar的使用和自定义样式
热门推荐
qq_36699930的博客
08-16 2万+
SeekBar的主要属性和方法 （1）setMax — 设置SeekBar的最大数值 （2）setProgress — 设置SeekBar的当前数值 （3）setSecondProgress—设置SeekBar的第二数值 SeekBar的事件 由于拖动条可以诶用户控制。所以需要对其事件监听，这就需要实现SeekBar.OnSeekBarChangeListner接口，此接口共需监听。 ...
Retrofit2详解
qq_36699930的博客
11-19 1万+
Retrofit框架: 它是Square公司开发的现在非常流行的网络框架 retrofit2.0它依赖于OkHttp，在这里我们也不需要显示的导入okHttp,在retrofit中已经导入okhttp3 性能好，处理快，使用简单，Retrofit 是安卓上最流行的HTTP Client库之一 github地址 使用步骤： 1、定义一个接口（封装URL地址和数据请求） 2、实例化R...
android 定位功能的实现
qq_36699930的博客
08-22 1万+
在Android开发其中。常常须要用到定位功能，尤其是依赖于地理位置功能的应用。非常多人喜欢使用百度地图，高德地图提供的sdk。开放API，可是在只须要经纬度，或者城市，街道地址等信息。并不须要提供预览地图，地图界面的应用中。这时，不须要使用百度地图。高德地图。这样做只会添加apk的体积。怎么办呢? 事实上LocationManager，Geocoder这些Android API给我们提供的这些...
Android使用ShareSDK集成第三方登录和分享（v3.1.2）
qq_36699930的博客
01-12 8296
一.产品概述 ShareSDK是一种社会化分享组件，为iOS、Android、WP8 的APP提供社会化功能，集成了一些常用的类库和接口，缩短开发者的开发时间，还有社会化统计分析管理后台。 二.集成方式 1.Maven集成 使用ShareSDK maven集成方式，不需要在AndroidMainfest.xml下面配置任何权限和Activity （1）打开项目根目录的gradle
horizontalscrollview实现图片左右滚动
最新发布
01-10
在Android开发中，我们可以使用HorizontalScrollView来实现图片左右滚动的功能。HorizontalScrollView是一个可以水平滚动的视图容器，可以包含任意数量的子视图，在用户滑动时自动滚动。 首先，在布局文件中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值