ListView的水平与滚动型 [英] ListView with Horizontal ScrollView

查看：174
本文介绍了ListView的水平与滚动型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让这由水平滚动视图的行中的每一个列表视图。我想的元素被垂直排列，所以如果有更多然后一定量的项目的视图将成为滚动

然而，它找出来是这样的。

在这里输入的形象描述

我夸大以下XML

single_row.xml 

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; LinearLayout中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =FILL_PARENT
    机器人：背景=＃FFFFFF
    机器人：layout_height =FILL_PARENT＆GT;    ＆LT; Horizo​​ntalScrollView的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
        机器人：ID =@ + ID /横
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =FILL_PARENT＆GT;        ＆LT;的LinearLayout
            机器人：方向=垂直
            机器人：layout_width =FILL_PARENT
            机器人：layout_height =FILL_PARENT＆GT;        ＆LT; com.example.jj.library.ChipView
            机器人：layout_weight =1
            机器人：ID =@ + ID / text_chip_layout
            机器人：layout_width =FILL_PARENT
            机器人：layout_height =WRAP_CONTENT/＆GT;
        ＆LT; / LinearLayout中＆GT;    ＆LT; / Horizo​​ntalScrollView＆GT;＆LT; / LinearLayout中＆GT;

这是我的适配器的意见添加到视图

Adapter.java 

 进口android.content.Context;
进口android.util.Log;
进口android.view.LayoutInflater;
进口android.view.View;
进口android.view.ViewGroup;
进口android.widget.ArrayAdapter;进口com.example.jj.library.Chip;
进口com.example.jj.library.ChipView;
进口com.example.jj.library.ChipViewAdapter;
进口com.example.jj.library.OnChipClickListener;进口的java.util.ArrayList;
进口的java.util.List;/ **
 *创建者JJ在2015年12月21日。
 * /
公共类LiveFeedAdapter扩展ArrayAdapter＆LT; LiveFeedDataProvider＆GT;实现OnChipClickListener {
    私有静态最后弦乐TAG =LIVEFEED适配器;
    上下文CTX;
    私人ChipView mTextChipLayout;
    公开名单＆LT; LiveFeedDataProvider＆GT; liveFeed_list =新的ArrayList＆LT; LiveFeedDataProvider＆GT;（）;    公共LiveFeedAdapter（上下文的背景下，资源INT）{
        超（背景下，资源）;
        CTX =背景;
    }    @覆盖
    公共无效添加（LiveFeedDataProvider对象）{
        liveFeed_list.add（对象）;
        super.add（对象）;
    }    @覆盖
    公众诠释的getCount（）{
        返回liveFeed_list.size（）;
    }
    @覆盖
    公共LiveFeedDataProvider的getItem（INT位置）{        返回liveFeed_list.get（位置）;
    }    @覆盖
    公共查看getView（最终诠释的立场，观点convertView，最终的ViewGroup父）{
        如果（convertView == NULL）{
            LayoutInflater充气=（LayoutInflater）CTX.getSystemService（Context.LAYOUT_INFLATER_SERVICE）;
            convertView = inflator.inflate（R.layout.single_livefeed_row，父母，假）;
        }
        ChipViewAdapter adapterLayout =新MainChipViewAdapter（的getContext（））;
        mTextChipLayout =（ChipView）convertView.findViewById（R.id.text_chip_layout）;
        mTextChipLayout.setAdapter（adapterLayout）;
        mTextChipLayout.setChipLayoutRes（R.layout.chip_close）;
        mTextChipLayout.setChipBackgroundColor（CTX.getResources（）的getColor（R.color.light_blue））;
        mTextChipLayout.setChipBackgroundColorSelected（CTX.getResources（）的getColor（R.color.green））;
        mTextChipLayout.setOnChipClickListener（本）;
        LiveFeedDataProvider提供商= liveFeed_list.get（位置）;
        Log.d（TAG，长度=+ provider.interests.length）;
        的for（int i = 0; I＆LT; provider.interests.length;我++）{
            字符串利息= provider.interests [I]
            mTextChipLayout.add（新标签（利息））;
        }
            返回convertView;
    }    @覆盖
    公共无效onChipClick（芯片芯片）{    }}


