logo标签列表

水平滚动的ListView

androidlistviewadapterhorizontalscrollview
6
我正在尝试制作一个包含水平滚动视图的列表视图，每一行都是一个水平滚动视图。我希望元素垂直排列，以便在有超过一定数量的项目时，视图会变得可滚动。然而，它看起来像这样。

enter image description here

我正在展开以下的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) {

    }

}
你的LinearLayout在ChipView上方，布局为垂直。 - Rusheel Jain
@RusheelJain 我已经改成水平方向，但答案仍然相同。 - moe_nyc
1个回答
16

我用了稍微不同的方式解决了你的问题：我用一个 RecyclerView 替换了 HorizontalScrollView 和 ListView，并将每行都作为一个 RecyclerView，我认为这是首选布局。

以下是结果：

enter image description here

(别太在意丑陋的设计 :-) )

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类：

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的RecyclerView适配器，用于管理带有芯片的行列表。

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

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>

我已经将项目上传到我的Dropbox，所以随时可以查看！

希望对你有所帮助。

3
请注意，如果您选择将RecyclerAdapter的ViewHolder类放在与RecyclerAdapter相同的文件中，则应将其声明为静态。否则，迟早会遇到内存问题。 - Teun Kooijman
1
它帮助了我。 - Sanjeev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接