创建带有阴影的自定义 ListView答案

【问题标题】：Create custom ListView with shadow创建带有阴影的自定义 ListView
【发布时间】：2013-08-06 08:38:06
【问题描述】：

我如何创建自定义ListView，如图所示。我知道我可以在ScrollView 和 Layouts 的帮助下实现这一点，但我需要以ListView 的身份进行操作。每个列表视图项目相互交叉。

【问题讨论】：

“每个列表视图项相互重叠”是什么意思？
我的意思是每个项目都在他之前的项目之上，如图所示。
您必须使用顶部圆角的 xml 自定义可绘制对象。并将其设置为自定义列表视图行。简单:-)
喜欢彩虹一样的颜色！！
@user370305 这并不容易，因为一行背景必须在下一行。

标签： android android-layout android-listview

【解决方案1】：

这可能对您有所帮助 List view with custom view items with partially overlaps (Android)

【讨论】：

这与颜色无关。我的意思是下一个 listItem 在上一个项目之上。
该示例使用 ScrollView (((

【解决方案2】：

我有这个代码，就像你的要求一样。通过将dividerheight减小为负值，列表可能会重叠

<?xml version="1.0" encoding="utf-8"?>

<ListView
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="#b5b5b5"
    android:dividerHeight="-5dp"
    android:listSelector="@drawable/list_selector" />

然后根据位置给适配器添加背景色。

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null)
        vi = inflater.inflate(R.layout.list_row, null);

    TextView title = (TextView)vi.findViewById(R.id.title); // title
    TextView artist = (TextView)vi.findViewById(R.id.artist); // artist name
    TextView duration = (TextView)vi.findViewById(R.id.duration); // duration
    ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image

    HashMap<String, String> song = new HashMap<String, String>();

    if(position % 2 ==0){
        vi.setBackgroundResource(R.drawable.listselector_1);
    }else if(position % 3 ==0){
        vi.setBackgroundResource(R.drawable.listselector_2);
    }else{
        vi.setBackgroundResource(R.drawable.listselector_3);
    }

    song = data.get(position);

    // Setting all values in listview
    title.setText(song.get(CustomizedListView.KEY_TITLE));
    artist.setText(song.get(CustomizedListView.KEY_ARTIST));
    duration.setText(song.get(CustomizedListView.KEY_DURATION));
    imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image);
    return vi;
}

否则，您也可以根据需要使用列表选择器图像

【讨论】：

【解决方案3】：

感谢你们尝试帮助我解决这个问题。我在这里查看每个答案，最后得到我想要的。我认为将我的代码放在这里会更好，所以也许有人会有所帮助。唯一的区别是我创建的列表视图中也有阴影。

这里是代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:my_font="http://schemas.android.com/apk/res/com.Helix.android.SmartBonus"
                android:orientation="vertical"
                android:id="@+id/mainLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingTop="5dp"
                >
    <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shadow_bg"
            android:visibility="visible"/>

    <RelativeLayout
            android:id="@+id/secondLayout"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/drop_shadow"
            android:layout_below="@id/imageview">
        <ImageView
                android:id="@+id/companyImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/secret_logo_small"
                android:layout_marginRight="10dp"/>
        <TextView
                android:id="@+id/companyDescription"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/companyImageView"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                my_font:ttf_name="300"
                android:text="Салон кросаты"/>
        <TextView
                android:id="@+id/companyName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/companyImageView"
                android:layout_below="@id/companyDescription"
                android:textColor="@android:color/white"
                my_font:ttf_name="300"
                android:text="Secret"/>
        <TextView
                android:id="@+id/companyPercentText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                android:textSize="19sp"
                android:layout_marginRight="1dp"
                android:layout_toLeftOf="@+id/companyPercent"
                my_font:ttf_name="700"
                android:text="-20"/>
        <TextView
                android:id="@id/companyPercent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                android:textSize="12sp"
                my_font:ttf_name="300"
                android:text="%"/>
        <ImageView
                android:id="@+id/companyPercentImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/companyPercent"
                android:layout_marginTop="7dp"
                android:textColor="@android:color/white"
                android:src="@drawable/percentage_devider"/>
        <TextView
                android:id="@+id/companyDistance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/companyPercentImage"
                android:textSize="16dp"
                android:textColor="#A57F1C"
                my_font:ttf_name="300"
                android:text="7m"/>
        <LinearLayout
                android:id="@+id/checkingButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/companyDistance"
                android:layout_marginTop="10dp"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"
                android:focusable="false"
                android:background="@drawable/green_button_bg"
                android:visibility="gone">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textSize="16dp"
                    android:textColor="@android:color/white"
                    my_font:ttf_name="300"
                    android:text="Check-in"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textSize="16dp"
                    android:layout_marginLeft="10dp"
                    android:textColor="@color/checkin_point_color"
                    android:layout_weight="1"
                    my_font:ttf_name="300"
                    android:text="@string/ten_point"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/slak"
                    />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

