使用阴影创建自定义ListView

Question

如何创建此图片中显示的自定义ListView。我知道我可以在ScrollView和布局的帮助下实现这一点，但我需要做ListView。 每个listview项目都相互重叠。

Answer 1

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

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

否则您也可以使用listselector图像作为您的要求

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

结果如下

Answer 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 对象来提高性能。

Answer 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()中。

这是我从上述步骤中获得的：