如何使自定义 ListView 像附加图像一样

Question

我正在使用 RSS 源。我使用带适配器的 ListView 在包含 "LinearLayout with Image and Text" 的自定义视图中显示数据。此视图在每一行中重复出现。但是，我需要制作如下图所示的自定义视图，以显示不同视图的数据。

customView

Answer 1

步骤：

标签栏可以用水平滚动视图完成，里面有按钮。单击按钮更改该按钮的宽度和高度。并重置最后选择的一个。
彩色水平线可以是另一种线性布局。您在单击按钮时更改其颜色。
您可以在同一个列表视图中使用不同的布局。一送二，一送一。
在适配器 getCount 方法中，您应该计算您拥有的行数。基于用于决定哪些行可以有一项，哪些行可以有两项的算法。

那个列表视图并没有你想象的那么复杂。

工作示例：

I created a github repository for it.

适配器Class:

public class ArticlesAdapter extends ArrayAdapter<Article> {

    int mod;

    public ArticlesAdapter(Context context, int resource, ArrayList<Article> teams) {
        super(context, resource, teams);
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {

        int resource = R.layout.single_item;
        if (position % 2 == 0)
            resource = R.layout.double_item;
        if (position == getCount()-1 && mod == 1)
            resource = R.layout.single_item;

        if (view == null || view.getTag() != resource)
        {
            LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = vi.inflate(resource, null);
            view.setTag(resource);
        }

        TextView tv1 = (TextView)view.findViewById(R.id.textView1);
        ImageView iv1 = (ImageView)view.findViewById(R.id.imageView1);

        int index1 = (position * 3 / 2) + (position * 3) % 2;
        Article article1 = getItem(index1);

        tv1.setText(article1.getDesc());
        iv1.setImageResource(article1.getImageUrl());

        if (resource == R.layout.double_item)
        {
            TextView tv2 = (TextView)view.findViewById(R.id.textView2);
            ImageView iv2 = (ImageView)view.findViewById(R.id.imageView2);

            int index2 = index1 + 1;
            Article article2 = getItem(index2);

            tv2.setText(article2.getDesc());
            iv2.setImageResource(article2.getImageUrl());
        }

        return view;
    }

    @Override
    public int getCount() {
        int count = super.getCount();
        mod = count % 3;
        count = count / 3 * 2;
        return count + (mod > 0 ? 1 : 0);
    }
}

主要Activity布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="@dimen/tabbar_height"
        android:background="@android:color/black"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="bottom"
            android:baselineAligned="false">

            <Button
                android:id="@+id/button1"
                android:layout_width="@dimen/button_width"
                android:layout_height="match_parent"
                android:background="@color/red"
                android:text="@string/top_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="0"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button2"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/orange"
                android:text="@string/entertain_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="1"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button3"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/green"
                android:text="@string/world_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="2"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button4"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/blue"
                android:text="@string/biz_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="3"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button5"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/purple"
                android:text="@string/sport_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="4"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button6"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/pink"
                android:text="@string/games_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="5"
                android:onClick="tabClicked"/>

            <Button
                android:id="@+id/button7"
                android:layout_width="@dimen/button_width"
                android:layout_height="@dimen/button_height"
                android:background="@color/yellow"
                android:text="@string/tech_title"
                android:textColor="@color/white"
                android:textSize="@dimen/tabbar_text_size"
                android:textAllCaps="false"
                android:tag="6"
                android:onClick="tabClicked"/>

        </LinearLayout>

    </HorizontalScrollView>

    <LinearLayout
        android:id="@+id/tabbarLineLL"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:background="@color/red"
        android:orientation="vertical">

    </LinearLayout>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp">

    </ListView>

</LinearLayout>

选项卡点击方法：

public void tabClicked(View view)
{
    LinearLayout.LayoutParams tempLL;

    // reset current selected button size
    Button currentButton = tabs[selected_index];
    tempLL = (LinearLayout.LayoutParams)currentButton.getLayoutParams();
    tempLL.width = (int) getResources().getDimension(R.dimen.button_width);
    tempLL.height = (int) getResources().getDimension(R.dimen.button_height);
    currentButton.setLayoutParams(tempLL);

    // change selected tab
    selected_index = Integer.parseInt(view.getTag().toString());

    // change color for the new selected button
    tempLL = (LinearLayout.LayoutParams)view.getLayoutParams();
    tempLL.width = (int) getResources().getDimension(R.dimen.button_width);
    tempLL.height = (int) getResources().getDimension(R.dimen.tabbar_height);
    view.setLayoutParams(tempLL);

    // change tabbar line color
    ColorDrawable buttonColor = (ColorDrawable) view.getBackground();
    tabbarLineLL.setBackgroundColor(buttonColor.getColor());

    setupAdapter();
}

public void setupAdapter()
{
    // setup adapter for selected tab
    articlesAdapter = new ArticlesAdapter(this, 0, articles.get(selected_index));
    listview.setAdapter(articlesAdapter);
    articlesAdapter.notifyDataSetChanged();
}

如何使自定义 ListView 像附加图像一样

How to make custom ListView like attached image

android

listview

android-custom-view