2016-11-21 4 views
1

の外観をカスタマイズする:私は内の行リストビューを持っていると思いますどのようにリストビューの列

  • は角を丸めています。
  • は部分的に着色されています(各行の左側部分)。
  • には、別の色で塗りつぶされた色付き領域の形が含まれています。私は現在、2点のリードを持っていますが、私はそれらのいずれかで成功しませんでした

    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> 

しかし、私は行が部分的に色の持つ形状を使用する方法がわかりませんまたはアイコンを描画します。私は色で図形を埋めることができますが、行は完全に色付けされています。

私の第2のリード(ベクトル)

また、私は私のリストビューの背景としてベクトルを使用することができることを見出しました。利点は、私がパスを使って欲しいものを描くことができるということです。

ベクトルファイルの例:

<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

CardViewを使用することをお勧めします。丸い角を取得するのに役立ちます。 CardViewの中に上記の残りのものを得るためにRelativeLayoutを作成してください。

ここには良いチュートリアルがあります:https://guides.codepath.com/android/Using-the-CardView

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は{

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; 
} 
0 BaseAdapterを拡張しますその後

}

私は法getViewメソッド(にアイテムとして使用するレイアウトの名前を指定し、上記のように)、ビューホルダー

NBへのすべての要素に影響を与える:getViewメソッドであなたがする必要があります彼らが表示されることの要素の値を指定するか、uは

私は私のリストビューを呼び出すだけで私の活動のクラスでその後

と私のアダプタを必要といけない場合、空白のままにしておき

OptionList = (ListView) findViewById(R.id.optionList); 
adapter = new ListOptionsAdapter(Features, getApplicationContext(), this); 
OptionList.setAdapter(adapter); 
関連する問題