解决方案

我解决你的问题有点不同的方式：我换成 Horizo​​ntalScrollView 和的ListView 由 RecyclerView ，每行作为 RecyclerView 其中，因为我相信，一个preferred布局在这里。

下面的结果：

在这里输入的形象描述

（不支付非常重视设计难看:-)）

MainActivity 布局

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; android.support.v7.widget.RecyclerView
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：背景=＃FFFFFF
    机器人：ID =@ + ID / recyclerView
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent/＆GT;

MainActivity 类：

 公共类MainActivity扩展AppCompatActivity {    @覆盖
    保护无效的onCreate（捆绑savedInstanceState）{
        super.onCreate（savedInstanceState）;
        的setContentView（R.layout.activity_main）;        RecyclerView志precyclerView =（RecyclerView）findViewById（R.id.recyclerView）;
        智precyclerView.setLayoutManager（新LinearLayoutManager（本））;        ArrayList的＆LT;的String []＆GT; chipsArray =新的ArrayList＆LT;＆GT;（）;
        chipsArray.add（新的String [] {健身，游戏，教育，动物，汽车总动员}）;
        .....
        chipsArray.add（新的String [] {教育，动物，汽车总动员}）;        智precyclerView.setAdapter（新ListChipsAdapter（chipsArray））;
    }
}

ListChipsAdapter - 适配器为 MainActivity 的回收视图。它管理与芯片排列表。

 公共类ListChipsAdapter扩展RecyclerView.Adapter {    私人的ArrayList＆LT;的String []＆GT; chipsArray;    公共ListChipsAdapter（ArrayList的＆LT;的String []＆GT; chipsArray）{
        this.chipsArray = chipsArray;
    }    @覆盖
    公共RecyclerView.ViewHolder onCreateViewHolder（ViewGroup中的父母，INT viewType）{
        返回新ChipsViewHolder（新RowChipsView（parent.getContext（）））;
    }    @覆盖
    公共无效onBindViewHolder（RecyclerView.ViewHolder持有人，INT位置）{
        （（RowChipsView）holder.itemView）.setAdapter（新ChipsAdapter（chipsArray.get（位置）））;
    }    @覆盖
    公众诠释getItemCount（）{
        返回chipsArray.size（）;
    }    私有类ChipsViewHolder扩展RecyclerView.ViewHolder {        公共ChipsViewHolder（查看ItemView控件）{
            超（ItemView控件）;
        }
    }
}

RowChipsView - 是重新$ P $类psents特定的单行：

 公共类RowChipsView扩展的FrameLayout {    公共RowChipsView（上下文的背景下）{
        超级（上下文）;
        initializeView（上下文）;
    }    私人无效initializeView（上下文的背景下）{
        LayoutInflater.from（上下文）.inflate（R.layout.single_row，本）;
        （（RecyclerView）findViewById（R.id.recyclerViewHorizo​​ntal））setLayoutManager（新LinearLayoutManager（上下文，LinearLayoutManager.HORIZONTAL，假））;
    }    公共无效setAdapter（ChipsAdapter适配器）{
        （（RecyclerView）findViewById（R.id.recyclerViewHorizo​​ntal））setAdapter（适配器）。
    }
}

这是布局是只包含有一个 RecyclerView ：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; android.support.v7.widget.RecyclerView
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：ID =@ + ID / recyclerViewHorizo​​ntal
    机器人：layout_width =match_parent
    机器人：layout_height =56dp/＆GT;