适配器。

@Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder viewHolder;
        final Discount discount = getItem(i);
        Discount prev_discount = null;
        if (i > 0){
            prev_discount = getItem(i-1);
        }

        if (view == null){
            final LayoutInflater li = (LayoutInflater) mActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = li.inflate(R.layout.discount_data_item, viewGroup, false);

            viewHolder = new ViewHolder();
            viewHolder.logo = (ImageView)view.findViewById(R.id.companyImageView);
            viewHolder.name = (SmartBonus_TextView)view.findViewById(R.id.companyName);
            viewHolder.description = (SmartBonus_TextView)view.findViewById(R.id.companyDescription);
            viewHolder.percent =  (SmartBonus_TextView)view.findViewById(R.id.companyPercentText);
            viewHolder.distance =  (SmartBonus_TextView)view.findViewById(R.id.companyDistance);
            viewHolder.mainLayout = (RelativeLayout)view.findViewById(R.id.mainLayout);
            viewHolder.secondLayaout = (RelativeLayout)view.findViewById(R.id.secondLayout);

            view.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) view.getTag();
        }

        if (i == 0){
            viewHolder.mainLayout.setBackgroundColor(android.R.color.transparent);
            setRoundedBackground(viewHolder.secondLayaout, Color.parseColor(discount.getBackgroundColor()));
        } else {
            viewHolder.mainLayout.setBackgroundColor(Color.parseColor(prev_discount.getBackgroundColor()));
            setRoundedBackground(viewHolder.secondLayaout, Color.parseColor(discount.getBackgroundColor()));

        }


        return view;
    }

    private void setRoundedBackground(View view,int color){
        final GradientDrawable gradientDrawable = (GradientDrawable) view.getBackground().mutate();
        gradientDrawable.setColor(color);
        gradientDrawable.invalidateSelf();
    }

这是结果

【讨论】：

【解决方案4】：

你应该重写getView 方法。
示例代码：

View getView(int position, View convertView, ViewGroup parent){
    Object data = getItem(positon);
    //usually data object should have type property
    if(data.type == TYPE1){
        return getLayoutInflater().inflate(R.layout.custom_xml1, null);
     }else (data.type == TYPE2){
        return getLayoutInflater().inflate(R.layout.custom_xml2, null);
     }else{
        return getLayoutInflater().inflate(R.layout.custom_xml, null);
     }
};

注意：您应该重用 convertView 对象以提高性能。

【讨论】：

【解决方案5】：

好的，因为我有一些时间，所以我设法写了几个步骤来完成你的任务。

1. Make Custom drawable using xml in drawable folder with top corners have radius..

2. Now in your Listview attributes just define negative divider height 
   Like, android:dividerHeight="-20dp"

3. Set the Custom Drawable as a background of List row in getView().

如果您能够为列表行动态设置可绘制的颜色，那也很好。（在自定义适配器的getView() 中）。

这是我从上述步骤中取得的成果：

【讨论】：