带有水平滚动视图的列表视图

Question

我正在尝试制作一个列表视图，其中包含一个水平滚动视图作为每一行。我希望元素垂直排列，这样如果有超过一定数量的项目，视图将变得可滚动。

然而它看起来像这样。

我正在膨胀以下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>

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

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) {

    }

}

Answer 1

我用一种不同的方式解决了你的问题：我用 RecyclerView 替换了 HorizontalScrollView 和 ListView ，每一行都是 RecyclerView 我相信, 是这里的首选布局。

结果如下：

（不要太在意丑陋的设计:-)）

MainActivity布局

<?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 - MainActivity 回收站视图的适配器。它管理带有筹码的行列表。

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 - 是一个 class 代表特定的单行：

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);
    }
}

它的布局只有一个 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"/>

现在，ChipsAdapter - 每行使用的适配器：

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);
        }
    }
}

现在，最后一块是 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);
    }
}

它的布局：

<?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>

我已将项目上传到我的保管箱，所以 feel free to check it out!

希望对您有所帮助。

带有水平滚动视图的列表视图

ListView with Horizontal ScrollView

android

listview

adapter

horizontalscrollview