现在， ChipsAdapter - 这是用于每个单列适配器：

 公共类ChipsAdapter扩展RecyclerView.Adapter {    私有String [] chipsArray;    公共ChipsAdapter（字符串[] chipsArray）{
        this.chipsArray = chipsArray;
    }    @覆盖
    公共RecyclerView.ViewHolder onCreateViewHolder（ViewGroup中的父母，INT viewType）{
        返回新ChipViewHolder（新ChipView（parent.getContext（）））;
    }    @覆盖
    公共无效onBindViewHolder（RecyclerView.ViewHolder持有人，INT位置）{
        （（ChipView）holder.itemView）.displayItem（chipsArray [位置]）;
    }    @覆盖
    公众诠释getItemCount（）{
        返回chipsArray.length;
    }    私有类ChipViewHolder扩展RecyclerView.ViewHolder {        公共ChipViewHolder（查看ItemView控件）{
            超（ItemView控件）;
        }
    }
}

现在，最后一块是 ChipView ：

 公共类ChipView扩展的FrameLayout {    公共ChipView（上下文的背景下）{
        超级（上下文）;
        initializeView（上下文）;
    }    私人无效initializeView（上下文的背景下）{
        LayoutInflater.from（上下文）.inflate（R.layout.chip_view，本）;
    }    公共无效displayItem（字符串文本）{
        （（的TextView）findViewById（R.id.chipTextView））的setText（文本）。
    }
}

和它的布局：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：背景=@绘制/ rounded_background
    机器人：layout_margin =4DP
    机器人：layout_width =WRAP_CONTENT
    机器人：layout_height =WRAP_CONTENT＆GT;
    ＆LT;的TextView
        机器人：ID =@ + ID / chipTextView
        机器人：文字颜色=＃FFFFFF
        机器人：TEXTSIZE =24sp
        机器人：填充=8DP
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT/＆GT;
＆LT; /＆的FrameLayout GT;

我已上载的项目到我的Dropbox，所以随意检查出来！

我希望它可以帮助。

I am trying to make a listview which consists of a horizontal scrollview as each one of the rows. I want the elements to be lined up vertically so the view would become scrollable if there are more then a certain amount of items.

However it comes out looking like this.

I am inflating the following xml

single_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:background="#FFFFFF"
    android:layout_height="fill_parent">

    <HorizontalScrollView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

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

        <com.example.jj.library.ChipView
            android:layout_weight="1"
            android:id="@+id/text_chip_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        </LinearLayout>

    </HorizontalScrollView>

</LinearLayout>

This is my adapter to add the views to the view

Adapter.java

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

import com.example.jj.library.Chip;
import com.example.jj.library.ChipView;
import com.example.jj.library.ChipViewAdapter;
import com.example.jj.library.OnChipClickListener;

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

/**
 * Created by jj on 12/21/2015.
 */
public class LiveFeedAdapter extends ArrayAdapter<LiveFeedDataProvider> implements OnChipClickListener {


    private static final String TAG = "LIVEFEED ADAPTER";
    Context CTX;
    private ChipView mTextChipLayout;
    public List<LiveFeedDataProvider> liveFeed_list = new ArrayList<LiveFeedDataProvider>();

    public LiveFeedAdapter(Context context, int resource) {
        super(context, resource);
        CTX = context;
    }

    @Override
    public void add(LiveFeedDataProvider object){
        liveFeed_list.add(object);
        super.add(object);
    }

    @Override
    public int getCount() {
        return liveFeed_list.size();
    }


    @Override
    public LiveFeedDataProvider getItem(int position) {

        return liveFeed_list.get(position);
    }

