用陰影創建自定義列表視圖

如何創建自定義ListView，如圖所示。我知道我可以在ScrollView和Layouts的幫助下做到這一點，但我需要做爲ListView。每個列表視圖項目都會彼此重疊。 enter image description here 用陰影創建自定義列表視圖

來源

2013-08-06 fish40

什麼ü意味着與「每個ListView項去了對方」？ –

我的意思是每件商品都比他以前的商品高一些，比如圖片。 – fish40

您必須使用xml進行自定義繪製，頂角爲圓角。並將其設置爲自定義列表視圖行。簡單:-) – user370305

感謝您嘗試幫助我解決這個問題的人。我看這裏的每一個答案，最後得到我想要的。我認爲這會更好，我把我的代碼放在這裏，所以也許有人會有幫助。唯一的區別是我創建的listview也有它的影子。

下面是代碼

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

下面是結果 enter image description here

來源

2013-08-21 08:17:46 fish40

這可能會幫助你 List view with custom view items with partially overlaps (Android)

來源

2013-08-06 08:47:43

這不是顏色，我的意思是下一個listItem比上一個項目更高。 – fish40

檢查上面的鏈接答案更新 –

o這是個好主意，謝謝。 – fish40

您應該重寫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對象的性能。

來源

2013-08-06 09:10:58 boiledwater

我有這樣的代碼就像你的要求。列表可以通過減少dividerheight到負值

enter image description here

<?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圖像作爲您的要求

來源

2013-08-06 10:42:20

好吧，當我有時間順序來我設法寫幾個步驟來實現你的任務。

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

這是我從上面的步驟來實現：

enter image description here

來源

2013-08-06 11:19:30 user370305

）如果您需要更多代碼，請告訴我。 – user370305

用陰影創建自定義列表視圖

回答

相關問題