ListView ala GMail row marker

I am interested in creating a ListView where each row is marked as it is done in GMail for version 3.0+. This creates a nice separation on the left and right of the ListFragment.

Other examples also include Google Calendar on 2.3.4, for example, where the color marker is to the left of the ListView.

GMail ListView

See the gray vertical separator between the two lists. How is something like this? The bonus will also be alternating widths, but I assume this is only a smaller layout change.

I know that I could do something like pasting an ImageView and then fill it with the color I need, but it seems to me that this is an ugly hack.

Another question would also be if there was a generalized way to combine both fragments of ListView as GMail or Mail do.

GMail ListView across two fragments

+3
3

, , , - View (, extend RelativeLayout) . dispatchDraw(Canvas canvas).

dispatchDraw , , - super.dispatchDraw.

, -

private boolean mDrawMarker = false;

public void setShouldDrawMarker(boolean drawMarker) {
    mDrawMarker = drawMarker;
}
public boolean getShouldDrawMarker() {
    return mDrawMarker;
}

@Override
public void dispatchDraw(Canvas canvas) {
    // draw the children of our view 
    super.dispatchDraw(canvas);

    // draw our marker on top of the children if needed
    if (mDrawMarker) {
        // e.g. canvas.drawRect(...) or canvas.drawBitmap(...)
    }
}

, - , , - . Paint Rect, , . , , Bitmap , ( , , static).

, , ( ):

  • ( , )
  • LinearLayout ( )
  • ( )
  • @commonsware - - /, /

, @commonsware.

+1

, , . , ( )?

:

1 - StateListDrawable :

, "background" StateListDrawable ( XML). .

"drawable" StateListDrawable 9- PNG, , , ... PNG, content-area/bottom, PNG, , .

, , 9 : http://radleymarx.com/blog/simple-guide-to-9-patch/

ListViews , "listSelector" ( , ), "duplicateParentState", ( ). , , -. .

2 - :

, .., , margin (, , )... , LayoutParams . , , LayoutParam MarginLayoutParam ( ), . marginLeft ListView. AbsListView.LayoutParams, . , View (), LayoutParams *. , -, - , .

, ImageView . , ... , , ListRow onDraw(), , canvas.draw_xyz(), , .. , . , < View layout_height = "match_parent" layout_width = "4dip" background = "# ffff0000" / > .

* Android: - , , ListView. , : RelativeLayout, drawableTop ( ..), 9--, .

, , , , , , .

+1

- ?

View , , , , .

, , .

, " ". , Views LinearLayout, .

, - ImageView, , , , .

, ImageView , . , . , , , .

, ListView , GMail Mail.

RelativeLayout, .

0

All Articles