    @Override
    public View getView(final int position, View convertView, final ViewGroup parent) {
        if(convertView == null){
            LayoutInflater inflator = (LayoutInflater) CTX.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflator.inflate(R.layout.single_livefeed_row,parent,false);
        }
        ChipViewAdapter adapterLayout = new MainChipViewAdapter(getContext());
        mTextChipLayout = (ChipView) convertView.findViewById(R.id.text_chip_layout);
        mTextChipLayout.setAdapter(adapterLayout);
        mTextChipLayout.setChipLayoutRes(R.layout.chip_close);
        mTextChipLayout.setChipBackgroundColor(CTX.getResources().getColor(R.color.light_blue));
        mTextChipLayout.setChipBackgroundColorSelected(CTX.getResources().getColor(R.color.green));
        mTextChipLayout.setOnChipClickListener(this);
        LiveFeedDataProvider provider = liveFeed_list.get(position);
        Log.d(TAG, "LENGTH = " + provider.interests.length);
        for(int i = 0; i < provider.interests.length; i++) {
            String interest = provider.interests[i];
            mTextChipLayout.add(new Tag(interest));
        }
            return convertView;
    }

    @Override
    public void onChipClick(Chip chip) {

    }

}

解决方案

I solved your problem in a bit different way: I replaced HorizontalScrollView and ListView by a RecyclerView with each row as a RecyclerView which, as I believe, is a preferred layout here.

Here's a result:

(don't pay to much attention to an ugly design :-) )

MainActivity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#FFFFFF"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

MainActivity class:

public class MainActivity extends AppCompatActivity {

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

        RecyclerView chipRecyclerView = (RecyclerView)findViewById(R.id.recyclerView);
        chipRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        ArrayList<String[]> chipsArray = new ArrayList<>();
        chipsArray.add(new String[] {"Fitness", "Gaming", "Education","Animals", "Cars"});
        .....
        chipsArray.add(new String[] {"Education","Animals", "Cars"});

        chipRecyclerView.setAdapter(new ListChipsAdapter(chipsArray));
    }
}

ListChipsAdapter - adapter for the MainActivity's recycler view. It manages list of rows with chips.

public class ListChipsAdapter extends RecyclerView.Adapter {

    private ArrayList<String[]> chipsArray;

    public ListChipsAdapter(ArrayList<String[]> chipsArray) {
        this.chipsArray = chipsArray;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ChipsViewHolder(new RowChipsView(parent.getContext()));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((RowChipsView)holder.itemView).setAdapter(new ChipsAdapter(chipsArray.get(position)));
    }

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

    private class ChipsViewHolder extends RecyclerView.ViewHolder {

        public ChipsViewHolder(View itemView) {
            super(itemView);
        }
    }
}

RowChipsView - is a class which represents the particular single row:

public class RowChipsView extends FrameLayout {

    public RowChipsView(Context context) {
        super(context);
        initializeView(context);
    }

    private void initializeView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.single_row, this);
        ((RecyclerView)findViewById(R.id.recyclerViewHorizontal)).setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
    }

    public void setAdapter(ChipsAdapter adapter) {
        ((RecyclerView)findViewById(R.id.recyclerViewHorizontal)).setAdapter(adapter);
    }
}

It's Layout is consist of only one RecyclerView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerViewHorizontal"
    android:layout_width="match_parent"
    android:layout_height="56dp"/>

Now, ChipsAdapter - the adapter which is used by each single row:

public class ChipsAdapter extends RecyclerView.Adapter {

    private String[] chipsArray;

    public ChipsAdapter(String[] chipsArray) {
        this.chipsArray = chipsArray;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ChipViewHolder(new ChipView(parent.getContext()));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((ChipView)holder.itemView).displayItem(chipsArray[position]);
    }

    @Override
    public int getItemCount() {
        return chipsArray.length;
    }

    private class ChipViewHolder extends RecyclerView.ViewHolder {

        public ChipViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Now, the last piece is a ChipView:

public class ChipView extends FrameLayout {

    public ChipView(Context context) {
        super(context);
        initializeView(context);
    }

    private void initializeView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.chip_view, this);
    }

    public void displayItem(String text) {
        ((TextView)findViewById(R.id.chipTextView)).setText(text);
    }
}

and it's layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/rounded_background"
    android:layout_margin="4dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/chipTextView"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:padding="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

I've uploaded the project to my dropbox, so feel free to check it out!

I hope, it helps.

这篇关于ListView的水平与滚动型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