2016-11-21 131 views
1

我想有一個列表視圖的外觀這些行:如何自定義列表視圖行

  • 有圓角;
  • 部分着色(每行的左側部分);
  • 在它們的着色區域中包含另一種顏色的形狀。

下面是從其他應用程序的例子:

piano tiles 2

我現在有兩條引線,但我沒有對任何人的成功。

我的第一引線(形狀)

我發現瞭如何通過使用形狀來獲得圓角,並用它作爲列表視圖的背景。

的繪製形狀文件「rounded_rectangle.xml」:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 

    <corners 
     android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" 
     android:topRightRadius="7dp"/> 

</shape> 

活動文件:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:custom="http://schemas.android.com/apk/res-auto" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    // ... 
    <ListView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/splitView" 
     android:id="@+id/lv_player" 
     android:layout_alignParentTop="true" 
     android:background="@drawable/rounded_rectangle"/> 

    // ... 

</FrameLayout> 

不過,我不知道如何使用的形狀有一排部分着色或畫一個圖標。我可以用一種顏色填充形狀,但這些行是完全着色的。

我的第二引線(矢量)

我還發現,我可以用一個向量作爲我的列表視圖的背景。好處是我可以使用路徑繪製任何我想要的東西。

矢量文件的一個例子:

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp" 
    android:width="64dp" 
    android:viewportHeight="600" 
    android:viewportWidth="600" > 

    <path 
     android:name="w" 
     android:fillColor="#000000" 
     android:pathData="m 290,103 l-200,0 c -50,0 -50,-100 0,-100 l200,0 z" 
    /> 
</vector> 

我可以輕鬆地創建爲我行的彩色區域,另一個用於圖標的路徑。但是,現在的問題是我不知道如何將矢量的大小縮放到線的大小。

你知道什麼是最好的選擇,我如何獲得預期的結果?

在此先感謝。

回答

1

所有你需要單獨創建你看中的項目就像XML佈局包含自定義項的描述首先:

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

<TextView 
    android:id="@+id/optionName" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="10dp" 
    android:layout_marginStart="10dp" 
    android:layout_weight="10" 
    android:fontFamily="sans-serif-medium" 
    android:text="@string/option" 
    android:textAppearance="?android:attr/textAppearanceMedium" 
    android:textColor="@android:color/white" 
    android:textStyle="bold" /> 

<CheckBox 
    android:id="@+id/activated" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:gravity="center" /> 

不是創建您的適配器,這將使你的名單有你的佈局作爲項

公共類ListOptionsAdapter延伸BaseAdapter {

List<OptionsObject> Features = new ArrayList<OptionsObject>(); 
LayoutInflater inflater; 
Context context; 

public ListOptionsAdapter(List<OptionsObject> features, Context context) { 
    super(); 
    Features = features; 
    inflater = LayoutInflater.from(context); 
    this.context = context; 
} 

@Override 
public int getCount() { 
    return Features.size(); 
} 

@Override 
public OptionsObject getItem(int position) { 
    return Features.get(position); 
} 

@Override 
public long getItemId(int position) { 
    return position; 
} 

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

    ViewHolder holder; 

    if (convertView == null) { 
     convertView = inflater.inflate(R.layout.item_list_view, parent, false); 
     holder = new ViewHolder(); 
     holder.optionName = (TextView) convertView.findViewById(R.id.optionName); 
     holder.isActivate = (CheckBox) convertView.findViewById(R.id.activated); 
     convertView.setTag(holder); 

    } else { 
     holder = (ViewHolder) convertView.getTag(); 
    } 

    return convertView; 
} 

static class ViewHolder { 
    TextView optionName; 
    CheckBox isActivate; 
} 

}

之後如上我所指定的佈局,我將如方法getView(項目使用的名稱)和每個元素影響到視圖支架

NB:在getView你必須爲元素指定的值,它們將被顯示或留空如果u不需要

之後,僅僅在我的活動課我打電話給我的ListView

和我的適配器

OptionList = (ListView) findViewById(R.id.optionList); 
adapter = new ListOptionsAdapter(Features, getApplicationContext(), this); 
OptionList.setAdapter(adapter);