Question

我正在使用RSS Feed。我使用ListView with Adapter在自定义视图中显示包含“LinearLayout with Image and Text”的数据。在每行中重复该视图。但是，我需要像下面的图像一样制作自定义视图，以显示不同视图的数据。

customView

Answer 1

<强>步骤：

可以使用内部按钮的水平滚动视图完成标签栏。在按钮上单击更改该按钮的宽度和高度。并重置最后选择的一个。
彩色的horziontal线可以是另一种线性布局。你点击按钮就可以改变它的颜色。
您可以在同一列表视图中使用不同的布局。一两个项目，一个一个。
在适配器getCount方法中，您应该计算您拥有的行数。基于用于确定哪些行可以有一个项目以及哪些行可以有两个的算法。

那个列表视图并不像你想象的那么复杂。

工作示例：

I created a github repository for it.

适配器类：

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

主要活动布局：

<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像附加图像

1 个答案: